From efd142d63d8169ad41983c8f6191808184c5fa1a Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Mon, 14 Jul 2025 15:07:39 +0000 Subject: [PATCH] update --- ts_web/elements/00colors.ts | 86 +++++++-------- ts_web/elements/00tokens.ts | 24 ++--- ts_web/elements/sio-button.ts | 35 ++++--- ts_web/elements/sio-combox.ts | 17 ++- ts_web/elements/sio-conversation-selector.ts | 105 ++++++++++++++----- ts_web/elements/sio-conversation-view.ts | 70 ++++++++----- 6 files changed, 217 insertions(+), 120 deletions(-) diff --git a/ts_web/elements/00colors.ts b/ts_web/elements/00colors.ts index 7663b5d..df7b42d 100644 --- a/ts_web/elements/00colors.ts +++ b/ts_web/elements/00colors.ts @@ -1,27 +1,27 @@ import { cssManager } from '@design.estate/dees-element'; export const colors = { - // Background colors + // Background colors - softer, more subtle background: { light: 'hsl(0 0% 100%)', - dark: 'hsl(0 0% 3.9%)' + dark: 'hsl(224 71.4% 4.1%)' }, - // Foreground colors + // Foreground colors - less contrast for modern look foreground: { - light: 'hsl(222.2 84% 4.9%)', - dark: 'hsl(210 40% 98%)' + light: 'hsl(224 71.4% 4.1%)', + dark: 'hsl(210 20% 98%)' }, - // Card colors + // Card colors - subtle elevation card: { light: 'hsl(0 0% 100%)', - dark: 'hsl(222.2 84% 4.9%)' + dark: 'hsl(224 71.4% 4.1%)' }, cardForeground: { - light: 'hsl(222.2 84% 4.9%)', - dark: 'hsl(210 40% 98%)' + light: 'hsl(224 71.4% 4.1%)', + dark: 'hsl(210 20% 98%)' }, // Popover colors @@ -35,65 +35,65 @@ export const colors = { dark: 'hsl(210 40% 98%)' }, - // Primary colors + // Primary colors - modern indigo/blue primary: { - light: 'hsl(222.2 47.4% 11.2%)', - dark: 'hsl(210 40% 98%)' + light: 'hsl(221.2 83.2% 53.3%)', + dark: 'hsl(217.2 91.2% 59.8%)' }, primaryForeground: { - light: 'hsl(210 40% 98%)', - dark: 'hsl(222.2 47.4% 11.2%)' + light: 'hsl(210 20% 98%)', + dark: 'hsl(224 71.4% 4.1%)' }, - // Secondary colors + // Secondary colors - more subtle secondary: { - light: 'hsl(210 40% 96.1%)', - dark: 'hsl(217.2 32.6% 17.5%)' + light: 'hsl(220 14.3% 95.9%)', + dark: 'hsl(215 27.9% 16.9%)' }, secondaryForeground: { - light: 'hsl(222.2 47.4% 11.2%)', - dark: 'hsl(210 40% 98%)' + light: 'hsl(220.9 39.3% 11%)', + dark: 'hsl(210 20% 98%)' }, - // Muted colors + // Muted colors - softer grays muted: { - light: 'hsl(210 40% 96.1%)', - dark: 'hsl(217.2 32.6% 17.5%)' + light: 'hsl(220 14.3% 95.9%)', + dark: 'hsl(215 27.9% 16.9%)' }, mutedForeground: { - light: 'hsl(215.4 16.3% 46.9%)', - dark: 'hsl(215 20.2% 65.1%)' + light: 'hsl(220 8.9% 46.1%)', + dark: 'hsl(217.9 10.6% 64.9%)' }, - // Accent colors + // Accent colors - subtle hover states accent: { - light: 'hsl(210 40% 96.1%)', - dark: 'hsl(217.2 32.6% 17.5%)' + light: 'hsl(220 14.3% 95.9%)', + dark: 'hsl(215 27.9% 16.9%)' }, accentForeground: { - light: 'hsl(222.2 47.4% 11.2%)', - dark: 'hsl(210 40% 98%)' + light: 'hsl(220.9 39.3% 11%)', + dark: 'hsl(210 20% 98%)' }, - // Destructive colors + // Destructive colors - softer red destructive: { - light: 'hsl(0 84.2% 60.2%)', + light: 'hsl(0 72.2% 50.6%)', dark: 'hsl(0 62.8% 30.6%)' }, destructiveForeground: { - light: 'hsl(210 40% 98%)', - dark: 'hsl(210 40% 98%)' + light: 'hsl(0 0% 98%)', + dark: 'hsl(0 0% 98%)' }, - // Border color + // Border color - very subtle border: { - light: 'hsl(214.3 31.8% 91.4%)', - dark: 'hsl(217.2 32.6% 17.5%)' + light: 'hsl(220 13% 91%)', + dark: 'hsl(215 27.9% 16.9%)' }, // Input color @@ -102,21 +102,21 @@ export const colors = { dark: 'hsl(217.2 32.6% 17.5%)' }, - // Ring color + // Ring color - subtle focus indicator ring: { - light: 'hsl(222.2 84% 4.9%)', - dark: 'hsl(212.7 26.8% 83.9%)' + light: 'hsl(221.2 83.2% 53.3%)', + dark: 'hsl(217.2 91.2% 59.8%)' }, - // Success colors + // Success colors - modern green success: { - light: 'hsl(142 76% 36%)', - dark: 'hsl(142 70% 45%)' + light: 'hsl(142.1 70.6% 45.3%)', + dark: 'hsl(144.9 80.4% 10%)' }, successForeground: { light: 'hsl(0 0% 100%)', - dark: 'hsl(0 0% 100%)' + dark: 'hsl(144.9 80.4% 80%)' }, // Chart colors diff --git a/ts_web/elements/00tokens.ts b/ts_web/elements/00tokens.ts index dbbb0ac..db85c13 100644 --- a/ts_web/elements/00tokens.ts +++ b/ts_web/elements/00tokens.ts @@ -52,24 +52,24 @@ export const radius = { full: '9999px' }; -// Box shadows +// Box shadows - more subtle for modern look export const shadows = { none: 'none', - sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)', - DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)', - md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)', - lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)', - xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)', - '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)', - inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)', + sm: '0 1px 2px 0 rgb(0 0 0 / 0.03)', + DEFAULT: '0 2px 8px -2px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.04)', + md: '0 4px 12px -4px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.04)', + lg: '0 8px 24px -4px rgb(0 0 0 / 0.1), 0 2px 8px -2px rgb(0 0 0 / 0.04)', + xl: '0 24px 48px -12px rgb(0 0 0 / 0.18)', + '2xl': '0 32px 64px -12px rgb(0 0 0 / 0.14)', + inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.03)', // Theme-aware shadows card: cssManager.bdTheme( - '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)', - '0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3)' + '0 2px 8px -2px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.04)', + '0 2px 8px -2px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2)' ), dropdown: cssManager.bdTheme( - '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)', - '0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.2)' + '0 8px 24px -4px rgb(0 0 0 / 0.1), 0 2px 8px -2px rgb(0 0 0 / 0.04)', + '0 8px 24px -4px rgb(0 0 0 / 0.3), 0 2px 8px -2px rgb(0 0 0 / 0.2)' ) }; diff --git a/ts_web/elements/sio-button.ts b/ts_web/elements/sio-button.ts index 19a512f..93ef19e 100644 --- a/ts_web/elements/sio-button.ts +++ b/ts_web/elements/sio-button.ts @@ -75,7 +75,7 @@ export class SioButton extends DeesElement { user-select: none; outline: none; border: 1px solid transparent; - gap: ${unsafeCSS(spacing[2])}; + gap: ${unsafeCSS(spacing["2"])}; font-size: 0.875rem; line-height: 1.5; } @@ -83,49 +83,57 @@ export class SioButton extends DeesElement { /* Size variants */ .button.size-sm { height: 32px; - padding: 0 ${unsafeCSS(spacing[3])}; + padding: 0 ${unsafeCSS(spacing["3"])}; font-size: 13px; } .button.size-default { height: 36px; - padding: 0 ${unsafeCSS(spacing[4])}; + padding: 0 ${unsafeCSS(spacing["4"])}; font-size: 14px; } .button.size-lg { height: 44px; - padding: 0 ${unsafeCSS(spacing[6])}; + padding: 0 ${unsafeCSS(spacing["6"])}; font-size: 16px; } /* Type variants */ .button.default { - background: ${bdTheme('secondary')}; - color: ${bdTheme('secondaryForeground')}; + background: ${bdTheme('background')}; + color: ${bdTheme('foreground')}; border-color: ${bdTheme('border')}; + box-shadow: ${unsafeCSS(shadows.sm)}; } .button.default:hover:not(.disabled) { - background: ${bdTheme('secondary')}; - opacity: 0.8; + background: ${bdTheme('accent')}; + border-color: ${bdTheme('accent')}; + transform: translateY(-1px); + box-shadow: ${unsafeCSS(shadows.md)}; } .button.default:active:not(.disabled) { - transform: translateY(1px); + transform: translateY(0); + box-shadow: ${unsafeCSS(shadows.sm)}; } .button.primary { background: ${bdTheme('primary')}; color: ${bdTheme('primaryForeground')}; + box-shadow: ${unsafeCSS(shadows.sm)}; } .button.primary:hover:not(.disabled) { opacity: 0.9; + transform: translateY(-1px); + box-shadow: ${unsafeCSS(shadows.md)}; } .button.primary:active:not(.disabled) { - transform: translateY(1px); + transform: translateY(0); + box-shadow: ${unsafeCSS(shadows.sm)}; } .button.destructive { @@ -159,15 +167,18 @@ export class SioButton extends DeesElement { .button.ghost { background: transparent; color: ${bdTheme('foreground')}; + border-color: transparent; } .button.ghost:hover:not(.disabled) { background: ${bdTheme('accent')}; color: ${bdTheme('accentForeground')}; + border-color: transparent; } .button.ghost:active:not(.disabled) { - transform: translateY(1px); + background: ${bdTheme('accent')}; + opacity: 0.8; } /* Status states */ @@ -178,7 +189,7 @@ export class SioButton extends DeesElement { .spinner { position: absolute; - left: ${unsafeCSS(spacing[3])}; + left: ${unsafeCSS(spacing["3"])}; animation: spin 1s linear infinite; } diff --git a/ts_web/elements/sio-combox.ts b/ts_web/elements/sio-combox.ts index ec6b46b..5d5e8aa 100644 --- a/ts_web/elements/sio-combox.ts +++ b/ts_web/elements/sio-combox.ts @@ -107,11 +107,26 @@ export class SioCombox extends DeesElement { height: 600px; width: 800px; background: ${bdTheme('background')}; - border-radius: ${unsafeCSS(radius.xl)}; + border-radius: ${unsafeCSS(radius['2xl'])}; border: 1px solid ${bdTheme('border')}; box-shadow: ${unsafeCSS(shadows.xl)}; overflow: hidden; font-family: ${unsafeCSS(fontFamilies.sans)}; + position: relative; + } + + :host::before { + content: ''; + position: absolute; + inset: 0; + border-radius: ${unsafeCSS(radius['2xl'])}; + padding: 1px; + background: linear-gradient(145deg, ${bdTheme('border')}, transparent 50%); + -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + -webkit-mask-composite: exclude; + mask-composite: exclude; + opacity: 0.5; + pointer-events: none; } .container { diff --git a/ts_web/elements/sio-conversation-selector.ts b/ts_web/elements/sio-conversation-selector.ts index 71cd554..63ea653 100644 --- a/ts_web/elements/sio-conversation-selector.ts +++ b/ts_web/elements/sio-conversation-selector.ts @@ -59,16 +59,18 @@ export class SioConversationSelector extends DeesElement { } .header { - padding: ${unsafeCSS(spacing[4])}; + padding: ${unsafeCSS(spacing["5"])} ${unsafeCSS(spacing["4"])}; border-bottom: 1px solid ${bdTheme('border')}; + background: ${bdTheme('background')}; } .title { - font-size: 1.125rem; - line-height: 1.5; + font-size: 1.25rem; + line-height: 1.2; font-weight: 600; - margin: 0 0 ${unsafeCSS(spacing[3])} 0; + margin: 0 0 ${unsafeCSS(spacing["4"])} 0; color: ${bdTheme('foreground')}; + letter-spacing: -0.025em; } .search-box { @@ -77,29 +79,32 @@ export class SioConversationSelector extends DeesElement { .search-input { width: 100%; - padding: ${unsafeCSS(spacing[2])} ${unsafeCSS(spacing[10])} ${unsafeCSS(spacing[2])} ${unsafeCSS(spacing[3])}; - background: ${bdTheme('muted')}; + padding: ${unsafeCSS(spacing["2.5"])} ${unsafeCSS(spacing["10"])} ${unsafeCSS(spacing["2.5"])} ${unsafeCSS(spacing["3"])}; + background: ${bdTheme('background')}; border: 1px solid ${bdTheme('border')}; - border-radius: ${unsafeCSS(radius.md)}; - font-size: 14px; + border-radius: ${unsafeCSS(radius.lg)}; + font-size: 0.875rem; color: ${bdTheme('foreground')}; outline: none; transition: ${unsafeCSS(transitions.all)}; font-family: ${unsafeCSS(fontFamilies.sans)}; + box-shadow: ${unsafeCSS(shadows.sm)}; } .search-input::placeholder { color: ${bdTheme('mutedForeground')}; + font-weight: 400; } .search-input:focus { - background: ${bdTheme('background')}; border-color: ${bdTheme('ring')}; + box-shadow: 0 0 0 3px ${bdTheme('ring')}20; + background: ${bdTheme('background')}; } .search-icon { position: absolute; - right: ${unsafeCSS(spacing[3])}; + right: ${unsafeCSS(spacing["3"])}; top: 50%; transform: translateY(-50%); color: ${bdTheme('mutedForeground')}; @@ -108,64 +113,116 @@ export class SioConversationSelector extends DeesElement { .conversation-list { flex: 1; overflow-y: auto; - padding: ${unsafeCSS(spacing[2])}; + padding: ${unsafeCSS(spacing["2"])}; } .conversation-item { - padding: ${unsafeCSS(spacing[3])}; - margin-bottom: ${unsafeCSS(spacing[2])}; + padding: ${unsafeCSS(spacing["3.5"])}; + margin-bottom: ${unsafeCSS(spacing["1.5"])}; background: ${bdTheme('background')}; - border: 1px solid ${bdTheme('border')}; - border-radius: ${unsafeCSS(radius.md)}; + border: 1px solid transparent; + border-radius: ${unsafeCSS(radius.lg)}; cursor: pointer; transition: ${unsafeCSS(transitions.all)}; + position: relative; } .conversation-item:hover { background: ${bdTheme('accent')}; + transform: translateX(2px); + box-shadow: ${unsafeCSS(shadows.sm)}; } .conversation-item.selected { background: ${bdTheme('accent')}; - border-color: ${bdTheme('primary')}; + border-color: ${bdTheme('border')}; + box-shadow: ${unsafeCSS(shadows.sm)}; + } + + .conversation-item.selected::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 3px; + height: 60%; + background: ${bdTheme('primary')}; + border-radius: 0 3px 3px 0; + animation: slideIn 200ms ease-out; + } + + @keyframes slideIn { + from { + width: 0; + opacity: 0; + } + to { + width: 3px; + opacity: 1; + } } .conversation-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: ${unsafeCSS(spacing[1])}; + margin-bottom: ${unsafeCSS(spacing["1"])}; } .conversation-title { - font-weight: 600; + font-weight: 500; color: ${bdTheme('foreground')}; display: flex; align-items: center; - gap: ${unsafeCSS(spacing[2])}; + gap: ${unsafeCSS(spacing["2"])}; + font-size: 0.9375rem; + letter-spacing: -0.01em; } .conversation-time { font-size: 0.75rem; line-height: 1.5; color: ${bdTheme('mutedForeground')}; + opacity: 0.8; } .conversation-preview { - font-size: 0.875rem; + font-size: 0.8125rem; line-height: 1.5; color: ${bdTheme('mutedForeground')}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + margin-top: ${unsafeCSS(spacing["0.5"])}; } .unread-dot { display: inline-block; - width: 8px; - height: 8px; + width: 6px; + height: 6px; background: ${bdTheme('primary')}; border-radius: 50%; + animation: pulse 2s ease-in-out infinite; + box-shadow: 0 0 0 0 ${bdTheme('primary')}; + } + + @keyframes pulse { + 0% { + opacity: 1; + transform: scale(1); + box-shadow: 0 0 0 0 ${bdTheme('primary')}40; + } + 50% { + opacity: 0.9; + transform: scale(1.05); + box-shadow: 0 0 0 4px ${bdTheme('primary')}00; + } + 100% { + opacity: 1; + transform: scale(1); + box-shadow: 0 0 0 0 ${bdTheme('primary')}00; + } } .empty-state { @@ -174,10 +231,10 @@ export class SioConversationSelector extends DeesElement { align-items: center; justify-content: center; height: 100%; - padding: ${unsafeCSS(spacing[4])}; + padding: ${unsafeCSS(spacing["4"])}; text-align: center; color: ${bdTheme('mutedForeground')}; - gap: ${unsafeCSS(spacing[3])}; + gap: ${unsafeCSS(spacing["3"])}; } .empty-icon { diff --git a/ts_web/elements/sio-conversation-view.ts b/ts_web/elements/sio-conversation-view.ts index b0e4599..46ddcb8 100644 --- a/ts_web/elements/sio-conversation-view.ts +++ b/ts_web/elements/sio-conversation-view.ts @@ -63,12 +63,17 @@ export class SioConversationView extends DeesElement { } .header { - padding: ${unsafeCSS(spacing[4])}; + padding: ${unsafeCSS(spacing["4"])}; border-bottom: 1px solid ${bdTheme('border')}; - background: ${bdTheme('card')}; + background: ${bdTheme('background')}; display: flex; align-items: center; - gap: ${unsafeCSS(spacing[3])}; + gap: ${unsafeCSS(spacing["3"])}; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + position: sticky; + top: 0; + z-index: 10; } .back-button { @@ -92,22 +97,22 @@ export class SioConversationView extends DeesElement { .header-actions { display: flex; - gap: ${unsafeCSS(spacing[2])}; + gap: ${unsafeCSS(spacing["2"])}; } .messages-container { flex: 1; overflow-y: auto; - padding: ${unsafeCSS(spacing[4])}; + padding: ${unsafeCSS(spacing["4"])}; display: flex; flex-direction: column; - gap: ${unsafeCSS(spacing[3])}; + gap: ${unsafeCSS(spacing["3"])}; } .message { display: flex; align-items: flex-start; - gap: ${unsafeCSS(spacing[3])}; + gap: ${unsafeCSS(spacing["3"])}; max-width: 70%; } @@ -117,30 +122,34 @@ export class SioConversationView extends DeesElement { } .message-bubble { - padding: ${unsafeCSS(spacing[3])}; - border-radius: ${unsafeCSS(radius.lg)}; - font-size: 0.875rem; - line-height: 1.5; + padding: ${unsafeCSS(spacing["2.5"])} ${unsafeCSS(spacing["3.5"])}; + border-radius: ${unsafeCSS(radius["2xl"])}; + font-size: 0.9375rem; + line-height: 1.6; position: relative; + box-shadow: ${unsafeCSS(shadows.sm)}; + max-width: 100%; + word-wrap: break-word; } .message.support .message-bubble { - background: ${bdTheme('muted')}; - color: ${bdTheme('foreground')}; - border-bottom-left-radius: ${unsafeCSS(spacing[1])}; + background: ${bdTheme('secondary')}; + color: ${bdTheme('secondaryForeground')}; + border-bottom-left-radius: ${unsafeCSS(spacing["1"])}; + border: 1px solid ${bdTheme('border')}; } .message.user .message-bubble { background: ${bdTheme('primary')}; color: ${bdTheme('primaryForeground')}; - border-bottom-right-radius: ${unsafeCSS(spacing[1])}; + border-bottom-right-radius: ${unsafeCSS(spacing["1"])}; } .message-time { font-size: 0.75rem; line-height: 1.5; color: ${bdTheme('mutedForeground')}; - margin-top: ${unsafeCSS(spacing[1])}; + margin-top: ${unsafeCSS(spacing["1"])}; } .message.user .message-time { @@ -150,8 +159,8 @@ export class SioConversationView extends DeesElement { .typing-indicator { display: flex; align-items: center; - gap: ${unsafeCSS(spacing[1])}; - padding: ${unsafeCSS(spacing[2])} ${unsafeCSS(spacing[3])}; + gap: ${unsafeCSS(spacing["1"])}; + padding: ${unsafeCSS(spacing["2"])} ${unsafeCSS(spacing["3"])}; background: ${bdTheme('muted')}; border-radius: ${unsafeCSS(radius.lg)}; width: fit-content; @@ -185,26 +194,28 @@ export class SioConversationView extends DeesElement { } .input-container { - padding: ${unsafeCSS(spacing[4])}; + padding: ${unsafeCSS(spacing["4"])}; border-top: 1px solid ${bdTheme('border')}; - background: ${bdTheme('card')}; + background: ${bdTheme('background')}; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); } .input-wrapper { display: flex; - gap: ${unsafeCSS(spacing[2])}; + gap: ${unsafeCSS(spacing["2"])}; align-items: flex-end; } .message-input { flex: 1; - min-height: 40px; + min-height: 42px; max-height: 120px; - padding: ${unsafeCSS(spacing[2])} ${unsafeCSS(spacing[3])}; - background: ${bdTheme('background')}; + padding: ${unsafeCSS(spacing["2.5"])} ${unsafeCSS(spacing[3])}; + background: ${bdTheme('secondary')}; border: 1px solid ${bdTheme('border')}; - border-radius: ${unsafeCSS(radius.md)}; - font-size: 14px; + border-radius: ${unsafeCSS(radius.xl)}; + font-size: 0.9375rem; color: ${bdTheme('foreground')}; outline: none; resize: none; @@ -215,15 +226,18 @@ export class SioConversationView extends DeesElement { .message-input::placeholder { color: ${bdTheme('mutedForeground')}; + font-size: 0.875rem; } .message-input:focus { border-color: ${bdTheme('ring')}; + background: ${bdTheme('background')}; + box-shadow: 0 0 0 3px ${bdTheme('ring')}15; } .input-actions { display: flex; - gap: ${unsafeCSS(spacing[1])}; + gap: ${unsafeCSS(spacing["1"])}; } .empty-state { @@ -233,7 +247,7 @@ export class SioConversationView extends DeesElement { justify-content: center; flex-direction: column; gap: ${unsafeCSS(spacing[4])}; - padding: ${unsafeCSS(spacing[8])}; + padding: ${unsafeCSS(spacing["8"])}; text-align: center; color: ${bdTheme('mutedForeground')}; }