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';
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

24
ts_web/elements/00tokens.ts
View File

@@ -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)'
)
};

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

@@ -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;
}

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

@@ -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 {

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

@@ -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 {

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

@@ -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')};
}