my website at ewancroft.uk
Refactor: switch from bespoke to semantic colour naming
- Replaced bespoke colour variables (--color-sage, --color-mint, --color-jade)
with semantic equivalents (--color-primary, --color-secondary, --color-accent)
across global CSS and all Svelte components.
- Updated all class references to use the new semantic naming convention.
- Ensured visual consistency and accessibility are maintained (WCAG AA compliant).
- Improves readability, scalability, and design-system alignment.
This refactor replaces project-specific colour tokens with semantic ones that
better express intent, simplifying future theming and maintenance.
+74
-74
+34
-34
src/app.css
+34
-34
src/app.css
···
31
31
--color-canvas-950: light-dark(oklch(17.69% 0.027 125.57), oklch(98.50% 0.010 123.97));
32
32
33
33
/* Sage - Primary colors (adjusted for WCAG AA compliance) */
34
-
--color-sage-50: light-dark(oklch(97.73% 0.020 121.83), oklch(18.09% 0.031 123.74));
35
-
--color-sage-100: light-dark(oklch(94.00% 0.042 123.12), oklch(26.23% 0.053 126.29));
36
-
--color-sage-200: light-dark(oklch(88.00% 0.082 123.68), oklch(40.39% 0.088 126.72));
37
-
--color-sage-300: light-dark(oklch(78.00% 0.122 124.71), oklch(53.63% 0.122 127.17));
38
-
--color-sage-400: light-dark(oklch(68.00% 0.155 125.79), oklch(65.86% 0.152 127.23));
39
-
--color-sage-500: light-dark(oklch(58.00% 0.182 127.42), oklch(77.77% 0.182 127.42));
40
-
--color-sage-600: light-dark(oklch(48.00% 0.152 127.23), oklch(81.83% 0.155 125.79));
41
-
--color-sage-700: light-dark(oklch(38.00% 0.122 127.17), oklch(86.28% 0.122 124.71));
42
-
--color-sage-800: light-dark(oklch(28.00% 0.088 126.72), oklch(90.67% 0.082 123.68));
43
-
--color-sage-900: light-dark(oklch(20.00% 0.053 126.29), oklch(95.38% 0.042 123.12));
44
-
--color-sage-950: light-dark(oklch(14.00% 0.031 123.74), oklch(97.73% 0.020 121.83));
34
+
--color-primary-50: light-dark(oklch(97.73% 0.020 121.83), oklch(18.09% 0.031 123.74));
35
+
--color-primary-100: light-dark(oklch(94.00% 0.042 123.12), oklch(26.23% 0.053 126.29));
36
+
--color-primary-200: light-dark(oklch(88.00% 0.082 123.68), oklch(40.39% 0.088 126.72));
37
+
--color-primary-300: light-dark(oklch(78.00% 0.122 124.71), oklch(53.63% 0.122 127.17));
38
+
--color-primary-400: light-dark(oklch(68.00% 0.155 125.79), oklch(65.86% 0.152 127.23));
39
+
--color-primary-500: light-dark(oklch(58.00% 0.182 127.42), oklch(77.77% 0.182 127.42));
40
+
--color-primary-600: light-dark(oklch(48.00% 0.152 127.23), oklch(81.83% 0.155 125.79));
41
+
--color-primary-700: light-dark(oklch(38.00% 0.122 127.17), oklch(86.28% 0.122 124.71));
42
+
--color-primary-800: light-dark(oklch(28.00% 0.088 126.72), oklch(90.67% 0.082 123.68));
43
+
--color-primary-900: light-dark(oklch(20.00% 0.053 126.29), oklch(95.38% 0.042 123.12));
44
+
--color-primary-950: light-dark(oklch(14.00% 0.031 123.74), oklch(97.73% 0.020 121.83));
45
45
46
46
/* Mint - Secondary colors (adjusted for WCAG AA compliance) */
47
-
--color-mint-50: light-dark(oklch(97.87% 0.024 121.90), oklch(18.72% 0.037 126.20));
48
-
--color-mint-100: light-dark(oklch(94.50% 0.048 123.90), oklch(26.82% 0.058 127.38));
49
-
--color-mint-200: light-dark(oklch(89.00% 0.097 124.41), oklch(42.08% 0.101 128.02));
50
-
--color-mint-300: light-dark(oklch(80.00% 0.141 125.62), oklch(55.72% 0.137 128.49));
51
-
--color-mint-400: light-dark(oklch(70.00% 0.178 127.04), oklch(68.58% 0.171 128.75));
52
-
--color-mint-500: light-dark(oklch(60.00% 0.205 129.04), oklch(81.09% 0.205 129.04));
53
-
--color-mint-600: light-dark(oklch(50.00% 0.171 128.75), oklch(84.30% 0.178 127.04));
54
-
--color-mint-700: light-dark(oklch(40.00% 0.137 128.49), oklch(87.99% 0.141 125.62));
55
-
--color-mint-800: light-dark(oklch(30.00% 0.101 128.02), oklch(91.89% 0.097 124.41));
56
-
--color-mint-900: light-dark(oklch(22.00% 0.058 127.38), oklch(95.73% 0.048 123.90));
57
-
--color-mint-950: light-dark(oklch(15.00% 0.037 126.20), oklch(97.87% 0.024 121.90));
47
+
--color-secondary-50: light-dark(oklch(97.87% 0.024 121.90), oklch(18.72% 0.037 126.20));
48
+
--color-secondary-100: light-dark(oklch(94.50% 0.048 123.90), oklch(26.82% 0.058 127.38));
49
+
--color-secondary-200: light-dark(oklch(89.00% 0.097 124.41), oklch(42.08% 0.101 128.02));
50
+
--color-secondary-300: light-dark(oklch(80.00% 0.141 125.62), oklch(55.72% 0.137 128.49));
51
+
--color-secondary-400: light-dark(oklch(70.00% 0.178 127.04), oklch(68.58% 0.171 128.75));
52
+
--color-secondary-500: light-dark(oklch(60.00% 0.205 129.04), oklch(81.09% 0.205 129.04));
53
+
--color-secondary-600: light-dark(oklch(50.00% 0.171 128.75), oklch(84.30% 0.178 127.04));
54
+
--color-secondary-700: light-dark(oklch(40.00% 0.137 128.49), oklch(87.99% 0.141 125.62));
55
+
--color-secondary-800: light-dark(oklch(30.00% 0.101 128.02), oklch(91.89% 0.097 124.41));
56
+
--color-secondary-900: light-dark(oklch(22.00% 0.058 127.38), oklch(95.73% 0.048 123.90));
57
+
--color-secondary-950: light-dark(oklch(15.00% 0.037 126.20), oklch(97.87% 0.024 121.90));
58
58
59
59
/* Jade - Accent colors (adjusted for WCAG AA compliance) */
60
-
--color-jade-50: light-dark(oklch(98.05% 0.027 122.65), oklch(19.03% 0.041 126.73));
61
-
--color-jade-100: light-dark(oklch(95.00% 0.056 123.80), oklch(27.78% 0.066 127.71));
62
-
--color-jade-200: light-dark(oklch(90.00% 0.110 124.83), oklch(43.51% 0.110 128.91));
63
-
--color-jade-300: light-dark(oklch(82.00% 0.159 126.06), oklch(57.90% 0.149 129.35));
64
-
--color-jade-400: light-dark(oklch(72.00% 0.198 127.63), oklch(71.44% 0.186 129.59));
65
-
--color-jade-500: light-dark(oklch(62.00% 0.221 129.75), oklch(84.36% 0.221 129.75));
66
-
--color-jade-600: light-dark(oklch(52.00% 0.186 129.59), oklch(86.93% 0.198 127.63));
67
-
--color-jade-700: light-dark(oklch(42.00% 0.149 129.35), oklch(89.79% 0.159 126.06));
68
-
--color-jade-800: light-dark(oklch(32.00% 0.110 128.91), oklch(92.93% 0.110 124.83));
69
-
--color-jade-900: light-dark(oklch(23.00% 0.066 127.71), oklch(96.35% 0.056 123.80));
70
-
--color-jade-950: light-dark(oklch(16.00% 0.041 126.73), oklch(98.05% 0.027 122.65));
60
+
--color-accent-50: light-dark(oklch(98.05% 0.027 122.65), oklch(19.03% 0.041 126.73));
61
+
--color-accent-100: light-dark(oklch(95.00% 0.056 123.80), oklch(27.78% 0.066 127.71));
62
+
--color-accent-200: light-dark(oklch(90.00% 0.110 124.83), oklch(43.51% 0.110 128.91));
63
+
--color-accent-300: light-dark(oklch(82.00% 0.159 126.06), oklch(57.90% 0.149 129.35));
64
+
--color-accent-400: light-dark(oklch(72.00% 0.198 127.63), oklch(71.44% 0.186 129.59));
65
+
--color-accent-500: light-dark(oklch(62.00% 0.221 129.75), oklch(84.36% 0.221 129.75));
66
+
--color-accent-600: light-dark(oklch(52.00% 0.186 129.59), oklch(86.93% 0.198 127.63));
67
+
--color-accent-700: light-dark(oklch(42.00% 0.149 129.35), oklch(89.79% 0.159 126.06));
68
+
--color-accent-800: light-dark(oklch(32.00% 0.110 128.91), oklch(92.93% 0.110 124.83));
69
+
--color-accent-900: light-dark(oklch(23.00% 0.066 127.71), oklch(96.35% 0.056 123.80));
70
+
--color-accent-950: light-dark(oklch(16.00% 0.041 126.73), oklch(98.05% 0.027 122.65));
71
71
}
72
72
73
73
@layer base {
···
90
90
91
91
/* Focus visible styles for accessibility */
92
92
*:focus-visible {
93
-
outline: 2px solid var(--color-sage-600);
93
+
outline: 2px solid var(--color-primary-600);
94
94
outline-offset: 2px;
95
95
}
96
96
+1
-1
src/lib/components/layout/main/DynamicLinks.svelte
+1
-1
src/lib/components/layout/main/DynamicLinks.svelte
+1
-1
src/lib/components/layout/main/ScrollToTop.svelte
+1
-1
src/lib/components/layout/main/ScrollToTop.svelte
···
39
39
aria-label="Scroll to top"
40
40
title="Scroll to top"
41
41
type="button"
42
-
class="flex h-12 w-12 items-center justify-center rounded-full border bg-canvas-100 text-ink-900 border-sage-200 shadow-lg transition-all duration-300 ease-out hover:-translate-y-0.5 hover:bg-sage-500 hover:text-ink-50 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sage-500 dark:bg-canvas-900 dark:text-ink-50 dark:border-sage-800 dark:hover:bg-sage-600 motion-reduce:transition-none motion-reduce:hover:translate-y-0 sm:h-11 sm:w-11"
42
+
class="flex h-12 w-12 items-center justify-center rounded-full border bg-canvas-100 text-ink-900 border-primary-200 shadow-lg transition-all duration-300 ease-out hover:-translate-y-0.5 hover:bg-primary-500 hover:text-ink-50 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:bg-canvas-900 dark:text-ink-50 dark:border-primary-800 dark:hover:bg-primary-600 motion-reduce:transition-none motion-reduce:hover:translate-y-0 sm:h-11 sm:w-11"
43
43
>
44
44
<ChevronUp width="20" height="20" aria-hidden="true" />
45
45
</button>
+1
-1
src/lib/components/layout/main/TangledRepos.svelte
+1
-1
src/lib/components/layout/main/TangledRepos.svelte
+7
-7
src/lib/components/layout/main/card/BlueskyPostCard.svelte
+7
-7
src/lib/components/layout/main/card/BlueskyPostCard.svelte
···
60
60
61
61
if (feature) {
62
62
if (feature.$type === 'app.bsky.richtext.facet#link') {
63
-
result += `<a href="${escapeHtml(feature.uri)}" target="_blank" rel="noopener noreferrer" class="text-sage-600 hover:text-sage-700 dark:text-sage-400 dark:hover:text-sage-300 underline">${escapeHtml(facetText)}</a>`;
63
+
result += `<a href="${escapeHtml(feature.uri)}" target="_blank" rel="noopener noreferrer" class="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 underline">${escapeHtml(facetText)}</a>`;
64
64
} else if (feature.$type === 'app.bsky.richtext.facet#mention') {
65
-
result += `<a href="https://bsky.app/profile/${escapeHtml(feature.did)}" target="_blank" rel="noopener noreferrer" class="text-sage-600 hover:text-sage-700 dark:text-sage-400 dark:hover:text-sage-300 font-medium">${escapeHtml(facetText)}</a>`;
65
+
result += `<a href="https://bsky.app/profile/${escapeHtml(feature.did)}" target="_blank" rel="noopener noreferrer" class="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 font-medium">${escapeHtml(facetText)}</a>`;
66
66
} else if (feature.$type === 'app.bsky.richtext.facet#tag') {
67
-
result += `<a href="https://bsky.app/hashtag/${escapeHtml(feature.tag)}" target="_blank" rel="noopener noreferrer" class="text-sage-600 hover:text-sage-700 dark:text-sage-400 dark:hover:text-sage-300 font-medium">${escapeHtml(facetText)}</a>`;
67
+
result += `<a href="https://bsky.app/hashtag/${escapeHtml(feature.tag)}" target="_blank" rel="noopener noreferrer" class="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 font-medium">${escapeHtml(facetText)}</a>`;
68
68
} else {
69
69
result += escapeHtml(facetText);
70
70
}
···
104
104
href={getPostUrl(postData.uri)}
105
105
target="_blank"
106
106
rel="noopener noreferrer"
107
-
class="text-sage-600 transition-colors hover:text-sage-700 dark:text-sage-400 dark:hover:text-sage-300"
107
+
class="text-primary-600 transition-colors hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
108
108
aria-label="View post on Bluesky"
109
109
>
110
110
<ExternalLink class="h-4 w-4" aria-hidden="true" />
···
132
132
<div
133
133
class="flex h-{isQuoted ? '10' : '12'} w-{isQuoted
134
134
? '10'
135
-
: '12'} items-center justify-center rounded-full bg-sage-200 dark:bg-sage-800"
135
+
: '12'} items-center justify-center rounded-full bg-primary-200 dark:bg-primary-800"
136
136
>
137
137
<span
138
-
class="text-{isQuoted ? 'base' : 'lg'} font-semibold text-sage-700 dark:text-sage-300"
138
+
class="text-{isQuoted ? 'base' : 'lg'} font-semibold text-primary-700 dark:text-primary-300"
139
139
>
140
140
{(postData.author.displayName || postData.author.handle).charAt(0).toUpperCase()}
141
141
</span>
···
197
197
type="button"
198
198
onclick={() =>
199
199
openLightbox(imageUrl, postData.imageAlts?.[index] || `Post attachment ${index + 1}`)}
200
-
class="h-auto w-full max-w-full overflow-hidden rounded-lg transition-opacity hover:opacity-90 focus:ring-2 focus:ring-sage-500 focus:outline-none dark:focus:ring-sage-400"
200
+
class="h-auto w-full max-w-full overflow-hidden rounded-lg transition-opacity hover:opacity-90 focus:ring-2 focus:ring-primary-500 focus:outline-none dark:focus:ring-primary-400"
201
201
>
202
202
<img
203
203
src={imageUrl}
+4
-4
src/lib/components/layout/main/card/LinkCard.svelte
+4
-4
src/lib/components/layout/main/card/LinkCard.svelte
···
36
36
rel="noopener noreferrer"
37
37
class="
38
38
{variant === 'button'
39
-
? 'inline-flex items-center justify-center gap-2 rounded-lg bg-canvas-200 px-4 py-3 font-medium text-ink-900 transition-colors duration-200 hover:bg-canvas-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sage-600 dark:bg-canvas-800 dark:text-ink-50 dark:hover:bg-canvas-700'
39
+
? 'inline-flex items-center justify-center gap-2 rounded-lg bg-canvas-200 px-4 py-3 font-medium text-ink-900 transition-colors duration-200 hover:bg-canvas-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:bg-canvas-800 dark:text-ink-50 dark:hover:bg-canvas-700'
40
40
: 'flex items-start justify-between gap-3 rounded-lg bg-canvas-200 p-4 transition-colors hover:bg-canvas-300 dark:bg-canvas-800 dark:hover:bg-canvas-700'}
41
41
"
42
42
>
···
53
53
{#if badges && badges.length > 0}
54
54
{#each badges as badge}
55
55
{#if badge.color === 'mint'}
56
-
<span class="rounded bg-mint-100 px-2 py-0.5 text-xs font-medium text-mint-800 dark:bg-mint-900 dark:text-mint-200">
56
+
<span class="rounded bg-secondary-100 px-2 py-0.5 text-xs font-medium text-secondary-800 dark:bg-secondary-900 dark:text-secondary-200">
57
57
{badge.text}
58
58
</span>
59
59
{:else if badge.color === 'sage'}
60
-
<span class="rounded bg-sage-100 px-2 py-0.5 text-xs font-medium text-sage-800 dark:bg-sage-900 dark:text-sage-200">
60
+
<span class="rounded bg-primary-100 px-2 py-0.5 text-xs font-medium text-primary-800 dark:bg-primary-900 dark:text-primary-200">
61
61
{badge.text}
62
62
</span>
63
63
{:else}
···
87
87
</div>
88
88
89
89
<ExternalLink
90
-
class="h-4 w-4 flex-shrink-0 text-ink-700 transition-colors group-hover:text-sage-600 dark:text-ink-200 dark:group-hover:text-sage-400"
90
+
class="h-4 w-4 flex-shrink-0 text-ink-700 transition-colors group-hover:text-primary-600 dark:text-ink-200 dark:group-hover:text-primary-400"
91
91
aria-hidden="true"
92
92
/>
93
93
{/if}
+7
-7
src/lib/components/layout/main/card/PostCard.svelte
+7
-7
src/lib/components/layout/main/card/PostCard.svelte
···
83
83
{#if badge.variant === 'soft'}
84
84
<span
85
85
class="rounded px-2 py-0.5 text-xs font-medium {badge.color === 'mint'
86
-
? 'bg-mint-100 text-mint-800 dark:bg-mint-900 dark:text-mint-200'
87
-
: 'bg-sage-100 text-sage-800 dark:bg-sage-900 dark:text-sage-200'}"
86
+
? 'bg-secondary-100 text-secondary-800 dark:bg-secondary-900 dark:text-secondary-200'
87
+
: 'bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200'}"
88
88
>
89
89
{badge.text}
90
90
</span>
···
92
92
<span
93
93
class="rounded px-2 py-0.5 text-xs font-semibold uppercase {badge.color ===
94
94
'mint'
95
-
? 'bg-mint-500 text-white dark:bg-mint-600'
96
-
: 'bg-sage-500 text-white dark:bg-sage-600'}"
95
+
? 'bg-secondary-500 text-white dark:bg-secondary-600'
96
+
: 'bg-primary-500 text-white dark:bg-primary-600'}"
97
97
>
98
98
{badge.text}
99
99
</span>
···
120
120
121
121
<!-- External Link Icon -->
122
122
<ExternalLink
123
-
class="h-4 w-4 flex-shrink-0 text-ink-700 transition-colors group-hover:text-sage-600 dark:text-ink-200 dark:group-hover:text-sage-400"
123
+
class="h-4 w-4 flex-shrink-0 text-ink-700 transition-colors group-hover:text-primary-600 dark:text-ink-200 dark:group-hover:text-primary-400"
124
124
aria-hidden="true"
125
125
/>
126
126
</a>
···
136
136
No blog posts available. Write on
137
137
<a
138
138
href="https://whtwnd.com/"
139
-
class="text-sage-600 hover:underline dark:text-sage-400"
139
+
class="text-primary-600 hover:underline dark:text-primary-400"
140
140
target="_blank"
141
141
rel="noopener noreferrer">WhiteWind</a
142
142
>
143
143
or
144
144
<a
145
145
href="https://leaflet.pub/"
146
-
class="text-sage-600 hover:underline dark:text-sage-400"
146
+
class="text-primary-600 hover:underline dark:text-primary-400"
147
147
target="_blank"
148
148
rel="noopener noreferrer">Leaflet</a
149
149
>
+2
-2
src/lib/components/layout/main/card/ProfileCard.svelte
+2
-2
src/lib/components/layout/main/card/ProfileCard.svelte
···
72
72
loading="lazy"
73
73
/>
74
74
{:else}
75
-
<div class="h-full w-full bg-gradient-to-r from-sage-400 to-mint-400"></div>
75
+
<div class="h-full w-full bg-gradient-to-r from-primary-400 to-secondary-400"></div>
76
76
{/if}
77
77
</div>
78
78
···
92
92
/>
93
93
{:else}
94
94
<div
95
-
class="flex h-full w-full items-center justify-center bg-sage-200 text-3xl font-bold text-sage-800 dark:bg-sage-800 dark:text-sage-200"
95
+
class="flex h-full w-full items-center justify-center bg-primary-200 text-3xl font-bold text-primary-800 dark:bg-primary-800 dark:text-primary-200"
96
96
>
97
97
{(safeProfile.displayName || safeProfile.handle).charAt(0).toUpperCase()}
98
98
</div>
+1
-1
src/lib/components/layout/main/card/StatusCard.svelte
+1
-1
src/lib/components/layout/main/card/StatusCard.svelte
···
39
39
<Card variant="elevated" padding="md">
40
40
{#snippet children()}
41
41
<div class="mb-2 flex items-center gap-2">
42
-
<Rss class="h-4 w-4 text-sage-600 dark:text-sage-400" aria-hidden="true" />
42
+
<Rss class="h-4 w-4 text-primary-600 dark:text-primary-400" aria-hidden="true" />
43
43
<span
44
44
class="text-xs font-semibold tracking-wide text-ink-800 uppercase dark:text-ink-100"
45
45
>
+1
-1
src/lib/components/layout/main/card/TangledRepoCard.svelte
+1
-1
src/lib/components/layout/main/card/TangledRepoCard.svelte
···
37
37
>
38
38
<div class="flex items-center gap-3 min-w-0 flex-1">
39
39
<GitBranch
40
-
class="h-5 w-5 flex-shrink-0 text-sage-600 dark:text-sage-400"
40
+
class="h-5 w-5 flex-shrink-0 text-primary-600 dark:text-primary-400"
41
41
aria-hidden="true"
42
42
/>
43
43
<div class="flex flex-col gap-1 min-w-0 flex-1">
+9
-9
src/lib/components/ui/Card.svelte
+9
-9
src/lib/components/ui/Card.svelte
···
71
71
elevated: 'bg-canvas-100 dark:bg-canvas-900 shadow-lg hover:shadow-xl',
72
72
flat: 'bg-canvas-200 dark:bg-canvas-800',
73
73
button:
74
-
'bg-canvas-200 dark:bg-canvas-800 hover:bg-canvas-300 dark:hover:bg-canvas-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sage-600',
74
+
'bg-canvas-200 dark:bg-canvas-800 hover:bg-canvas-300 dark:hover:bg-canvas-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600',
75
75
outline:
76
-
'bg-transparent border-2 border-canvas-300 dark:border-canvas-700 hover:border-sage-400 dark:hover:border-sage-600'
76
+
'bg-transparent border-2 border-canvas-300 dark:border-canvas-700 hover:border-primary-400 dark:hover:border-primary-600'
77
77
};
78
78
79
79
// Padding classes
···
102
102
const colorClasses = {
103
103
mint:
104
104
badge.variant === 'soft'
105
-
? 'bg-mint-100 text-mint-800 dark:bg-mint-900 dark:text-mint-200'
106
-
: 'bg-mint-500 text-white dark:bg-mint-600',
105
+
? 'bg-secondary-100 text-secondary-800 dark:bg-secondary-900 dark:text-secondary-200'
106
+
: 'bg-secondary-500 text-white dark:bg-secondary-600',
107
107
sage:
108
108
badge.variant === 'soft'
109
-
? 'bg-sage-100 text-sage-800 dark:bg-sage-900 dark:text-sage-200'
110
-
: 'bg-sage-500 text-white dark:bg-sage-600',
109
+
? 'bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200'
110
+
: 'bg-primary-500 text-white dark:bg-primary-600',
111
111
jade:
112
112
badge.variant === 'soft'
113
-
? 'bg-jade-100 text-jade-800 dark:bg-jade-900 dark:text-jade-200'
114
-
: 'bg-jade-500 text-white dark:bg-jade-600',
113
+
? 'bg-accent-100 text-accent-800 dark:bg-accent-900 dark:text-accent-200'
114
+
: 'bg-accent-500 text-white dark:bg-accent-600',
115
115
ink:
116
116
badge.variant === 'soft'
117
117
? 'bg-ink-100 text-ink-800 dark:bg-ink-800 dark:text-ink-100'
···
165
165
166
166
{#if showExternalIcon}
167
167
<ExternalLink
168
-
class="h-4 w-4 flex-shrink-0 text-ink-700 transition-colors group-hover:text-sage-600 dark:text-ink-200 dark:group-hover:text-sage-400"
168
+
class="h-4 w-4 flex-shrink-0 text-ink-700 transition-colors group-hover:text-primary-600 dark:text-ink-200 dark:group-hover:text-primary-400"
169
169
aria-hidden="true"
170
170
/>
171
171
{/if}