fix: inconsistent color vars (#7028)

* Fix inconsistent color vars

* pointless commit

Signed-off-by: Prospector <6166773+Prospector@users.noreply.github.com>

* undo

Signed-off-by: Prospector <6166773+Prospector@users.noreply.github.com>

* prepr

---------

Signed-off-by: Prospector <6166773+Prospector@users.noreply.github.com>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
This commit is contained in:
Arthur
2026-08-07 06:30:42 +00:00
committed by GitHub
co-authored by Prospector
parent 9625740906
commit 61b52ecd2c
21 changed files with 43 additions and 43 deletions
@@ -132,51 +132,51 @@ const buttonColors: Record<string, 'blue' | 'orange' | 'red' | 'green'> = {
<style scoped>
.collapsible-admonition[data-type='critical'] {
border-color: rgba(255, 73, 110, 0.6);
border-color: color-mix(in srgb, var(--color-red) 60%, transparent);
}
.collapsible-admonition[data-type='critical'] .collapsible-admonition__item {
background: rgba(255, 73, 110, 0.1);
background: var(--color-red-bg);
}
.collapsible-admonition[data-type='critical'] .collapsible-admonition__item--bordered {
border-top: 1px solid rgba(255, 73, 110, 0.6);
border-top: 1px solid color-mix(in srgb, var(--color-red) 60%, transparent);
}
.collapsible-admonition[data-type='info'] {
border-color: rgba(47, 158, 255, 0.6);
border-color: color-mix(in srgb, var(--color-blue) 60%, transparent);
}
.collapsible-admonition[data-type='info'] .collapsible-admonition__item {
background: rgba(47, 158, 255, 0.1);
background: var(--color-blue-bg);
}
.collapsible-admonition[data-type='info'] .collapsible-admonition__item--bordered {
border-top: 1px solid rgba(47, 158, 255, 0.6);
border-top: 1px solid color-mix(in srgb, var(--color-blue) 60%, transparent);
}
.collapsible-admonition[data-type='warning'] {
border-color: rgba(255, 163, 71, 0.6);
border-color: color-mix(in srgb, var(--color-orange) 60%, transparent);
}
.collapsible-admonition[data-type='warning'] .collapsible-admonition__item {
background: rgba(255, 163, 71, 0.1);
background: var(--color-orange-bg);
}
.collapsible-admonition[data-type='warning'] .collapsible-admonition__item--bordered {
border-top: 1px solid rgba(255, 163, 71, 0.6);
border-top: 1px solid color-mix(in srgb, var(--color-orange) 60%, transparent);
}
.collapsible-admonition[data-type='success'] {
border-color: rgba(27, 217, 106, 0.6);
border-color: color-mix(in srgb, var(--color-green) 60%, transparent);
}
.collapsible-admonition[data-type='success'] .collapsible-admonition__item {
background: rgba(27, 217, 106, 0.1);
background: var(--color-green-bg);
}
.collapsible-admonition[data-type='success'] .collapsible-admonition__item--bordered {
border-top: 1px solid rgba(27, 217, 106, 0.6);
border-top: 1px solid color-mix(in srgb, var(--color-green) 60%, transparent);
}
.collapsible-admonition-enter-active,
@@ -13,7 +13,7 @@
>
<div
:class="[
'grid place-content-center text-brand border-brand border-solid border bg-highlight-green',
'grid place-content-center text-brand border-brand border-solid border bg-brand-highlight',
size === 'small' ? 'w-10 h-10' : 'h-14 w-14',
size === 'small' ? 'rounded-xl' : 'rounded-2xl',
]"
@@ -38,7 +38,7 @@ function pillClass(active: boolean) {
return [
'cursor-pointer rounded-full border border-solid px-3 py-1.5 text-base font-semibold leading-5 transition-all duration-100 active:scale-[0.97]',
active
? 'border-green bg-brand-highlight text-brand'
? 'border-brand bg-brand-highlight text-brand'
: 'border-surface-5 bg-surface-4 text-primary hover:bg-surface-5',
]
}
@@ -246,9 +246,7 @@ function selectCustom() {
<div
class="z-10 -mb-3.5 rounded-full text-sm font-medium text-brand whitespace-nowrap absolute -top-3 right-4 bg-surface-3"
>
<div
class="bg-brand-highlight border border-solid border-highlight-green px-2.5 py-0.5 rounded-full"
>
<div class="bg-brand-highlight border border-solid border-brand px-2.5 py-0.5 rounded-full">
{{ formatMessage(messages.mostPopular) }}
</div>
</div>
@@ -33,10 +33,10 @@ const { formatMessage } = useVIntl()
const pingClass = computed(() => {
if (props.ping === undefined) {
return 'border-brand bg-highlight-green text-brand'
return 'border-green bg-highlight-green text-green'
}
if (props.ping < 150) {
return 'border-brand bg-highlight-green text-brand'
return 'border-green bg-highlight-green text-green'
}
if (props.ping < 250) {
return 'border-brand-orange bg-highlight-orange text-orange'
@@ -514,7 +514,7 @@ function roleClasses(role: ServerAccessRole): string {
case 'owner':
return 'border-orange !bg-highlight-orange !text-orange'
case 'editor':
return 'border-green !bg-highlight-green !text-brand'
return 'border-green !bg-highlight-green !text-green'
case 'viewer':
return 'border-blue !bg-highlight-blue !text-blue'
}
@@ -300,7 +300,7 @@ function roleClasses(role: ServerAccessRole): string {
case 'owner':
return 'border-orange bg-highlight-orange text-orange'
case 'editor':
return 'border-green bg-highlight-green text-brand'
return 'border-green bg-highlight-green text-green'
case 'viewer':
return 'border-blue bg-highlight-blue text-blue'
}
@@ -115,7 +115,7 @@ function roleClasses(role: ServerAccessRole): string {
case 'owner':
return 'border-orange bg-highlight-orange text-orange'
case 'editor':
return 'border-green bg-highlight-green text-brand'
return 'border-green bg-highlight-green text-green'
case 'viewer':
return 'border-blue bg-highlight-blue text-blue'
}