Skip to content

Commit f21c6f8

Browse files
welpie21Ekwunomartinschaer
authored
Update colors (#1613)
Co-authored-by: Obinna Ekwuno <obinnacodes@gmail.com> Co-authored-by: Martin Schaer <martin.schaer@surrealdb.com>
1 parent 4ab0e25 commit f21c6f8

30 files changed

+221
-164
lines changed

‎README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,6 @@
8383

8484
Visit [surrealdb.com/docs](https://surrealdb.com/docs/surrealdb/) to get started with SurrealDB.
8585

86-
8786
## Learn SurrealDB
8887

8988
- SurrealDB University: https://surrealdb.com/learn/fundamentals

‎bun.lockb‎

7.4 KB
Binary file not shown.

‎src/components/Check.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ import { Icon } from 'astro-icon/components';
33
---
44

55
<div class="flex items-center gap-2">
6-
<Icon name="fa6-solid:check" class="w-2.5 flex-shrink-0 text-surreal-pink" />
6+
<Icon name="fa6-solid:check" class="w-2.5 flex-shrink-0 text-surreal-energy" />
77
<slot />
88
</div>

‎src/components/Dropdown/Dropdown.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const id = Array.from({ length: 8 }, () => Math.random().toString(36)[2]).join(
2525
<input type="checkbox" id={id} class="dropdown-toggle hidden" />
2626
<label for={id} class="block relative">
2727
<slot />
28-
<div class={cn("dropdown-dropdown absolute z-10 pt-3 min-w-full transition-transform origin-top", align === 'right' ? 'right-0' : 'left-0')}>
28+
<div class={cn("dropdown-dropdown absolute z-20 pt-3 min-w-full transition-transform origin-top", align === 'right' ? 'right-0' : 'left-0')}>
2929
<div class={cn("bg-background-secondary p-2 rounded-lg border-border border min-w-full shadow-lg shadow-background", dropdownClass)}>
3030
<slot name="dropdown" />
3131
</div>

‎src/components/Dropdown/DropdownItem.astro‎

Lines changed: 45 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -22,40 +22,57 @@ const hasCustomIcon = Astro.slots.has('icon');
2222
const hasAnyIcon = hasCustomIcon || iconName || icon;
2323
---
2424

25-
<Element
25+
<Element
2626
class={cn(
27-
"group flex items-center gap-3 py-2 px-3 rounded-lg w-full transition-colors hover:bg-code cursor-pointer",
28-
dataUrl && "copy-markdown-item"
29-
)}
30-
href={href}
27+
"group flex items-center gap-3 py-2 px-3 rounded-lg w-full transition-colors hover:bg-code cursor-pointer",
28+
dataUrl && "copy-markdown-item",
29+
)}
30+
href={href}
3131
data-url={dataUrl}
3232
target={external ? "_blank" : undefined}
3333
rel={external ? "noopener noreferrer" : undefined}
3434
>
35-
{hasAnyIcon && (
36-
<div class="flex-shrink-0 w-8 h-8 rounded-lg bg-background flex items-center justify-center border border-border group-hover:border-surreal-pink/50 transition-colors">
37-
{hasCustomIcon ? (
38-
<div class="w-4 h-4 text-text/70 group-hover:text-text transition-colors [&>svg]:w-full [&>svg]:h-full">
39-
<slot name="icon" />
40-
</div>
41-
) : iconName ? (
42-
<Icon name={iconName} class="w-4 h-4 text-text/70 group-hover:text-text transition-colors" />
43-
) : icon ? (
44-
<Image src={icon} alt={title} class="size-4" />
45-
) : null}
46-
</div>
47-
)}
35+
{
36+
hasAnyIcon && (
37+
<div class="flex-shrink-0 w-8 h-8 rounded-lg bg-background flex items-center justify-center border border-border group-hover:border-surreal-energy/50 transition-colors">
38+
{hasCustomIcon ? (
39+
<div class="w-4 h-4 text-text/70 group-hover:text-text transition-colors [&>svg]:w-full [&>svg]:h-full">
40+
<slot name="icon" />
41+
</div>
42+
) : iconName ? (
43+
<Icon
44+
name={iconName}
45+
class="w-4 h-4 text-text/70 group-hover:text-text transition-colors"
46+
/>
47+
) : icon ? (
48+
<Image src={icon} alt={title} class="size-4" />
49+
) : null}
50+
</div>
51+
)
52+
}
4853
<div class="flex flex-col flex-1 min-w-0">
49-
<span class={cn("text-sm text-text/80 group-hover:text-text transition-colors", active && "text-surreal-pink")}>
54+
<span
55+
class={cn(
56+
"text-sm text-text/80 group-hover:text-text transition-colors",
57+
active && "text-surreal-energy",
58+
)}
59+
>
5060
{title}
5161
</span>
52-
{description && (
53-
<span class="text-xs text-text/50 group-hover:text-text/60 transition-colors truncate">
54-
{description}
55-
</span>
56-
)}
62+
{
63+
description && (
64+
<span class="text-xs text-text/50 group-hover:text-text/60 transition-colors truncate">
65+
{description}
66+
</span>
67+
)
68+
}
5769
</div>
58-
{external && (
59-
<Icon name="fa6-solid:arrow-up-right-from-square" class="w-3 h-3 flex-shrink-0 text-text/40 group-hover:text-text/60 transition-colors" />
60-
)}
61-
</Element>
70+
{
71+
external && (
72+
<Icon
73+
name="fa6-solid:arrow-up-right-from-square"
74+
class="w-3 h-3 flex-shrink-0 text-text/40 group-hover:text-text/60 transition-colors"
75+
/>
76+
)
77+
}
78+
</Element>

‎src/components/LabsPreview.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -271,7 +271,7 @@ function buildSeeMoreUrl(
271271

272272
<style>
273273
.labs-preview {
274-
@apply border border-border rounded-lg p-6 hover:border-surreal-pink/50 transition-colors;
274+
@apply border border-border rounded-lg p-6 hover:border-surreal-energy/50 transition-colors;
275275
}
276276

277277
.labs-preview__badge {
@@ -318,7 +318,7 @@ function buildSeeMoreUrl(
318318
<p class="text-faint text-xs font-medium mb-1">
319319
{category}
320320
</p>
321-
<h3 class="text-lg font-semibold text-bwr group-hover:text-surreal-pink transition-colors line-clamp-2 mb-2 !mt-0">
321+
<h3 class="text-lg font-semibold text-bwr group-hover:text-surreal-energy transition-colors line-clamp-2 mb-2 !mt-0">
322322
{item.title}
323323
</h3>
324324
</div>
@@ -382,7 +382,7 @@ function buildSeeMoreUrl(
382382
<div class="mt-4 text-center">
383383
<a
384384
href={buildSeeMoreUrl(topics, languages)}
385-
class="text-surreal-pink hover:underline text-sm font-medium"
385+
class="text-surreal-energy hover:underline text-sm font-medium"
386386
>
387387
See more ({totalFilteredCount - limit} more)
388388
</a>

‎src/components/PageHeadings.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,8 @@ function Heading({ depth, text, slug }: HeadingProps) {
8282
>
8383
<span
8484
class={cn(
85-
'text-text transition-all duration-300 group-hover:text-hover',
86-
active() && 'text-hover/100'
85+
'text-text transition-all duration-300 group-hover:text-surreal-energy',
86+
active() && 'text-surreal-energy'
8787
)}
8888
>
8989
{text}
@@ -96,8 +96,8 @@ function Heading({ depth, text, slug }: HeadingProps) {
9696
>
9797
<span
9898
class={cn(
99-
'text-text transition-all duration-300 group-hover:text-hover',
100-
active() && 'text-hover/100'
99+
'text-text transition-all duration-300 group-hover:text-surreal-energy',
100+
active() && 'text-surreal-energy'
101101
)}
102102
>
103103
{text}

‎src/components/RailroadDiagram.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ if (svgMarkup) {
5454
:root svg.railroad-diagram {
5555
background: rgba(var(--color-code),1) !important;
5656
background-color: rgba(var(--color-code),1) !important;
57-
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.08), 0 0 0 2px rgba(var(--color-surreal-pink),0.15);
57+
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.08), 0 0 0 2px rgba(var(--color-surreal-energy),0.15);
5858
border-radius: 6px;
5959
}
6060
:root svg.railroad-diagram path { stroke: rgba(var(--color-text), 0.85) !important; fill: transparent !important; }
@@ -90,15 +90,15 @@ if (svgMarkup) {
9090
/* Default all boxes (non-terminals) */
9191
:root svg.railroad-diagram g rect { fill: rgba(var(--color-background-secondary), 1) !important; stroke: rgba(var(--color-border), 1) !important; }
9292
/* Terminals have rounded corners in this library -> exclude the background rect */
93-
:root svg.railroad-diagram g rect[rx]:not(.background) { fill: rgba(var(--color-surreal-pink), 0.15) !important; stroke: rgba(var(--color-surreal-pink), 0.7) !important; }
93+
:root svg.railroad-diagram g rect[rx]:not(.background) { fill: rgba(var(--color-surreal-energy), 0.15) !important; stroke: rgba(var(--color-surreal-energy), 0.7) !important; }
9494
/* Basic bottom scroll indicator */
9595
.rr-bottom-indicator { display: none; gap: 8px; align-items: center; margin-top: 6px; }
9696
.rr-track { position: relative; height: 6px; flex: 1 1 auto; background: rgba(0,0,0,0.08); border-radius: 9999px; overflow: hidden; }
97-
.rr-thumb { position: absolute; top: 0; left: 0; height: 100%; width: 25%; background: rgba(var(--color-surreal-pink), 0.6); border-radius: 9999px; transition: left .08s linear, width .08s linear; }
97+
.rr-thumb { position: absolute; top: 0; left: 0; height: 100%; width: 25%; background: rgba(var(--color-surreal-energy), 0.6); border-radius: 9999px; transition: left .08s linear, width .08s linear; }
9898
.rr-label { font-size: 12px; color: rgba(var(--color-text), 0.7); white-space: nowrap; }
9999
@media (prefers-color-scheme: dark) {
100100
.rr-track { background: rgba(255,255,255,0.12); }
101-
.rr-thumb { background: rgba(var(--color-surreal-pink), 0.7); }
101+
.rr-thumb { background: rgba(var(--color-surreal-energy), 0.7); }
102102
.rr-label { color: rgba(255,255,255,0.75); }
103103
}
104104
.rr-scroll.is-scrollable + .rr-bottom-indicator { display: flex; }

‎src/components/RenderDoc.astro‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -331,15 +331,15 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
331331
<div class="page-header-actions flex items-center gap-2">
332332
<a
333333
href={`https://github.com/surrealdb/docs.surrealdb.com/edit/main/src/content/${collection}/${entry.id}`}
334-
class="flex items-center gap-2 px-2 sm:px-3 py-1.5 rounded-lg border border-border hover:border-surreal-pink transition-colors text-sm"
334+
class="flex items-center gap-2 px-2 sm:px-3 py-1.5 rounded-lg border border-border hover:border-surreal-energy hover:text-surreal-energy transition-colors text-sm"
335335
>
336336
<Icon name="fa6-solid:pencil" class="w-3.5 h-3.5" />
337337
<span class="hidden sm:inline">Edit page</span>
338338
</a>
339339
<div class="page-actions-dropdown">
340340
<Dropdown align="right" >
341341
<div
342-
class="flex items-center gap-1 sm:gap-2 px-2 sm:px-3 py-1.5 rounded-lg border border-border hover:border-surreal-pink transition-colors text-sm cursor-pointer select-none"
342+
class="flex items-center gap-1 sm:gap-2 px-2 sm:px-3 py-1.5 rounded-lg border border-border hover:border-surreal-energy transition-colors text-sm cursor-pointer select-none"
343343
>
344344
<Icon name="fa6-solid:copy" class="w-3.5 h-3.5" />
345345
<span class="hidden sm:inline">Copy page</span>
@@ -388,7 +388,7 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
388388
prev && (
389389
<a
390390
href={prev.href}
391-
class="text-faint hover:border-surreal-pink flex items-center gap-2.5 border border-border rounded-lg py-3 px-6 w-1/2 min-h-20"
391+
class="text-faint hover:border-surreal-energy flex items-center gap-2.5 border border-border rounded-lg py-3 px-6 w-1/2 min-h-20"
392392
>
393393
<Icon
394394
name="fa6-solid:chevron-left"
@@ -402,7 +402,7 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
402402
next && (
403403
<a
404404
href={next.href}
405-
class="text-faint hover:border-surreal-pink flex items-center gap-2.5 border border-border rounded-lg py-3 px-6 w-1/2 min-h-20 justify-end"
405+
class="text-faint hover:border-surreal-energy flex items-center gap-2.5 border border-border rounded-lg py-3 px-6 w-1/2 min-h-20 justify-end"
406406
>
407407
<span>{next.title}</span>
408408
<Icon
@@ -462,7 +462,7 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
462462
</h3>
463463
<div class="flex gap-2">
464464
<button
465-
class="feedback-btn feedback-positive p-2 rounded-lg border border-border hover:border-surreal-pink transition-colors"
465+
class="feedback-btn feedback-positive p-2 rounded-lg border border-border hover:border-surreal-energy transition-colors"
466466
data-feedback="positive"
467467
>
468468
<Icon
@@ -471,7 +471,7 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
471471
/>
472472
</button>
473473
<button
474-
class="feedback-btn feedback-negative p-2 rounded-lg border border-border hover:border-surreal-pink transition-colors"
474+
class="feedback-btn feedback-negative p-2 rounded-lg border border-border hover:border-surreal-energy transition-colors"
475475
data-feedback="negative"
476476
>
477477
<Icon
@@ -556,7 +556,7 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
556556
></textarea>
557557
<div class="flex gap-2 mt-3">
558558
<button
559-
class="feedback-submit bg-surreal-pink text-white px-3 py-1 rounded text-xs hover:bg-surreal-pink/80 transition-colors"
559+
class="feedback-submit bg-surreal-energy text-white px-3 py-1 rounded text-xs hover:bg-surreal-energy/80 transition-colors"
560560
>
561561
Submit
562562
</button>
@@ -631,7 +631,7 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
631631
></textarea>
632632
<div class="flex gap-2 mt-3">
633633
<button
634-
class="feedback-submit bg-surreal-pink text-white px-3 py-1 rounded text-xs hover:bg-surreal-pink/80 transition-colors"
634+
class="feedback-submit bg-surreal-energy text-white px-3 py-1 rounded text-xs hover:bg-surreal-energy/80 transition-colors"
635635
>
636636
Submit
637637
</button>
@@ -648,7 +648,7 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
648648
<div class="flex gap-2 mt-2">
649649
<a
650650
href={`https://github.com/surrealdb/docs.surrealdb.com/edit/main/src/content/${collection}/${entry.id}`}
651-
class="flex items-center gap-1.5 px-2 py-1 rounded text-xs border border-border hover:border-surreal-pink transition-colors"
651+
class="flex items-center gap-1.5 px-2 py-1 rounded text-xs border border-border hover:border-surreal-energy hover:text-surreal-energy transition-colors"
652652
>
653653
<Icon
654654
name="fa6-solid:pencil"
@@ -658,7 +658,7 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
658658
</a>
659659
<a
660660
href="https://github.com/surrealdb/docs.surrealdb.com/issues/new"
661-
class="flex items-center gap-1.5 px-2 py-1 rounded text-xs border border-border hover:border-surreal-pink transition-colors"
661+
class="flex items-center gap-1.5 px-2 py-1 rounded text-xs border border-border hover:border-surreal-energy hover:text-surreal-energy transition-colors"
662662
>
663663
<Icon
664664
name="fa6-brands:github"
@@ -824,11 +824,11 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
824824
// Add visual feedback to buttons
825825
feedbackBtns.forEach((b) =>
826826
b.classList.remove(
827-
"border-surreal-pink",
828-
"bg-surreal-pink/10",
827+
"border-surreal-energy",
828+
"bg-surreal-energy/10",
829829
),
830830
);
831-
btn.classList.add("border-surreal-pink", "bg-surreal-pink/10");
831+
btn.classList.add("border-surreal-energy", "bg-surreal-energy/10");
832832
});
833833
});
834834

@@ -843,8 +843,8 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
843843
// Reset button states
844844
feedbackBtns.forEach((b) =>
845845
b.classList.remove(
846-
"border-surreal-pink",
847-
"bg-surreal-pink/10",
846+
"border-surreal-energy",
847+
"bg-surreal-energy/10",
848848
),
849849
);
850850

@@ -927,8 +927,8 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
927927
negativeForm?.classList.add("hidden");
928928
feedbackBtns.forEach((b) =>
929929
b.classList.remove(
930-
"border-surreal-pink",
931-
"bg-surreal-pink/10",
930+
"border-surreal-energy",
931+
"bg-surreal-energy/10",
932932
),
933933
);
934934
btn.textContent = "Submit";

‎src/components/Search.astro‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ interface Props {
1111
@apply block px-6 py-4 hover:bg-bwr/10;
1212

1313
& :global(h3) {
14-
@apply text-2xl;
14+
@apply text-2xl group-hover:text-surreal-energy;
1515
}
1616

1717
& :global(span) {
18-
@apply text-surreal-pink text-xs pb-1 block;
18+
@apply text-surreal-energy text-xs pb-1 block;
1919
}
2020

2121
& :global(p) {
@@ -27,6 +27,10 @@ interface Props {
2727
}
2828
}
2929

30+
search-dialog :global(.docs-search-result:hover h3) {
31+
@apply !text-surreal-energy;
32+
}
33+
3034
search-dialog :global(.docs-search-message) {
3135
@apply w-full h-full flex items-center justify-center text-lg text-text/50;
3236
}
@@ -48,7 +52,7 @@ interface Props {
4852
border: 3px solid;
4953
animation: prixClipFix 1s linear infinite alternate-reverse;
5054

51-
@apply border-surreal-pink
55+
@apply border-surreal-energy;
5256
}
5357

5458
@keyframes rotate {

0 commit comments

Comments
 (0)