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

feat(theme,interfaces): Introduce a global theming system and unify menu/tab interfaces; migrate components to use themeDefaultStyles and update APIs accordingly

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-29 01:20:24 +00:00
parent 9175799ec6
commit e38d3cd42a
78 changed files with 1413 additions and 616 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.demo.ts Normal file
View File

@@ -0,0 +1,45 @@
import { html, cssManager } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import type { DeesAppuiActivitylog } from './dees-appui-activitylog.js';
export const demoFunc = () => {
// Create the activity log element
const activityLog = document.createElement('dees-appui-activitylog') as DeesAppuiActivitylog;
// Add demo entries after the element is connected
setTimeout(() => {
activityLog.addMany([
{ type: 'login', user: 'John Doe', message: 'logged in from Chrome on macOS' },
{ type: 'create', user: 'John Doe', message: 'created a new project "Frontend App"' },
{ type: 'update', user: 'Jane Smith', message: 'updated API documentation' },
{ type: 'view', user: 'John Doe', message: 'viewed dashboard analytics' },
{ type: 'delete', user: 'Admin', message: 'removed deprecated endpoint' },
{ type: 'custom', user: 'System', message: 'scheduled backup completed', iconName: 'lucide:database' },
{ type: 'logout', user: 'Alice Brown', message: 'logged out' },
{ type: 'create', user: 'Jane Smith', message: 'created invoice #1234' },
]);
// Subscribe to updates
activityLog.entries$.subscribe((entries) => {
console.log('Activity log updated:', entries.length, 'entries');
});
}, 100);
return html`
<dees-demowrapper>
<style>
.demo-container {
display: flex;
justify-content: center;
align-items: center;
height: 600px;
background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
padding: 32px;
}
</style>
<div class="demo-container">
${activityLog}
</div>
</dees-demowrapper>
`;
};

47
ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.ts
View File

@@ -12,53 +12,14 @@ import {
import * as domtools from '@design.estate/dees-domtools';
import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
import '../../dees-icon/dees-icon.js';
import '@design.estate/dees-wcctools/demotools';
import type { IActivityEntry, IActivityLogAPI } from '../../interfaces/appconfig.js';
import { demoFunc } from './dees-appui-activitylog.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
@customElement('dees-appui-activitylog')
export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI {
// STATIC
public static demo = () => {
// Create the activity log element
const activityLog = document.createElement('dees-appui-activitylog') as DeesAppuiActivitylog;
// Add demo entries after the element is connected
setTimeout(() => {
activityLog.addMany([
{ type: 'login', user: 'John Doe', message: 'logged in from Chrome on macOS' },
{ type: 'create', user: 'John Doe', message: 'created a new project "Frontend App"' },
{ type: 'update', user: 'Jane Smith', message: 'updated API documentation' },
{ type: 'view', user: 'John Doe', message: 'viewed dashboard analytics' },
{ type: 'delete', user: 'Admin', message: 'removed deprecated endpoint' },
{ type: 'custom', user: 'System', message: 'scheduled backup completed', iconName: 'lucide:database' },
{ type: 'logout', user: 'Alice Brown', message: 'logged out' },
{ type: 'create', user: 'Jane Smith', message: 'created invoice #1234' },
]);
// Subscribe to updates
activityLog.entries$.subscribe((entries) => {
console.log('Activity log updated:', entries.length, 'entries');
});
}, 100);
return html`
<dees-demowrapper>
<style>
.demo-container {
display: flex;
justify-content: center;
align-items: center;
height: 600px;
background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
padding: 32px;
}
</style>
<div class="demo-container">
${activityLog}
</div>
</dees-demowrapper>
`;
};
public static demo = demoFunc;
// INSTANCE PROPERTIES
@state()
@@ -75,8 +36,10 @@ export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI
// STYLES
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
position: relative;

53
ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts
View File

@@ -16,6 +16,7 @@ import type { DeesAppuiSecondarymenu } from '../dees-appui-secondarymenu/dees-ap
import type { DeesAppuiMaincontent } from '../dees-appui-maincontent/dees-appui-maincontent.js';
import type { DeesAppuiActivitylog } from '../dees-appui-activitylog/dees-appui-activitylog.js';
import { demoFunc } from './dees-appui-base.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
// View registry for managing views
import { ViewRegistry } from './view.registry.js';
@@ -84,23 +85,23 @@ export class DeesAppuiBase extends DeesElement {
accessor mainmenuGroups: interfaces.IMenuGroup[] = [];
@property({ type: Array })
accessor mainmenuBottomTabs: interfaces.ITab[] = [];
accessor mainmenuBottomTabs: interfaces.IMenuItem[] = [];
@property({ type: Array })
accessor mainmenuTabs: interfaces.ITab[] = [];
accessor mainmenuTabs: interfaces.IMenuItem[] = [];
@property({ type: Object })
accessor mainmenuSelectedTab: interfaces.ITab | undefined = undefined;
accessor mainmenuSelectedTab: interfaces.IMenuItem | undefined = undefined;
// Properties for secondarymenu
@property({ type: String })
accessor secondarymenuHeading: string = '';
@property({ type: Array })
accessor secondarymenuGroups: interfaces.ISecondaryMenuGroup[] = [];
accessor secondarymenuGroups: interfaces.IMenuGroup[] = [];
@property({ type: Object })
accessor secondarymenuSelectedItem: interfaces.ISecondaryMenuItem | undefined = undefined;
accessor secondarymenuSelectedItem: interfaces.IMenuItem | undefined = undefined;
// Collapse states
@property({ type: Boolean })
@@ -111,10 +112,10 @@ export class DeesAppuiBase extends DeesElement {
// Properties for maincontent
@property({ type: Array })
accessor maincontentTabs: interfaces.ITab[] = [];
accessor maincontentTabs: interfaces.IMenuItem[] = [];
@property({ type: Object })
accessor maincontentSelectedTab: interfaces.ITab | undefined = undefined;
accessor maincontentSelectedTab: interfaces.IMenuItem | undefined = undefined;
// References to child components
@state()
@@ -142,8 +143,10 @@ export class DeesAppuiBase extends DeesElement {
private searchCallback: ((query: string) => void) | null = null;
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
position: absolute;
height: 100%;
@@ -370,12 +373,12 @@ export class DeesAppuiBase extends DeesElement {
/**
* Add a menu item to a specific group
*/
public addMainMenuItem(groupName: string, tab: interfaces.ITab): void {
public addMainMenuItem(groupName: string, tab: interfaces.IMenuItem): void {
this.mainmenuGroups = this.mainmenuGroups.map(group => {
if (group.name === groupName) {
return {
...group,
tabs: [...(group.tabs || []), tab],
items: [...(group.items || []), tab],
};
}
return group;
@@ -390,7 +393,7 @@ export class DeesAppuiBase extends DeesElement {
if (group.name === groupName) {
return {
...group,
tabs: (group.tabs || []).filter(t => t.key !== tabKey),
items: (group.items || []).filter(t => t.key !== tabKey),
};
}
return group;
@@ -402,7 +405,7 @@ export class DeesAppuiBase extends DeesElement {
*/
public setMainMenuSelection(tabKey: string): void {
for (const group of this.mainmenuGroups) {
const tab = group.tabs?.find(t => t.key === tabKey);
const tab = group.items?.find(t => t.key === tabKey);
if (tab) {
this.mainmenuSelectedTab = tab;
return;
@@ -428,7 +431,7 @@ export class DeesAppuiBase extends DeesElement {
public setMainMenuBadge(tabKey: string, badge: string | number): void {
this.mainmenuGroups = this.mainmenuGroups.map(group => ({
...group,
tabs: (group.tabs || []).map(tab =>
items: (group.items || []).map(tab =>
tab.key === tabKey ? { ...tab, badge } : tab
),
}));
@@ -444,7 +447,7 @@ export class DeesAppuiBase extends DeesElement {
public clearMainMenuBadge(tabKey: string): void {
this.mainmenuGroups = this.mainmenuGroups.map(group => ({
...group,
tabs: (group.tabs || []).map(tab => {
items: (group.items || []).map(tab => {
if (tab.key === tabKey) {
const { badge, ...rest } = tab;
return rest;
@@ -469,7 +472,7 @@ export class DeesAppuiBase extends DeesElement {
/**
* Set the secondary menu configuration
*/
public setSecondaryMenu(config: { heading?: string; groups: interfaces.ISecondaryMenuGroup[] }): void {
public setSecondaryMenu(config: { heading?: string; groups: interfaces.IMenuGroup[] }): void {
if (config.heading !== undefined) {
this.secondarymenuHeading = config.heading;
}
@@ -479,7 +482,7 @@ export class DeesAppuiBase extends DeesElement {
/**
* Update a specific secondary menu group
*/
public updateSecondaryMenuGroup(groupName: string, update: Partial<interfaces.ISecondaryMenuGroup>): void {
public updateSecondaryMenuGroup(groupName: string, update: Partial<interfaces.IMenuGroup>): void {
this.secondarymenuGroups = this.secondarymenuGroups.map(group =>
group.name === groupName ? { ...group, ...update } : group
);
@@ -490,7 +493,7 @@ export class DeesAppuiBase extends DeesElement {
*/
public addSecondaryMenuItem(
groupName: string,
item: interfaces.ISecondaryMenuGroup['items'][0]
item: interfaces.IMenuGroup['items'][0]
): void {
this.secondarymenuGroups = this.secondarymenuGroups.map(group => {
if (group.name === groupName) {
@@ -532,7 +535,7 @@ export class DeesAppuiBase extends DeesElement {
/**
* Set the content tabs
*/
public setContentTabs(tabs: interfaces.ITab[]): void {
public setContentTabs(tabs: interfaces.IMenuItem[]): void {
this.maincontentTabs = [...tabs];
if (tabs.length > 0 && !this.maincontentSelectedTab) {
this.maincontentSelectedTab = tabs[0];
@@ -542,7 +545,7 @@ export class DeesAppuiBase extends DeesElement {
/**
* Add a content tab
*/
public addContentTab(tab: interfaces.ITab): void {
public addContentTab(tab: interfaces.IMenuItem): void {
this.maincontentTabs = [...this.maincontentTabs, tab];
}
@@ -569,7 +572,7 @@ export class DeesAppuiBase extends DeesElement {
/**
* Get the currently selected content tab
*/
public getSelectedContentTab(): interfaces.ITab | undefined {
public getSelectedContentTab(): interfaces.IMenuItem | undefined {
return this.maincontentSelectedTab;
}
@@ -779,7 +782,7 @@ export class DeesAppuiBase extends DeesElement {
return config.mainMenu.sections.map((section) => ({
name: section.name,
tabs: section.views
items: section.views
.map((viewId) => {
const view = this.viewRegistry.get(viewId);
if (!view) {
@@ -791,13 +794,13 @@ export class DeesAppuiBase extends DeesElement {
iconName: view.iconName,
action: () => this.navigateToView(viewId),
badge: view.badge,
} as interfaces.ITab;
} as interfaces.IMenuItem;
})
.filter(Boolean) as interfaces.ITab[],
.filter(Boolean) as interfaces.IMenuItem[],
}));
}
private buildBottomTabsFromItems(items: string[]): interfaces.ITab[] {
private buildBottomTabsFromItems(items: string[]): interfaces.IMenuItem[] {
return items
.map((viewId) => {
const view = this.viewRegistry.get(viewId);
@@ -809,9 +812,9 @@ export class DeesAppuiBase extends DeesElement {
key: view.id,
iconName: view.iconName,
action: () => this.navigateToView(viewId),
} as interfaces.ITab;
} as interfaces.IMenuItem;
})
.filter(Boolean) as interfaces.ITab[];
.filter(Boolean) as interfaces.IMenuItem[];
}
private async loadView(

7
ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts
View File

@@ -13,6 +13,7 @@ import {
import * as domtools from '@design.estate/dees-domtools';
import '../dees-appui-tabs/dees-appui-tabs.js';
import type { DeesAppuiTabs } from '../dees-appui-tabs/dees-appui-tabs.js';
import { themeDefaultStyles } from '../../00theme.js';
@customElement('dees-appui-maincontent')
export class DeesAppuiMaincontent extends DeesElement {
@@ -35,16 +36,18 @@ export class DeesAppuiMaincontent extends DeesElement {
@property({
type: Array,
})
accessor tabs: interfaces.ITab[] = [
accessor tabs: interfaces.IMenuItem[] = [
{ key: '⚠️ Please set tabs', action: () => console.warn('No tabs configured for maincontent') },
];
@property({ type: Object })
accessor selectedTab: interfaces.ITab | null = null;
accessor selectedTab: interfaces.IMenuItem | null = null;
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
color: ${cssManager.bdTheme('#333', '#fff')};
display: block;

19
ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts
View File

@@ -13,6 +13,7 @@ import {
} from '@design.estate/dees-element';
import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
import { demoFunc } from './dees-appui-mainmenu.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
/**
* the most left menu
@@ -37,21 +38,23 @@ export class DeesAppuiMainmenu extends DeesElement {
// Bottom tabs (pinned to bottom)
@property({ type: Array })
accessor bottomTabs: interfaces.ITab[] = [];
accessor bottomTabs: interfaces.IMenuItem[] = [];
// Legacy tabs property (for backward compatibility)
@property({ type: Array })
accessor tabs: interfaces.ITab[] = [];
accessor tabs: interfaces.IMenuItem[] = [];
@property()
accessor selectedTab: interfaces.ITab;
accessor selectedTab: interfaces.IMenuItem;
@property({ type: Boolean, reflect: true })
accessor collapsed: boolean = false;
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
--menu-width-expanded: 200px;
--menu-width-collapsed: 56px;
@@ -390,7 +393,7 @@ export class DeesAppuiMainmenu extends DeesElement {
<div class="menuGroup">
${group.name ? html`<div class="groupHeader">${group.name}</div>` : ''}
<div class="groupTabs">
${group.tabs.map((tabArg) => this.renderTab(tabArg))}
${group.items.map((tabArg) => this.renderTab(tabArg))}
</div>
</div>
`)}
@@ -407,7 +410,7 @@ export class DeesAppuiMainmenu extends DeesElement {
`;
}
private renderTab(tabArg: interfaces.ITab): TemplateResult {
private renderTab(tabArg: interfaces.IMenuItem): TemplateResult {
return html`
<div
class="tab ${tabArg === this.selectedTab ? 'selectedTab' : ''}"
@@ -422,15 +425,15 @@ export class DeesAppuiMainmenu extends DeesElement {
`;
}
private getAllTabs(): interfaces.ITab[] {
private getAllTabs(): interfaces.IMenuItem[] {
if (this.menuGroups.length > 0) {
const groupTabs = this.menuGroups.flatMap(group => group.tabs);
const groupTabs = this.menuGroups.flatMap(group => group.items);
return [...groupTabs, ...this.bottomTabs];
}
return [...this.tabs, ...this.bottomTabs];
}
updateTab(tabArg: interfaces.ITab) {
updateTab(tabArg: interfaces.IMenuItem) {
this.selectedTab = tabArg;
this.selectedTab.action();

3
ts_web/elements/00group-appui/dees-appui-profiledropdown/dees-appui-profiledropdown.ts
View File

@@ -11,6 +11,7 @@ import {
cssManager,
state,
} from '@design.estate/dees-element';
import { themeDefaultStyles } from '../../00theme.js';
@customElement('dees-appui-profiledropdown')
export class DeesAppuiProfileDropdown extends DeesElement {
@@ -53,8 +54,10 @@ export class DeesAppuiProfileDropdown extends DeesElement {
accessor position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: block;
position: absolute;

2
ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.demo.ts
View File

@@ -44,7 +44,7 @@ export const demoFunc = () => html`
{ key: 'Integrations', iconName: 'plug', action: () => console.log('Integrations'), badge: 5, badgeVariant: 'error' },
]
}
] as interfaces.ISecondaryMenuGroup[]}
] as interfaces.IMenuGroup[]}
@item-select=${(e: CustomEvent) => console.log('Selected:', e.detail)}
></dees-appui-secondarymenu>
<div class="spacer"></div>

19
ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts
View File

@@ -15,6 +15,7 @@ import {
cssManager,
} from '@design.estate/dees-element';
import { demoFunc } from './dees-appui-secondarymenu.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
/**
* Secondary navigation menu for sub-navigation within MainMenu views
@@ -32,15 +33,15 @@ export class DeesAppuiSecondarymenu extends DeesElement {
/** Grouped items with collapse support */
@property({ type: Array })
accessor groups: interfaces.ISecondaryMenuGroup[] = [];
accessor groups: interfaces.IMenuGroup[] = [];
/** Legacy flat list support for backward compatibility */
@property({ type: Array })
accessor selectionOptions: (interfaces.ISelectionOption | { divider: true })[] = [];
accessor selectionOptions: (interfaces.IMenuItem | { divider: true })[] = [];
/** Currently selected item */
@property({ type: Object })
accessor selectedItem: interfaces.ISecondaryMenuItem | null = null;
accessor selectedItem: interfaces.IMenuItem | null = null;
/** Internal state for collapsed groups */
@state()
@@ -51,8 +52,10 @@ export class DeesAppuiSecondarymenu extends DeesElement {
accessor collapsed: boolean = false;
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
--sidebar-width-expanded: 240px;
--sidebar-width-collapsed: 56px;
@@ -482,7 +485,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
`;
}
private renderMenuItem(item: interfaces.ISecondaryMenuItem, group?: interfaces.ISecondaryMenuGroup): TemplateResult {
private renderMenuItem(item: interfaces.IMenuItem, group?: interfaces.IMenuGroup): TemplateResult {
const isSelected = this.selectedItem?.key === item.key;
return html`
<div
@@ -507,7 +510,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
if ('divider' in option && option.divider) {
return html`<div class="divider"></div>`;
}
const item = option as interfaces.ISelectionOption;
const item = option as interfaces.IMenuItem;
return this.renderMenuItem({
key: item.key,
iconName: item.iconName,
@@ -537,7 +540,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
}));
}
private selectItem(item: interfaces.ISecondaryMenuItem, group?: interfaces.ISecondaryMenuGroup): void {
private selectItem(item: interfaces.IMenuItem, group?: interfaces.IMenuGroup): void {
this.selectedItem = item;
item.action();
@@ -548,7 +551,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
}));
}
private handleContextMenu(event: MouseEvent, item: interfaces.ISecondaryMenuItem): void {
private handleContextMenu(event: MouseEvent, item: interfaces.IMenuItem): void {
DeesContextmenu.openContextMenuWithOptions(event, [
{
name: 'View details',
@@ -582,7 +585,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
}
} else if (this.selectionOptions.length > 0) {
// Legacy mode: select first non-divider option
const firstOption = this.selectionOptions.find(opt => !('divider' in opt)) as interfaces.ISelectionOption;
const firstOption = this.selectionOptions.find(opt => !('divider' in opt)) as interfaces.IMenuItem;
if (firstOption && !this.selectedItem) {
this.selectItem({
key: firstOption.key,

91
ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.demo.ts Normal file
View File

@@ -0,0 +1,91 @@
import { html, cssManager } from '@design.estate/dees-element';
import * as interfaces from '../../interfaces/index.js';
export const demoFunc = () => {
const horizontalTabs: interfaces.IMenuItem[] = [
{ key: 'Home', iconName: 'lucide:home', action: () => console.log('Home clicked') },
{ key: 'Analytics Dashboard', iconName: 'lucide:lineChart', action: () => console.log('Analytics clicked') },
{ key: 'Reports', iconName: 'lucide:fileText', action: () => console.log('Reports clicked') },
{ key: 'User Settings', iconName: 'lucide:settings', action: () => console.log('Settings clicked') },
{ key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help clicked') },
];
const verticalTabs: interfaces.IMenuItem[] = [
{ key: 'Profile', iconName: 'lucide:user', action: () => console.log('Profile clicked') },
{ key: 'Security', iconName: 'lucide:shield', action: () => console.log('Security clicked') },
{ key: 'Notifications', iconName: 'lucide:bell', action: () => console.log('Notifications clicked') },
{ key: 'Integrations', iconName: 'lucide:link', action: () => console.log('Integrations clicked') },
{ key: 'Advanced', iconName: 'lucide:code', action: () => console.log('Advanced clicked') },
];
const noIndicatorTabs: interfaces.IMenuItem[] = [
{ key: 'All', action: () => console.log('All clicked') },
{ key: 'Active', action: () => console.log('Active clicked') },
{ key: 'Completed', action: () => console.log('Completed clicked') },
{ key: 'Archived', action: () => console.log('Archived clicked') },
];
const demoContent = (text: string) => html`
<div style="padding: 24px; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};">
${text}
</div>
`;
return html`
<style>
.demo-container {
display: flex;
flex-direction: column;
gap: 32px;
padding: 48px;
background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
min-height: 100vh;
}
.section {
background: ${cssManager.bdTheme('#ffffff', '#18181b')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: 8px;
padding: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.section-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
}
.two-column {
display: grid;
grid-template-columns: 200px 1fr;
gap: 24px;
align-items: start;
}
</style>
<div class="demo-container">
<div class="section">
<div class="section-title">Horizontal Tabs with Animated Indicator</div>
<dees-appui-tabs .tabs=${horizontalTabs}>
${demoContent('Select a tab to see the smooth sliding animation of the indicator. The indicator automatically adjusts its width to match the tab content with minimal padding.')}
</dees-appui-tabs>
</div>
<div class="section">
<div class="section-title">Vertical Tabs Layout</div>
<div class="two-column">
<dees-appui-tabs .tabStyle=${'vertical'} .tabs=${verticalTabs}></dees-appui-tabs>
${demoContent('Vertical tabs work great for settings pages and navigation menus. The animated indicator smoothly transitions between selections.')}
</div>
</div>
<div class="section">
<div class="section-title">Without Indicator</div>
<dees-appui-tabs .showTabIndicator=${false} .tabs=${noIndicatorTabs}>
${demoContent('Tabs can also be used without the animated indicator by setting showTabIndicator to false.')}
</dees-appui-tabs>
</div>
</div>
`;
};

103
ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts
View File

@@ -11,106 +11,21 @@ import {
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './dees-appui-tabs.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
@customElement('dees-appui-tabs')
export class DeesAppuiTabs extends DeesElement {
public static demo = () => {
const horizontalTabs: interfaces.ITab[] = [
{ key: 'Home', iconName: 'lucide:home', action: () => console.log('Home clicked') },
{ key: 'Analytics Dashboard', iconName: 'lucide:lineChart', action: () => console.log('Analytics clicked') },
{ key: 'Reports', iconName: 'lucide:fileText', action: () => console.log('Reports clicked') },
{ key: 'User Settings', iconName: 'lucide:settings', action: () => console.log('Settings clicked') },
{ key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help clicked') },
];
const verticalTabs: interfaces.ITab[] = [
{ key: 'Profile', iconName: 'lucide:user', action: () => console.log('Profile clicked') },
{ key: 'Security', iconName: 'lucide:shield', action: () => console.log('Security clicked') },
{ key: 'Notifications', iconName: 'lucide:bell', action: () => console.log('Notifications clicked') },
{ key: 'Integrations', iconName: 'lucide:link', action: () => console.log('Integrations clicked') },
{ key: 'Advanced', iconName: 'lucide:code', action: () => console.log('Advanced clicked') },
];
const noIndicatorTabs: interfaces.ITab[] = [
{ key: 'All', action: () => console.log('All clicked') },
{ key: 'Active', action: () => console.log('Active clicked') },
{ key: 'Completed', action: () => console.log('Completed clicked') },
{ key: 'Archived', action: () => console.log('Archived clicked') },
];
const demoContent = (text: string) => html`
<div style="padding: 24px; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};">
${text}
</div>
`;
return html`
<style>
.demo-container {
display: flex;
flex-direction: column;
gap: 32px;
padding: 48px;
background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
min-height: 100vh;
}
.section {
background: ${cssManager.bdTheme('#ffffff', '#18181b')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: 8px;
padding: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.section-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
}
.two-column {
display: grid;
grid-template-columns: 200px 1fr;
gap: 24px;
align-items: start;
}
</style>
<div class="demo-container">
<div class="section">
<div class="section-title">Horizontal Tabs with Animated Indicator</div>
<dees-appui-tabs .tabs=${horizontalTabs}>
${demoContent('Select a tab to see the smooth sliding animation of the indicator. The indicator automatically adjusts its width to match the tab content with minimal padding.')}
</dees-appui-tabs>
</div>
<div class="section">
<div class="section-title">Vertical Tabs Layout</div>
<div class="two-column">
<dees-appui-tabs .tabStyle=${'vertical'} .tabs=${verticalTabs}></dees-appui-tabs>
${demoContent('Vertical tabs work great for settings pages and navigation menus. The animated indicator smoothly transitions between selections.')}
</div>
</div>
<div class="section">
<div class="section-title">Without Indicator</div>
<dees-appui-tabs .showTabIndicator=${false} .tabs=${noIndicatorTabs}>
${demoContent('Tabs can also be used without the animated indicator by setting showTabIndicator to false.')}
</dees-appui-tabs>
</div>
</div>
`;
};
public static demo = demoFunc;
// INSTANCE
@property({
type: Array,
})
accessor tabs: interfaces.ITab[] = [];
accessor tabs: interfaces.IMenuItem[] = [];
@property({ type: Object })
accessor selectedTab: interfaces.ITab | null = null;
accessor selectedTab: interfaces.IMenuItem | null = null;
@property({ type: Boolean })
accessor showTabIndicator: boolean = true;
@@ -119,8 +34,10 @@ export class DeesAppuiTabs extends DeesElement {
accessor tabStyle: 'horizontal' | 'vertical' = 'horizontal';
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: block;
position: relative;
@@ -312,7 +229,7 @@ export class DeesAppuiTabs extends DeesElement {
`;
}
private renderTab(tab: interfaces.ITab, isHorizontal: boolean): TemplateResult {
private renderTab(tab: interfaces.IMenuItem, isHorizontal: boolean): TemplateResult {
const isSelected = tab === this.selectedTab;
const classes = `tab ${isSelected ? 'selectedTab' : ''}`;
@@ -336,11 +253,11 @@ export class DeesAppuiTabs extends DeesElement {
`;
}
private renderTabIcon(tab: interfaces.ITab): TemplateResult | '' {
private renderTabIcon(tab: interfaces.IMenuItem): TemplateResult | '' {
return tab.iconName ? html`<dees-icon .icon=${tab.iconName}></dees-icon>` : '';
}
private selectTab(tabArg: interfaces.ITab) {
private selectTab(tabArg: interfaces.IMenuItem) {
this.selectedTab = tabArg;
tabArg.action();

30
ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.demo.ts Normal file
View File

@@ -0,0 +1,30 @@
import { html } from '@design.estate/dees-element';
export const demoFunc = () => html`
<dees-appui-view
.viewConfig=${{
id: 'demo-view',
name: 'Demo View',
description: 'A demonstration view',
iconName: 'lucide:home',
tabs: [
{
key: 'overview',
iconName: 'lucide:lineChart',
action: () => console.log('Overview tab'),
content: html`<div style="padding: 20px;">Overview Content</div>`
},
{
key: 'details',
iconName: 'lucide:fileText',
action: () => console.log('Details tab'),
content: html`<div style="padding: 20px;">Details Content</div>`
}
],
menuItems: [
{ key: 'General', action: () => console.log('General') },
{ key: 'Advanced', action: () => console.log('Advanced') },
]
}}
></dees-appui-view>
`;

60
ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.ts
View File

@@ -13,9 +13,14 @@ import {
import '../dees-appui-tabs/dees-appui-tabs.js';
import type { DeesAppuiTabs } from '../dees-appui-tabs/dees-appui-tabs.js';
import { demoFunc } from './dees-appui-view.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
export interface IAppViewTab extends interfaces.ITab {
export interface IViewTab extends interfaces.IMenuItem {
content?: TemplateResult | (() => TemplateResult);
useSlotName?: boolean;
slotName?: string;
paddingPx?: number;
}
export interface IAppView {
@@ -23,54 +28,32 @@ export interface IAppView {
name: string;
description?: string;
iconName?: string;
tabs: IAppViewTab[];
menuItems?: interfaces.ISelectionOption[];
tabs: IViewTab[];
menuItems?: interfaces.IMenuItem[];
}
@customElement('dees-appui-view')
export class DeesAppuiView extends DeesElement {
public static demo = () => html`
<dees-appui-view
.viewConfig=${{
id: 'demo-view',
name: 'Demo View',
description: 'A demonstration view',
iconName: 'lucide:home',
tabs: [
{
key: 'overview',
iconName: 'lucide:lineChart',
action: () => console.log('Overview tab'),
content: html`<div style="padding: 20px;">Overview Content</div>`
},
{
key: 'details',
iconName: 'lucide:fileText',
action: () => console.log('Details tab'),
content: html`<div style="padding: 20px;">Details Content</div>`
}
],
menuItems: [
{ key: 'General', action: () => console.log('General') },
{ key: 'Advanced', action: () => console.log('Advanced') },
]
}}
></dees-appui-view>
`;
public static demo = demoFunc;
// INSTANCE
@property({ type: Object })
accessor viewConfig: IAppView;
@state()
accessor selectedTab: IAppViewTab | null = null;
accessor selectedTab: IViewTab | null = null;
@state()
accessor tabs: DeesAppuiTabs;
@property({ type: Number })
accessor paddingPx: number = 16;
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: block;
position: relative;
@@ -138,9 +121,14 @@ export class DeesAppuiView extends DeesElement {
${this.viewConfig.tabs.map((tab) => {
const isActive = tab === this.selectedTab;
const content = typeof tab.content === 'function' ? tab.content() : tab.content;
const padding = tab.paddingPx ?? this.paddingPx;
return html`
<div class="tab-content ${isActive ? 'active' : ''}">
${content || html`<slot name="${tab.key}"></slot>`}
<div class="tab-content ${isActive ? 'active' : ''}" style="padding: ${padding}px;">
${content
? content
: tab.useSlotName
? html`<slot name="${tab.slotName || tab.key}"></slot>`
: ''}
</div>
`;
})}
@@ -182,11 +170,11 @@ export class DeesAppuiView extends DeesElement {
}
}
public getMenuItems(): interfaces.ISelectionOption[] {
public getMenuItems(): interfaces.IMenuItem[] {
return this.viewConfig?.menuItems || [];
}
public getTabs(): IAppViewTab[] {
public getTabs(): IViewTab[] {
return this.viewConfig?.tabs || [];
}
}

3
ts_web/elements/00group-button/dees-button-group/dees-button-group.ts
View File

@@ -10,6 +10,7 @@ import {
import * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './dees-button-group.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -33,8 +34,10 @@ export class DeesButtonGroup extends DeesElement {
}
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: inline-block;
}

3
ts_web/elements/00group-button/dees-button/dees-button.ts
View File

@@ -12,6 +12,7 @@ import {
import * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './dees-button.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -79,8 +80,10 @@ export class DeesButton extends DeesElement {
}
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: inline-block;
box-sizing: border-box;

3
ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts
View File

@@ -10,6 +10,7 @@ import {
import * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './dees-chart-log.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
@@ -50,8 +51,10 @@ export class DeesChartLog extends DeesElement {
}
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};

3
ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts
View File

@@ -16,6 +16,7 @@ import {
import * as tsclass from '@tsclass/tsclass';
import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -30,8 +31,10 @@ export class DeesDataviewStatusobject extends DeesElement {
@property({ type: Object }) accessor statusObject: tsclass.code.IStatusObject;
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

3
ts_web/elements/00group-editor/dees-editor-markdown/dees-editor-markdown.ts
View File

@@ -8,6 +8,7 @@ import {
cssManager,
domtools
} from '@design.estate/dees-element';
import { themeDefaultStyles } from '../../00theme.js';
const deferred = domtools.plugins.smartpromise.defer();
@@ -22,8 +23,10 @@ export class DeesEditorMarkdown extends DeesElement {
public static demo = () => html`<dees-editormarkdown></dees-editormarkdown>`;
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
.gridcontainer {
position: absolute;
height: 100%;

3
ts_web/elements/00group-editor/dees-editor/dees-editor.ts
View File

@@ -9,6 +9,7 @@ import {
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import { MONACO_VERSION } from './version.js';
import { themeDefaultStyles } from '../../00theme.js';
import type * as monaco from 'monaco-editor';
@@ -51,8 +52,10 @@ export class DeesEditor extends DeesElement {
}
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
}

5
ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts
View File

@@ -8,6 +8,7 @@ import {
property,
} from '@design.estate/dees-element';
import type { DeesForm } from '../dees-form/dees-form.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -39,7 +40,9 @@ export class DeesFormSubmit extends DeesElement {
super();
}
public static styles = [cssManager.defaultStyles, css``];
public static styles = [themeDefaultStyles, cssManager.defaultStyles, css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
`];
public render() {
return html`

3
ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts
View File

@@ -9,6 +9,7 @@ import {
import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
import { demoFunc } from './dees-input-checkbox.demo.js';
import { cssGeistFontFamily } from '../../00fonts.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -38,9 +39,11 @@ export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
}
public static styles = [
themeDefaultStyles,
...DeesInputBase.baseStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
* {
box-sizing: border-box;
}

3
ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts
View File

@@ -11,6 +11,7 @@ import * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './dees-input-dropdown.demo.js';
import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
import { cssGeistFontFamily } from '../../00fonts.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -60,9 +61,11 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
accessor searchValue: string = '';
public static styles = [
themeDefaultStyles,
...DeesInputBase.baseStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
* {
box-sizing: border-box;
}

3
ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts
View File

@@ -11,6 +11,7 @@ import * as domtools from '@design.estate/dees-domtools';
import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
import * as ibantools from 'ibantools';
import { demoFunc } from './dees-input-iban.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
@customElement('dees-input-iban')
export class DeesInputIban extends DeesInputBase<DeesInputIban> {
@@ -30,9 +31,11 @@ export class DeesInputIban extends DeesInputBase<DeesInputIban> {
accessor value = '';
public static styles = [
themeDefaultStyles,
...DeesInputBase.baseStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
/* IBAN input specific styles can go here */
`,
];

3
ts_web/elements/00group-input/dees-input-list/dees-input-list.ts
View File

@@ -11,6 +11,7 @@ import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
import '../../dees-icon/dees-icon.js';
import '../../00group-button/dees-button/dees-button.js';
import { demoFunc } from './dees-input-list.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -64,9 +65,11 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
accessor dragOverIndex: number = -1;
public static styles = [
themeDefaultStyles,
...DeesInputBase.baseStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: block;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;

3
ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts
View File

@@ -11,6 +11,7 @@ import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
import * as colors from '../../00colors.js'
import { demoFunc } from './dees-input-multitoggle.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -67,9 +68,11 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
}
public static styles = [
themeDefaultStyles,
...DeesInputBase.baseStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
user-select: none;

3
ts_web/elements/00group-input/dees-input-phone/dees-input-phone.ts
View File

@@ -10,6 +10,7 @@ import {
import * as domtools from '@design.estate/dees-domtools';
import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
import { demoFunc } from './dees-input-phone.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -33,9 +34,11 @@ export class DeesInputPhone extends DeesInputBase<DeesInputPhone> {
accessor placeholder: string = '+1 (555) 123-4567';
public static styles = [
themeDefaultStyles,
...DeesInputBase.baseStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
/* Phone input specific styles can go here */
`,
];

5
ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.ts
View File

@@ -2,6 +2,7 @@ import { customElement, property, html, type TemplateResult, css, cssManager } f
import * as domtools from '@design.estate/dees-domtools';
import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
import { demoFunc } from './dees-input-quantityselector.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -23,14 +24,16 @@ export class DeesInputQuantitySelector extends DeesInputBase<DeesInputQuantitySe
public static styles = [
themeDefaultStyles,
...DeesInputBase.baseStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
width: auto;
user-select: none;
}
.quantity-container {
transition: all 0.15s ease;
font-size: 14px;

3
ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.ts
View File

@@ -8,6 +8,7 @@ import {
} from '@design.estate/dees-element';
import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
import { demoFunc } from './dees-input-radiogroup.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -59,9 +60,11 @@ export class DeesInputRadiogroup extends DeesInputBase<string | object> {
}
public static styles = [
themeDefaultStyles,
...DeesInputBase.baseStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
* {
box-sizing: border-box;
}

3
ts_web/elements/00group-input/dees-input-tags/dees-input-tags.ts
View File

@@ -10,6 +10,7 @@ import {
import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
import '../../dees-icon/dees-icon.js';
import { demoFunc } from './dees-input-tags.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -48,9 +49,11 @@ export class DeesInputTags extends DeesInputBase<DeesInputTags> {
accessor validationText: string = '';
public static styles = [
themeDefaultStyles,
...DeesInputBase.baseStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: block;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;

3
ts_web/elements/00group-input/dees-input-text/dees-input-text.ts
View File

@@ -11,6 +11,7 @@ import {
cssManager,
css,
} from '@design.estate/dees-element';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -56,9 +57,11 @@ export class DeesInputText extends DeesInputBase {
accessor validationFunction: (value: string) => boolean;
public static styles = [
themeDefaultStyles,
...DeesInputBase.baseStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
* {
box-sizing: border-box;
}

3
ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.ts
View File

@@ -11,6 +11,7 @@ import * as domtools from '@design.estate/dees-domtools';
import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
import { demoFunc } from './dees-input-typelist.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
@customElement('dees-input-typelist')
export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
@@ -27,9 +28,11 @@ export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
public static styles = [
themeDefaultStyles,
...DeesInputBase.baseStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
color: ${cssManager.bdTheme('#333', '#fff')};
}

3
ts_web/elements/00group-input/dees-input-wysiwyg/dees-formatting-menu.ts
View File

@@ -10,6 +10,7 @@ import {
import { zIndexRegistry } from '../../00zindex.js';
import { WysiwygFormatting } from './wysiwyg.formatting.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -41,8 +42,10 @@ export class DeesFormattingMenu extends DeesElement {
private callback: ((command: string) => void | Promise<void>) | null = null;
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
position: fixed;
pointer-events: none;

2
ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts
View File

@@ -28,6 +28,7 @@ import {
DeesSlashMenu,
DeesFormattingMenu
} from './index.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -86,6 +87,7 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
private history: WysiwygHistory;
public static styles = [
themeDefaultStyles,
...DeesInputBase.baseStyles,
cssManager.defaultStyles,
wysiwygStyles

3
ts_web/elements/00group-input/dees-input-wysiwyg/dees-slash-menu.ts
View File

@@ -12,6 +12,7 @@ import '../../dees-icon/dees-icon.js';
import { type ISlashMenuItem } from './wysiwyg.types.js';
import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -49,8 +50,10 @@ export class DeesSlashMenu extends DeesElement {
private callback: ((type: string) => void) | null = null;
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
position: fixed;
pointer-events: none;

3
ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.ts
View File

@@ -15,6 +15,7 @@ import { BlockRegistry, type IBlockEventHandlers } from './blocks/index.js';
import './wysiwyg.blockregistration.js';
import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';
import '../../dees-contextmenu/dees-contextmenu.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -82,8 +83,10 @@ export class DeesWysiwygBlock extends DeesElement {
}
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: block;
}

3
ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.ts
View File

@@ -12,6 +12,7 @@ import '../../dees-icon/dees-icon.js';
import '../../dees-label/dees-label.js';
import { ProfilePictureModal } from './profilepicture.modal.js';
import { demoFunc } from './dees-input-profilepicture.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -67,9 +68,11 @@ export class DeesInputProfilePicture extends DeesInputBase<DeesInputProfilePictu
private modalInstance: ProfilePictureModal | null = null;
public static styles = [
themeDefaultStyles,
...DeesInputBase.baseStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: block;
position: relative;

3
ts_web/elements/00group-input/profilepicture/profilepicture.modal.ts
View File

@@ -17,6 +17,7 @@ import '../../dees-windowlayer/dees-windowlayer.js';
import { DeesWindowLayer } from '../../dees-windowlayer/dees-windowlayer.js';
import { ImageCropper } from './profilepicture.cropper.js';
import type { ProfileShape } from './dees-input-profilepicture.js';
import { themeDefaultStyles } from '../../00theme.js';
@customElement('dees-profilepicture-modal')
export class ProfilePictureModal extends DeesElement {
@@ -46,8 +47,10 @@ export class ProfilePictureModal extends DeesElement {
private zIndex: number = 0;
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
font-family: ${cssGeistFontFamily};
color: ${cssManager.bdTheme('#333', '#fff')};

3
ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts
View File

@@ -15,6 +15,7 @@ import {
} from '@design.estate/dees-element';
import '../../dees-icon/dees-icon.js';
import type { DeesTerminal } from '../../dees-terminal/dees-terminal.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -48,8 +49,10 @@ export class DeesSimpleAppDash extends DeesElement {
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
user-select: none;

3
ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts
View File

@@ -9,6 +9,7 @@ import {
cssManager,
css,
} from '@design.estate/dees-element';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -26,8 +27,10 @@ export class DeesSimpleLogin extends DeesElement {
accessor name: string = 'Application';
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
user-select: none;

218
ts_web/elements/00theme.ts Normal file
View File

@@ -0,0 +1,218 @@
import { css, type CSSResult } from '@design.estate/dees-element';
// ============================================
// Theme Token Type Definitions
// ============================================
export interface IThemeColors {
bgPrimary: string;
bgSecondary: string;
bgTertiary: string;
textPrimary: string;
textSecondary: string;
textMuted: string;
borderDefault: string;
borderSubtle: string;
borderStrong: string;
accentPrimary: string;
accentSuccess: string;
accentWarning: string;
accentError: string;
}
export interface IThemeSpacing {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
}
export interface IThemeRadius {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
full: string;
}
export interface IThemeShadows {
xs: string;
sm: string;
md: string;
lg: string;
}
export interface IThemeTransitions {
fast: string;
default: string;
slow: string;
slower: string;
}
export interface IThemeControlHeights {
sm: string;
md: string;
lg: string;
xl: string;
}
export interface ITheme {
colors: {
light: IThemeColors;
dark: IThemeColors;
};
spacing: IThemeSpacing;
radius: IThemeRadius;
shadows: IThemeShadows;
transitions: IThemeTransitions;
controlHeights: IThemeControlHeights;
}
// ============================================
// Default Theme Values (TypeScript Object)
// ============================================
export const themeDefaults: ITheme = {
colors: {
light: {
bgPrimary: '#ffffff',
bgSecondary: '#fafafa',
bgTertiary: '#f4f4f5',
textPrimary: '#09090b',
textSecondary: '#374151',
textMuted: '#71717a',
borderDefault: '#e5e7eb',
borderSubtle: '#f4f4f5',
borderStrong: '#d1d5db',
accentPrimary: '#3b82f6',
accentSuccess: '#22c55e',
accentWarning: '#f59e0b',
accentError: '#ef4444',
},
dark: {
bgPrimary: '#09090b',
bgSecondary: '#0a0a0a',
bgTertiary: '#18181b',
textPrimary: '#fafafa',
textSecondary: '#d4d4d8',
textMuted: '#a1a1aa',
borderDefault: '#27272a',
borderSubtle: '#1a1a1a',
borderStrong: '#3f3f46',
accentPrimary: '#3b82f6',
accentSuccess: '#22c55e',
accentWarning: '#f59e0b',
accentError: '#ef4444',
},
},
spacing: {
xs: '4px',
sm: '8px',
md: '12px',
lg: '16px',
xl: '24px',
'2xl': '32px',
'3xl': '48px',
},
radius: {
xs: '2px',
sm: '4px',
md: '6px',
lg: '8px',
xl: '12px',
full: '999px',
},
shadows: {
xs: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
sm: '0 1px 3px rgba(0, 0, 0, 0.1)',
md: '0 2px 8px rgba(0, 0, 0, 0.15)',
lg: '0 4px 12px rgba(0, 0, 0, 0.15)',
},
transitions: {
fast: '0.1s',
default: '0.15s',
slow: '0.2s',
slower: '0.3s',
},
controlHeights: {
sm: '32px',
md: '36px',
lg: '40px',
xl: '48px',
},
};
// ============================================
// CSS Block for Component Import
// ============================================
/**
* Default theme styles to be imported into every component's static styles array.
* Provides CSS custom properties for spacing, radius, shadows, transitions, and control heights.
*
* Usage:
* ```typescript
* import { themeDefaultStyles } from '../00theme.js';
*
* @customElement('my-component')
* export class MyComponent extends DeesElement {
* public static styles = [
* themeDefaultStyles,
* cssManager.defaultStyles,
* css`...`
* ];
* }
* ```
*/
export const themeDefaultStyles: CSSResult = css`
:host {
/* ========================================
* Spacing Scale
* ======================================== */
--dees-spacing-xs: 4px;
--dees-spacing-sm: 8px;
--dees-spacing-md: 12px;
--dees-spacing-lg: 16px;
--dees-spacing-xl: 24px;
--dees-spacing-2xl: 32px;
--dees-spacing-3xl: 48px;
/* ========================================
* Border Radius Scale
* ======================================== */
--dees-radius-xs: 2px;
--dees-radius-sm: 4px;
--dees-radius-md: 6px;
--dees-radius-lg: 8px;
--dees-radius-xl: 12px;
--dees-radius-full: 999px;
/* ========================================
* Shadow Elevation Scale
* ======================================== */
--dees-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--dees-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--dees-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
--dees-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
/* ========================================
* Transition Duration Scale
* ======================================== */
--dees-transition-fast: 0.1s;
--dees-transition-default: 0.15s;
--dees-transition-slow: 0.2s;
--dees-transition-slower: 0.3s;
/* ========================================
* Control Height Scale
* ======================================== */
--dees-control-height-sm: 32px;
--dees-control-height-md: 36px;
--dees-control-height-lg: 40px;
--dees-control-height-xl: 48px;
}
`;

3
ts_web/elements/dees-badge/dees-badge.ts
View File

@@ -11,6 +11,7 @@ import {
import * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './dees-badge.demo.js';
import { themeDefaultStyles } from '../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -37,8 +38,10 @@ export class DeesBadge extends DeesElement {
}
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: inline-block;
}

3
ts_web/elements/dees-chips/dees-chips.ts
View File

@@ -12,6 +12,7 @@ import {
import * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './dees-chips.demo.js';
import { themeDefaultStyles } from '../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -51,8 +52,10 @@ export class DeesChips extends DeesElement {
}
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: block;
box-sizing: border-box;

3
ts_web/elements/dees-contextmenu/dees-contextmenu.ts
View File

@@ -16,6 +16,7 @@ import * as domtools from '@design.estate/dees-domtools';
import { DeesWindowLayer } from '../dees-windowlayer/dees-windowlayer.js';
import { zIndexLayers } from '../00zindex.js';
import '../dees-icon/dees-icon.js';
import { themeDefaultStyles } from '../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -143,8 +144,10 @@ export class DeesContextmenu extends DeesElement {
* STATIC STYLES
*/
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: block;
transition: opacity 0.2s, transform 0.2s;

3
ts_web/elements/dees-heading/dees-heading.ts
View File

@@ -11,6 +11,7 @@ import {
import { demoFunc } from './dees-heading.demo.js';
import { cssCalSansFontFamily } from '../00fonts.js';
import { themeDefaultStyles } from '../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -32,8 +33,10 @@ export class DeesHeading extends DeesElement {
// STATIC STYLES
public static styles: CSSResult[] = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
/* Heading styles */
h1, h2, h3, h4, h5, h6 {
margin: 16px 0 8px;

5
ts_web/elements/dees-hint/dees-hint.ts
View File

@@ -11,6 +11,7 @@ import {
import * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './dees-hint.demo.js';
import { themeDefaultStyles } from '../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -30,7 +31,9 @@ export class DeesHint extends DeesElement {
domtools.elementBasic.setup();
}
public static styles = [cssManager.defaultStyles, css``];
public static styles = [themeDefaultStyles, cssManager.defaultStyles, css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
`];
public render(): TemplateResult {
return html` <div class="mainbox"></div> `;

5
ts_web/elements/dees-icon/dees-icon.ts
View File

@@ -9,6 +9,7 @@ import {
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import { themeDefaultStyles } from '../00theme.js';
import { icon, type IconDefinition } from '@fortawesome/fontawesome-svg-core';
import {
@@ -325,8 +326,10 @@ export class DeesIcon extends DeesElement {
}
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: inline-flex;
align-items: center;
@@ -334,7 +337,7 @@ export class DeesIcon extends DeesElement {
line-height: 1;
vertical-align: middle;
}
/* Improve rendering performance */
#iconContainer svg {
display: block;

3
ts_web/elements/dees-label/dees-label.ts
View File

@@ -13,6 +13,7 @@ import {
} from '@design.estate/dees-element';
import { demoFunc } from './dees-label.demo.js';
import { themeDefaultStyles } from '../00theme.js';
@customElement('dees-label')
export class DeesLabel extends DeesElement {
@@ -39,8 +40,10 @@ export class DeesLabel extends DeesElement {
accessor required: boolean = false;
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

3
ts_web/elements/dees-mobilenavigation/dees-mobilenavigation.ts
View File

@@ -14,6 +14,7 @@ import {
} from '@design.estate/dees-element';
import { DeesWindowLayer } from '../dees-windowlayer/dees-windowlayer.js';
import '../dees-icon/dees-icon.js';
import { themeDefaultStyles } from '../00theme.js';
@customElement('dees-mobilenavigation')
export class DeesMobilenavigation extends DeesElement {
@@ -111,8 +112,10 @@ export class DeesMobilenavigation extends DeesElement {
}
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
font-family: ${cssGeistFontFamily};
}

3
ts_web/elements/dees-modal/dees-modal.ts
View File

@@ -21,6 +21,7 @@ import {
import * as domtools from '@design.estate/dees-domtools';
import { DeesWindowLayer } from '../dees-windowlayer/dees-windowlayer.js';
import '../dees-icon/dees-icon.js';
import { themeDefaultStyles } from '../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -115,8 +116,10 @@ export class DeesModal extends DeesElement {
}
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
font-family: ${cssGeistFontFamily};
color: ${cssManager.bdTheme('#333', '#fff')};

3
ts_web/elements/dees-pagination/dees-pagination.ts
View File

@@ -1,5 +1,6 @@
import { customElement, html, DeesElement, property, css, cssManager, type TemplateResult } from '@design.estate/dees-element';
import { demoFunc } from './dees-pagination.demo.js';
import { themeDefaultStyles } from '../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -23,8 +24,10 @@ export class DeesPagination extends DeesElement {
accessor total = 1;
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: inline-flex;
align-items: center;

3
ts_web/elements/dees-panel/dees-panel.ts
View File

@@ -9,6 +9,7 @@ import {
} from '@design.estate/dees-element';
import { demoFunc } from './dees-panel.demo.js';
import { cssGeistFontFamily } from '../00fonts.js';
import { themeDefaultStyles } from '../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -36,8 +37,10 @@ export class DeesPanel extends DeesElement {
accessor runAfterRender: ((elementArg: HTMLElement) => void | Promise<void>) | undefined = undefined;
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: block;
font-family: ${cssGeistFontFamily};

3
ts_web/elements/dees-progressbar/dees-progressbar.ts
View File

@@ -16,6 +16,7 @@ import {
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import { themeDefaultStyles } from '../00theme.js';
@customElement('dees-progressbar')
export class DeesProgressbar extends DeesElement {
@@ -29,8 +30,10 @@ export class DeesProgressbar extends DeesElement {
accessor percentage = 0;
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
color: ${cssManager.bdTheme(colors.bright.text, colors.dark.text)};
}

3
ts_web/elements/dees-searchbar/dees-searchbar.ts
View File

@@ -13,6 +13,7 @@ import {
import * as colors from '../00colors.js';
import { demoFunc } from './dees-searchbar.demo.js';
import { themeDefaultStyles } from '../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -27,8 +28,10 @@ export class DeesSearchbar extends DeesElement {
// STATIC
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
padding: 40px;
font-family: Dees Sans;

3
ts_web/elements/dees-shopping-productcard/dees-shopping-productcard.ts
View File

@@ -8,6 +8,7 @@ import {
DeesElement,
} from '@design.estate/dees-element';
import { demoFunc } from './dees-shopping-productcard.demo.js';
import { themeDefaultStyles } from '../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -51,8 +52,10 @@ export class DeesShoppingProductcard extends DeesElement {
accessor selected: boolean = false;
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: block;
}

3
ts_web/elements/dees-speechbubble/dees-speechbubble.ts
View File

@@ -17,6 +17,7 @@ import {
unsafeHTML,
} from '@design.estate/dees-element';
import { DeesWindowLayer } from '../dees-windowlayer/dees-windowlayer.js';
import { themeDefaultStyles } from '../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -78,8 +79,10 @@ export class DeesSpeechbubble extends DeesElement {
}
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
box-sizing: border-box;
color: ${cssManager.bdTheme('#333', '#fff')};

3
ts_web/elements/dees-spinner/dees-spinner.ts
View File

@@ -11,6 +11,7 @@ import {
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import { themeDefaultStyles } from '../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -46,8 +47,10 @@ export class DeesSpinner extends DeesElement {
}
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: block;
}

3
ts_web/elements/dees-statsgrid/dees-statsgrid.ts
View File

@@ -16,6 +16,7 @@ import type { TemplateResult } from '@design.estate/dees-element';
import '../dees-icon/dees-icon.js';
import '../dees-contextmenu/dees-contextmenu.js';
import '../00group-button/dees-button/dees-button.js';
import { themeDefaultStyles } from '../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -75,8 +76,10 @@ export class DeesStatsGrid extends DeesElement {
accessor contextMenuActions: plugins.tsclass.website.IMenuItem[] = [];
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: block;
width: 100%;

3
ts_web/elements/dees-stepper/dees-stepper.ts
View File

@@ -15,6 +15,7 @@ import {
import * as domtools from '@design.estate/dees-domtools';
import { stepperDemo } from './dees-stepper.demo.js';
import { themeDefaultStyles } from '../00theme.js';
export interface IStep {
title: string;
@@ -50,8 +51,10 @@ export class DeesStepper extends DeesElement {
}
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
position: absolute;
width: 100%;

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

@@ -14,6 +14,7 @@ import {
getViewData as getViewDataFn,
} from './data.js';
import { compileLucenePredicate } from './lucene.js';
import { themeDefaultStyles } from '../00theme.js';
export type { Column, ITableAction, ITableActionDataArg, TDisplayFunction } from './types.js';

3
ts_web/elements/dees-table/styles.ts
View File

@@ -1,9 +1,12 @@
import { cssManager, css, type CSSResult } from '@design.estate/dees-element';
import { cssGeistFontFamily } from '../00fonts.js';
import { themeDefaultStyles } from '../00theme.js';
export const tableStyles: CSSResult[] = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: block;
width: 100%;

3
ts_web/elements/dees-terminal/dees-terminal.ts
View File

@@ -13,6 +13,7 @@ import * as webcontainer from '@webcontainer/api';
import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import { themeDefaultStyles } from '../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -57,8 +58,10 @@ export class DeesTerminal extends DeesElement {
}
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
padding: 20px;
background: var(--dees-terminal-background, #000000);

275
ts_web/elements/dees-theme/dees-theme.demo.ts Normal file
View File

@@ -0,0 +1,275 @@
import { html, css, cssManager } from '@design.estate/dees-element';
export const demoFunc = () => html`
<style>
.demo-container {
display: flex;
flex-direction: column;
gap: 32px;
padding: 48px;
background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
min-height: 100vh;
}
.section {
background: ${cssManager.bdTheme('#ffffff', '#18181b')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: 8px;
padding: 24px;
}
.section-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
}
.section-description {
font-size: 14px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
margin-bottom: 24px;
}
.token-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
.token-item {
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
border-radius: 6px;
padding: 16px;
}
.token-name {
font-family: 'Intel One Mono', monospace;
font-size: 12px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
margin-bottom: 8px;
}
.token-value {
font-size: 14px;
font-weight: 500;
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
}
.spacing-demo {
display: flex;
align-items: flex-end;
gap: 8px;
flex-wrap: wrap;
}
.spacing-box {
background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
border-radius: 4px;
}
.radius-demo {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.radius-box {
width: 60px;
height: 60px;
background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 11px;
font-weight: 500;
}
.shadow-demo {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.shadow-box {
width: 100px;
height: 100px;
background: ${cssManager.bdTheme('#ffffff', '#27272a')};
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 500;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
}
.height-demo {
display: flex;
gap: 16px;
align-items: flex-end;
flex-wrap: wrap;
}
.height-box {
background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
width: 120px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
font-weight: 500;
}
</style>
<div class="demo-container">
<dees-theme>
<div class="section">
<div class="section-title">Spacing Scale</div>
<div class="section-description">
CSS variables: --dees-spacing-xs through --dees-spacing-3xl
</div>
<div class="spacing-demo">
<div>
<div class="spacing-box" style="width: var(--dees-spacing-xs); height: var(--dees-spacing-xs);"></div>
<div class="token-name">xs (4px)</div>
</div>
<div>
<div class="spacing-box" style="width: var(--dees-spacing-sm); height: var(--dees-spacing-sm);"></div>
<div class="token-name">sm (8px)</div>
</div>
<div>
<div class="spacing-box" style="width: var(--dees-spacing-md); height: var(--dees-spacing-md);"></div>
<div class="token-name">md (12px)</div>
</div>
<div>
<div class="spacing-box" style="width: var(--dees-spacing-lg); height: var(--dees-spacing-lg);"></div>
<div class="token-name">lg (16px)</div>
</div>
<div>
<div class="spacing-box" style="width: var(--dees-spacing-xl); height: var(--dees-spacing-xl);"></div>
<div class="token-name">xl (24px)</div>
</div>
<div>
<div class="spacing-box" style="width: var(--dees-spacing-2xl); height: var(--dees-spacing-2xl);"></div>
<div class="token-name">2xl (32px)</div>
</div>
<div>
<div class="spacing-box" style="width: var(--dees-spacing-3xl); height: var(--dees-spacing-3xl);"></div>
<div class="token-name">3xl (48px)</div>
</div>
</div>
</div>
<div class="section">
<div class="section-title">Border Radius Scale</div>
<div class="section-description">
CSS variables: --dees-radius-xs through --dees-radius-full
</div>
<div class="radius-demo">
<div>
<div class="radius-box" style="border-radius: var(--dees-radius-xs);">xs</div>
<div class="token-name">2px</div>
</div>
<div>
<div class="radius-box" style="border-radius: var(--dees-radius-sm);">sm</div>
<div class="token-name">4px</div>
</div>
<div>
<div class="radius-box" style="border-radius: var(--dees-radius-md);">md</div>
<div class="token-name">6px</div>
</div>
<div>
<div class="radius-box" style="border-radius: var(--dees-radius-lg);">lg</div>
<div class="token-name">8px</div>
</div>
<div>
<div class="radius-box" style="border-radius: var(--dees-radius-xl);">xl</div>
<div class="token-name">12px</div>
</div>
<div>
<div class="radius-box" style="border-radius: var(--dees-radius-full);">full</div>
<div class="token-name">999px</div>
</div>
</div>
</div>
<div class="section">
<div class="section-title">Shadow Elevation Scale</div>
<div class="section-description">
CSS variables: --dees-shadow-xs through --dees-shadow-lg
</div>
<div class="shadow-demo">
<div>
<div class="shadow-box" style="box-shadow: var(--dees-shadow-xs);">xs</div>
<div class="token-name">minimal</div>
</div>
<div>
<div class="shadow-box" style="box-shadow: var(--dees-shadow-sm);">sm</div>
<div class="token-name">subtle</div>
</div>
<div>
<div class="shadow-box" style="box-shadow: var(--dees-shadow-md);">md</div>
<div class="token-name">medium</div>
</div>
<div>
<div class="shadow-box" style="box-shadow: var(--dees-shadow-lg);">lg</div>
<div class="token-name">prominent</div>
</div>
</div>
</div>
<div class="section">
<div class="section-title">Control Height Scale</div>
<div class="section-description">
CSS variables: --dees-control-height-sm through --dees-control-height-xl
</div>
<div class="height-demo">
<div>
<div class="height-box" style="height: var(--dees-control-height-sm);">sm</div>
<div class="token-name">32px</div>
</div>
<div>
<div class="height-box" style="height: var(--dees-control-height-md);">md</div>
<div class="token-name">36px</div>
</div>
<div>
<div class="height-box" style="height: var(--dees-control-height-lg);">lg</div>
<div class="token-name">40px</div>
</div>
<div>
<div class="height-box" style="height: var(--dees-control-height-xl);">xl</div>
<div class="token-name">48px</div>
</div>
</div>
</div>
<div class="section">
<div class="section-title">Transition Durations</div>
<div class="section-description">
CSS variables: --dees-transition-fast through --dees-transition-slower
</div>
<div class="token-grid">
<div class="token-item">
<div class="token-name">--dees-transition-fast</div>
<div class="token-value">0.1s</div>
</div>
<div class="token-item">
<div class="token-name">--dees-transition-default</div>
<div class="token-value">0.15s</div>
</div>
<div class="token-item">
<div class="token-name">--dees-transition-slow</div>
<div class="token-value">0.2s</div>
</div>
<div class="token-item">
<div class="token-name">--dees-transition-slower</div>
<div class="token-value">0.3s</div>
</div>
</div>
</div>
</dees-theme>
</div>
`;

224
ts_web/elements/dees-theme/dees-theme.ts Normal file
View File

@@ -0,0 +1,224 @@
import {
DeesElement,
type TemplateResult,
property,
customElement,
html,
css,
cssManager,
} from '@design.estate/dees-element';
import {
type ITheme,
type IThemeColors,
type IThemeSpacing,
type IThemeRadius,
type IThemeShadows,
type IThemeTransitions,
type IThemeControlHeights,
themeDefaults,
themeDefaultStyles,
} from '../00theme.js';
import { demoFunc } from './dees-theme.demo.js';
/**
* A theme provider component that wraps children and provides CSS custom properties.
* Can be used at the app root or around specific sections to customize theming.
*
* Usage:
* ```html
* <dees-theme>
* <my-app></my-app>
* </dees-theme>
* ```
*
* With custom overrides:
* ```html
* <dees-theme .customSpacing=${{ lg: '20px' }}>
* <my-section></my-section>
* </dees-theme>
* ```
*/
@customElement('dees-theme')
export class DeesTheme extends DeesElement {
public static demo = demoFunc;
// ============================================
// Properties for theme overrides
// ============================================
@property({ type: Object })
accessor customSpacing: Partial<IThemeSpacing> | null = null;
@property({ type: Object })
accessor customRadius: Partial<IThemeRadius> | null = null;
@property({ type: Object })
accessor customShadows: Partial<IThemeShadows> | null = null;
@property({ type: Object })
accessor customTransitions: Partial<IThemeTransitions> | null = null;
@property({ type: Object })
accessor customControlHeights: Partial<IThemeControlHeights> | null = null;
// ============================================
// Styles
// ============================================
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
:host {
display: contents;
}
`,
];
// ============================================
// Render
// ============================================
public render(): TemplateResult {
return html`
<style>
${this.generateCustomStyles()}
</style>
<slot></slot>
`;
}
// ============================================
// Private Methods
// ============================================
private generateCustomStyles(): string {
const styles: string[] = [':host {'];
// Custom spacing
if (this.customSpacing) {
for (const [key, value] of Object.entries(this.customSpacing)) {
if (value) {
styles.push(` --dees-spacing-${key}: ${value};`);
}
}
}
// Custom radius
if (this.customRadius) {
for (const [key, value] of Object.entries(this.customRadius)) {
if (value) {
styles.push(` --dees-radius-${key}: ${value};`);
}
}
}
// Custom shadows
if (this.customShadows) {
for (const [key, value] of Object.entries(this.customShadows)) {
if (value) {
styles.push(` --dees-shadow-${key}: ${value};`);
}
}
}
// Custom transitions
if (this.customTransitions) {
for (const [key, value] of Object.entries(this.customTransitions)) {
if (value) {
const cssKey = key === 'default' ? 'default' : key;
styles.push(` --dees-transition-${cssKey}: ${value};`);
}
}
}
// Custom control heights
if (this.customControlHeights) {
for (const [key, value] of Object.entries(this.customControlHeights)) {
if (value) {
styles.push(` --dees-control-height-${key}: ${value};`);
}
}
}
styles.push('}');
return styles.join('\n');
}
// ============================================
// Public API Methods
// ============================================
/**
* Set a spacing value dynamically
*/
public setSpacing(key: keyof IThemeSpacing, value: string): void {
this.customSpacing = { ...this.customSpacing, [key]: value };
}
/**
* Set a radius value dynamically
*/
public setRadius(key: keyof IThemeRadius, value: string): void {
this.customRadius = { ...this.customRadius, [key]: value };
}
/**
* Set a shadow value dynamically
*/
public setShadow(key: keyof IThemeShadows, value: string): void {
this.customShadows = { ...this.customShadows, [key]: value };
}
/**
* Set a transition value dynamically
*/
public setTransition(key: keyof IThemeTransitions, value: string): void {
this.customTransitions = { ...this.customTransitions, [key]: value };
}
/**
* Set a control height value dynamically
*/
public setControlHeight(key: keyof IThemeControlHeights, value: string): void {
this.customControlHeights = { ...this.customControlHeights, [key]: value };
}
/**
* Get the current theme configuration (defaults + overrides)
*/
public getTheme(): ITheme {
return {
colors: themeDefaults.colors,
spacing: { ...themeDefaults.spacing, ...this.customSpacing },
radius: { ...themeDefaults.radius, ...this.customRadius },
shadows: { ...themeDefaults.shadows, ...this.customShadows },
transitions: { ...themeDefaults.transitions, ...this.customTransitions },
controlHeights: { ...themeDefaults.controlHeights, ...this.customControlHeights },
};
}
/**
* Reset all custom overrides to defaults
*/
public resetToDefaults(): void {
this.customSpacing = null;
this.customRadius = null;
this.customShadows = null;
this.customTransitions = null;
this.customControlHeights = null;
}
/**
* Apply a complete theme object
*/
public applyTheme(theme: Partial<ITheme>): void {
if (theme.spacing) this.customSpacing = theme.spacing;
if (theme.radius) this.customRadius = theme.radius;
if (theme.shadows) this.customShadows = theme.shadows;
if (theme.transitions) this.customTransitions = theme.transitions;
if (theme.controlHeights) this.customControlHeights = theme.controlHeights;
}
}

1
ts_web/elements/dees-theme/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './dees-theme.js';

3
ts_web/elements/dees-toast/dees-toast.ts
View File

@@ -4,6 +4,7 @@ import * as domtools from '@design.estate/dees-domtools';
import { zIndexLayers } from '../00zindex.js';
import { demoFunc } from './dees-toast.demo.js';
import { cssGeistFontFamily } from '../00fonts.js';
import { themeDefaultStyles } from '../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -148,8 +149,10 @@ export class DeesToast extends DeesElement {
}
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: block;
pointer-events: auto;

3
ts_web/elements/dees-updater/dees-updater.ts
View File

@@ -11,6 +11,7 @@ import { demoFunc } from './dees-updater.demo.js';
import '../dees-windowlayer/dees-windowlayer.js';
import { css, cssManager } from '@design.estate/dees-element';
import { themeDefaultStyles } from '../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -44,8 +45,10 @@ export class DeesUpdater extends DeesElement {
}
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
.modalContainer {
will-change: transform;
position: relative;

3
ts_web/elements/dees-windowcontrols/dees-windowcontrols.ts
View File

@@ -10,6 +10,7 @@ import {
css,
cssManager,
} from '@design.estate/dees-element';
import { themeDefaultStyles } from '../00theme.js';
declare global {
interface HTMLElementTagNameMap {
@@ -34,8 +35,10 @@ export class DeesWindowControls extends DeesElement {
accessor position: 'left' | 'right' = 'left';
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
position: relative;
display: block;

2
ts_web/elements/index.ts
View File

@@ -1,4 +1,5 @@
export * from './00zindex.js';
export * from './00theme.js';
// Component Groups
export * from './00group-appui/index.js';
@@ -37,3 +38,4 @@ export * from './dees-toast/index.js';
export * from './dees-updater/index.js';
export * from './dees-windowcontrols/index.js';
export * from './dees-windowlayer/index.js';
export * from './dees-theme/index.js';

23
ts_web/elements/interfaces/appconfig.ts
View File

@@ -1,7 +1,6 @@
import type { TemplateResult } from '@design.estate/dees-element';
import type { IAppBarMenuItem } from './appbarmenuitem.js';
import type { ITab } from './tab.js';
import type { ISecondaryMenuGroup } from './secondarymenu.js';
import type { IMenuItem } from './tab.js';
import type { IMenuGroup } from './menugroup.js';
// Forward declaration for circular reference
@@ -15,22 +14,22 @@ export type TDeesAppuiBase = HTMLElement & {
setWindowControlsVisible: (visible: boolean) => void;
setMainMenu: (config: IMainMenuConfig) => void;
updateMainMenuGroup: (groupName: string, update: Partial<IMenuGroup>) => void;
addMainMenuItem: (groupName: string, tab: ITab) => void;
addMainMenuItem: (groupName: string, tab: IMenuItem) => void;
removeMainMenuItem: (groupName: string, tabKey: string) => void;
setMainMenuSelection: (tabKey: string) => void;
setMainMenuCollapsed: (collapsed: boolean) => void;
setMainMenuBadge: (tabKey: string, badge: string | number) => void;
clearMainMenuBadge: (tabKey: string) => void;
setSecondaryMenu: (config: { heading?: string; groups: ISecondaryMenuGroup[] }) => void;
updateSecondaryMenuGroup: (groupName: string, update: Partial<ISecondaryMenuGroup>) => void;
addSecondaryMenuItem: (groupName: string, item: ISecondaryMenuGroup['items'][0]) => void;
setSecondaryMenu: (config: { heading?: string; groups: IMenuGroup[] }) => void;
updateSecondaryMenuGroup: (groupName: string, update: Partial<IMenuGroup>) => void;
addSecondaryMenuItem: (groupName: string, item: IMenuGroup['items'][0]) => void;
setSecondaryMenuSelection: (itemKey: string) => void;
clearSecondaryMenu: () => void;
setContentTabs: (tabs: ITab[]) => void;
addContentTab: (tab: ITab) => void;
setContentTabs: (tabs: IMenuItem[]) => void;
addContentTab: (tab: IMenuItem) => void;
removeContentTab: (tabKey: string) => void;
selectContentTab: (tabKey: string) => void;
getSelectedContentTab: () => ITab | undefined;
getSelectedContentTab: () => IMenuItem | undefined;
activityLog: IActivityLogAPI;
navigateToView: (viewId: string, params?: Record<string, string>) => Promise<boolean>;
getCurrentView: () => IViewDefinition | undefined;
@@ -132,9 +131,9 @@ export interface IViewDefinition {
| (() => TemplateResult)
| (() => Promise<string | (new () => HTMLElement) | (() => TemplateResult)>);
/** Secondary menu items specific to this view */
secondaryMenu?: ISecondaryMenuGroup[];
secondaryMenu?: IMenuGroup[];
/** Content tabs specific to this view */
contentTabs?: ITab[];
contentTabs?: IMenuItem[];
/** Optional route path (defaults to id). Supports params like 'settings/:section' */
route?: string;
/** Badge to show on menu item */
@@ -169,7 +168,7 @@ export interface IMainMenuConfig {
/** Bottom pinned items (view IDs or tabs) */
bottomItems?: string[];
/** Bottom tabs */
bottomTabs?: ITab[];
bottomTabs?: IMenuItem[];
}
/**

2
ts_web/elements/interfaces/index.ts
View File

@@ -1,6 +1,4 @@
export * from './tab.js';
export * from './selectionoption.js';
export * from './appbarmenuitem.js';
export * from './menugroup.js';
export * from './secondarymenu.js';
export * from './appconfig.js';

8
ts_web/elements/interfaces/menugroup.ts
View File

@@ -1,6 +1,8 @@
import type { ITab } from './tab.js';
import type { IMenuItem } from './tab.js';
export interface IMenuGroup {
name?: string;
tabs: ITab[];
name: string;
items: IMenuItem[];
collapsed?: boolean;
iconName?: string;
}

20
ts_web/elements/interfaces/secondarymenu.ts
View File

@@ -1,20 +0,0 @@
/**
* Interface for individual menu items in the secondary menu
*/
export interface ISecondaryMenuItem {
key: string;
iconName?: string;
action: () => void;
badge?: string | number;
badgeVariant?: 'default' | 'success' | 'warning' | 'error';
}
/**
* Interface for collapsible groups in the secondary menu
*/
export interface ISecondaryMenuGroup {
name: string;
items: ISecondaryMenuItem[];
collapsed?: boolean;
iconName?: string;
}

5
ts_web/elements/interfaces/selectionoption.ts
View File

@@ -1,5 +0,0 @@
export interface ISelectionOption {
key: string;
iconName?: string;
action: () => void;
}

2
ts_web/elements/interfaces/tab.ts
View File

@@ -1,4 +1,4 @@
export interface ITab {
export interface IMenuItem {
key: string;
iconName?: string;
action: () => void;