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();
diff --git a/ts_web/elements/00group-appui/dees-appui-profiledropdown/dees-appui-profiledropdown.ts b/ts_web/elements/00group-appui/dees-appui-profiledropdown/dees-appui-profiledropdown.ts
index 611ae68..22e177e 100644
--- a/ts_web/elements/00group-appui/dees-appui-profiledropdown/dees-appui-profiledropdown.ts
+++ b/ts_web/elements/00group-appui/dees-appui-profiledropdown/dees-appui-profiledropdown.ts
@@ -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;
diff --git a/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.demo.ts b/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.demo.ts
index c6efdb1..8206ddc 100644
--- a/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.demo.ts
+++ b/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.demo.ts
@@ -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)}
>
diff --git a/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts b/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts
index 6ba8d32..1122b3e 100644
--- a/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts
+++ b/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts
@@ -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`
`;
}
- 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,
diff --git a/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.demo.ts b/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.demo.ts
new file mode 100644
index 0000000..43fa509
--- /dev/null
+++ b/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.demo.ts
@@ -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`
+
+ ${text}
+
+ `;
+
+ return html`
+
+
+
+
Horizontal Tabs with Animated Indicator
+
+ ${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.')}
+
+
+
+
+
Vertical Tabs Layout
+
+
+ ${demoContent('Vertical tabs work great for settings pages and navigation menus. The animated indicator smoothly transitions between selections.')}
+
+
+
+
+
Without Indicator
+
+ ${demoContent('Tabs can also be used without the animated indicator by setting showTabIndicator to false.')}
+
+
+
+ `;
+};
diff --git a/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts b/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts
index 9d9fd2c..ae21719 100644
--- a/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts
+++ b/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts
@@ -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`
-
- ${text}
-
- `;
-
- return html`
-
-
-
-
Horizontal Tabs with Animated Indicator
-
- ${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.')}
-
-
-
-
-
Vertical Tabs Layout
-
-
- ${demoContent('Vertical tabs work great for settings pages and navigation menus. The animated indicator smoothly transitions between selections.')}
-
-
-
-
-
Without Indicator
-
- ${demoContent('Tabs can also be used without the animated indicator by setting showTabIndicator to false.')}
-
-
-
- `;
- };
+ 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`
` : '';
}
- private selectTab(tabArg: interfaces.ITab) {
+ private selectTab(tabArg: interfaces.IMenuItem) {
this.selectedTab = tabArg;
tabArg.action();
diff --git a/ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.demo.ts b/ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.demo.ts
new file mode 100644
index 0000000..b68349b
--- /dev/null
+++ b/ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.demo.ts
@@ -0,0 +1,30 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+
console.log('Overview tab'),
+ content: html`Overview Content
`
+ },
+ {
+ key: 'details',
+ iconName: 'lucide:fileText',
+ action: () => console.log('Details tab'),
+ content: html`Details Content
`
+ }
+ ],
+ menuItems: [
+ { key: 'General', action: () => console.log('General') },
+ { key: 'Advanced', action: () => console.log('Advanced') },
+ ]
+ }}
+ >
+`;
diff --git a/ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.ts b/ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.ts
index c63b367..52f203a 100644
--- a/ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.ts
+++ b/ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.ts
@@ -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`
-
console.log('Overview tab'),
- content: html`Overview Content
`
- },
- {
- key: 'details',
- iconName: 'lucide:fileText',
- action: () => console.log('Details tab'),
- content: html`Details Content
`
- }
- ],
- menuItems: [
- { key: 'General', action: () => console.log('General') },
- { key: 'Advanced', action: () => console.log('Advanced') },
- ]
- }}
- >
- `;
+ 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`
-
- ${content || html`
`}
+
+ ${content
+ ? content
+ : tab.useSlotName
+ ? html``
+ : ''}
`;
})}
@@ -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 || [];
}
}
\ No newline at end of file
diff --git a/ts_web/elements/00group-button/dees-button-group/dees-button-group.ts b/ts_web/elements/00group-button/dees-button-group/dees-button-group.ts
index 78acdd0..3f27487 100644
--- a/ts_web/elements/00group-button/dees-button-group/dees-button-group.ts
+++ b/ts_web/elements/00group-button/dees-button-group/dees-button-group.ts
@@ -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;
}
diff --git a/ts_web/elements/00group-button/dees-button/dees-button.ts b/ts_web/elements/00group-button/dees-button/dees-button.ts
index 5847cb0..e176f94 100644
--- a/ts_web/elements/00group-button/dees-button/dees-button.ts
+++ b/ts_web/elements/00group-button/dees-button/dees-button.ts
@@ -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;
diff --git a/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts b/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts
index 65263f0..06c4f85 100644
--- a/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts
+++ b/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts
@@ -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%)')};
diff --git a/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts b/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts
index 6265997..6d43db3 100644
--- a/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts
+++ b/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts
@@ -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;
}
diff --git a/ts_web/elements/00group-editor/dees-editor-markdown/dees-editor-markdown.ts b/ts_web/elements/00group-editor/dees-editor-markdown/dees-editor-markdown.ts
index 5445c51..dc1b0a2 100644
--- a/ts_web/elements/00group-editor/dees-editor-markdown/dees-editor-markdown.ts
+++ b/ts_web/elements/00group-editor/dees-editor-markdown/dees-editor-markdown.ts
@@ -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`
`;
public static styles = [
+ themeDefaultStyles,
cssManager.defaultStyles,
css`
+ /* TODO: Migrate hardcoded values to --dees-* CSS variables */
.gridcontainer {
position: absolute;
height: 100%;
diff --git a/ts_web/elements/00group-editor/dees-editor/dees-editor.ts b/ts_web/elements/00group-editor/dees-editor/dees-editor.ts
index e8ff152..9b72e96 100644
--- a/ts_web/elements/00group-editor/dees-editor/dees-editor.ts
+++ b/ts_web/elements/00group-editor/dees-editor/dees-editor.ts
@@ -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 {
}
diff --git a/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts b/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts
index fc792be..7c07068 100644
--- a/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts
+++ b/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts
@@ -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`
diff --git a/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts b/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts
index 715ac0e..0b415c9 100644
--- a/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts
+++ b/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts
@@ -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
{
}
public static styles = [
+ themeDefaultStyles,
...DeesInputBase.baseStyles,
cssManager.defaultStyles,
css`
+ /* TODO: Migrate hardcoded values to --dees-* CSS variables */
* {
box-sizing: border-box;
}
diff --git a/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts b/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts
index 6aaee63..43cbc84 100644
--- a/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts
+++ b/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts
@@ -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 {
accessor searchValue: string = '';
public static styles = [
+ themeDefaultStyles,
...DeesInputBase.baseStyles,
cssManager.defaultStyles,
css`
+ /* TODO: Migrate hardcoded values to --dees-* CSS variables */
* {
box-sizing: border-box;
}
diff --git a/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts b/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts
index 85b36bd..99d3c69 100644
--- a/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts
+++ b/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts
@@ -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 {
@@ -30,9 +31,11 @@ export class DeesInputIban extends DeesInputBase {
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 */
`,
];
diff --git a/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts b/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts
index 6592d20..2df4113 100644
--- a/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts
+++ b/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts
@@ -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 {
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;
diff --git a/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts b/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts
index 981932d..d666f7f 100644
--- a/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts
+++ b/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts
@@ -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 {
}
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;
diff --git a/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.ts b/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.ts
index f1bca35..709c77e 100644
--- a/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.ts
+++ b/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.ts
@@ -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 {
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 */
`,
];
diff --git a/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.ts b/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.ts
index 15555db..3b8b2e6 100644
--- a/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.ts
+++ b/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.ts
@@ -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 {
}
public static styles = [
+ themeDefaultStyles,
...DeesInputBase.baseStyles,
cssManager.defaultStyles,
css`
+ /* TODO: Migrate hardcoded values to --dees-* CSS variables */
* {
box-sizing: border-box;
}
diff --git a/ts_web/elements/00group-input/dees-input-tags/dees-input-tags.ts b/ts_web/elements/00group-input/dees-input-tags/dees-input-tags.ts
index 2e8aa25..3ffee6a 100644
--- a/ts_web/elements/00group-input/dees-input-tags/dees-input-tags.ts
+++ b/ts_web/elements/00group-input/dees-input-tags/dees-input-tags.ts
@@ -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 {
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;
diff --git a/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts b/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts
index 93280d0..b91d2d2 100644
--- a/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts
+++ b/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts
@@ -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;
}
diff --git a/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.ts b/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.ts
index 9369227..8806580 100644
--- a/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.ts
+++ b/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.ts
@@ -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 {
@@ -27,9 +28,11 @@ export class DeesInputTypelist extends DeesInputBase {
public static styles = [
+ themeDefaultStyles,
...DeesInputBase.baseStyles,
cssManager.defaultStyles,
css`
+ /* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
color: ${cssManager.bdTheme('#333', '#fff')};
}
diff --git a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-formatting-menu.ts b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-formatting-menu.ts
index fbc1595..b15f7c8 100644
--- a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-formatting-menu.ts
+++ b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-formatting-menu.ts
@@ -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) | null = null;
public static styles = [
+ themeDefaultStyles,
cssManager.defaultStyles,
css`
+ /* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
position: fixed;
pointer-events: none;
diff --git a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts
index 70ad1bf..146c802 100644
--- a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts
+++ b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts
@@ -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 {
private history: WysiwygHistory;
public static styles = [
+ themeDefaultStyles,
...DeesInputBase.baseStyles,
cssManager.defaultStyles,
wysiwygStyles
diff --git a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-slash-menu.ts b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-slash-menu.ts
index afb7cd2..4c9712b 100644
--- a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-slash-menu.ts
+++ b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-slash-menu.ts
@@ -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;
diff --git a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.ts b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.ts
index 3f2f9cd..4050843 100644
--- a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.ts
+++ b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.ts
@@ -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;
}
diff --git a/ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.ts b/ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.ts
index d1a07af..c982f54 100644
--- a/ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.ts
+++ b/ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.ts
@@ -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 `;
diff --git a/ts_web/elements/dees-icon/dees-icon.ts b/ts_web/elements/dees-icon/dees-icon.ts
index a25e662..9990720 100644
--- a/ts_web/elements/dees-icon/dees-icon.ts
+++ b/ts_web/elements/dees-icon/dees-icon.ts
@@ -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;
diff --git a/ts_web/elements/dees-label/dees-label.ts b/ts_web/elements/dees-label/dees-label.ts
index 41fa8ce..c85a0b5 100644
--- a/ts_web/elements/dees-label/dees-label.ts
+++ b/ts_web/elements/dees-label/dees-label.ts
@@ -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;
}
diff --git a/ts_web/elements/dees-mobilenavigation/dees-mobilenavigation.ts b/ts_web/elements/dees-mobilenavigation/dees-mobilenavigation.ts
index e1f8ad1..15eb0f4 100644
--- a/ts_web/elements/dees-mobilenavigation/dees-mobilenavigation.ts
+++ b/ts_web/elements/dees-mobilenavigation/dees-mobilenavigation.ts
@@ -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};
}
diff --git a/ts_web/elements/dees-modal/dees-modal.ts b/ts_web/elements/dees-modal/dees-modal.ts
index 7b2b3f2..6d88d3d 100644
--- a/ts_web/elements/dees-modal/dees-modal.ts
+++ b/ts_web/elements/dees-modal/dees-modal.ts
@@ -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')};
diff --git a/ts_web/elements/dees-pagination/dees-pagination.ts b/ts_web/elements/dees-pagination/dees-pagination.ts
index caef12b..75685ef 100644
--- a/ts_web/elements/dees-pagination/dees-pagination.ts
+++ b/ts_web/elements/dees-pagination/dees-pagination.ts
@@ -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;
diff --git a/ts_web/elements/dees-panel/dees-panel.ts b/ts_web/elements/dees-panel/dees-panel.ts
index 6bd8bce..f59c687 100644
--- a/ts_web/elements/dees-panel/dees-panel.ts
+++ b/ts_web/elements/dees-panel/dees-panel.ts
@@ -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
) | undefined = undefined;
public static styles = [
+ themeDefaultStyles,
cssManager.defaultStyles,
css`
+ /* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
display: block;
font-family: ${cssGeistFontFamily};
diff --git a/ts_web/elements/dees-progressbar/dees-progressbar.ts b/ts_web/elements/dees-progressbar/dees-progressbar.ts
index 88f675b..1958835 100644
--- a/ts_web/elements/dees-progressbar/dees-progressbar.ts
+++ b/ts_web/elements/dees-progressbar/dees-progressbar.ts
@@ -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)};
}
diff --git a/ts_web/elements/dees-searchbar/dees-searchbar.ts b/ts_web/elements/dees-searchbar/dees-searchbar.ts
index 06e0d04..6a51178 100644
--- a/ts_web/elements/dees-searchbar/dees-searchbar.ts
+++ b/ts_web/elements/dees-searchbar/dees-searchbar.ts
@@ -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;
diff --git a/ts_web/elements/dees-shopping-productcard/dees-shopping-productcard.ts b/ts_web/elements/dees-shopping-productcard/dees-shopping-productcard.ts
index 37d35a2..a0dc127 100644
--- a/ts_web/elements/dees-shopping-productcard/dees-shopping-productcard.ts
+++ b/ts_web/elements/dees-shopping-productcard/dees-shopping-productcard.ts
@@ -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;
}
diff --git a/ts_web/elements/dees-speechbubble/dees-speechbubble.ts b/ts_web/elements/dees-speechbubble/dees-speechbubble.ts
index ee57687..61b0901 100644
--- a/ts_web/elements/dees-speechbubble/dees-speechbubble.ts
+++ b/ts_web/elements/dees-speechbubble/dees-speechbubble.ts
@@ -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')};
diff --git a/ts_web/elements/dees-spinner/dees-spinner.ts b/ts_web/elements/dees-spinner/dees-spinner.ts
index 08ec8f2..2aaf51d 100644
--- a/ts_web/elements/dees-spinner/dees-spinner.ts
+++ b/ts_web/elements/dees-spinner/dees-spinner.ts
@@ -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;
}
diff --git a/ts_web/elements/dees-statsgrid/dees-statsgrid.ts b/ts_web/elements/dees-statsgrid/dees-statsgrid.ts
index 21d242f..f76d8ca 100644
--- a/ts_web/elements/dees-statsgrid/dees-statsgrid.ts
+++ b/ts_web/elements/dees-statsgrid/dees-statsgrid.ts
@@ -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%;
diff --git a/ts_web/elements/dees-stepper/dees-stepper.ts b/ts_web/elements/dees-stepper/dees-stepper.ts
index c1dca8f..a2cbcf8 100644
--- a/ts_web/elements/dees-stepper/dees-stepper.ts
+++ b/ts_web/elements/dees-stepper/dees-stepper.ts
@@ -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%;
diff --git a/ts_web/elements/dees-table/dees-table.ts b/ts_web/elements/dees-table/dees-table.ts
index a3805be..d5ba7ae 100644
--- a/ts_web/elements/dees-table/dees-table.ts
+++ b/ts_web/elements/dees-table/dees-table.ts
@@ -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';
diff --git a/ts_web/elements/dees-table/styles.ts b/ts_web/elements/dees-table/styles.ts
index 6b07c17..fd00544 100644
--- a/ts_web/elements/dees-table/styles.ts
+++ b/ts_web/elements/dees-table/styles.ts
@@ -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%;
diff --git a/ts_web/elements/dees-terminal/dees-terminal.ts b/ts_web/elements/dees-terminal/dees-terminal.ts
index 40e3e80..27b4e13 100644
--- a/ts_web/elements/dees-terminal/dees-terminal.ts
+++ b/ts_web/elements/dees-terminal/dees-terminal.ts
@@ -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);
diff --git a/ts_web/elements/dees-theme/dees-theme.demo.ts b/ts_web/elements/dees-theme/dees-theme.demo.ts
new file mode 100644
index 0000000..7271272
--- /dev/null
+++ b/ts_web/elements/dees-theme/dees-theme.demo.ts
@@ -0,0 +1,275 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+
+
+
+
+
Spacing Scale
+
+ CSS variables: --dees-spacing-xs through --dees-spacing-3xl
+
+
+
+
Border Radius Scale
+
+ CSS variables: --dees-radius-xs through --dees-radius-full
+
+
+
+
Shadow Elevation Scale
+
+ CSS variables: --dees-shadow-xs through --dees-shadow-lg
+
+
+
+
Control Height Scale
+
+ CSS variables: --dees-control-height-sm through --dees-control-height-xl
+
+
+
+
Transition Durations
+
+ CSS variables: --dees-transition-fast through --dees-transition-slower
+
+
+
+
--dees-transition-fast
+
0.1s
+
+
+
--dees-transition-default
+
0.15s
+
+
+
--dees-transition-slow
+
0.2s
+
+
+
--dees-transition-slower
+
0.3s
+
+
+
+