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'
}
@@ -295,7 +295,7 @@ const bulkProgressMessage = computed(() => {
:aria-valuenow="bulkWaiting ? undefined : bulkProgress"
:aria-valuemin="0"
:aria-valuemax="bulkTotal"
style="box-shadow: 0px -2px 4px 0px rgba(27, 217, 106, 0.1)"
style="box-shadow: 0px -2px 4px 0px color-mix(in srgb, var(--color-brand) 10%, transparent)"
/>
</div>
</FloatingActionBar>
@@ -493,7 +493,7 @@ defineExpose({ show, showLoading, hide, getState, restore, updateItem, setItems
class="rounded-full border border-solid px-3 py-1.5 text-base font-semibold leading-5 transition-colors"
:class="
selectedFilters.length === 0
? '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'
"
@click="selectedFilters = []"
@@ -507,7 +507,7 @@ defineExpose({ show, showLoading, hide, getState, restore, updateItem, setItems
class="rounded-full border border-solid px-3 py-1.5 text-base font-semibold leading-5 transition-colors"
:class="
selectedFilters.includes(option.id)
? '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'
"
@click="toggleFilter(option.id)"
@@ -566,7 +566,7 @@ function getBadgeClasses(version: Labrinth.Versions.v2.Version): string {
// Version type badges
switch (version.version_type) {
case 'release':
return 'bg-highlight-green border-brand text-brand'
return 'bg-highlight-green border-green text-green'
case 'beta':
return 'bg-highlight-blue border-brand-blue text-brand-blue'
case 'alpha':
@@ -579,7 +579,7 @@ function getBadgeClasses(version: Labrinth.Versions.v2.Version): string {
function getVersionTypeBadgeClasses(version: Labrinth.Versions.v2.Version): string {
switch (version.version_type) {
case 'release':
return 'bg-highlight-green border-brand text-brand'
return 'bg-highlight-green border-green text-green'
case 'beta':
return 'bg-highlight-blue border-brand-blue text-brand-blue'
case 'alpha':
@@ -854,7 +854,7 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
class="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]"
:class="
selectedFilters.length === 0
? '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'
"
:aria-pressed="selectedFilters.length === 0"
@@ -868,7 +868,7 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
class="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]"
:class="
selectedFilters.includes(option.id)
? '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'
"
:aria-pressed="selectedFilters.includes(option.id)"
@@ -234,7 +234,9 @@
role="progressbar"
:aria-valuemin="0"
:aria-valuemax="bulkTotal"
style="box-shadow: 0px -2px 4px 0px rgba(27, 217, 106, 0.1)"
style="
box-shadow: 0px -2px 4px 0px color-mix(in srgb, var(--color-brand) 10%, transparent);
"
/>
</div>
</FloatingActionBar>