mirror of
https://github.com/modrinth/code.git
synced 2026-08-25 09:04:55 +00:00
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:
@@ -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>
|
||||
|
||||
+2
-2
@@ -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)"
|
||||
|
||||
+2
-2
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user