Skip to content

Commit 9048794

Browse files
userquinuserquin
committed
chore: update components text colors
1 parent ed73e25 commit 9048794

10 files changed

Lines changed: 95 additions & 28 deletions

File tree

‎app/components/Compare/ReplacementSuggestion.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const docUrl = computed(() => {
2626
class="flex items-start gap-2 px-3 py-2 rounded-lg text-sm"
2727
:class="
2828
variant === 'nodep'
29-
? 'bg-amber-500/10 border border-amber-600/30 text-amber-700 dark:text-amber-400'
29+
? 'bg-amber-500/10 border border-amber-600/30 text-amber-800 dark:text-amber-400'
3030
: 'bg-blue-500/10 border border-blue-600/30 text-blue-700 dark:text-blue-400'
3131
"
3232
>

‎app/components/DependencyPathPopup.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
6868
<!-- Path badge button -->
6969
<button
7070
type="button"
71-
class="path-badge font-mono text-3xs px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-700 dark:text-amber-400 cursor-pointer transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
71+
class="path-badge font-mono text-3xs px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-800 dark:text-amber-400 cursor-pointer transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
7272
:aria-expanded="isOpen"
7373
@click.stop="togglePopup"
7474
>

‎app/components/Package/Dependencies.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ const numberFormatter = useNumberFormatter()
117117
<LinkBase
118118
v-if="getDeprecatedDepInfo(dep)"
119119
:to="packageRoute(dep, getDeprecatedDepInfo(dep)!.version)"
120-
class="shrink-0 text-purple-500"
120+
class="shrink-0 text-purple-700 dark:text-purple-500"
121121
:title="getDeprecatedDepInfo(dep)!.message"
122122
classicon="i-carbon:warning-hex"
123123
>

‎app/components/Package/MetricsBadges.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const typesHref = computed(() => {
6363
variant="button-secondary"
6464
size="small"
6565
:to="typesHref"
66-
classicon="i-carbon-checkmark"
66+
classicon="i-carbon:checkmark"
6767
>
6868
{{ $t('package.metrics.types_label') }}
6969
</LinkBase>
@@ -73,10 +73,10 @@ const typesHref = computed(() => {
7373
:tabindex="0"
7474
:classicon="
7575
isLoading
76-
? 'i-carbon-circle-dash motion-safe:animate-spin'
76+
? 'i-carbon:circle-dash motion-safe:animate-spin'
7777
: hasTypes
78-
? 'i-carbon-checkmark'
79-
: 'i-carbon-close'
78+
? 'i-carbon:checkmark'
79+
: 'i-carbon:close'
8080
"
8181
>
8282
{{ $t('package.metrics.types_label') }}
@@ -94,10 +94,10 @@ const typesHref = computed(() => {
9494
:variant="hasEsm && !isLoading ? 'default' : 'ghost'"
9595
:classicon="
9696
isLoading
97-
? 'i-carbon-circle-dash motion-safe:animate-spin'
97+
? 'i-carbon:circle-dash motion-safe:animate-spin'
9898
: hasEsm
99-
? 'i-carbon-checkmark'
100-
: 'i-carbon-close'
99+
? 'i-carbon:checkmark'
100+
: 'i-carbon:close'
101101
"
102102
>
103103
ESM
@@ -112,7 +112,7 @@ const typesHref = computed(() => {
112112
tabindex="0"
113113
:variant="isLoading ? 'ghost' : 'default'"
114114
:classicon="
115-
isLoading ? 'i-carbon-circle-dash motion-safe:animate-spin' : 'i-carbon-checkmark'
115+
isLoading ? 'i-carbon:circle-dash motion-safe:animate-spin' : 'i-carbon:checkmark'
116116
"
117117
>
118118
CJS

‎app/components/Package/Replacement.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const docPath = computed(() => {
1818

1919
<template>
2020
<div
21-
class="border border-amber-600/40 bg-amber-500/10 rounded-lg px-3 py-2 text-base text-amber-700 dark:text-amber-400"
21+
class="border border-amber-600/40 bg-amber-500/10 rounded-lg px-3 py-2 text-base text-amber-800 dark:text-amber-400"
2222
>
2323
<h2 class="font-medium mb-1 flex items-center gap-2">
2424
<span class="i-carbon-idea w-4 h-4" aria-hidden="true" />

‎app/components/Package/Versions.vue‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -359,7 +359,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
359359
:to="versionRoute(row.primaryVersion.version)"
360360
class="text-sm"
361361
:class="
362-
row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
362+
row.primaryVersion.deprecated
363+
? 'text-red-800 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300'
364+
: undefined
363365
"
364366
:title="
365367
row.primaryVersion.deprecated
@@ -415,7 +417,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
415417
<LinkBase
416418
:to="versionRoute(v.version)"
417419
class="text-xs truncate"
418-
:class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
420+
:class="
421+
v.deprecated
422+
? 'text-red-800 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300'
423+
: undefined
424+
"
419425
:title="
420426
v.deprecated
421427
? $t('package.versions.deprecated_title', { version: v.version })
@@ -513,7 +519,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
513519
:to="versionRoute(row.primaryVersion.version)"
514520
class="text-xs truncate"
515521
:class="
516-
row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
522+
row.primaryVersion.deprecated
523+
? 'text-red-800 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300'
524+
: undefined
517525
"
518526
:title="
519527
row.primaryVersion.deprecated
@@ -586,7 +594,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
586594
class="text-xs truncate"
587595
:class="
588596
group.versions[0]?.deprecated
589-
? 'text-red-400 hover:text-red-300'
597+
? 'text-red-800 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300'
590598
: undefined
591599
"
592600
:title="
@@ -647,7 +655,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
647655
class="text-xs truncate"
648656
:class="
649657
group.versions[0]?.deprecated
650-
? 'text-red-400 hover:text-red-300'
658+
? 'text-red-800 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300'
651659
: undefined
652660
"
653661
:title="
@@ -704,7 +712,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
704712
<LinkBase
705713
:to="versionRoute(v.version)"
706714
class="text-xs truncate"
707-
:class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
715+
:class="
716+
v.deprecated
717+
? 'text-red-800 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300'
718+
: undefined
719+
"
708720
:title="
709721
v.deprecated
710722
? $t('package.versions.deprecated_title', { version: v.version })

‎app/components/Package/VulnerabilityTree.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const hasVulnerabilities = computed(
2121
)
2222
2323
// Banner - amber for better light mode contrast
24-
const bannerColor = 'border-amber-600/40 bg-amber-500/10 text-amber-700 dark:text-amber-400'
24+
const bannerColor = 'border-amber-600/40 bg-amber-500/10 text-amber-800 dark:text-amber-400'
2525
2626
const severityLabels = computed(() => ({
2727
critical: $t('package.vulnerabilities.severity.critical'),
@@ -83,7 +83,7 @@ function getDepthStyle(depth: string | undefined) {
8383
aria-controls="vuln-tree-details"
8484
@click="isExpanded = !isExpanded"
8585
>
86-
<div class="flex items-center gap-2 min-w-0">
86+
<span class="flex items-center gap-2 min-w-0">
8787
<span class="i-carbon:warning-alt w-4 h-4 shrink-0" aria-hidden="true" />
8888
<span class="font-mono text-sm font-medium truncate">
8989
{{
@@ -98,15 +98,15 @@ function getDepthStyle(depth: string | undefined) {
9898
)
9999
}}
100100
</span>
101-
</div>
102-
<div class="flex items-center gap-2 shrink-0">
103-
<span class="text-xs opacity-80 hidden sm:inline">{{ summaryText }}</span>
101+
</span>
102+
<span class="flex items-center gap-2 shrink-0">
103+
<span class="text-xs op-90 dark:op-80 hidden sm:inline">{{ summaryText }}</span>
104104
<span
105105
class="i-carbon:chevron-down w-4 h-4 transition-transform duration-200"
106106
:class="{ 'rotate-180': isExpanded }"
107107
aria-hidden="true"
108108
/>
109-
</div>
109+
</span>
110110
</button>
111111

112112
<!-- Expandable details -->

‎app/components/Tag/Static.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ const props = withDefaults(
1313
<template>
1414
<component
1515
:is="as"
16-
class="bg-bg-muted text-fg-muted inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md text-xs px-2 py-0.5"
17-
:class="{ 'opacity-40': variant === 'ghost' }"
16+
class="bg-bg-muted text-fg-muted inline-flex gap-x-1 items-center justify-center font-mono border border-gray-400 dark:border-gray-500 rounded-md text-xs px-2 py-0.5"
17+
:class="{ 'opacity-80 border-style-dashed': variant === 'ghost' }"
1818
>
1919
<span v-if="classicon" :class="['size-3', classicon]" aria-hidden="true" />
2020
<slot />

‎app/pages/index.vue‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
<script setup lang="ts">
22
import { debounce } from 'perfect-debounce'
33
import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'
4+
import {
5+
getHighestSeverity,
6+
SEVERITY_COLORS,
7+
SEVERITY_TEXT_COLORS,
8+
} from '#shared/utils/severity.ts'
49
510
const searchQuery = shallowRef('')
611
const searchInputRef = useTemplateRef('searchInputRef')
@@ -62,6 +67,56 @@ defineOgImageComponent('Default', {
6267
{{ $t('tagline') }}
6368
</p>
6469

70+
<LinkBase
71+
to="#"
72+
class="shrink-0"
73+
:class="SEVERITY_TEXT_COLORS.critical"
74+
title="arrgggg"
75+
classicon="i-carbon:security"
76+
>
77+
<span>{{ $t('package.dependencies.view_vulnerabilities') }}</span>
78+
</LinkBase>
79+
80+
<LinkBase
81+
to="#"
82+
class="shrink-0"
83+
:class="SEVERITY_TEXT_COLORS.high"
84+
title="arrgggg"
85+
classicon="i-carbon:security"
86+
>
87+
<span>{{ $t('package.dependencies.view_vulnerabilities') }}</span>
88+
</LinkBase>
89+
90+
<LinkBase
91+
to="#"
92+
class="shrink-0"
93+
:class="SEVERITY_TEXT_COLORS.moderate"
94+
title="arrgggg"
95+
classicon="i-carbon:security"
96+
>
97+
<span>{{ $t('package.dependencies.view_vulnerabilities') }}</span>
98+
</LinkBase>
99+
100+
<LinkBase
101+
to="#"
102+
class="shrink-0"
103+
:class="SEVERITY_TEXT_COLORS.low"
104+
title="arrgggg"
105+
classicon="i-carbon:security"
106+
>
107+
<span>{{ $t('package.dependencies.view_vulnerabilities') }}</span>
108+
</LinkBase>
109+
110+
<LinkBase
111+
to="#"
112+
class="shrink-0"
113+
:class="SEVERITY_TEXT_COLORS.unknown"
114+
title="arrgggg"
115+
classicon="i-carbon:security"
116+
>
117+
<span>{{ $t('package.dependencies.view_vulnerabilities') }}</span>
118+
</LinkBase>
119+
65120
<search
66121
class="w-full max-w-xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
67122
style="animation-delay: 0.2s"

‎app/pages/package/[[org]]/[name].vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -773,7 +773,7 @@ onKeyStroke(
773773

774774
<div
775775
v-if="deprecationNotice"
776-
class="border border-red-400 bg-red-400/10 rounded-lg px-3 py-2 text-base text-red-400"
776+
class="border border-red-700 dark:border-red-400 bg-red-400/10 rounded-lg px-3 py-2 text-base text-red-700 dark:text-red-400"
777777
>
778778
<h2 class="font-medium mb-2">
779779
{{
@@ -925,7 +925,7 @@ onKeyStroke(
925925
/>
926926
</span>
927927
<span v-else-if="vulnTreeStatus === 'success'">
928-
<span v-if="hasVulnerabilities" class="text-amber-500">
928+
<span v-if="hasVulnerabilities" class="text-amber-700 dark:text-amber-500">
929929
{{ numberFormatter.format(vulnCount) }}
930930
</span>
931931
<span v-else class="inline-flex items-center gap-1 text-fg-muted">

0 commit comments

Comments
 (0)