Files
Modrinth-plus/packages/tooling-config/tailwind/tailwind-preset.ts
Calum H. 7d92e4ec7f feat: content tab rewrite for worlds (#5136)
* feat: base content card component

* fix: tooltips + colors

* feat: fix orgs

* feat: base content tab internals rewrite

* feat: fix invalidmodal

* feat: add ContentModpackCard

* fix: extract types

* draft: layout

* feat: unlink modal

* feat: impl content tab

* fix: lint

* fix: toggling

* temp: disable updating stuff

* feat: selection v-model

* feat: bulk selection

* feat: mods tab rough draft

* feat: use fuse.js

* feat: add project combobox

* clean up project combobox

* feat: start install to play modal

* fix: events

* feat: use v-on

* feat: bulk actions + fix floating action bar width

* feat: figma alignments

* feat: migrate toggle to tailwind

* fix: row borders

* feat: disabled state

* feat: virtual list impl for card table based on window scroll

* fix: lint

* feat: virtualization + smaller contentcard items

* feat: use ContentCardTable + ContentCardItems

* feat: fix gap + border issues on last elm

* feat: cleanup + use proper searching

* fix: use TeleportOverflowMenu

* fix: fallback to svg if src is invalid on avatar component

* fix: storybook

* feat: start on updater modal

* feat: finish content updater modal

* feat: i18n pass

* feat: impl modal

* feat(app): backend changes for content tab refactor (#5237)

* feat: include_changelog=false for updater modal

* fix: hash overrides

* feat: update checking for modpack

* feat: qa

* feat: modpack content modal

* fix: padding in table to match modals + tightness

* fix: lint

* feat: delete modal

* feat: fix toggle bugs

* fix: prepr

* fix: duplicate messages

* qa: full width search

* qa: use bg-surface-1.5

* qa: animation for filter pills

* qa: standardize hover colors

* fix: border-[1px] is border

* qa: mass de-select actually mass selecting

* qa: match figma designs for floating action bar

* qa: modal fixes

* q: modal fixes x2

* fix: table border

* qa: confirm modals

* qa: modal alignment

* qa: re-add stuck heading + dedupe logic

* qa: dedupe virtual scrolling + remove dead components

* qa: responsiveness for content table + link fixes

* qa: version column link, tooltips + lint fixes

* qa: instance busy protections

* fix: installation freeze bug

* chore: remove old mods page

* refactor: deduplicate layout

* chore: delete old content page(s)

* qa

* qa

* qa

* feat: sort btn - to iterate

* fix: ml

* feat: date added

* fix: lint

* fix: formatting.ts removal

* feat: get_dependencies_as_content_items

* qa: final QA changes

* refactor: deduplicate + polish content.rs

* feat: hook up content.vue with v1

* feat: hide v1 content api behind frontend feature flag

* fix: query keys + copy on empty state

* chore: i18n pass

* feat: reimpl unlink + upload endpoint

* feat: use bulk endpoints v1

* fix: lint

* fix: flags

* fix: responsiveness via container queries

* fix: lint

* qa: 1

* qa: fixes

* qa: fix ssr issues with browse content

* qa: header page divider

* qa: modals

* fix: prepr

* fix: issues

* fix: lint

* fix: toggle v1 ff

* qa: 5

* qa: delete modal copy

* feat: creation flow modals (#5383)

* refactor: delete content v0 usages + impl

* feat: qa + fixes

* feat: installing banner using state event

* feat: fix modpack card bugs + filtering issues

* refactor: delete backups v0 api module

* feat: v1 servers GET endpoint

* fix: backups

* feat: swap to kyros upload v1 addon

* fix: use tanstack for loader.vue

* feat: finish install from discovery modal

* qa: bug fixes

* feat: set up installation settings

* fix: lint

* fix: typos

* fix: bugs

* fix: disable inline content

* feat: content tab improvements — upload UX, installation settings, and client-only indicators

   Upload cancellation and navigation guard:
   - Add ConfirmLeaveModal that prompts when navigating away during upload
   - Cancel in-flight XHR uploads when user confirms leaving the page
   - Add beforeunload handler to warn on browser/tab close during upload
   - Track uploadedBytes/totalBytes in UploadState for progress display
   - Replace Collapsible with Transition for upload progress admonition
   - Show byte progress and percentage in upload banner
   - Clamp upload progress to prevent exceeding 100%

   Installation settings (server.properties):
   - Add KnownPropertiesFields and PropertiesFields types to Archon types
   - Add buildProperties() to creation flow context to collect gamemode,
     difficulty, seed, world type, structures, and generator settings
   - Pass properties through installContent on onboarding, discovery, and
     ServerSetupModal flows

   Server setup and discovery flow improvements:
   - Migrate ServerSetupModal from servers_v0.reinstall to content_v1.installContent
   - Replace loaderApiNames lookup with toApiLoader() helper
   - Remove eraseDataOnInstall toggle — always use soft_override: false
   - Simplify modpack install on discovery page to use first available version
     and route through creation flow modal for both onboarding and non-onboarding
   - Differentiate post-install navigation: content page for onboarding,
     loader options for existing servers

   Modpack update flow:
   - Replace updateModpack() call with installContent() using soft_override: true
     to support version selection in the content updater modal

   Client-only mod indicators:
   - Add environment field to AddonVersion (reuses Labrinth.Projects.v3.Environment)
   - Add environment to ContentItem and isClientOnly to ContentCardTableItem
   - Show orange TriangleAlertIcon with tooltip on client-only mods in content table
   - Add "Client-only" filter pill to content filtering (controlled via
     showClientOnlyFilter on ContentManagerContext)
   - Apply client-only indicators in both ContentPageLayout and ModpackContentModal

   Misc:
   - Add CLAUDE.md note about using prepr commands for lint checks
   - Export ConfirmLeaveModal from instances barrel

* fix: piping

* fix: switch content disable for linked server instances

* feat: client only filter

* fix: prepr

* feat: hasUpdate shape update

* feat: bulk update endpoint impl for content in panel

* feat: websocket state impl again with new phases

* fix: ws

* fix: use timeout fn for sync admon + fix content card layout scroll for browsers with overflow anchor bug

* fix: qa bugs

* fix: lint, a11y and i18n

* refactor: set up layouts folder properly

* fix: linked data cache stuff + lint

* feat: move installationsettings to shared layout

* fix: lint

* fix: issues

* feat: temp fuck staging up

* fix: lockfile

* fix: data sync issues on loader.vue

* fix: lint

* Hide shader configuration files from content list (#5499)

* feat: workaround search problem + split out reset

* fix: qa

* fix: changelog not showing on first open

* fix: qa + optimistic updating improvements

* fix: prepr+lint

* fix: qa

* feat: qa

* fix: lint

* fix: lint

* fix: build

* fix: build

* fix: type errors

* fix: fade and JAVA_HOME passthrough

* feat: qa

* feat: impl diff shit

* fix: qa

* fix: app qa

* feat: update diff modal

* fix: endpoint

* fix: qa

* fix: qa

* fix: use bulk in modpack modal

* feat: abort signal impl + fix issues

* fix: diff modal trunc

* feat: qa

* fix: qa

* feat: tooltip content tab

* fix: prepr

* fix: dismiss on settings btn

* feat: qa

* feat: dont clear handlers on disconnect

* fix: lint

* fix: wrangler + introduce staging-archon env file

---------

Signed-off-by: Calum H. <calum@modrinth.com>
Co-authored-by: tdgao <mr.trumgao@gmail.com>
Co-authored-by: Artyom Ezri <61311568+Artezon@users.noreply.github.com>
2026-03-12 13:24:32 -07:00

264 lines
8.0 KiB
TypeScript

import containerQueries from '@tailwindcss/container-queries'
import type { Config } from 'tailwindcss'
const config: Config = {
theme: {
extend: {
colors: {
surface: {
1: 'var(--surface-1)',
1.5: 'var(--surface-1-5)',
2: 'var(--surface-2)',
3: 'var(--surface-3)',
4: 'var(--surface-4)',
5: 'var(--surface-5)',
},
/// TODO: Clean up these aliases within codebase to use default, primary, tertiary.
// text-default
primary: 'var(--color-text-default)',
// text-primary
contrast: 'var(--color-text-primary)',
// text-tertiary
secondary: 'var(--color-text-tertiary)',
red: {
DEFAULT: 'var(--color-red)',
50: 'var(--color-red-50)',
100: 'var(--color-red-100)',
200: 'var(--color-red-200)',
300: 'var(--color-red-300)',
400: 'var(--color-red-400)',
500: 'var(--color-red-500)',
600: 'var(--color-red-600)',
700: 'var(--color-red-700)',
800: 'var(--color-red-800)',
900: 'var(--color-red-900)',
950: 'var(--color-red-950)',
},
orange: {
DEFAULT: 'var(--color-orange)',
50: 'var(--color-orange-50)',
100: 'var(--color-orange-100)',
200: 'var(--color-orange-200)',
300: 'var(--color-orange-300)',
400: 'var(--color-orange-400)',
500: 'var(--color-orange-500)',
600: 'var(--color-orange-600)',
700: 'var(--color-orange-700)',
800: 'var(--color-orange-800)',
900: 'var(--color-orange-900)',
950: 'var(--color-orange-950)',
},
green: {
DEFAULT: 'var(--color-green)',
50: 'var(--color-green-50)',
100: 'var(--color-green-100)',
200: 'var(--color-green-200)',
300: 'var(--color-green-300)',
400: 'var(--color-green-400)',
500: 'var(--color-green-500)',
600: 'var(--color-green-600)',
700: 'var(--color-green-700)',
800: 'var(--color-green-800)',
900: 'var(--color-green-900)',
950: 'var(--color-green-950)',
},
blue: {
DEFAULT: 'var(--color-blue)',
50: 'var(--color-blue-50)',
100: 'var(--color-blue-100)',
200: 'var(--color-blue-200)',
300: 'var(--color-blue-300)',
400: 'var(--color-blue-400)',
500: 'var(--color-blue-500)',
600: 'var(--color-blue-600)',
700: 'var(--color-blue-700)',
800: 'var(--color-blue-800)',
900: 'var(--color-blue-900)',
950: 'var(--color-blue-950)',
},
purple: {
DEFAULT: 'var(--color-purple)',
50: 'var(--color-purple-50)',
100: 'var(--color-purple-100)',
200: 'var(--color-purple-200)',
300: 'var(--color-purple-300)',
400: 'var(--color-purple-400)',
500: 'var(--color-purple-500)',
600: 'var(--color-purple-600)',
700: 'var(--color-purple-700)',
800: 'var(--color-purple-800)',
900: 'var(--color-purple-900)',
950: 'var(--color-purple-950)',
},
gray: {
DEFAULT: 'var(--color-gray)',
50: 'var(--color-gray-50)',
100: 'var(--color-gray-100)',
200: 'var(--color-gray-200)',
300: 'var(--color-gray-300)',
400: 'var(--color-gray-400)',
500: 'var(--color-gray-500)',
600: 'var(--color-gray-600)',
700: 'var(--color-gray-700)',
800: 'var(--color-gray-800)',
900: 'var(--color-gray-900)',
950: 'var(--color-gray-950)',
},
/// === LEGACY ===
icon: 'var(--color-base)',
// Text
inactive: 'var(--color-text-inactive)',
dark: 'var(--color-text-dark)',
inverted: 'var(--color-text-inverted)',
heading: 'var(--color-heading)',
bg: {
DEFAULT: 'var(--surface-1)', // var(--color-bg)
red: 'var(--color-red-bg)',
orange: 'var(--color-orange-bg)',
green: 'var(--color-green-bg)',
blue: 'var(--color-blue-bg)',
purple: 'var(--color-purple-bg)',
raised: 'var(--surface-3)', // var(--color-raised-bg)
},
banners: {
error: {
bg: 'var(--banner-error-bg)',
text: 'var(--banner-error-text)',
border: 'var(--banner-error-border)',
},
warning: {
bg: 'var(--banner-warning-bg)',
text: 'var(--banner-warning-text)',
border: 'var(--banner-warning-border)',
},
info: {
bg: 'var(--banner-info-bg)',
text: 'var(--banner-info-text)',
border: 'var(--banner-info-border)',
},
},
highlight: {
DEFAULT: 'var(--color-brand-highlight)',
red: 'var(--color-red-highlight)',
orange: 'var(--color-orange-highlight)',
green: 'var(--color-green-highlight)',
blue: 'var(--color-blue-highlight)',
purple: 'var(--color-purple-highlight)',
},
divider: {
DEFAULT: 'var(--color-divider)',
dark: 'var(--color-divider-dark)',
},
brand: {
DEFAULT: 'var(--color-brand)',
red: 'var(--color-red)',
orange: 'var(--color-orange)',
green: 'var(--color-green)',
blue: 'var(--color-blue)',
purple: 'var(--color-purple)',
highlight: 'var(--color-brand-highlight)',
shadow: 'var(--color-brand-shadow)',
inverted: 'var(--color-accent-contrast)',
},
tabUnderlineHovered: 'var(--tab-underline-hovered)',
button: {
bg: 'var(--color-button-bg)',
text: 'var(--color-button-text)',
bgHover: 'var(--color-button-bg-hover)',
textHover: 'var(--color-button-text-hover)',
bgActive: 'var(--color-button-bg-active)',
textActive: 'var(--color-button-text-active)',
border: 'var(--color-button-border)',
bgSelected: 'var(--color-button-bg-selected)',
textSelected: 'var(--color-button-text-selected)',
},
toggleHandle: 'var(--color-toggle-handle)',
dropdown: {
bg: 'var(--color-dropdown-bg)',
text: 'var(--color-dropdown-text)',
},
tooltip: {
bg: 'var(--color-tooltip-bg)',
text: 'var(--color-tooltip-text)',
},
code: {
bg: 'var(--color-code-bg)',
text: 'var(--color-code-text)',
},
kbdShadow: 'var(--color-kbd-shadow)',
ad: {
DEFAULT: 'var(--color-ad)',
raised: 'var(--color-ad-raised)',
contrast: 'var(--color-ad-contrast)',
highlight: 'var(--color-ad-highlight)',
},
greyLink: {
DEFAULT: 'var(--color-grey-link)',
hover: 'var(--color-grey-link-hover)',
active: 'var(--color-grey-link-active)',
},
link: {
DEFAULT: 'var(--color-link)',
hover: 'var(--color-link-hover)',
active: 'var(--color-link-active)',
},
warning: {
bg: 'var(--color-warning-bg)',
text: 'var(--color-warning-text)',
banner: {
text: 'var(--color-warning-banner-text)',
bg: 'var(--color-warning-banner-bg)',
side: 'var(--color-warning-banner-side)',
},
},
infoBanner: {
text: 'var(--color-info-banner-text)',
bg: 'var(--color-info-banner-bg)',
side: 'var(--color-info-banner-side)',
},
blockQuote: 'var(--color-block-quote)',
headerUnderline: 'var(--color-header-underline)',
hr: 'var(--color-hr)',
table: {
border: 'var(--color-table-border)',
alternateRow: 'var(--color-table-alternate-row)',
},
},
backgroundImage: {
mazeBg: 'var(--landing-maze-bg)',
mazeGradientBg: 'var(--landing-maze-gradient-bg)',
// @ts-ignore
landing: {
mazeOuterBg: 'var(--landing-maze-outer-bg)',
colorHeading: 'var(--landing-color-heading)',
colorSubheading: 'var(--landing-color-subheading)',
transitionGradientStart: 'var(--landing-transition-gradient-start)',
transitionGradientEnd: 'var(--landing-transition-gradient-end)',
hoverCardGradient: 'var(--landing-hover-card-gradient)',
borderGradient: 'var(--landing-border-gradient)',
borderColor: 'var(--landing-border-color)',
creatorGradient: 'var(--landing-creator-gradient)',
blobGradient: 'var(--landing-blob-gradient)',
cardBg: 'var(--landing-card-bg)',
blueLabel: 'var(--landing-blue-label)',
blueLabelBg: 'var(--landing-blue-label-bg)',
greenLabel: 'var(--landing-green-label)',
greenLabelBg: 'var(--landing-green-label-bg)',
rawBg: 'var(--landing-raw-bg)',
},
},
},
},
plugins: [containerQueries],
corePlugins: {
preflight: false,
},
}
export default config