Skip to content

Commit cbf4087

Browse files
andrepat0andrepat0
committed
refactor: enhance CSS variables and styling for Artifact components
1 parent 9522f3f commit cbf4087

File tree

4 files changed

+68
-43
lines changed

4 files changed

+68
-43
lines changed

‎src/components/MemoriArtifactSystem/components/ArtifactActions/styles.css‎

Lines changed: 42 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,14 @@
33
* Includes responsive design and print media queries
44
*/
55

6-
/* Copy Button Wrapper */
76
.memori-copy-button-wrapper {
7+
--memori-copy-border: color-mix(in oklch, var(--memori-border-color) 82%, transparent);
8+
--memori-copy-surface: color-mix(in oklch, var(--memori-main-background) 94%, var(--memori-text-color) 6%);
9+
--memori-copy-surface-hover: color-mix(in oklch, var(--memori-main-background) 88%, var(--memori-primary) 12%);
10+
--memori-copy-surface-pressed: color-mix(in oklch, var(--memori-main-background) 82%, var(--memori-primary) 18%);
11+
--memori-copy-text-muted: color-mix(in oklch, var(--memori-text-color) 72%, transparent);
12+
--memori-copy-shadow: 0 10px 25px -5px color-mix(in srgb, var(--memori-text-color) 14%, transparent),
13+
0 10px 10px -5px color-mix(in srgb, var(--memori-text-color) 8%, transparent);
814
position: relative;
915
display: inline-block;
1016
}
@@ -23,8 +29,9 @@
2329
min-height: 36px;
2430
align-items: center;
2531
padding: var(--memori-spacing-sm) var(--memori-spacing-md);
26-
border: 1px solid #e1e5e9;
32+
border: 1px solid var(--memori-copy-border);
2733
border-radius: 0.5rem;
34+
background: var(--memori-copy-surface);
2835
border-bottom-right-radius: 0px;
2936
border-top-right-radius: 0px;
3037
color: var(--memori-text-color);
@@ -42,29 +49,29 @@
4249
}
4350

4451
.memori-copy-button:focus-visible {
45-
outline: 2px solid #3b82f6;
52+
outline: 2px solid var(--memori-primary);
4653
outline-offset: 2px;
4754
}
4855

4956
.memori-copy-button:hover:not(:disabled) {
50-
border-color: #d1d5db;
51-
background: #f9fafb;
57+
border-color: color-mix(in oklch, var(--memori-primary) 28%, var(--memori-border-color));
58+
background: var(--memori-copy-surface-hover);
5259
}
5360

5461
.memori-copy-button:active:not(:disabled) {
55-
border-color: #9ca3af;
56-
background: #f3f4f6;
62+
border-color: color-mix(in oklch, var(--memori-primary) 40%, var(--memori-border-color));
63+
background: var(--memori-copy-surface-pressed);
5764
}
5865

5966
.memori-copy-button--success {
6067
border-color: #22c55e;
61-
background: #f0fdf4;
68+
background: color-mix(in oklch, var(--memori-main-background) 82%, #22c55e 18%);
6269
color: var(--memori-text-color);
6370
}
6471

6572
.memori-copy-button--error {
6673
border-color: #ef4444;
67-
background: #fef2f2;
74+
background: color-mix(in oklch, var(--memori-main-background) 84%, #ef4444 16%);
6875
color: var(--memori-text-color);
6976
}
7077

@@ -85,8 +92,9 @@
8592
align-items: center;
8693
padding: var(--memori-spacing-sm) var(--memori-spacing-md);
8794
padding-right: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
88-
border: 1px solid #e1e5e9;
95+
border: 1px solid var(--memori-copy-border);
8996
border-radius: 0.5rem;
97+
background: var(--memori-copy-surface);
9098
border-bottom-left-radius: 0px !important;
9199
border-top-left-radius: 0px !important;
92100
color: var(--memori-text-color);
@@ -110,7 +118,7 @@
110118
}
111119

112120
.memori-copy-button-icon--error {
113-
color: var(--memori-text-color);
121+
color: #ef4444;
114122
}
115123

116124
.memori-copy-button-chevron {
@@ -137,8 +145,9 @@
137145
.memori-copy-button-spinner {
138146
width: 12px;
139147
height: 12px;
140-
border: 2px solid #e5e7eb;
148+
border: 2px solid color-mix(in oklch, var(--memori-border-color) 70%, transparent);
141149
border-radius: 50%;
150+
border-top-color: var(--memori-primary);
142151
animation: memori-copy-spin 1s linear infinite;
143152
}
144153

@@ -172,10 +181,11 @@
172181
overflow: hidden;
173182
min-width: 280px;
174183
max-width: 320px;
175-
border: 1px solid #e1e5e9;
184+
border: 1px solid var(--memori-copy-border);
176185
border-radius: 0.5rem;
177186
margin-top: var(--memori-spacing-xs);
178-
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
187+
background: var(--memori-copy-surface);
188+
box-shadow: var(--memori-copy-shadow);
179189
}
180190

181191
/* Responsive positioning */
@@ -223,7 +233,7 @@
223233

224234
.memori-copy-dropdown-header {
225235
padding: var(--memori-spacing-sm) var(--memori-spacing-md) var(--memori-spacing-xs);
226-
border-bottom: 1px solid #f3f4f6;
236+
border-bottom: 1px solid var(--memori-copy-border);
227237
margin-bottom: var(--memori-spacing-xs);
228238
}
229239

@@ -258,12 +268,12 @@
258268
align-items: center;
259269
padding: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs)) var(--memori-spacing-md);
260270
border: none;
261-
background: none;
271+
background: transparent;
262272
color: var(--memori-text-color);
263273
cursor: pointer;
264274
font-size: var(--memori-text-size-small);
265275
text-align: left;
266-
transition: background-color 0.15s ease;
276+
transition: background-color 0.15s ease, color 0.15s ease;
267277
}
268278

269279
.memori-copy-menu-item:disabled {
@@ -272,12 +282,17 @@
272282
}
273283

274284
.memori-copy-menu-item:focus-visible {
275-
outline: 2px solid #3b82f6;
285+
outline: 2px solid var(--memori-primary);
276286
outline-offset: -2px;
277287
}
278288

289+
.memori-copy-menu-item:hover:not(:disabled),
290+
.memori-copy-menu-item--active {
291+
background: color-mix(in oklch, var(--memori-main-background) 86%, var(--memori-primary) 14%);
292+
}
293+
279294
.memori-copy-menu-item:active:not(:disabled) {
280-
background: #f3f4f6;
295+
background: var(--memori-copy-surface-pressed);
281296
}
282297

283298
.memori-copy-menu-item--loading {
@@ -325,9 +340,9 @@
325340
.memori-copy-menu-item-spinner {
326341
width: 12px;
327342
height: 12px;
328-
border: 2px solid #e5e7eb;
343+
border: 2px solid color-mix(in oklch, var(--memori-border-color) 70%, transparent);
329344
border-radius: 50%;
330-
border-top: 2px solid #3b82f6;
345+
border-top: 2px solid var(--memori-primary);
331346
animation: memori-copy-spin 1s linear infinite;
332347
}
333348

@@ -343,7 +358,7 @@
343358
}
344359

345360
.memori-copy-menu-item-description {
346-
color: var(--memori-text-color);
361+
color: var(--memori-copy-text-muted);
347362
font-size: 0.75rem;
348363
line-height: 1.3;
349364
}
@@ -356,7 +371,7 @@
356371
display: inline-block;
357372
padding: calc(var(--memori-spacing-xs) / 2) calc(var(--memori-spacing-xs) + 2px);
358373
border-radius: 0.5rem;
359-
background: #dbeafe;
374+
background: color-mix(in oklch, var(--memori-main-background) 78%, var(--memori-primary) 22%);
360375
color: var(--memori-text-color);
361376
font-size: 10px;
362377
font-weight: var(--memori-text-weight-semibold);
@@ -376,7 +391,7 @@
376391
padding: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs)) var(--memori-spacing-md);
377392
border-radius: 0.5rem;
378393
animation: memori-copy-toast-enter 0.3s ease-out;
379-
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
394+
box-shadow: var(--memori-copy-shadow);
380395
font-size: var(--memori-text-size-small);
381396
font-weight: var(--memori-text-weight-medium);
382397
gap: var(--memori-spacing-sm);
@@ -395,13 +410,13 @@
395410

396411
.memori-copy-toast--success {
397412
border: 1px solid #22c55e;
398-
background: #f0fdf4;
413+
background: color-mix(in oklch, var(--memori-main-background) 82%, #22c55e 18%);
399414
color: var(--memori-text-color);
400415
}
401416

402417
.memori-copy-toast--error {
403418
border: 1px solid #ef4444;
404-
background: #fef2f2;
419+
background: color-mix(in oklch, var(--memori-main-background) 84%, #ef4444 16%);
405420
color: var(--memori-text-color);
406421
}
407422

@@ -460,7 +475,7 @@
460475
}
461476

462477
.memori-copy-menu-item:hover:not(:disabled) {
463-
background: #000000;
478+
background: var(--memori-copy-surface-pressed);
464479
color: var(--memori-text-color);
465480
}
466481
}

‎src/components/MemoriArtifactSystem/components/ArtifactDrawer/components/TabSwitch.css‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@
44
*/
55

66
.memori-tab-switch {
7+
--memori-tab-switch-border: color-mix(in oklch, var(--memori-border-color) 82%, transparent);
8+
--memori-tab-switch-surface: color-mix(in oklch, var(--memori-main-background) 92%, var(--memori-text-color) 8%);
9+
--memori-tab-switch-surface-hover: color-mix(in oklch, var(--memori-main-background) 88%, var(--memori-primary) 12%);
10+
--memori-tab-switch-indicator: color-mix(in oklch, var(--memori-main-background) 96%, white 4%);
11+
--memori-tab-switch-shadow: 0 1px 3px color-mix(in srgb, var(--memori-text-color) 12%, transparent);
12+
--memori-tab-switch-shadow-hover: 0 2px 6px color-mix(in srgb, var(--memori-text-color) 16%, transparent);
13+
--memori-tab-switch-text: color-mix(in oklch, var(--memori-text-color) 72%, transparent);
714
display: flex;
815
align-items: center;
916
justify-content: center;
@@ -13,9 +20,9 @@
1320
position: relative;
1421
display: inline-flex;
1522
overflow: hidden;
16-
border: 1px solid #e9ecef;
23+
border: 1px solid var(--memori-tab-switch-border);
1724
border-radius: var(--memori-radius-box);
18-
background: #f8f9fa;
25+
background: var(--memori-tab-switch-surface);
1926
box-shadow: none;
2027
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
2128
}
@@ -37,8 +44,8 @@
3744
width: calc((100% - var(--memori-spacing-xs)) / var(--tab-count, 2));
3845
border-radius: var(--memori-radius-box);
3946
animation: tab-switch-slide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
40-
background: #ffffff;
41-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
47+
background: var(--memori-tab-switch-indicator);
48+
box-shadow: var(--memori-tab-switch-shadow);
4249
transform: translateX(calc(var(--active-index, 0) * 100%));
4350
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
4451
}
@@ -50,7 +57,11 @@
5057
bottom: 0;
5158
left: 0;
5259
border-radius: var(--memori-radius-box);
53-
background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0) 100%);
60+
background: linear-gradient(
61+
135deg,
62+
color-mix(in srgb, var(--memori-text-color) 6%, transparent) 0%,
63+
transparent 100%
64+
);
5465
content: '';
5566
pointer-events: none;
5667
}
@@ -67,7 +78,7 @@
6778
border: none;
6879
border-radius: var(--memori-radius-box);
6980
background: transparent;
70-
color: var(--memori-text-color);
81+
color: var(--memori-tab-switch-text);
7182
cursor: pointer;
7283
font-size: var(--memori-text-size-small);
7384
font-weight: var(--memori-text-weight-medium);
@@ -87,7 +98,7 @@
8798
}
8899

89100
.memori-tab-switch__button:focus {
90-
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
101+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--memori-primary) 24%, transparent);
91102
outline: none;
92103
}
93104

@@ -114,12 +125,13 @@
114125

115126
/* Hover effects for the entire switch */
116127
.memori-tab-switch__container:hover {
117-
border-color: #d1d5db;
118-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
128+
border-color: color-mix(in oklch, var(--memori-primary) 28%, var(--memori-border-color));
129+
background: var(--memori-tab-switch-surface-hover);
130+
box-shadow: var(--memori-tab-switch-shadow);
119131
}
120132

121133
.memori-tab-switch__container:hover .memori-tab-switch__indicator {
122-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
134+
box-shadow: var(--memori-tab-switch-shadow-hover);
123135
}
124136

125137
/* Animation for tab switching */
@@ -141,7 +153,7 @@
141153
}
142154

143155
.memori-tab-switch__indicator {
144-
box-shadow: 0 0 0 2px white, 0 2px 8px var(--memori-primary);
156+
box-shadow: 0 0 0 2px var(--memori-main-background), 0 2px 8px var(--memori-primary);
145157
}
146158

147159
.memori-tab-switch__button:focus {

‎src/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,9 @@
1919
padding: 1.5rem;
2020
border: var(--memori-border) solid var(--memori-border-color);
2121
border-radius: var(--memori-radius-box);
22-
margin: 0.75rem 0;
23-
margin: 0.5rem;
2422
animation: fadeInUp 0.5s ease forwards;
2523
backdrop-filter: blur(4px);
26-
background: rgba(255, 255, 255, 0.95);
24+
background: var(--memori-secondary-background);
2725
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
2826
cursor: pointer;
2927
gap: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));

‎src/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
149149
if (artifacts.length === 0) return null;
150150

151151
return (
152-
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
152+
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px', maxWidth: '90%', width: '90%', marginTop: 'var(--memori-spacing-xl)' }}>
153153
{artifacts.map((artifact) => {
154154
const isSelected = state.isDrawerOpen && state.currentArtifact?.id === artifact.id;
155155

@@ -159,7 +159,7 @@ const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
159159
className={`memori-artifact-handler${isSelected ? ' memori-artifact-handler--selected' : ''}`}
160160
onClick={() => handleArtifactClick(artifact)}
161161
style={isSelected ? {
162-
border: '2px solid var(--memori-primary, #3b82f6)',
162+
border: '2px solid var(--memori-primary)',
163163
boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)',
164164
} : undefined}
165165
>

0 commit comments

Comments
 (0)