@elixpo/lixsketch 5.5.11 → 5.5.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/react/index.js +29 -29
  2. package/dist/react/index.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/react/components/canvas/FindBar.jsx +1 -1
  5. package/src/react/components/modals/CanvasPropertiesModal.jsx +1 -1
  6. package/src/react/components/sidebars/ArrowSidebar.jsx +6 -6
  7. package/src/react/components/sidebars/CircleSidebar.jsx +3 -3
  8. package/src/react/components/sidebars/FrameSidebar.jsx +1 -1
  9. package/src/react/components/sidebars/LineSidebar.jsx +4 -4
  10. package/src/react/components/sidebars/PaintbrushSidebar.jsx +5 -5
  11. package/src/react/components/sidebars/RectangleSidebar.jsx +4 -4
  12. package/src/react/components/sidebars/TextSidebar.jsx +5 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elixpo/lixsketch",
3
- "version": "5.5.11",
3
+ "version": "5.5.12",
4
4
  "description": "Open-source SVG whiteboard engine + React canvas component with hand-drawn aesthetics — the core of LixSketch",
5
5
  "type": "module",
6
6
  "main": "src/index.js",
package/src/react/components/canvas/FindBar.jsx CHANGED
@@ -49,7 +49,7 @@ export default function FindBar() {
49
49
  rect.setAttribute('width', w + 8)
50
50
  rect.setAttribute('height', h + 8)
51
51
  rect.setAttribute('fill', 'rgba(91, 87, 209, 0.15)')
52
- rect.setAttribute('stroke', '#5B57D1')
52
+ rect.setAttribute('stroke', '#7667a8')
53
53
  rect.setAttribute('stroke-width', '2')
54
54
  rect.setAttribute('stroke-dasharray', '4,2')
55
55
  rect.setAttribute('rx', '4')
package/src/react/components/modals/CanvasPropertiesModal.jsx CHANGED
@@ -320,7 +320,7 @@ export default function CanvasPropertiesModal() {
320
320
  >
321
321
  <span
322
322
  className="w-2.5 h-2.5 rounded-full shrink-0"
323
- style={{ background: user.color || '#5B57D1' }}
323
+ style={{ background: user.color || '#7667a8' }}
324
324
  />
325
325
  <span className="text-text-secondary text-[11px] flex-1 truncate">
326
326
  {user.displayName || user.name || `User ${i + 1}`}
package/src/react/components/sidebars/ArrowSidebar.jsx CHANGED
@@ -23,7 +23,7 @@ function ColorGrid({ colors, selected, onSelect }) {
23
23
  <div className="grid grid-cols-4 gap-1.5">
24
24
  {colors.map((c) => (
25
25
  <button key={c} onClick={() => onSelect(c)}
26
- className={`w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${selected === c ? 'border-[#5B57D1] scale-110' : 'border-white/[0.08] hover:border-white/20'}`}
26
+ className={`w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${selected === c ? 'border-[#7667a8] scale-110' : 'border-white/[0.08] hover:border-white/20'}`}
27
27
  style={{ backgroundColor: c }}
28
28
  />
29
29
  ))}
@@ -87,7 +87,7 @@ export default function ArrowSidebar() {
87
87
  <div className="flex items-center gap-1">
88
88
  {HEAD_STYLES.map((h) => (
89
89
  <button key={h.value} onClick={() => updateHead(h.value)}
90
- className={`w-10 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${headStyle === h.value ? 'bg-[#5B57D1]/20 text-[#5B57D1]' : 'text-text-secondary hover:bg-white/[0.06]'}`}
90
+ className={`w-10 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${headStyle === h.value ? 'bg-[#7667a8]/20 text-[#7667a8]' : 'text-text-secondary hover:bg-white/[0.06]'}`}
91
91
  >
92
92
  <SvgIcon svg={h.svg} />
93
93
  </button>
@@ -111,7 +111,7 @@ export default function ArrowSidebar() {
111
111
  <div className="flex items-center gap-1">
112
112
  {[1, 2, 4, 7].map((w) => (
113
113
  <button key={w} onClick={() => updateThickness(w)}
114
- className={`w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? 'bg-[#5B57D1]/20 text-[#5B57D1]' : 'text-text-secondary hover:bg-white/[0.06]'}`}
114
+ className={`w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? 'bg-[#7667a8]/20 text-[#7667a8]' : 'text-text-secondary hover:bg-white/[0.06]'}`}
115
115
  >
116
116
  <div className="w-5 rounded-full bg-current" style={{ height: Math.max(1, w) }} />
117
117
  </button>
@@ -126,7 +126,7 @@ export default function ArrowSidebar() {
126
126
  <div className="flex items-center gap-1">
127
127
  {[{ v: 'solid', d: '' }, { v: 'dashed', d: '6 4' }, { v: 'dotted', d: '2 3' }].map((s) => (
128
128
  <button key={s.v} onClick={() => updateOutline(s.v)}
129
- className={`w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${outlineStyle === s.v ? 'bg-[#5B57D1]/20' : 'hover:bg-white/[0.06]'}`}
129
+ className={`w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${outlineStyle === s.v ? 'bg-[#7667a8]/20' : 'hover:bg-white/[0.06]'}`}
130
130
  >
131
131
  <svg width="28" height="4" viewBox="0 0 28 4"><line x1="0" y1="2" x2="28" y2="2" stroke="#fff" strokeWidth="2" strokeDasharray={s.d} strokeLinecap="round" /></svg>
132
132
  </button>
@@ -146,7 +146,7 @@ export default function ArrowSidebar() {
146
146
  { v: 'elbow', i: 'bxs-network-chart', l: 'Elbow' },
147
147
  ].map((a) => (
148
148
  <button key={a.v} onClick={() => updateType(a.v)}
149
- className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${arrowType === a.v ? 'bg-[#5B57D1] text-white' : 'text-text-secondary hover:bg-white/[0.06]'}`}
149
+ className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${arrowType === a.v ? 'bg-[#7667a8] text-white' : 'text-text-secondary hover:bg-white/[0.06]'}`}
150
150
  >
151
151
  <i className={`bx ${a.i} text-sm`} /> {a.l}
152
152
  </button>
@@ -158,7 +158,7 @@ export default function ArrowSidebar() {
158
158
  <div className="flex items-center gap-1">
159
159
  {[{ v: 8, l: 'Lo' }, { v: 20, l: 'Md' }, { v: 40, l: 'Hi' }].map((c) => (
160
160
  <button key={c.v} onClick={() => updateCurvature(c.v)}
161
- className={`flex-1 py-1 rounded-md text-xs text-center transition-all duration-100 ${curvature === c.v ? 'bg-[#5B57D1]/20 text-[#5B57D1]' : 'text-text-secondary hover:bg-white/[0.06]'}`}
161
+ className={`flex-1 py-1 rounded-md text-xs text-center transition-all duration-100 ${curvature === c.v ? 'bg-[#7667a8]/20 text-[#7667a8]' : 'text-text-secondary hover:bg-white/[0.06]'}`}
162
162
  >{c.l}</button>
163
163
  ))}
164
164
  </div>
package/src/react/components/sidebars/CircleSidebar.jsx CHANGED
@@ -89,7 +89,7 @@ export default function CircleSidebar() {
89
89
  <div className="flex items-center gap-1">
90
90
  {[1, 2, 4, 7].map((w) => (
91
91
  <button key={w} onClick={() => updateThickness(w)}
92
- className={`w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? 'bg-[#5B57D1]/20 text-[#5B57D1]' : 'text-text-muted hover:bg-white/[0.06]'}`}
92
+ className={`w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? 'bg-[#7667a8]/20 text-[#7667a8]' : 'text-text-muted hover:bg-white/[0.06]'}`}
93
93
  >
94
94
  <div className="w-5 rounded-full bg-current" style={{ height: Math.max(1, w) }} />
95
95
  </button>
@@ -104,7 +104,7 @@ export default function CircleSidebar() {
104
104
  <div className="flex items-center gap-1">
105
105
  {[{ v: 'solid', d: '' }, { v: 'dashed', d: '6 4' }, { v: 'dotted', d: '2 3' }].map((s) => (
106
106
  <button key={s.v} onClick={() => updateStyle(s.v)}
107
- className={`w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${lineStyle === s.v ? 'bg-[#5B57D1]/20' : 'hover:bg-white/[0.06]'}`}
107
+ className={`w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${lineStyle === s.v ? 'bg-[#7667a8]/20' : 'hover:bg-white/[0.06]'}`}
108
108
  >
109
109
  <svg width="28" height="4" viewBox="0 0 28 4"><line x1="0" y1="2" x2="28" y2="2" stroke="#fff" strokeWidth="2" strokeDasharray={s.d} strokeLinecap="round" /></svg>
110
110
  </button>
@@ -119,7 +119,7 @@ export default function CircleSidebar() {
119
119
  <div className="flex flex-col gap-0.5">
120
120
  {FILLS.map((f) => (
121
121
  <button key={f.value} onClick={() => updateFill(f.value)}
122
- className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${fillStyle === f.value ? 'bg-[#5B57D1] text-white' : 'text-text-secondary hover:bg-white/[0.06]'}`}
122
+ className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${fillStyle === f.value ? 'bg-[#7667a8] text-white' : 'text-text-secondary hover:bg-white/[0.06]'}`}
123
123
  >
124
124
  <span className="w-1.5 h-1.5 rounded-full bg-current" />
125
125
  {t(f.label)}
package/src/react/components/sidebars/FrameSidebar.jsx CHANGED
@@ -101,7 +101,7 @@ export default function FrameSidebar() {
101
101
  type="text"
102
102
  value={frameName}
103
103
  onChange={updateName}
104
- className="w-32 px-2.5 py-1.5 bg-white/[0.05] border border-white/[0.1] rounded-lg text-white text-xs outline-none focus:border-[#5B57D1]/50 transition-all duration-150 font-[lixFont]"
104
+ className="w-32 px-2.5 py-1.5 bg-white/[0.05] border border-white/[0.1] rounded-lg text-white text-xs outline-none focus:border-[#7667a8]/50 transition-all duration-150 font-[lixFont]"
105
105
  spellCheck={false}
106
106
  />
107
107
  </ToolbarButton>
package/src/react/components/sidebars/LineSidebar.jsx CHANGED
@@ -12,7 +12,7 @@ function ColorGrid({ colors, selected, onSelect }) {
12
12
  <div className="grid grid-cols-4 gap-1.5">
13
13
  {colors.map((c) => (
14
14
  <button key={c} onClick={() => onSelect(c)}
15
- className={`w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${selected === c ? 'border-[#5B57D1] scale-110' : 'border-white/[0.08] hover:border-white/20'}`}
15
+ className={`w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${selected === c ? 'border-[#7667a8] scale-110' : 'border-white/[0.08] hover:border-white/20'}`}
16
16
  style={{ backgroundColor: c }}
17
17
  />
18
18
  ))}
@@ -52,7 +52,7 @@ export default function LineSidebar() {
52
52
  <div className="flex items-center gap-1">
53
53
  {[1, 2, 4, 7].map((w) => (
54
54
  <button key={w} onClick={() => updateThickness(w)}
55
- className={`w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? 'bg-[#5B57D1]/20 text-[#5B57D1]' : 'text-text-muted hover:bg-white/[0.06]'}`}
55
+ className={`w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? 'bg-[#7667a8]/20 text-[#7667a8]' : 'text-text-muted hover:bg-white/[0.06]'}`}
56
56
  >
57
57
  <div className="w-5 rounded-full bg-current" style={{ height: Math.max(1, w) }} />
58
58
  </button>
@@ -67,7 +67,7 @@ export default function LineSidebar() {
67
67
  <div className="flex items-center gap-1">
68
68
  {[{ v: 'solid', d: '' }, { v: 'dashed', d: '6 4' }, { v: 'dotted', d: '2 3' }].map((s) => (
69
69
  <button key={s.v} onClick={() => updateStyle(s.v)}
70
- className={`w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${lineStyle === s.v ? 'bg-[#5B57D1]/20' : 'hover:bg-white/[0.06]'}`}
70
+ className={`w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${lineStyle === s.v ? 'bg-[#7667a8]/20' : 'hover:bg-white/[0.06]'}`}
71
71
  >
72
72
  <svg width="28" height="4" viewBox="0 0 28 4"><line x1="0" y1="2" x2="28" y2="2" stroke="#fff" strokeWidth="2" strokeDasharray={s.d} strokeLinecap="round" /></svg>
73
73
  </button>
@@ -82,7 +82,7 @@ export default function LineSidebar() {
82
82
  <div className="flex items-center gap-1">
83
83
  {[{ v: 0, l: '0' }, { v: 2, l: '2' }, { v: 4, l: '4' }].map((s) => (
84
84
  <button key={s.v} onClick={() => updateSloppiness(s.v)}
85
- className={`w-8 h-8 flex items-center justify-center rounded-lg text-xs transition-all duration-100 ${sloppiness === s.v ? 'bg-[#5B57D1]/20 text-accent-blue' : 'text-text-muted hover:bg-white/6'}`}
85
+ className={`w-8 h-8 flex items-center justify-center rounded-lg text-xs transition-all duration-100 ${sloppiness === s.v ? 'bg-[#7667a8]/20 text-accent-blue' : 'text-text-muted hover:bg-white/6'}`}
86
86
  >{s.l}</button>
87
87
  ))}
88
88
  </div>
package/src/react/components/sidebars/PaintbrushSidebar.jsx CHANGED
@@ -15,7 +15,7 @@ function ColorGrid({ colors, selected, onSelect }) {
15
15
  <div className="grid grid-cols-4 gap-1.5">
16
16
  {colors.map((c) => (
17
17
  <button key={c} onClick={() => onSelect(c)}
18
- className={`w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${selected === c ? 'border-[#5B57D1] scale-110' : 'border-white/[0.08] hover:border-white/20'}`}
18
+ className={`w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${selected === c ? 'border-[#7667a8] scale-110' : 'border-white/[0.08] hover:border-white/20'}`}
19
19
  style={{ backgroundColor: c }}
20
20
  />
21
21
  ))}
@@ -56,7 +56,7 @@ export default function PaintbrushSidebar() {
56
56
  <div className="flex items-center gap-1">
57
57
  {[1, 2, 4, 7].map((w) => (
58
58
  <button key={w} onClick={() => updateThickness(w)}
59
- className={`w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? 'bg-[#5B57D1]/20 text-[#5B57D1]' : 'text-text-muted hover:bg-white/[0.06]'}`}
59
+ className={`w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? 'bg-[#7667a8]/20 text-[#7667a8]' : 'text-text-muted hover:bg-white/[0.06]'}`}
60
60
  >
61
61
  <div className="w-5 rounded-full bg-current" style={{ height: Math.max(1, w) }} />
62
62
  </button>
@@ -75,7 +75,7 @@ export default function PaintbrushSidebar() {
75
75
  { v: 'brush', i: 'bxs-brush', l: 'Brush' },
76
76
  ].map((t) => (
77
77
  <button key={t.v} onClick={() => updateTaper(t.v)}
78
- className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${taper === t.v ? 'bg-[#5B57D1] text-white' : 'text-text-secondary hover:bg-white/[0.06]'}`}
78
+ className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${taper === t.v ? 'bg-[#7667a8] text-white' : 'text-text-secondary hover:bg-white/[0.06]'}`}
79
79
  >
80
80
  <i className={`bx ${t.i} text-sm`} /> {t.l}
81
81
  </button>
@@ -94,7 +94,7 @@ export default function PaintbrushSidebar() {
94
94
  { v: 'rough', i: 'bxs-bolt', l: 'Rough' },
95
95
  ].map((r) => (
96
96
  <button key={r.v} onClick={() => updateRoughness(r.v)}
97
- className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${roughness === r.v ? 'bg-[#5B57D1] text-white' : 'text-text-secondary hover:bg-white/[0.06]'}`}
97
+ className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${roughness === r.v ? 'bg-[#7667a8] text-white' : 'text-text-secondary hover:bg-white/[0.06]'}`}
98
98
  >
99
99
  <i className={`bx ${r.i} text-sm`} /> {r.l}
100
100
  </button>
@@ -109,7 +109,7 @@ export default function PaintbrushSidebar() {
109
109
  <input
110
110
  type="range" min="0" max="1" step="0.05" value={opacity}
111
111
  onChange={(e) => updateOpacity(parseFloat(e.target.value))}
112
- className="w-28 h-1 bg-white/10 rounded-full appearance-none cursor-pointer accent-[#5B57D1]"
112
+ className="w-28 h-1 bg-white/10 rounded-full appearance-none cursor-pointer accent-[#7667a8]"
113
113
  />
114
114
  </ToolbarButton>
115
115
  <Divider />
package/src/react/components/sidebars/RectangleSidebar.jsx CHANGED
@@ -26,7 +26,7 @@ function ColorGrid({ colors, selected, onSelect }) {
26
26
  key={c}
27
27
  onClick={() => onSelect(c)}
28
28
  className={`w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${
29
- selected === c ? 'border-[#5B57D1] scale-110' : 'border-white/[0.08] hover:border-white/20'
29
+ selected === c ? 'border-[#7667a8] scale-110' : 'border-white/[0.08] hover:border-white/20'
30
30
  }`}
31
31
  style={!isTrans ? { backgroundColor: c } : undefined}
32
32
  >
@@ -102,7 +102,7 @@ export default function RectangleSidebar() {
102
102
  key={w}
103
103
  onClick={() => updateThickness(w)}
104
104
  className={`w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${
105
- thickness === w ? 'bg-[#5B57D1]/20 text-[#5B57D1]' : 'text-text-muted hover:bg-white/[0.06]'
105
+ thickness === w ? 'bg-[#7667a8]/20 text-[#7667a8]' : 'text-text-muted hover:bg-white/[0.06]'
106
106
  }`}
107
107
  >
108
108
  <div className="w-5 rounded-full bg-current" style={{ height: Math.max(1, w) }} />
@@ -126,7 +126,7 @@ export default function RectangleSidebar() {
126
126
  key={s.v}
127
127
  onClick={() => updateStyle(s.v)}
128
128
  className={`w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${
129
- lineStyle === s.v ? 'bg-[#5B57D1]/20' : 'hover:bg-white/[0.06]'
129
+ lineStyle === s.v ? 'bg-[#7667a8]/20' : 'hover:bg-white/[0.06]'
130
130
  }`}
131
131
  >
132
132
  <svg width="28" height="4" viewBox="0 0 28 4">
@@ -148,7 +148,7 @@ export default function RectangleSidebar() {
148
148
  key={f.value}
149
149
  onClick={() => updateFill(f.value)}
150
150
  className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${
151
- fillStyle === f.value ? 'bg-[#5B57D1] text-white' : 'text-text-secondary hover:bg-white/[0.06]'
151
+ fillStyle === f.value ? 'bg-[#7667a8] text-white' : 'text-text-secondary hover:bg-white/[0.06]'
152
152
  }`}
153
153
  >
154
154
  <span className="w-1.5 h-1.5 rounded-full bg-current" />
package/src/react/components/sidebars/TextSidebar.jsx CHANGED
@@ -87,7 +87,7 @@ export default function TextSidebar() {
87
87
  <div className="grid grid-cols-4 gap-1.5">
88
88
  {TEXT_COLORS.map((c) => (
89
89
  <button key={c} onClick={() => updateColor(c)}
90
- className={`w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${textColor === c ? 'border-[#5B57D1] scale-110' : 'border-white/[0.08] hover:border-white/20'}`}
90
+ className={`w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${textColor === c ? 'border-[#7667a8] scale-110' : 'border-white/[0.08] hover:border-white/20'}`}
91
91
  style={{ backgroundColor: c }}
92
92
  />
93
93
  ))}
@@ -104,7 +104,7 @@ export default function TextSidebar() {
104
104
  <div className="flex flex-col gap-0.5">
105
105
  {FONTS.map((f) => (
106
106
  <button key={f.value} onClick={() => updateFont(f.value)}
107
- className={`flex items-center px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${font === f.value ? 'bg-[#5B57D1] text-white' : 'text-text-secondary hover:bg-white/[0.06]'}`}
107
+ className={`flex items-center px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${font === f.value ? 'bg-[#7667a8] text-white' : 'text-text-secondary hover:bg-white/[0.06]'}`}
108
108
  style={{ fontFamily: f.value }}
109
109
  >
110
110
  {f.label}
@@ -123,7 +123,7 @@ export default function TextSidebar() {
123
123
  <div className="flex items-center gap-1">
124
124
  {['S', 'M', 'L', 'XL'].map((s) => (
125
125
  <button key={s} onClick={() => updateSize(s)}
126
- className={`w-8 h-8 flex items-center justify-center rounded-lg text-xs transition-all duration-100 ${fontSize === s ? 'bg-[#5B57D1]/20 text-[#5B57D1]' : 'text-text-muted hover:bg-white/[0.06]'}`}
126
+ className={`w-8 h-8 flex items-center justify-center rounded-lg text-xs transition-all duration-100 ${fontSize === s ? 'bg-[#7667a8]/20 text-[#7667a8]' : 'text-text-muted hover:bg-white/[0.06]'}`}
127
127
  >{s}</button>
128
128
  ))}
129
129
  </div>
@@ -136,7 +136,7 @@ export default function TextSidebar() {
136
136
  <p className="text-xs text-text-muted uppercase tracking-wider mb-2">{t('sidebar.code')}</p>
137
137
  <div className="flex flex-col gap-2">
138
138
  <button onClick={toggleCodeMode}
139
- className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${codeMode ? 'bg-[#5B57D1] text-white' : 'text-text-secondary hover:bg-white/[0.06]'}`}
139
+ className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${codeMode ? 'bg-[#7667a8] text-white' : 'text-text-secondary hover:bg-white/[0.06]'}`}
140
140
  >
141
141
  <div className={`w-6 h-3 rounded-full transition-all duration-150 relative ${codeMode ? 'bg-white/30' : 'bg-white/10'}`}>
142
142
  <div className={`absolute top-0.5 w-2 h-2 rounded-full bg-white transition-all duration-150 ${codeMode ? 'left-3.5' : 'left-0.5'}`} />
@@ -147,7 +147,7 @@ export default function TextSidebar() {
147
147
  <div className="flex flex-wrap gap-1 max-w-[180px]">
148
148
  {LANGUAGES.map((lang) => (
149
149
  <button key={lang} onClick={() => updateLanguage(lang)}
150
- className={`px-1.5 py-0.5 rounded text-[9px] transition-all duration-100 ${language === lang ? 'bg-[#5B57D1]/20 text-[#5B57D1]' : 'text-text-dim hover:bg-white/[0.06] hover:text-text-secondary'}`}
150
+ className={`px-1.5 py-0.5 rounded text-[9px] transition-all duration-100 ${language === lang ? 'bg-[#7667a8]/20 text-[#7667a8]' : 'text-text-dim hover:bg-white/[0.06] hover:text-text-secondary'}`}
151
151
  >{lang}</button>
152
152
  ))}
153
153
  </div>