social.io/catalog
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Jürgen Kunz
2025-07-14 15:07:39 +00:00
parent 9ab16c85ba
commit efd142d63d
6 changed files with 217 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
ts_web/elements/00colors.ts
View File

@@ -1,27 +1,27 @@
import { cssManager } from '@design.estate/dees-element'; import { cssManager } from '@design.estate/dees-element';
export const colors = { export const colors = {
// Background colors // Background colors - softer, more subtle
background: { background: {
light: 'hsl(0 0% 100%)', 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: { foreground: {
light: 'hsl(222.2 84% 4.9%)', light: 'hsl(224 71.4% 4.1%)',
dark: 'hsl(210 40% 98%)' dark: 'hsl(210 20% 98%)'
}, },
// Card colors // Card colors - subtle elevation
card: { card: {
light: 'hsl(0 0% 100%)', light: 'hsl(0 0% 100%)',
dark: 'hsl(222.2 84% 4.9%)' dark: 'hsl(224 71.4% 4.1%)'
}, },
cardForeground: { cardForeground: {
light: 'hsl(222.2 84% 4.9%)', light: 'hsl(224 71.4% 4.1%)',
dark: 'hsl(210 40% 98%)' dark: 'hsl(210 20% 98%)'
}, },
// Popover colors // Popover colors
@@ -35,65 +35,65 @@ export const colors = {
dark: 'hsl(210 40% 98%)' dark: 'hsl(210 40% 98%)'
}, },
// Primary colors // Primary colors - modern indigo/blue
primary: { primary: {
light: 'hsl(222.2 47.4% 11.2%)', light: 'hsl(221.2 83.2% 53.3%)',
dark: 'hsl(210 40% 98%)' dark: 'hsl(217.2 91.2% 59.8%)'
}, },
primaryForeground: { primaryForeground: {
light: 'hsl(210 40% 98%)', light: 'hsl(210 20% 98%)',
dark: 'hsl(222.2 47.4% 11.2%)' dark: 'hsl(224 71.4% 4.1%)'
}, },
// Secondary colors // Secondary colors - more subtle
secondary: { secondary: {
light: 'hsl(210 40% 96.1%)', light: 'hsl(220 14.3% 95.9%)',
dark: 'hsl(217.2 32.6% 17.5%)' dark: 'hsl(215 27.9% 16.9%)'
}, },
secondaryForeground: { secondaryForeground: {
light: 'hsl(222.2 47.4% 11.2%)', light: 'hsl(220.9 39.3% 11%)',
dark: 'hsl(210 40% 98%)' dark: 'hsl(210 20% 98%)'
}, },
// Muted colors // Muted colors - softer grays
muted: { muted: {
light: 'hsl(210 40% 96.1%)', light: 'hsl(220 14.3% 95.9%)',
dark: 'hsl(217.2 32.6% 17.5%)' dark: 'hsl(215 27.9% 16.9%)'
}, },
mutedForeground: { mutedForeground: {
light: 'hsl(215.4 16.3% 46.9%)', light: 'hsl(220 8.9% 46.1%)',
dark: 'hsl(215 20.2% 65.1%)' dark: 'hsl(217.9 10.6% 64.9%)'
}, },
// Accent colors // Accent colors - subtle hover states
accent: { accent: {
light: 'hsl(210 40% 96.1%)', light: 'hsl(220 14.3% 95.9%)',
dark: 'hsl(217.2 32.6% 17.5%)' dark: 'hsl(215 27.9% 16.9%)'
}, },
accentForeground: { accentForeground: {
light: 'hsl(222.2 47.4% 11.2%)', light: 'hsl(220.9 39.3% 11%)',
dark: 'hsl(210 40% 98%)' dark: 'hsl(210 20% 98%)'
}, },
// Destructive colors // Destructive colors - softer red
destructive: { destructive: {
light: 'hsl(0 84.2% 60.2%)', light: 'hsl(0 72.2% 50.6%)',
dark: 'hsl(0 62.8% 30.6%)' dark: 'hsl(0 62.8% 30.6%)'
}, },
destructiveForeground: { destructiveForeground: {
light: 'hsl(210 40% 98%)', light: 'hsl(0 0% 98%)',
dark: 'hsl(210 40% 98%)' dark: 'hsl(0 0% 98%)'
}, },
// Border color // Border color - very subtle
border: { border: {
light: 'hsl(214.3 31.8% 91.4%)', light: 'hsl(220 13% 91%)',
dark: 'hsl(217.2 32.6% 17.5%)' dark: 'hsl(215 27.9% 16.9%)'
}, },
// Input color // Input color
@@ -102,21 +102,21 @@ export const colors = {
dark: 'hsl(217.2 32.6% 17.5%)' dark: 'hsl(217.2 32.6% 17.5%)'
}, },
// Ring color // Ring color - subtle focus indicator
ring: { ring: {
light: 'hsl(222.2 84% 4.9%)', light: 'hsl(221.2 83.2% 53.3%)',
dark: 'hsl(212.7 26.8% 83.9%)' dark: 'hsl(217.2 91.2% 59.8%)'
}, },
// Success colors // Success colors - modern green
success: { success: {
light: 'hsl(142 76% 36%)', light: 'hsl(142.1 70.6% 45.3%)',
dark: 'hsl(142 70% 45%)' dark: 'hsl(144.9 80.4% 10%)'
}, },
successForeground: { successForeground: {
light: 'hsl(0 0% 100%)', light: 'hsl(0 0% 100%)',
dark: 'hsl(0 0% 100%)' dark: 'hsl(144.9 80.4% 80%)'
}, },
// Chart colors // Chart colors

24
ts_web/elements/00tokens.ts
View File

@@ -52,24 +52,24 @@ export const radius = {
full: '9999px' full: '9999px'
}; };
// Box shadows // Box shadows - more subtle for modern look
export const shadows = { export const shadows = {
none: 'none', none: 'none',
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)', sm: '0 1px 2px 0 rgb(0 0 0 / 0.03)',
DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)', DEFAULT: '0 2px 8px -2px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.04)',
md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)', md: '0 4px 12px -4px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.04)',
lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)', lg: '0 8px 24px -4px rgb(0 0 0 / 0.1), 0 2px 8px -2px rgb(0 0 0 / 0.04)',
xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)', xl: '0 24px 48px -12px rgb(0 0 0 / 0.18)',
'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)', '2xl': '0 32px 64px -12px rgb(0 0 0 / 0.14)',
inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)', inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.03)',
// Theme-aware shadows // Theme-aware shadows
card: cssManager.bdTheme( card: cssManager.bdTheme(
'0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)', '0 2px 8px -2px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.04)',
'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.3), 0 2px 4px -2px rgb(0 0 0 / 0.2)'
), ),
dropdown: cssManager.bdTheme( dropdown: cssManager.bdTheme(
'0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)', '0 8px 24px -4px rgb(0 0 0 / 0.1), 0 2px 8px -2px rgb(0 0 0 / 0.04)',
'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.3), 0 2px 8px -2px rgb(0 0 0 / 0.2)'
) )
}; };

35
ts_web/elements/sio-button.ts
View File

@@ -75,7 +75,7 @@ export class SioButton extends DeesElement {
user-select: none; user-select: none;
outline: none; outline: none;
border: 1px solid transparent; border: 1px solid transparent;
gap: ${unsafeCSS(spacing[2])}; gap: ${unsafeCSS(spacing["2"])};
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.5; line-height: 1.5;
} }
@@ -83,49 +83,57 @@ export class SioButton extends DeesElement {
/* Size variants */ /* Size variants */
.button.size-sm { .button.size-sm {
height: 32px; height: 32px;
padding: 0 ${unsafeCSS(spacing[3])}; padding: 0 ${unsafeCSS(spacing["3"])};
font-size: 13px; font-size: 13px;
} }
.button.size-default { .button.size-default {
height: 36px; height: 36px;
padding: 0 ${unsafeCSS(spacing[4])}; padding: 0 ${unsafeCSS(spacing["4"])};
font-size: 14px; font-size: 14px;
} }
.button.size-lg { .button.size-lg {
height: 44px; height: 44px;
padding: 0 ${unsafeCSS(spacing[6])}; padding: 0 ${unsafeCSS(spacing["6"])};
font-size: 16px; font-size: 16px;
} }
/* Type variants */ /* Type variants */
.button.default { .button.default {
background: ${bdTheme('secondary')}; background: ${bdTheme('background')};
color: ${bdTheme('secondaryForeground')}; color: ${bdTheme('foreground')};
border-color: ${bdTheme('border')}; border-color: ${bdTheme('border')};
box-shadow: ${unsafeCSS(shadows.sm)};
} }
.button.default:hover:not(.disabled) { .button.default:hover:not(.disabled) {
background: ${bdTheme('secondary')}; background: ${bdTheme('accent')};
opacity: 0.8; border-color: ${bdTheme('accent')};
transform: translateY(-1px);
box-shadow: ${unsafeCSS(shadows.md)};
} }
.button.default:active:not(.disabled) { .button.default:active:not(.disabled) {
transform: translateY(1px); transform: translateY(0);
box-shadow: ${unsafeCSS(shadows.sm)};
} }
.button.primary { .button.primary {
background: ${bdTheme('primary')}; background: ${bdTheme('primary')};
color: ${bdTheme('primaryForeground')}; color: ${bdTheme('primaryForeground')};
box-shadow: ${unsafeCSS(shadows.sm)};
} }
.button.primary:hover:not(.disabled) { .button.primary:hover:not(.disabled) {
opacity: 0.9; opacity: 0.9;
transform: translateY(-1px);
box-shadow: ${unsafeCSS(shadows.md)};
} }
.button.primary:active:not(.disabled) { .button.primary:active:not(.disabled) {
transform: translateY(1px); transform: translateY(0);
box-shadow: ${unsafeCSS(shadows.sm)};
} }
.button.destructive { .button.destructive {
@@ -159,15 +167,18 @@ export class SioButton extends DeesElement {
.button.ghost { .button.ghost {
background: transparent; background: transparent;
color: ${bdTheme('foreground')}; color: ${bdTheme('foreground')};
border-color: transparent;
} }
.button.ghost:hover:not(.disabled) { .button.ghost:hover:not(.disabled) {
background: ${bdTheme('accent')}; background: ${bdTheme('accent')};
color: ${bdTheme('accentForeground')}; color: ${bdTheme('accentForeground')};
border-color: transparent;
} }
.button.ghost:active:not(.disabled) { .button.ghost:active:not(.disabled) {
transform: translateY(1px); background: ${bdTheme('accent')};
opacity: 0.8;
} }
/* Status states */ /* Status states */
@@ -178,7 +189,7 @@ export class SioButton extends DeesElement {
.spinner { .spinner {
position: absolute; position: absolute;
left: ${unsafeCSS(spacing[3])}; left: ${unsafeCSS(spacing["3"])};
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }

17
ts_web/elements/sio-combox.ts
View File

@@ -107,11 +107,26 @@ export class SioCombox extends DeesElement {
height: 600px; height: 600px;
width: 800px; width: 800px;
background: ${bdTheme('background')}; background: ${bdTheme('background')};
border-radius: ${unsafeCSS(radius.xl)}; border-radius: ${unsafeCSS(radius['2xl'])};
border: 1px solid ${bdTheme('border')}; border: 1px solid ${bdTheme('border')};
box-shadow: ${unsafeCSS(shadows.xl)}; box-shadow: ${unsafeCSS(shadows.xl)};
overflow: hidden; overflow: hidden;
font-family: ${unsafeCSS(fontFamilies.sans)}; 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 { .container {

105
ts_web/elements/sio-conversation-selector.ts
View File

@@ -59,16 +59,18 @@ export class SioConversationSelector extends DeesElement {
} }
.header { .header {
padding: ${unsafeCSS(spacing[4])}; padding: ${unsafeCSS(spacing["5"])} ${unsafeCSS(spacing["4"])};
border-bottom: 1px solid ${bdTheme('border')}; border-bottom: 1px solid ${bdTheme('border')};
background: ${bdTheme('background')};
} }
.title { .title {
font-size: 1.125rem; font-size: 1.25rem;
line-height: 1.5; line-height: 1.2;
font-weight: 600; font-weight: 600;
margin: 0 0 ${unsafeCSS(spacing[3])} 0; margin: 0 0 ${unsafeCSS(spacing["4"])} 0;
color: ${bdTheme('foreground')}; color: ${bdTheme('foreground')};
letter-spacing: -0.025em;
} }
.search-box { .search-box {
@@ -77,29 +79,32 @@ export class SioConversationSelector extends DeesElement {
.search-input { .search-input {
width: 100%; width: 100%;
padding: ${unsafeCSS(spacing[2])} ${unsafeCSS(spacing[10])} ${unsafeCSS(spacing[2])} ${unsafeCSS(spacing[3])}; padding: ${unsafeCSS(spacing["2.5"])} ${unsafeCSS(spacing["10"])} ${unsafeCSS(spacing["2.5"])} ${unsafeCSS(spacing["3"])};
background: ${bdTheme('muted')}; background: ${bdTheme('background')};
border: 1px solid ${bdTheme('border')}; border: 1px solid ${bdTheme('border')};
border-radius: ${unsafeCSS(radius.md)}; border-radius: ${unsafeCSS(radius.lg)};
font-size: 14px; font-size: 0.875rem;
color: ${bdTheme('foreground')}; color: ${bdTheme('foreground')};
outline: none; outline: none;
transition: ${unsafeCSS(transitions.all)}; transition: ${unsafeCSS(transitions.all)};
font-family: ${unsafeCSS(fontFamilies.sans)}; font-family: ${unsafeCSS(fontFamilies.sans)};
box-shadow: ${unsafeCSS(shadows.sm)};
} }
.search-input::placeholder { .search-input::placeholder {
color: ${bdTheme('mutedForeground')}; color: ${bdTheme('mutedForeground')};
font-weight: 400;
} }
.search-input:focus { .search-input:focus {
background: ${bdTheme('background')};
border-color: ${bdTheme('ring')}; border-color: ${bdTheme('ring')};
box-shadow: 0 0 0 3px ${bdTheme('ring')}20;
background: ${bdTheme('background')};
} }
.search-icon { .search-icon {
position: absolute; position: absolute;
right: ${unsafeCSS(spacing[3])}; right: ${unsafeCSS(spacing["3"])};
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
color: ${bdTheme('mutedForeground')}; color: ${bdTheme('mutedForeground')};
@@ -108,64 +113,116 @@ export class SioConversationSelector extends DeesElement {
.conversation-list { .conversation-list {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: ${unsafeCSS(spacing[2])}; padding: ${unsafeCSS(spacing["2"])};
} }
.conversation-item { .conversation-item {
padding: ${unsafeCSS(spacing[3])}; padding: ${unsafeCSS(spacing["3.5"])};
margin-bottom: ${unsafeCSS(spacing[2])}; margin-bottom: ${unsafeCSS(spacing["1.5"])};
background: ${bdTheme('background')}; background: ${bdTheme('background')};
border: 1px solid ${bdTheme('border')}; border: 1px solid transparent;
border-radius: ${unsafeCSS(radius.md)}; border-radius: ${unsafeCSS(radius.lg)};
cursor: pointer; cursor: pointer;
transition: ${unsafeCSS(transitions.all)}; transition: ${unsafeCSS(transitions.all)};
position: relative;
} }
.conversation-item:hover { .conversation-item:hover {
background: ${bdTheme('accent')}; background: ${bdTheme('accent')};
transform: translateX(2px);
box-shadow: ${unsafeCSS(shadows.sm)};
} }
.conversation-item.selected { .conversation-item.selected {
background: ${bdTheme('accent')}; 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 { .conversation-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: ${unsafeCSS(spacing[1])}; margin-bottom: ${unsafeCSS(spacing["1"])};
} }
.conversation-title { .conversation-title {
font-weight: 600; font-weight: 500;
color: ${bdTheme('foreground')}; color: ${bdTheme('foreground')};
display: flex; display: flex;
align-items: center; align-items: center;
gap: ${unsafeCSS(spacing[2])}; gap: ${unsafeCSS(spacing["2"])};
font-size: 0.9375rem;
letter-spacing: -0.01em;
} }
.conversation-time { .conversation-time {
font-size: 0.75rem; font-size: 0.75rem;
line-height: 1.5; line-height: 1.5;
color: ${bdTheme('mutedForeground')}; color: ${bdTheme('mutedForeground')};
opacity: 0.8;
} }
.conversation-preview { .conversation-preview {
font-size: 0.875rem; font-size: 0.8125rem;
line-height: 1.5; line-height: 1.5;
color: ${bdTheme('mutedForeground')}; color: ${bdTheme('mutedForeground')};
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
margin-top: ${unsafeCSS(spacing["0.5"])};
} }
.unread-dot { .unread-dot {
display: inline-block; display: inline-block;
width: 8px; width: 6px;
height: 8px; height: 6px;
background: ${bdTheme('primary')}; background: ${bdTheme('primary')};
border-radius: 50%; 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 { .empty-state {
@@ -174,10 +231,10 @@ export class SioConversationSelector extends DeesElement {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
padding: ${unsafeCSS(spacing[4])}; padding: ${unsafeCSS(spacing["4"])};
text-align: center; text-align: center;
color: ${bdTheme('mutedForeground')}; color: ${bdTheme('mutedForeground')};
gap: ${unsafeCSS(spacing[3])}; gap: ${unsafeCSS(spacing["3"])};
} }
.empty-icon { .empty-icon {

70
ts_web/elements/sio-conversation-view.ts
View File

@@ -63,12 +63,17 @@ export class SioConversationView extends DeesElement {
} }
.header { .header {
padding: ${unsafeCSS(spacing[4])}; padding: ${unsafeCSS(spacing["4"])};
border-bottom: 1px solid ${bdTheme('border')}; border-bottom: 1px solid ${bdTheme('border')};
background: ${bdTheme('card')}; background: ${bdTheme('background')};
display: flex; display: flex;
align-items: center; 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 { .back-button {
@@ -92,22 +97,22 @@ export class SioConversationView extends DeesElement {
.header-actions { .header-actions {
display: flex; display: flex;
gap: ${unsafeCSS(spacing[2])}; gap: ${unsafeCSS(spacing["2"])};
} }
.messages-container { .messages-container {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: ${unsafeCSS(spacing[4])}; padding: ${unsafeCSS(spacing["4"])};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: ${unsafeCSS(spacing[3])}; gap: ${unsafeCSS(spacing["3"])};
} }
.message { .message {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: ${unsafeCSS(spacing[3])}; gap: ${unsafeCSS(spacing["3"])};
max-width: 70%; max-width: 70%;
} }
@@ -117,30 +122,34 @@ export class SioConversationView extends DeesElement {
} }
.message-bubble { .message-bubble {
padding: ${unsafeCSS(spacing[3])}; padding: ${unsafeCSS(spacing["2.5"])} ${unsafeCSS(spacing["3.5"])};
border-radius: ${unsafeCSS(radius.lg)}; border-radius: ${unsafeCSS(radius["2xl"])};
font-size: 0.875rem; font-size: 0.9375rem;
line-height: 1.5; line-height: 1.6;
position: relative; position: relative;
box-shadow: ${unsafeCSS(shadows.sm)};
max-width: 100%;
word-wrap: break-word;
} }
.message.support .message-bubble { .message.support .message-bubble {
background: ${bdTheme('muted')}; background: ${bdTheme('secondary')};
color: ${bdTheme('foreground')}; color: ${bdTheme('secondaryForeground')};
border-bottom-left-radius: ${unsafeCSS(spacing[1])}; border-bottom-left-radius: ${unsafeCSS(spacing["1"])};
border: 1px solid ${bdTheme('border')};
} }
.message.user .message-bubble { .message.user .message-bubble {
background: ${bdTheme('primary')}; background: ${bdTheme('primary')};
color: ${bdTheme('primaryForeground')}; color: ${bdTheme('primaryForeground')};
border-bottom-right-radius: ${unsafeCSS(spacing[1])}; border-bottom-right-radius: ${unsafeCSS(spacing["1"])};
} }
.message-time { .message-time {
font-size: 0.75rem; font-size: 0.75rem;
line-height: 1.5; line-height: 1.5;
color: ${bdTheme('mutedForeground')}; color: ${bdTheme('mutedForeground')};
margin-top: ${unsafeCSS(spacing[1])}; margin-top: ${unsafeCSS(spacing["1"])};
} }
.message.user .message-time { .message.user .message-time {
@@ -150,8 +159,8 @@ export class SioConversationView extends DeesElement {
.typing-indicator { .typing-indicator {
display: flex; display: flex;
align-items: center; align-items: center;
gap: ${unsafeCSS(spacing[1])}; gap: ${unsafeCSS(spacing["1"])};
padding: ${unsafeCSS(spacing[2])} ${unsafeCSS(spacing[3])}; padding: ${unsafeCSS(spacing["2"])} ${unsafeCSS(spacing["3"])};
background: ${bdTheme('muted')}; background: ${bdTheme('muted')};
border-radius: ${unsafeCSS(radius.lg)}; border-radius: ${unsafeCSS(radius.lg)};
width: fit-content; width: fit-content;
@@ -185,26 +194,28 @@ export class SioConversationView extends DeesElement {
} }
.input-container { .input-container {
padding: ${unsafeCSS(spacing[4])}; padding: ${unsafeCSS(spacing["4"])};
border-top: 1px solid ${bdTheme('border')}; border-top: 1px solid ${bdTheme('border')};
background: ${bdTheme('card')}; background: ${bdTheme('background')};
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
} }
.input-wrapper { .input-wrapper {
display: flex; display: flex;
gap: ${unsafeCSS(spacing[2])}; gap: ${unsafeCSS(spacing["2"])};
align-items: flex-end; align-items: flex-end;
} }
.message-input { .message-input {
flex: 1; flex: 1;
min-height: 40px; min-height: 42px;
max-height: 120px; max-height: 120px;
padding: ${unsafeCSS(spacing[2])} ${unsafeCSS(spacing[3])}; padding: ${unsafeCSS(spacing["2.5"])} ${unsafeCSS(spacing[3])};
background: ${bdTheme('background')}; background: ${bdTheme('secondary')};
border: 1px solid ${bdTheme('border')}; border: 1px solid ${bdTheme('border')};
border-radius: ${unsafeCSS(radius.md)}; border-radius: ${unsafeCSS(radius.xl)};
font-size: 14px; font-size: 0.9375rem;
color: ${bdTheme('foreground')}; color: ${bdTheme('foreground')};
outline: none; outline: none;
resize: none; resize: none;
@@ -215,15 +226,18 @@ export class SioConversationView extends DeesElement {
.message-input::placeholder { .message-input::placeholder {
color: ${bdTheme('mutedForeground')}; color: ${bdTheme('mutedForeground')};
font-size: 0.875rem;
} }
.message-input:focus { .message-input:focus {
border-color: ${bdTheme('ring')}; border-color: ${bdTheme('ring')};
background: ${bdTheme('background')};
box-shadow: 0 0 0 3px ${bdTheme('ring')}15;
} }
.input-actions { .input-actions {
display: flex; display: flex;
gap: ${unsafeCSS(spacing[1])}; gap: ${unsafeCSS(spacing["1"])};
} }
.empty-state { .empty-state {
@@ -233,7 +247,7 @@ export class SioConversationView extends DeesElement {
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
gap: ${unsafeCSS(spacing[4])}; gap: ${unsafeCSS(spacing[4])};
padding: ${unsafeCSS(spacing[8])}; padding: ${unsafeCSS(spacing["8"])};
text-align: center; text-align: center;
color: ${bdTheme('mutedForeground')}; color: ${bdTheme('mutedForeground')};
} }