From 4d192654df4227ae7d2bf6a8f40475c44268e7f9 Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Sun, 4 Jan 2026 09:21:02 +0000 Subject: [PATCH] fix(dees-statsgrid): refine spacing, sizing, and colors in dees-statsgrid for a tighter, more compact appearance --- changelog.md | 10 +++ ts_web/00_commitinfo_data.ts | 2 +- .../elements/dees-statsgrid/dees-statsgrid.ts | 68 +++++++++---------- 3 files changed, 45 insertions(+), 35 deletions(-) diff --git a/changelog.md b/changelog.md index e1e4a37..a915d05 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,15 @@ # 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) add dees-appui-bottombar component with config, programmatic API, demo and docs diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index e482ab8..1a141d1 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { 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.' } diff --git a/ts_web/elements/dees-statsgrid/dees-statsgrid.ts b/ts_web/elements/dees-statsgrid/dees-statsgrid.ts index f76d8ca..d01f838 100644 --- a/ts_web/elements/dees-statsgrid/dees-statsgrid.ts +++ b/ts_web/elements/dees-statsgrid/dees-statsgrid.ts @@ -88,16 +88,16 @@ export class DeesStatsGrid extends DeesElement { /* CSS Variables for consistent spacing and sizing */ :host { - --grid-gap: 16px; - --tile-padding: 24px; - --header-spacing: 16px; - --content-min-height: 48px; - --value-font-size: 30px; - --unit-font-size: 16px; - --label-font-size: 13px; - --title-font-size: 14px; - --description-spacing: 12px; - --border-radius: 8px; + --grid-gap: 12px; + --tile-padding: 16px; + --header-spacing: 12px; + --content-min-height: 40px; + --value-font-size: 26px; + --unit-font-size: 14px; + --label-font-size: 12px; + --title-font-size: 13px; + --description-spacing: 8px; + --border-radius: 6px; --transition-duration: 0.15s; } @@ -136,7 +136,7 @@ export class DeesStatsGrid extends DeesElement { /* Tile Base Styles */ .stats-tile { 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); padding: var(--tile-padding); transition: all var(--transition-duration) ease; @@ -148,8 +148,8 @@ export class DeesStatsGrid extends DeesElement { } .stats-tile:hover { - background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 10.2%)')}; - border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 85%)', 'hsl(215 20.2% 16.8%)')}; + background: ${cssManager.bdTheme('#fafafa', '#0d0d0d')}; + border-color: ${cssManager.bdTheme('#d0d0d0', '#2a2a2a')}; } .stats-tile.clickable { @@ -158,7 +158,7 @@ export class DeesStatsGrid extends DeesElement { .stats-tile.clickable:hover { 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 */ @@ -230,10 +230,10 @@ export class DeesStatsGrid extends DeesElement { } .gauge-container { - width: 140px; - height: 80px; + width: 120px; + height: 70px; position: relative; - margin-top: -10px; + margin-top: -8px; } .gauge-svg { @@ -243,13 +243,13 @@ export class DeesStatsGrid extends DeesElement { .gauge-background { fill: none; - stroke: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 21.8%)')}; - stroke-width: 8; + stroke: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')}; + stroke-width: 6; } .gauge-fill { fill: none; - stroke-width: 8; + stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1); } @@ -287,17 +287,17 @@ export class DeesStatsGrid extends DeesElement { .percentage-bar { width: 100%; - height: 8px; - background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 21.8%)')}; - border-radius: 4px; + height: 6px; + background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')}; + border-radius: 3px; overflow: hidden; } .percentage-fill { 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); - border-radius: 4px; + border-radius: 3px; } /* Trend Styles */ @@ -339,7 +339,7 @@ export class DeesStatsGrid extends DeesElement { .trend-graph { width: 100%; - height: 32px; + height: 28px; position: relative; } @@ -351,14 +351,14 @@ export class DeesStatsGrid extends DeesElement { .trend-line { fill: none; - stroke: ${cssManager.bdTheme('hsl(215.4 16.3% 66.9%)', 'hsl(215 20.2% 55.1%)')}; - stroke-width: 2; + stroke: ${cssManager.bdTheme('#999999', '#666666')}; + stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } .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 */ @@ -480,13 +480,13 @@ export class DeesStatsGrid extends DeesElement { const value = typeof tile.value === 'number' ? tile.value : parseFloat(tile.value); const options = tile.gaugeOptions || { min: 0, max: 100 }; const percentage = ((value - options.min) / (options.max - options.min)) * 100; - + // SVG dimensions and calculations - const width = 140; - const height = 80; - const strokeWidth = 8; + const width = 120; + const height = 70; + const strokeWidth = 6; const padding = strokeWidth / 2 + 2; - const radius = 48; + const radius = 40; const centerX = width / 2; const centerY = height - padding;