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

fix(theme): align component styles with shared theme CSS variables

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-04 10:50:19 +00:00
parent dcef6faa66
commit ca290d1267
15 changed files with 159 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
changelog.md
View File

@@ -1,5 +1,12 @@
# Changelog # Changelog
## 2026-04-04 - 3.55.3 - fix(theme)
align component styles with shared theme CSS variables
- replace hardcoded bdTheme color usages across chart, dataview, input, layout, modal, media, simple, and workspace components with shared --dees-* theme tokens
- add themeDefaultStyles to components and style modules that were not yet inheriting the shared theme defaults
- standardize hover, border, background, text, and scrollbar colors for more consistent theming across the catalog
## 2026-04-04 - 3.55.2 - fix(dees-simple-appdash,dees-simple-login) ## 2026-04-04 - 3.55.2 - fix(dees-simple-appdash,dees-simple-login)
migrate app dashboard and login styles to shared theme CSS variables migrate app dashboard and login styles to shared theme CSS variables

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-catalog', name: '@design.estate/dees-catalog',
version: '3.55.2', version: '3.55.3',
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
} }

20
ts_web/elements/00group-chart/dees-chart-area/styles.ts
View File

@@ -1,13 +1,15 @@
import { css, cssManager } from '@design.estate/dees-element'; import { css, cssManager } from '@design.estate/dees-element';
import { themeDefaultStyles } from '../../00theme.js';
export const chartAreaStyles = [ export const chartAreaStyles = [
themeDefaultStyles,
cssManager.defaultStyles, cssManager.defaultStyles,
css` css`
:host { :host {
display: block; display: block;
height: 400px; height: 400px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')}; color: var(--dees-color-text-primary);
font-size: 14px; font-size: 14px;
} }
dees-tile { dees-tile {
@@ -24,7 +26,7 @@ export const chartAreaStyles = [
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
letter-spacing: -0.01em; letter-spacing: -0.01em;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')}; color: var(--dees-color-text-secondary);
} }
.expandBtn { .expandBtn {
display: flex; display: flex;
@@ -36,13 +38,13 @@ export const chartAreaStyles = [
border-radius: 4px; border-radius: 4px;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 45%)')}; color: var(--dees-color-text-muted);
transition: all 0.15s ease; transition: all 0.15s ease;
padding: 0; padding: 0;
} }
.expandBtn:hover { .expandBtn:hover {
background: ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 12%)')}; background: var(--dees-color-hover);
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')}; color: var(--dees-color-text-secondary);
} }
.chartContainer { .chartContainer {
position: absolute; position: absolute;
@@ -64,7 +66,7 @@ export const chartAreaStyles = [
} }
.statsSeries + .statsSeries { .statsSeries + .statsSeries {
padding-left: 24px; padding-left: 24px;
border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border-left: 1px solid var(--dees-color-border-default);
} }
.statsColor { .statsColor {
width: 8px; width: 8px;
@@ -75,15 +77,15 @@ export const chartAreaStyles = [
.statsName { .statsName {
font-weight: 500; font-weight: 500;
font-size: 11px; font-size: 11px;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')}; color: var(--dees-color-text-secondary);
margin-right: 4px; margin-right: 4px;
} }
.statsItem { .statsItem {
font-size: 11px; font-size: 11px;
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')}; color: var(--dees-color-text-muted);
} }
.statsItem strong { .statsItem strong {
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')}; color: var(--dees-color-text-primary);
} }
.lw-tooltip { .lw-tooltip {
position: absolute; position: absolute;

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

@@ -106,7 +106,7 @@ export class DeesChartLog extends DeesElement {
display: block; display: block;
height: 400px; height: 400px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')}; color: var(--dees-color-text-primary);
} }
dees-tile { dees-tile {
@@ -124,7 +124,7 @@ export class DeesChartLog extends DeesElement {
.title { .title {
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')}; color: var(--dees-color-text-primary);
white-space: nowrap; white-space: nowrap;
} }
@@ -141,10 +141,10 @@ export class DeesChartLog extends DeesElement {
flex: 1; flex: 1;
padding: 4px 8px; padding: 4px 8px;
font-size: 12px; font-size: 12px;
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border: 1px solid var(--dees-color-border-default);
border-radius: 4px; border-radius: 4px;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; background: var(--dees-color-bg-primary);
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')}; color: var(--dees-color-text-primary);
outline: none; outline: none;
} }
@@ -153,7 +153,7 @@ export class DeesChartLog extends DeesElement {
} }
.search-box input::placeholder { .search-box input::placeholder {
color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')}; color: var(--dees-color-text-muted);
} }
.search-nav { .search-nav {
@@ -164,35 +164,35 @@ export class DeesChartLog extends DeesElement {
.search-nav button { .search-nav button {
padding: 4px 6px; padding: 4px 6px;
font-size: 11px; font-size: 11px;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')}; background: var(--dees-color-bg-primary);
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border: 1px solid var(--dees-color-border-default);
border-radius: 3px; border-radius: 3px;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}; color: var(--dees-color-text-muted);
cursor: pointer; cursor: pointer;
line-height: 1; line-height: 1;
} }
.search-nav button:hover { .search-nav button:hover {
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')}; background: var(--dees-color-hover);
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')}; color: var(--dees-color-text-primary);
} }
.filter-toggle { .filter-toggle {
padding: 4px 8px; padding: 4px 8px;
font-size: 11px; font-size: 11px;
font-weight: 500; font-weight: 500;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')}; background: var(--dees-color-bg-primary);
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border: 1px solid var(--dees-color-border-default);
border-radius: 4px; border-radius: 4px;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}; color: var(--dees-color-text-muted);
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
white-space: nowrap; white-space: nowrap;
} }
.filter-toggle:hover { .filter-toggle:hover {
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')}; background: var(--dees-color-hover);
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')}; color: var(--dees-color-text-primary);
} }
.filter-toggle.active { .filter-toggle.active {
@@ -208,11 +208,11 @@ export class DeesChartLog extends DeesElement {
} }
.control-button { .control-button {
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')}; background: var(--dees-color-bg-primary);
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border: 1px solid var(--dees-color-border-default);
border-radius: 4px; border-radius: 4px;
padding: 4px 10px; padding: 4px 10px;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}; color: var(--dees-color-text-muted);
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
@@ -220,9 +220,9 @@ export class DeesChartLog extends DeesElement {
} }
.control-button:hover { .control-button:hover {
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')}; background: var(--dees-color-hover);
border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 25%)')}; border-color: var(--dees-color-border-strong);
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')}; color: var(--dees-color-text-primary);
} }
.control-button.active { .control-button.active {
@@ -247,7 +247,7 @@ export class DeesChartLog extends DeesElement {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}; color: var(--dees-color-text-muted);
font-style: italic; font-style: italic;
font-size: 13px; font-size: 13px;
} }
@@ -299,7 +299,7 @@ export class DeesChartLog extends DeesElement {
.metric.rate { .metric.rate {
margin-left: auto; margin-left: auto;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}; color: var(--dees-color-text-muted);
} }
.metric.rate::before { .metric.rate::before {

17
ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts
View File

@@ -2,6 +2,7 @@ import { demoFunc } from './dees-dataview-codebox.demo.js';
import { import {
DeesElement, DeesElement,
html, html,
css,
customElement, customElement,
type TemplateResult, type TemplateResult,
property, property,
@@ -9,6 +10,7 @@ import {
cssManager, cssManager,
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
import { cssGeistFontFamily, cssMonoFontFamily } from '../../00fonts.js'; import { cssGeistFontFamily, cssMonoFontFamily } from '../../00fonts.js';
import { themeDefaultStyles } from '../../00theme.js';
import type { HLJSApi } from 'highlight.js'; import type { HLJSApi } from 'highlight.js';
@@ -39,6 +41,11 @@ export class DeesDataviewCodebox extends DeesElement {
}) })
accessor codeToDisplay: string = ''; accessor codeToDisplay: string = '';
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
];
constructor() { constructor() {
super(); super();
} }
@@ -56,11 +63,11 @@ export class DeesDataviewCodebox extends DeesElement {
box-sizing: border-box; box-sizing: border-box;
} }
dees-tile { dees-tile {
color: ${cssManager.bdTheme('#09090b', '#fafafa')}; color: var(--dees-color-text-primary);
} }
.appbar { .appbar {
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')}; color: var(--dees-color-text-muted);
height: 32px; height: 32px;
display: flex; display: flex;
font-size: 13px; font-size: 13px;
@@ -78,7 +85,7 @@ export class DeesDataviewCodebox extends DeesElement {
} }
.bottomBar { .bottomBar {
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')}; color: var(--dees-color-text-muted);
height: 28px; height: 28px;
font-size: 11px; font-size: 11px;
line-height: 28px; line-height: 28px;
@@ -118,10 +125,10 @@ export class DeesDataviewCodebox extends DeesElement {
} }
.lineNumbers { .lineNumbers {
color: ${cssManager.bdTheme('#71717a', '#52525b')}; color: var(--dees-color-text-muted);
padding: 24px 16px 0px 0px; padding: 24px 16px 0px 0px;
text-align: right; text-align: right;
border-right: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')}; border-right: 1px solid var(--dees-color-border-default);
} }
.lineCounter:last-child { .lineCounter:last-child {

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

@@ -42,7 +42,7 @@ export class DeesDataviewStatusobject extends DeesElement {
} }
dees-tile { dees-tile {
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')}; color: var(--dees-color-text-primary);
cursor: default; cursor: default;
} }
@@ -61,7 +61,7 @@ export class DeesDataviewStatusobject extends DeesElement {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
letter-spacing: -0.01em; letter-spacing: -0.01em;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')}; color: var(--dees-color-text-secondary);
flex: 1; flex: 1;
} }
@@ -78,21 +78,21 @@ export class DeesDataviewStatusobject extends DeesElement {
.copyMain { .copyMain {
font-size: 11px; font-size: 11px;
font-weight: 500; font-weight: 500;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')}; background: var(--dees-color-bg-primary);
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border: 1px solid var(--dees-color-border-default);
text-align: center; text-align: center;
padding: 4px 10px; padding: 4px 10px;
border-radius: 4px; border-radius: 4px;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}; color: var(--dees-color-text-muted);
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
transition: all 0.15s ease; transition: all 0.15s ease;
} }
.copyMain:hover { .copyMain:hover {
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')}; background: var(--dees-color-hover);
border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')}; border-color: var(--dees-color-border-strong);
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')}; color: var(--dees-color-text-primary);
} }
.copyMain:active { .copyMain:active {
@@ -121,7 +121,7 @@ export class DeesDataviewStatusobject extends DeesElement {
gap: 10px; gap: 10px;
height: 36px; height: 36px;
padding: 0 16px; padding: 0 16px;
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 10%)')}; border-bottom: 1px solid var(--dees-color-border-subtle);
transition: background-color 0.15s ease; transition: background-color 0.15s ease;
cursor: context-menu; cursor: context-menu;
} }
@@ -149,7 +149,7 @@ export class DeesDataviewStatusobject extends DeesElement {
.detail .detailsText .label { .detail .detailsText .label {
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}; color: var(--dees-color-text-muted);
letter-spacing: -0.01em; letter-spacing: -0.01em;
white-space: nowrap; white-space: nowrap;
flex-shrink: 0; flex-shrink: 0;
@@ -167,7 +167,7 @@ export class DeesDataviewStatusobject extends DeesElement {
} }
.bottomBar { .bottomBar {
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}; color: var(--dees-color-text-muted);
height: 28px; height: 28px;
font-size: 11px; font-size: 11px;
line-height: 28px; line-height: 28px;

4
ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts
View File

@@ -160,7 +160,7 @@ export class DeesStatsGrid extends DeesElement {
.grid-title { .grid-title {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: ${cssManager.bdTheme('#09090b', '#fafafa')}; color: var(--dees-color-text-primary);
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
@@ -186,7 +186,7 @@ export class DeesStatsGrid extends DeesElement {
} }
.stats-tile:hover::part(outer) { .stats-tile:hover::part(outer) {
border-color: ${cssManager.bdTheme('#d0d0d0', '#2a2a2a')}; border-color: var(--dees-color-border-strong);
} }
.stats-tile.clickable { .stats-tile.clickable {

52
ts_web/elements/00group-dataview/dees-table/styles.ts
View File

@@ -13,7 +13,7 @@ export const tableStyles: CSSResult[] = [
} }
dees-tile { dees-tile {
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')}; color: var(--dees-color-text-primary);
font-family: ${cssGeistFontFamily}; font-family: ${cssGeistFontFamily};
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
@@ -41,7 +41,7 @@ export const tableStyles: CSSResult[] = [
.heading1 { .heading1 {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')}; color: var(--dees-color-text-secondary);
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
@@ -69,18 +69,18 @@ export const tableStyles: CSSResult[] = [
padding: 4px 10px; padding: 4px 10px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}; color: var(--dees-color-text-muted);
background: transparent; background: transparent;
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border: 1px solid var(--dees-color-border-default);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: all 0.15s ease; transition: all 0.15s ease;
} }
.headerAction:hover { .headerAction:hover {
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')}; color: var(--dees-color-text-primary);
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')}; background: var(--dees-color-hover);
border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')}; border-color: var(--dees-color-border-strong);
} }
.headerAction dees-icon { .headerAction dees-icon {
@@ -93,8 +93,8 @@ export const tableStyles: CSSResult[] = [
grid-gap: 16px; grid-gap: 16px;
grid-template-columns: 1fr max-content; grid-template-columns: 1fr max-content;
padding: 16px 24px; padding: 16px 24px;
background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(0 0% 3.9%)')}; background: var(--dees-color-bg-secondary);
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border-bottom: 1px solid var(--dees-color-border-default);
transition: all 0.2s ease; transition: all 0.2s ease;
} }
@@ -157,7 +157,7 @@ export const tableStyles: CSSResult[] = [
thead { thead {
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')}; background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')}; border-bottom: 1px solid var(--dees-color-border-strong);
} }
:host([sticky-header]) thead th { :host([sticky-header]) thead th {
position: sticky; position: sticky;
@@ -172,7 +172,7 @@ export const tableStyles: CSSResult[] = [
/* Default horizontal lines (bottom border only) */ /* Default horizontal lines (bottom border only) */
tbody tr { tbody tr {
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border-bottom: 1px solid var(--dees-color-border-default);
} }
tbody tr:last-child { tbody tr:last-child {
@@ -181,8 +181,8 @@ export const tableStyles: CSSResult[] = [
/* Full horizontal lines when enabled */ /* Full horizontal lines when enabled */
:host([show-horizontal-lines]) tbody tr { :host([show-horizontal-lines]) tbody tr {
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border-top: 1px solid var(--dees-color-border-default);
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border-bottom: 1px solid var(--dees-color-border-default);
} }
:host([show-horizontal-lines]) tbody tr:first-child { :host([show-horizontal-lines]) tbody tr:first-child {
@@ -190,7 +190,7 @@ export const tableStyles: CSSResult[] = [
} }
:host([show-horizontal-lines]) tbody tr:last-child { :host([show-horizontal-lines]) tbody tr:last-child {
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border-bottom: 1px solid var(--dees-color-border-default);
} }
tbody tr:hover { tbody tr:hover {
@@ -222,13 +222,13 @@ export const tableStyles: CSSResult[] = [
/* Grid mode - shows both vertical and horizontal lines */ /* Grid mode - shows both vertical and horizontal lines */
:host([show-grid]) th { :host([show-grid]) th {
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border: 1px solid var(--dees-color-border-default);
border-left: none; border-left: none;
border-top: none; border-top: none;
} }
:host([show-grid]) td { :host([show-grid]) td {
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border: 1px solid var(--dees-color-border-default);
border-left: none; border-left: none;
border-top: none; border-top: none;
} }
@@ -251,12 +251,12 @@ export const tableStyles: CSSResult[] = [
tbody td.actionsCol { tbody td.actionsCol {
position: sticky; position: sticky;
right: 0; right: 0;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')}; background: var(--dees-color-bg-primary);
} }
thead th.actionsCol { z-index: 3; } thead th.actionsCol { z-index: 3; }
tbody td.actionsCol { tbody td.actionsCol {
z-index: 1; z-index: 1;
box-shadow: -1px 0 0 0 ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; box-shadow: -1px 0 0 0 var(--dees-color-border-default);
} }
tbody tr.selected { tbody tr.selected {
@@ -278,18 +278,18 @@ export const tableStyles: CSSResult[] = [
} }
:host([show-vertical-lines]) th { :host([show-vertical-lines]) th {
border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border-right: 1px solid var(--dees-color-border-default);
} }
td { td {
padding: 8px 16px; padding: 8px 16px;
vertical-align: middle; vertical-align: middle;
font-size: 13px; font-size: 13px;
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')}; color: var(--dees-color-text-primary);
} }
:host([show-vertical-lines]) td { :host([show-vertical-lines]) td {
border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border-right: 1px solid var(--dees-color-border-default);
} }
th:first-child, th:first-child,
@@ -327,10 +327,10 @@ export const tableStyles: CSSResult[] = [
height: calc(100% - 8px); height: calc(100% - 8px);
padding: 0 12px; padding: 0 12px;
outline: none; outline: none;
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border: 1px solid var(--dees-color-border-default);
border-radius: 6px; border-radius: 6px;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')}; color: var(--dees-color-text-primary);
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
font-weight: inherit; font-weight: inherit;
@@ -355,9 +355,9 @@ export const tableStyles: CSSResult[] = [
padding: 6px 8px; padding: 6px 8px;
font-size: 13px; font-size: 13px;
border-radius: 6px; border-radius: 6px;
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border: 1px solid var(--dees-color-border-default);
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')}; color: var(--dees-color-text-primary);
} }
.actionsContainer { .actionsContainer {
display: flex; display: flex;
@@ -398,7 +398,7 @@ export const tableStyles: CSSResult[] = [
height: 32px; height: 32px;
padding: 0 16px; padding: 0 16px;
font-size: 11px; font-size: 11px;
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')}; color: var(--dees-color-text-muted);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
} }

30
ts_web/elements/00group-input/dees-input-code/dees-input-code.ts
View File

@@ -142,16 +142,16 @@ export class DeesInputCode extends DeesInputBase<string> {
padding: 4px 10px; padding: 4px 10px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 12%)')}; background: var(--dees-color-bg-primary);
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 20%)')}; border: 1px solid var(--dees-color-border-default);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')}; color: var(--dees-color-text-secondary);
transition: all 0.15s ease; transition: all 0.15s ease;
} }
.language-button:hover { .language-button:hover {
background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 15%)')}; background: var(--dees-color-hover);
} }
.language-dropdown { .language-dropdown {
@@ -159,8 +159,8 @@ export class DeesInputCode extends DeesInputBase<string> {
top: 100%; top: 100%;
left: 0; left: 0;
margin-top: 4px; margin-top: 4px;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; background: var(--dees-color-bg-primary);
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 20%)')}; border: 1px solid var(--dees-color-border-default);
border-radius: 6px; border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 100; z-index: 100;
@@ -173,16 +173,16 @@ export class DeesInputCode extends DeesInputBase<string> {
padding: 8px 12px; padding: 8px 12px;
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')}; color: var(--dees-color-text-secondary);
transition: background 0.15s ease; transition: background 0.15s ease;
} }
.language-option:hover { .language-option:hover {
background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 15%)')}; background: var(--dees-color-hover);
} }
.language-option.selected { .language-option.selected {
background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 20%)')}; background: var(--dees-color-active);
} }
.toolbar-button { .toolbar-button {
@@ -195,18 +195,18 @@ export class DeesInputCode extends DeesInputBase<string> {
border: none; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 60%)')}; color: var(--dees-color-text-muted);
transition: all 0.15s ease; transition: all 0.15s ease;
} }
.toolbar-button:hover { .toolbar-button:hover {
background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 15%)')}; background: var(--dees-color-hover);
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')}; color: var(--dees-color-text-secondary);
} }
.toolbar-button.active { .toolbar-button.active {
background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')}; background: var(--dees-color-active);
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')}; color: var(--dees-color-text-secondary);
} }
.toolbar-button.success { .toolbar-button.success {
@@ -226,7 +226,7 @@ export class DeesInputCode extends DeesInputBase<string> {
.toolbar-divider { .toolbar-divider {
width: 1px; width: 1px;
height: 20px; height: 20px;
background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')}; background: var(--dees-color-border-default);
margin: 0 4px; margin: 0 4px;
} }

42
ts_web/elements/00group-input/dees-input-richtext/styles.ts
View File

@@ -1,7 +1,9 @@
import { css, cssManager } from '@design.estate/dees-element'; import { css, cssManager } from '@design.estate/dees-element';
import { DeesInputBase } from '../dees-input-base/dees-input-base.js'; import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
import { themeDefaultStyles } from '../../00theme.js';
export const richtextStyles = [ export const richtextStyles = [
themeDefaultStyles,
...DeesInputBase.baseStyles, ...DeesInputBase.baseStyles,
cssManager.defaultStyles, cssManager.defaultStyles,
css` css`
@@ -20,7 +22,7 @@ export const richtextStyles = [
margin-bottom: 8px; margin-bottom: 8px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')}; color: var(--dees-color-text-primary);
} }
dees-tile { dees-tile {
@@ -28,7 +30,7 @@ export const richtextStyles = [
} }
dees-tile:hover::part(outer) { dees-tile:hover::part(outer) {
border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')}; border-color: var(--dees-color-border-strong);
} }
dees-tile.focused::part(outer) { dees-tile.focused::part(outer) {
@@ -68,8 +70,8 @@ export const richtextStyles = [
} }
.toolbar-button:hover { .toolbar-button:hover {
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')}; background: var(--dees-color-hover);
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')}; color: var(--dees-color-text-primary);
} }
.toolbar-button.active { .toolbar-button.active {
@@ -85,7 +87,7 @@ export const richtextStyles = [
.toolbar-divider { .toolbar-divider {
width: 1px; width: 1px;
height: 24px; height: 24px;
background: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; background: var(--dees-color-border-default);
margin: 0 4px; margin: 0 4px;
} }
@@ -99,7 +101,7 @@ export const richtextStyles = [
.editor-content .ProseMirror { .editor-content .ProseMirror {
outline: none; outline: none;
line-height: 1.6; line-height: 1.6;
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')}; color: var(--dees-color-text-primary);
min-height: 100%; min-height: 100%;
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
@@ -149,7 +151,7 @@ export const richtextStyles = [
} }
.editor-content .ProseMirror blockquote { .editor-content .ProseMirror blockquote {
border-left: 4px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border-left: 4px solid var(--dees-color-border-default);
margin: 1em 0; margin: 1em 0;
padding-left: 1em; padding-left: 1em;
color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')}; color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
@@ -157,12 +159,12 @@ export const richtextStyles = [
} }
.editor-content .ProseMirror code { .editor-content .ProseMirror code {
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')}; background: var(--dees-color-bg-tertiary);
border-radius: 3px; border-radius: 3px;
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
font-family: 'Intel One Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace; font-family: 'Intel One Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
font-size: 0.9em; font-size: 0.9em;
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')}; color: var(--dees-color-text-primary);
} }
.editor-content .ProseMirror pre { .editor-content .ProseMirror pre {
@@ -195,7 +197,7 @@ export const richtextStyles = [
padding: 0 12px; padding: 0 12px;
height: 28px; height: 28px;
font-size: 11px; font-size: 11px;
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')}; color: var(--dees-color-text-muted);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@@ -213,8 +215,8 @@ export const richtextStyles = [
top: 100%; top: 100%;
left: 0; left: 0;
right: 0; right: 0;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; background: var(--dees-color-bg-primary);
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border: 1px solid var(--dees-color-border-default);
border-radius: 6px; border-radius: 6px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
padding: 12px; padding: 12px;
@@ -228,12 +230,12 @@ export const richtextStyles = [
.link-input input { .link-input input {
width: 100%; width: 100%;
padding: 8px 12px; padding: 8px 12px;
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border: 1px solid var(--dees-color-border-default);
border-radius: 6px; border-radius: 6px;
outline: none; outline: none;
font-size: 14px; font-size: 14px;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; background: var(--dees-color-bg-primary);
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')}; color: var(--dees-color-text-primary);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
} }
@@ -250,19 +252,19 @@ export const richtextStyles = [
.link-input-buttons button { .link-input-buttons button {
padding: 6px 12px; padding: 6px 12px;
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border: 1px solid var(--dees-color-border-default);
border-radius: 4px; border-radius: 4px;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; background: var(--dees-color-bg-primary);
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}; color: var(--dees-color-text-muted);
transition: all 0.15s ease; transition: all 0.15s ease;
font-weight: 500; font-weight: 500;
} }
.link-input-buttons button:hover { .link-input-buttons button:hover {
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')}; background: var(--dees-color-hover);
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')}; color: var(--dees-color-text-primary);
} }
.link-input-buttons button.primary { .link-input-buttons button.primary {

12
ts_web/elements/00group-layout/dees-tile/dees-tile.ts
View File

@@ -56,7 +56,7 @@ export class DeesTile extends DeesElement {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: ${cssGeistFontFamily}; font-family: ${cssGeistFontFamily};
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')}; color: var(--dees-color-text-primary);
} }
/* --- The frame --- */ /* --- The frame --- */
@@ -64,8 +64,8 @@ export class DeesTile extends DeesElement {
position: relative; position: relative;
flex: 1; flex: 1;
min-height: 0; min-height: 0;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')}; background: var(--dees-color-bg-primary);
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border: 1px solid var(--dees-color-border-default);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@@ -84,7 +84,7 @@ export class DeesTile extends DeesElement {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
letter-spacing: -0.01em; letter-spacing: -0.01em;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')}; color: var(--dees-color-text-secondary);
} }
/* --- Content: the rounded inset --- */ /* --- Content: the rounded inset --- */
@@ -92,8 +92,8 @@ export class DeesTile extends DeesElement {
flex: 1; flex: 1;
position: relative; position: relative;
border-radius: 8px; border-radius: 8px;
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')}; border-top: 1px solid var(--dees-color-border-subtle);
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')}; border-bottom: 1px solid var(--dees-color-border-subtle);
overflow: hidden; overflow: hidden;
} }

6
ts_web/elements/00group-media/dees-pdf-viewer/styles.ts
View File

@@ -1,6 +1,8 @@
import { css, cssManager } from '@design.estate/dees-element'; import { css, cssManager } from '@design.estate/dees-element';
import { themeDefaultStyles } from '../../00theme.js';
export const viewerStyles = [ export const viewerStyles = [
themeDefaultStyles,
cssManager.defaultStyles, cssManager.defaultStyles,
css` css`
:host { :host {
@@ -369,7 +371,7 @@ export const viewerStyles = [
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 11px; font-size: 11px;
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')}; color: var(--dees-color-text-muted);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
@@ -383,7 +385,7 @@ export const viewerStyles = [
.pdf-footer-left .pdf-footer-item + .pdf-footer-item { .pdf-footer-left .pdf-footer-item + .pdf-footer-item {
padding-left: 12px; padding-left: 12px;
border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border-left: 1px solid var(--dees-color-border-default);
} }
.pdf-footer-center { .pdf-footer-center {

20
ts_web/elements/00group-overlay/dees-modal/dees-modal.ts
View File

@@ -129,7 +129,7 @@ export class DeesModal extends DeesElement {
/* TODO: Migrate hardcoded values to --dees-* CSS variables */ /* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host { :host {
font-family: ${cssGeistFontFamily}; font-family: ${cssGeistFontFamily};
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')}; color: var(--dees-color-text-primary);
} }
.modalContainer { .modalContainer {
display: flex; display: flex;
@@ -231,7 +231,7 @@ export class DeesModal extends DeesElement {
font-weight: 500; font-weight: 500;
font-size: 13px; font-size: 13px;
letter-spacing: -0.01em; letter-spacing: -0.01em;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')}; color: var(--dees-color-text-secondary);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -255,12 +255,12 @@ export class DeesModal extends DeesElement {
cursor: pointer; cursor: pointer;
transition: all 0.15s ease; transition: all 0.15s ease;
background: transparent; background: transparent;
color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 45%)')}; color: var(--dees-color-text-muted);
} }
.heading .header-button:hover { .heading .header-button:hover {
background: ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 12%)')}; background: var(--dees-color-hover);
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')}; color: var(--dees-color-text-secondary);
} }
.heading .header-button:active { .heading .header-button:active {
@@ -278,7 +278,7 @@ export class DeesModal extends DeesElement {
overflow-x: hidden; overflow-x: hidden;
overscroll-behavior: contain; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')} transparent; scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
} }
.bottomButtons { .bottomButtons {
display: flex; display: flex;
@@ -302,8 +302,8 @@ export class DeesModal extends DeesElement {
transition: all 0.15s ease; transition: all 0.15s ease;
background: transparent; background: transparent;
border: none; border: none;
border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')}; border-left: 1px solid var(--dees-color-border-subtle);
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')}; color: var(--dees-color-text-muted);
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -314,8 +314,8 @@ export class DeesModal extends DeesElement {
} }
.bottomButtons .bottomButton:hover { .bottomButtons .bottomButton:hover {
background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 10%)')}; background: var(--dees-color-hover);
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')}; color: var(--dees-color-text-primary);
} }
.bottomButtons .bottomButton:active { .bottomButtons .bottomButton:active {

6
ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.ts
View File

@@ -67,7 +67,7 @@ export class DeesShoppingProductcard extends DeesElement {
} }
dees-tile:hover::part(outer) { dees-tile:hover::part(outer) {
border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')}; border-color: var(--dees-color-border-strong);
box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1); box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
} }
@@ -148,7 +148,7 @@ export class DeesShoppingProductcard extends DeesElement {
.product-name { .product-name {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')}; color: var(--dees-color-text-secondary);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -204,7 +204,7 @@ export class DeesShoppingProductcard extends DeesElement {
.price-current { .price-current {
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')}; color: var(--dees-color-text-primary);
} }
.price-original { .price-original {

10
ts_web/elements/00group-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts
View File

@@ -81,15 +81,15 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
height: 32px; height: 32px;
font-size: 12px; font-size: 12px;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace; font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')}; color: var(--dees-color-text-muted);
} }
.terminal-header-icon { .terminal-header-icon {
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')}; color: var(--dees-color-text-muted);
} }
.terminal-header-command { .terminal-header-command {
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')}; color: var(--dees-color-text-secondary);
font-weight: 500; font-weight: 500;
} }
@@ -243,12 +243,12 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
} }
.xterm .xterm-viewport::-webkit-scrollbar-thumb { .xterm .xterm-viewport::-webkit-scrollbar-thumb {
background: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 25%)')}; background: var(--dees-color-scrollbar-thumb);
border-radius: 4px; border-radius: 4px;
} }
.xterm .xterm-viewport::-webkit-scrollbar-thumb:hover { .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
background: ${cssManager.bdTheme('hsl(0 0% 70%)', 'hsl(0 0% 35%)')}; background: var(--dees-color-scrollbar-thumb-hover);
} }
`, `,
]; ];