[WEB-5898] chore: update tailwind config

[aaryan610]

Description

This PR updates the tailwind config with the new/updated variables-

1. Updated typography h5 and h6 font sizes.
2. Updated existing label palettes.
3. Added pink and purple to the label palettes.

Type of Change

• Improvement (change that would cause existing functionality to not work as expected)

Summary by CodeRabbit

• Style
  • Updated color palette for label components across multiple color families (indigo, emerald, orange, pink, purple, crimson, yellow, and grey).
  • Adjusted typography sizing for heading levels.
  • Refined design tokens for backgrounds, borders, and text elements.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Updated Tailwind CSS design tokens in variables.css, including adjustments to existing label color families (indigo, emerald, grey, crimson, yellow), addition of new label color families (orange, pink, purple), and typography size updates for h5 and h6 heading tokens.

Changes

Cohort / File(s)	Summary
Design Token Updates packages/tailwind-config/variables.css	Updated label color tokens across multiple families with new tonal values; added new orange, pink, and purple label color families with complete token sets (background, background-strong, hover, icon, text, border, focus); adjusted typography token sizes for h5 (text-16 → text-18) and h6 (text-14 → text-16); realigned various background, border, and text tokens to new color palette mappings.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰✨ Colors dance in tokens bright,
New oranges, pinks, purples take flight,
Typography grows, h5 and h6 stand tall,
A palette renewed—we've got it all! 🎨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'chore: update tailwind config' is vague and generic, using non-descriptive terms that don't convey specific meaningful information about the actual changes (typography updates, label palette expansions).	Consider a more specific title like 'chore: update tailwind variables for typography and label colors' to better reflect the scope of changes.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description covers the main changes and includes the required Type of Change section, though it lacks detailed information in other optional template sections like Test Scenarios and References.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

This PR updates the Tailwind CSS configuration file with design system improvements including typography adjustments and expanded label color palettes.

• Updated h5 heading font size from 16px to 18px and h6 from 14px to 16px
• Refined color values for existing label palettes (indigo, emerald, yellow)
• Added three new label color palettes (orange, pink, purple) with both light and dark mode variants

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[makeplane]

Linked to Plane Work Item(s)

• [WEB-5898] Update tailwind config

This comment was auto-generated by Plane

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 110dbd9 and d61c1e8.

📒 Files selected for processing (1)

• packages/tailwind-config/variables.css

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{js,jsx,ts,tsx,json,css}

📄 CodeRabbit inference engine (AGENTS.md)

Use Prettier with Tailwind plugin for code formatting, run pnpm fix:format

Files:

• packages/tailwind-config/variables.css

🧠 Learnings (11)

📓 Common learnings

Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use semantic text colors that match the visual hierarchy: `text-primary` for main text and headings, `text-secondary` for descriptions, `text-tertiary` for labels and metadata, and `text-placeholder` for placeholder text and hints

Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use semantic border colors: `border-subtle` for subtle borders and dividers, `border-subtle-1` for slightly more visible borders, `border-strong` for strong emphasis borders, and `border-strong-1` for very strong borders

Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use `-selected` state variants (e.g., `bg-layer-1-selected`) only when there is actual selection logic implemented, or use data attributes like `data-[selected]:bg-layer-1-selected`

📚 Learning: 2025-12-17T10:58:59.591Z

Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use semantic text colors that match the visual hierarchy: `text-primary` for main text and headings, `text-secondary` for descriptions, `text-tertiary` for labels and metadata, and `text-placeholder` for placeholder text and hints

Applied to files:

• packages/tailwind-config/variables.css

📚 Learning: 2025-12-17T10:58:59.591Z

Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use semantic border colors: `border-subtle` for subtle borders and dividers, `border-subtle-1` for slightly more visible borders, `border-strong` for strong emphasis borders, and `border-strong-1` for very strong borders

Applied to files:

• packages/tailwind-config/variables.css

📚 Learning: 2025-12-17T10:58:59.591Z

Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use `-selected` state variants (e.g., `bg-layer-1-selected`) only when there is actual selection logic implemented, or use data attributes like `data-[selected]:bg-layer-1-selected`

Applied to files:

• packages/tailwind-config/variables.css

📚 Learning: 2025-12-17T10:58:59.591Z

Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use `-active` state variants (e.g., `bg-layer-1-active`) when an element is in a pressed or active state

Applied to files:

• packages/tailwind-config/variables.css

📚 Learning: 2025-12-17T10:58:59.591Z

Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Do not use hover state classes (e.g., `bg-layer-1-hover`) as base backgrounds - hover states should only be applied with the `hover:` prefix alongside the base background class

Applied to files:

• packages/tailwind-config/variables.css

📚 Learning: 2025-12-17T10:58:59.591Z

Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Do not use `bg-canvas` for page-level backgrounds, nested containers, cards, components, modals, dropdowns, sidebars, or panels

Applied to files:

• packages/tailwind-config/variables.css

📚 Learning: 2025-12-17T10:58:59.591Z

Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Never use `bg-layer-2` or higher for content boxes and cards - always use the matching layer number; the exception for going one level above applies only to interactive form elements

Applied to files:

• packages/tailwind-config/variables.css

📚 Learning: 2025-12-17T10:58:59.591Z

Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Sidebar menu items should use transparent backgrounds with hover states like `hover:bg-layer-1-hover` rather than base layer backgrounds, maintaining visual lightness while providing hover feedback

Applied to files:

• packages/tailwind-config/variables.css

📚 Learning: 2025-12-17T10:58:59.591Z

Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use `bg-surface-1`, `bg-surface-2`, or `bg-surface-3` for top-level containers that sit directly on the canvas, such as main content areas, page sections, or primary containers

Applied to files:

• packages/tailwind-config/variables.css

📚 Learning: 2025-12-17T10:58:59.591Z

Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use the rare exception to go one level above for visual separation only in interactive form elements (inputs, buttons, switches) within modals - for example, a modal with `bg-surface-1` can use `bg-layer-2` for form inputs to achieve visual distinction

Applied to files:

• packages/tailwind-config/variables.css

🪛 Biome (2.1.2)

packages/tailwind-config/variables.css

[error] 1104-1104: expected , but instead found --text-h5-regular

Remove --text-h5-regular

(parse)

---

[error] 1104-1104: expected , but instead found (

Remove (

(parse)

---

[error] 1104-1104: expected , but instead found --text-18

Remove --text-18

(parse)

---

[error] 1104-1104: expected , but instead found )

Remove )

(parse)

---

[error] 1105-1105: expected , but instead found --text-h5-regular--line-height

Remove --text-h5-regular--line-height

(parse)

---

[error] 1105-1105: Unexpected value or character.

Expected one of:

(parse)

---

[error] 1106-1106: expected , but instead found --text-h5-regular--letter-spacing

Remove --text-h5-regular--letter-spacing

(parse)

---

[error] 1106-1106: expected , but instead found (

Remove (

(parse)

---

[error] 1106-1106: expected , but instead found --tracking-default

Remove --tracking-default

(parse)

---

[error] 1106-1106: expected , but instead found )

Remove )

(parse)

---

[error] 1107-1107: expected , but instead found --text-h5-regular--font-weight

Remove --text-h5-regular--font-weight

(parse)

---

[error] 1107-1107: expected , but instead found (

Remove (

(parse)

---

[error] 1107-1107: expected , but instead found --font-weight-regular

Remove --font-weight-regular

(parse)

---

[error] 1107-1107: expected , but instead found )

Remove )

(parse)

---

[error] 1109-1109: expected , but instead found --text-h5-medium

Remove --text-h5-medium

(parse)

---

[error] 1109-1109: expected , but instead found (

Remove (

(parse)

---

[error] 1109-1109: expected , but instead found --text-18

Remove --text-18

(parse)

---

[error] 1109-1109: expected , but instead found )

Remove )

(parse)

---

[error] 1110-1110: expected , but instead found --text-h5-medium--line-height

Remove --text-h5-medium--line-height

(parse)

---

[error] 1110-1110: Unexpected value or character.

Expected one of:

(parse)

---

[error] 1111-1111: expected , but instead found --text-h5-medium--letter-spacing

Remove --text-h5-medium--letter-spacing

(parse)

---

[error] 1111-1111: expected , but instead found (

Remove (

(parse)

---

[error] 1111-1111: expected , but instead found --tracking-default

Remove --tracking-default

(parse)

---

[error] 1111-1111: expected , but instead found )

Remove )

(parse)

---

[error] 1112-1112: expected , but instead found --text-h5-medium--font-weight

Remove --text-h5-medium--font-weight

(parse)

---

[error] 1112-1112: expected , but instead found (

Remove (

(parse)

---

[error] 1112-1112: expected , but instead found --font-weight-medium

Remove --font-weight-medium

(parse)

---

[error] 1112-1112: expected , but instead found )

Remove )

(parse)

---

[error] 1114-1114: expected , but instead found --text-h5-semibold

Remove --text-h5-semibold

(parse)

---

[error] 1114-1114: expected , but instead found (

Remove (

(parse)

---

[error] 1114-1114: expected , but instead found --text-18

Remove --text-18

(parse)

---

[error] 1114-1114: expected , but instead found )

Remove )

(parse)

---

[error] 1115-1115: expected , but instead found --text-h5-semibold--line-height

Remove --text-h5-semibold--line-height

(parse)

---

[error] 1115-1115: Unexpected value or character.

Expected one of:

(parse)

---

[error] 1116-1116: expected , but instead found --text-h5-semibold--letter-spacing

Remove --text-h5-semibold--letter-spacing

(parse)

---

[error] 1116-1116: expected , but instead found (

Remove (

(parse)

---

[error] 1116-1116: expected , but instead found --tracking-default

Remove --tracking-default

(parse)

---

[error] 1116-1116: expected , but instead found )

Remove )

(parse)

---

[error] 1117-1117: expected , but instead found --text-h5-semibold--font-weight

Remove --text-h5-semibold--font-weight

(parse)

---

[error] 1117-1117: expected , but instead found (

Remove (

(parse)

---

[error] 1117-1117: expected , but instead found --font-weight-semibold

Remove --font-weight-semibold

(parse)

---

[error] 1117-1117: expected , but instead found )

Remove )

(parse)

---

[error] 1119-1119: expected , but instead found --text-h5-bold

Remove --text-h5-bold

(parse)

---

[error] 1119-1119: expected , but instead found (

Remove (

(parse)

---

[error] 1119-1119: expected , but instead found --text-18

Remove --text-18

(parse)

---

[error] 1119-1119: expected , but instead found )

Remove )

(parse)

---

[error] 1120-1120: expected , but instead found --text-h5-bold--line-height

Remove --text-h5-bold--line-height

(parse)

---

[error] 1120-1120: Unexpected value or character.

Expected one of:

(parse)

---

[error] 1121-1121: expected , but instead found --text-h5-bold--letter-spacing

Remove --text-h5-bold--letter-spacing

(parse)

---

[error] 1121-1121: expected , but instead found (

Remove (

(parse)

---

[error] 1121-1121: expected , but instead found --tracking-default

Remove --tracking-default

(parse)

---

[error] 1121-1121: expected , but instead found )

Remove )

(parse)

---

[error] 1122-1122: expected , but instead found --text-h5-bold--font-weight

Remove --text-h5-bold--font-weight

(parse)

---

[error] 1122-1122: expected , but instead found (

Remove (

(parse)

---

[error] 1122-1122: expected , but instead found --font-weight-bold

Remove --font-weight-bold

(parse)

---

[error] 1122-1122: expected , but instead found )

Remove )

(parse)

---

[error] 1124-1124: expected , but instead found --text-h6-regular

Remove --text-h6-regular

(parse)

---

[error] 1124-1124: expected , but instead found (

Remove (

(parse)

---

[error] 1124-1124: expected , but instead found --text-16

Remove --text-16

(parse)

---

[error] 1124-1124: expected , but instead found )

Remove )

(parse)

---

[error] 1125-1125: expected , but instead found --text-h6-regular--line-height

Remove --text-h6-regular--line-height

(parse)

---

[error] 1125-1125: Unexpected value or character.

Expected one of:

(parse)

---

[error] 1126-1126: expected , but instead found --text-h6-regular--letter-spacing

Remove --text-h6-regular--letter-spacing

(parse)

---

[error] 1126-1126: expected , but instead found (

Remove (

(parse)

---

[error] 1126-1126: expected , but instead found --tracking-default

Remove --tracking-default

(parse)

---

[error] 1126-1126: expected , but instead found )

Remove )

(parse)

---

[error] 1127-1127: expected , but instead found --text-h6-regular--font-weight

Remove --text-h6-regular--font-weight

(parse)

---

[error] 1127-1127: expected , but instead found (

Remove (

(parse)

---

[error] 1127-1127: expected , but instead found --font-weight-regular

Remove --font-weight-regular

(parse)

---

[error] 1127-1127: expected , but instead found )

Remove )

(parse)

---

[error] 1129-1129: expected , but instead found --text-h6-medium

Remove --text-h6-medium

(parse)

---

[error] 1129-1129: expected , but instead found (

Remove (

(parse)

---

[error] 1129-1129: expected , but instead found --text-16

Remove --text-16

(parse)

---

[error] 1129-1129: expected , but instead found )

Remove )

(parse)

---

[error] 1130-1130: expected , but instead found --text-h6-medium--line-height

Remove --text-h6-medium--line-height

(parse)

---

[error] 1130-1130: Unexpected value or character.

Expected one of:

(parse)

---

[error] 1131-1131: expected , but instead found --text-h6-medium--letter-spacing

Remove --text-h6-medium--letter-spacing

(parse)

---

[error] 1131-1131: expected , but instead found (

Remove (

(parse)

---

[error] 1131-1131: expected , but instead found --tracking-default

Remove --tracking-default

(parse)

---

[error] 1131-1131: expected , but instead found )

Remove )

(parse)

---

[error] 1132-1132: expected , but instead found --text-h6-medium--font-weight

Remove --text-h6-medium--font-weight

(parse)

---

[error] 1132-1132: expected , but instead found (

Remove (

(parse)

---

[error] 1132-1132: expected , but instead found --font-weight-medium

Remove --font-weight-medium

(parse)

---

[error] 1132-1132: expected , but instead found )

Remove )

(parse)

---

[error] 1134-1134: expected , but instead found --text-h6-semibold

Remove --text-h6-semibold

(parse)

---

[error] 1134-1134: expected , but instead found (

Remove (

(parse)

---

[error] 1134-1134: expected , but instead found --text-16

Remove --text-16

(parse)

---

[error] 1134-1134: expected , but instead found )

Remove )

(parse)

---

[error] 1135-1135: expected , but instead found --text-h6-semibold--line-height

Remove --text-h6-semibold--line-height

(parse)

---

[error] 1135-1135: Unexpected value or character.

Expected one of:

(parse)

---

[error] 1136-1136: expected , but instead found --text-h6-semibold--letter-spacing

Remove --text-h6-semibold--letter-spacing

(parse)

---

[error] 1136-1136: expected , but instead found (

Remove (

(parse)

---

[error] 1136-1136: expected , but instead found --tracking-default

Remove --tracking-default

(parse)

---

[error] 1136-1136: expected , but instead found )

Remove )

(parse)

---

[error] 1137-1137: expected , but instead found --text-h6-semibold--font-weight

Remove --text-h6-semibold--font-weight

(parse)

---

[error] 1137-1137: expected , but instead found (

Remove (

(parse)

---

[error] 1137-1137: expected , but instead found --font-weight-semibold

Remove --font-weight-semibold

(parse)

---

[error] 1137-1137: expected , but instead found )

Remove )

(parse)

---

[error] 1139-1139: expected , but instead found --text-h6-bold

Remove --text-h6-bold

(parse)

---

[error] 1139-1139: expected , but instead found (

Remove (

(parse)

---

[error] 1139-1139: expected , but instead found --text-16

Remove --text-16

(parse)

---

[error] 1139-1139: expected , but instead found )

Remove )

(parse)

---

[error] 1104-1104: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1106-1106: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1107-1107: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1109-1109: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1111-1111: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1112-1112: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1114-1114: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1116-1116: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1117-1117: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1119-1119: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1121-1121: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1122-1122: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1124-1124: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1126-1126: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1127-1127: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1129-1129: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1131-1131: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1132-1132: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1134-1134: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1136-1136: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1137-1137: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 1139-1139: Unexpected unknown pseudo-class var

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Agent
• GitHub Check: Analyze (javascript)
• GitHub Check: Build packages

🔇 Additional comments (3)

packages/tailwind-config/variables.css (3)

1104-1142: Static analysis errors are false positives.

The Biome parse errors flagged for lines 1104-1142 appear to be false positives. The typography token declarations follow valid CSS custom property syntax and are consistent with the h1-h4 patterns above. The linter may not fully recognize Tailwind v4's @theme directive context.

---

324-358: Label color refinements look good.

The tonal adjustments to existing label families improve visual hierarchy: indigo backgrounds are lighter for subtlety, while emerald and yellow icons/text are darker for better contrast.

---

1104-1142: Typography sizes updated: h5 now 18px, h6 now 16px.

The h5 heading variants have been increased from 16px (--text-16) to 18px (--text-18), and h6 variants from 14px (--text-14) to 16px (--text-16). These changes affect 10 component files using h5 tokens and 2 files using h6 tokens. The file is properly formatted and the changes are intentionally applied per the recent commit.