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

fix(dees-statsgrid): refine spacing, sizing, and colors in dees-statsgrid for a tighter, more compact appearance

Browse Source
This commit is contained in:
Jürgen Kunz
2026-01-04 09:21:02 +00:00
parent a634c2e237
commit 4d192654df
3 changed files with 45 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
changelog.md
View File

@@ -1,5 +1,15 @@
# Changelog # Changelog
## 2026-01-04 - 3.30.1 - fix(dees-statsgrid)
refine spacing, sizing, and colors in dees-statsgrid for a tighter, more compact appearance
- Reduce global spacing and sizing variables (grid-gap 16→12, tile-padding 24→16, header-spacing 16→12, content-min-height 48→40, description-spacing 12→8, border-radius 8→6).
- Adjust typographic scale (value-font-size 30→26, unit-font-size 16→14, label-font-size 13→12, title-font-size 14→13).
- Switch color tokens to neutral hex values and tighten hover/box-shadow (tile border and backgrounds updated from HSL to hex, hover bg to #fafafa/#0d0d0d, border-color and shadow reduced).
- Downsize graphical elements: gauge and SVG dimensions (width 140→120, height 80→70), stroke-widths 8→6, radius 48→40.
- Slim down percentage bar and trend visuals (percentage bar height 8→6, border-radius 4→3, trend stroke-width 2→1.5, trend fill moved to RGBA).
- No functional or API changes — purely visual/CSS and SVG adjustments.
## 2026-01-03 - 3.30.0 - feat(appui) ## 2026-01-03 - 3.30.0 - feat(appui)
add dees-appui-bottombar component with config, programmatic API, demo and docs add dees-appui-bottombar component with config, programmatic API, demo and docs

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.30.0', version: '3.30.1',
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.'
} }

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

@@ -88,16 +88,16 @@ export class DeesStatsGrid extends DeesElement {
/* CSS Variables for consistent spacing and sizing */ /* CSS Variables for consistent spacing and sizing */
:host { :host {
--grid-gap: 16px; --grid-gap: 12px;
--tile-padding: 24px; --tile-padding: 16px;
--header-spacing: 16px; --header-spacing: 12px;
--content-min-height: 48px; --content-min-height: 40px;
--value-font-size: 30px; --value-font-size: 26px;
--unit-font-size: 16px; --unit-font-size: 14px;
--label-font-size: 13px; --label-font-size: 12px;
--title-font-size: 14px; --title-font-size: 13px;
--description-spacing: 12px; --description-spacing: 8px;
--border-radius: 8px; --border-radius: 6px;
--transition-duration: 0.15s; --transition-duration: 0.15s;
} }
@@ -136,7 +136,7 @@ export class DeesStatsGrid extends DeesElement {
/* Tile Base Styles */ /* Tile Base Styles */
.stats-tile { .stats-tile {
background: ${cssManager.bdTheme('#ffffff', '#09090b')}; background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 11.8%)')}; border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: var(--tile-padding); padding: var(--tile-padding);
transition: all var(--transition-duration) ease; transition: all var(--transition-duration) ease;
@@ -148,8 +148,8 @@ export class DeesStatsGrid extends DeesElement {
} }
.stats-tile:hover { .stats-tile:hover {
background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 10.2%)')}; background: ${cssManager.bdTheme('#fafafa', '#0d0d0d')};
border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 85%)', 'hsl(215 20.2% 16.8%)')}; border-color: ${cssManager.bdTheme('#d0d0d0', '#2a2a2a')};
} }
.stats-tile.clickable { .stats-tile.clickable {
@@ -158,7 +158,7 @@ export class DeesStatsGrid extends DeesElement {
.stats-tile.clickable:hover { .stats-tile.clickable:hover {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 2px 8px ${cssManager.bdTheme('rgba(0,0,0,0.04)', 'rgba(0,0,0,0.2)')}; box-shadow: 0 2px 6px ${cssManager.bdTheme('rgba(0,0,0,0.03)', 'rgba(0,0,0,0.15)')};
} }
/* Tile Header */ /* Tile Header */
@@ -230,10 +230,10 @@ export class DeesStatsGrid extends DeesElement {
} }
.gauge-container { .gauge-container {
width: 140px; width: 120px;
height: 80px; height: 70px;
position: relative; position: relative;
margin-top: -10px; margin-top: -8px;
} }
.gauge-svg { .gauge-svg {
@@ -243,13 +243,13 @@ export class DeesStatsGrid extends DeesElement {
.gauge-background { .gauge-background {
fill: none; fill: none;
stroke: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 21.8%)')}; stroke: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
stroke-width: 8; stroke-width: 6;
} }
.gauge-fill { .gauge-fill {
fill: none; fill: none;
stroke-width: 8; stroke-width: 6;
stroke-linecap: round; stroke-linecap: round;
transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
} }
@@ -287,17 +287,17 @@ export class DeesStatsGrid extends DeesElement {
.percentage-bar { .percentage-bar {
width: 100%; width: 100%;
height: 8px; height: 6px;
background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 21.8%)')}; background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
border-radius: 4px; border-radius: 3px;
overflow: hidden; overflow: hidden;
} }
.percentage-fill { .percentage-fill {
height: 100%; height: 100%;
background: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')}; background: ${cssManager.bdTheme('#333333', '#e0e0e0')};
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 4px; border-radius: 3px;
} }
/* Trend Styles */ /* Trend Styles */
@@ -339,7 +339,7 @@ export class DeesStatsGrid extends DeesElement {
.trend-graph { .trend-graph {
width: 100%; width: 100%;
height: 32px; height: 28px;
position: relative; position: relative;
} }
@@ -351,14 +351,14 @@ export class DeesStatsGrid extends DeesElement {
.trend-line { .trend-line {
fill: none; fill: none;
stroke: ${cssManager.bdTheme('hsl(215.4 16.3% 66.9%)', 'hsl(215 20.2% 55.1%)')}; stroke: ${cssManager.bdTheme('#999999', '#666666')};
stroke-width: 2; stroke-width: 1.5;
stroke-linejoin: round; stroke-linejoin: round;
stroke-linecap: round; stroke-linecap: round;
} }
.trend-area { .trend-area {
fill: ${cssManager.bdTheme('hsl(215.4 16.3% 66.9% / 0.1)', 'hsl(215 20.2% 55.1% / 0.08)')}; fill: ${cssManager.bdTheme('rgba(150, 150, 150, 0.08)', 'rgba(100, 100, 100, 0.08)')};
} }
/* Text Value Styles */ /* Text Value Styles */
@@ -480,13 +480,13 @@ export class DeesStatsGrid extends DeesElement {
const value = typeof tile.value === 'number' ? tile.value : parseFloat(tile.value); const value = typeof tile.value === 'number' ? tile.value : parseFloat(tile.value);
const options = tile.gaugeOptions || { min: 0, max: 100 }; const options = tile.gaugeOptions || { min: 0, max: 100 };
const percentage = ((value - options.min) / (options.max - options.min)) * 100; const percentage = ((value - options.min) / (options.max - options.min)) * 100;
// SVG dimensions and calculations // SVG dimensions and calculations
const width = 140; const width = 120;
const height = 80; const height = 70;
const strokeWidth = 8; const strokeWidth = 6;
const padding = strokeWidth / 2 + 2; const padding = strokeWidth / 2 + 2;
const radius = 48; const radius = 40;
const centerX = width / 2; const centerX = width / 2;
const centerY = height - padding; const centerY = height - padding;