Skip to content

[WEB-5911] fix: error outline button text color #8531

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
aaryan610 wants to merge 1 commit into
base: preview
Choose a base branch
from
Open

[WEB-5911] fix: error outline button text color #8531

aaryan610 wants to merge 1 commit into from
+11 −11

Conversation

@aaryan610
Copy link
Member

@aaryan610 aaryan610 commented Jan 12, 2026 •
edited by coderabbitai bot
Loading

Description

This PR-

  1. Updates text color for error outline button
  2. Updates border danger primary value for dark mode

Type of Change

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

Summary by CodeRabbit

  • Style
    • Refined error button styling with updated text color for improved clarity.
    • Enhanced heading typography with adjusted text sizes for better visual hierarchy.
    • Updated color tokens for improved visual consistency across the design system.

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

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 12, 2026 •
edited
Loading

📝 Walkthrough

Walkthrough

Updates styling and design tokens across the component library: button variant text color changed from danger-primary to danger-secondary, border-danger-strong color token updated to use darker red values, and heading text size tokens adjusted for h5 and h6 typography families.

Changes

Cohort / File(s) Summary
Button Styling
packages/propel/src/button/helper.tsx		 Error-outline variant text color updated from text-danger-primary to text-danger-secondary
Design Token Updates
packages/tailwind-config/variables.css		 Border danger token: --border-danger-strong updated to reference var(--red-700) instead of var(--red-400) (Light & Dark modes); Heading tokens: h5 family resized to --text-18 (from --text-16), h6 family resized to --text-16 (from --text-14)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A dash of darker red, a shift in hue,
The buttons now wear secondary true,
Typography dances up a size or two,
Tokens align with every view! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 inconclusive)
Check name Status Explanation Resolution
Description check ❓ Inconclusive The description identifies key changes but lacks detail on why modifications were made and omits test scenarios, media, and specific references despite the template. Expand description with rationale for changes, add test scenarios, and include before/after screenshots or visual examples to demonstrate the impact.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly describes the main change to the error outline button text color, which aligns with the primary file modification in button/helper.tsx.
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.

✨ Finishing touches
  • 📝 Generate docstrings
📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8399f64 and dbeb85c.

📒 Files selected for processing (2)
  • packages/propel/src/button/helper.tsx
  • packages/tailwind-config/variables.css
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,mts,cts}

📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)

**/*.{ts,tsx,mts,cts}: Use const type parameters for more precise literal inference in TypeScript 5.0+
Use the satisfies operator to validate types without widening them
Leverage inferred type predicates to reduce the need for explicit is return types in filter/check functions
Use NoInfer<T> utility to block inference for specific type arguments when they should be determined by other arguments
Utilize narrowing in switch(true) blocks for control flow analysis (TypeScript 5.3+)
Rely on narrowing from direct boolean comparisons for type guards
Trust preserved narrowing in closures when variables aren't modified after the check (TypeScript 5.4+)
Use constant indices to narrow object/array properties (TypeScript 5.5+)
Use standard ECMAScript decorators (Stage 3) instead of legacy experimentalDecorators
Use using declarations for explicit resource management with Disposable pattern instead of manual cleanup (TypeScript 5.2+)
Use with { type: "json" } for import attributes; avoid deprecated assert syntax (TypeScript 5.3/5.8+)
Use import type explicitly when importing types to ensure they are erased during compilation, respecting verbatimModuleSyntax flag
Use .ts, .mts, .cts extensions in import type statements (TypeScript 5.2+)
Use import type { Type } from "mod" with { "resolution-mode": "import" } for specific module resolution contexts (TypeScript 5.3+)
Use new iterator methods (map, filter, etc.) if targeting modern environments (TypeScript 5.6+)
Utilize new Set methods like union, intersection, etc., when available (TypeScript 5.5+)
Use Object.groupBy / Map.groupBy standard methods for grouping instead of external libraries (TypeScript 5.4+)
Use Promise.withResolvers() for creating promises with exposed resolve/reject functions (TypeScript 5.7+)
Use copying array methods (toSorted, toSpliced, with) for immutable array operations (TypeScript 5.2+)
Avoid accessing instance fields via super in classes (TypeScript 5....

Files:

  • packages/propel/src/button/helper.tsx
**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Enable TypeScript strict mode and ensure all files are fully typed

Files:

  • packages/propel/src/button/helper.tsx
**/*.{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/propel/src/button/helper.tsx
  • packages/tailwind-config/variables.css
**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{js,jsx,ts,tsx}: Use ESLint with shared config across packages, adhering to max warnings limits per package
Use camelCase for variable and function names, PascalCase for components and types
Use try-catch with proper error types and log errors appropriately

Files:

  • packages/propel/src/button/helper.tsx
🧠 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
📚 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/propel/src/button/helper.tsx
  • 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/propel/src/button/helper.tsx
  • 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/propel/src/button/helper.tsx
  • 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/propel/src/button/helper.tsx
  • 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/propel/src/button/helper.tsx
  • 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/propel/src/button/helper.tsx
  • 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/propel/src/button/helper.tsx
  • 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/propel/src/button/helper.tsx
  • 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
🪛 Biome (2.1.2)
packages/tailwind-config/variables.css

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

Remove --text-h5-regular

(parse)

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

Remove (

(parse)

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

Remove --text-18

(parse)

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

Remove )

(parse)

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

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

(parse)

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

Expected one of:

(parse)

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

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

(parse)

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

Remove (

(parse)

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

Remove --tracking-default

(parse)

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

Remove )

(parse)

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

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

(parse)

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

Remove (

(parse)

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

Remove --font-weight-regular

(parse)

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

Remove )

(parse)

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

Remove --text-h5-medium

(parse)

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

Remove (

(parse)

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

Remove --text-18

(parse)

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

Remove )

(parse)

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

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

(parse)

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

Expected one of:

(parse)

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

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

(parse)

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

Remove (

(parse)

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

Remove --tracking-default

(parse)

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

Remove )

(parse)

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

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

(parse)

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

Remove (

(parse)

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

Remove --font-weight-medium

(parse)

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

Remove )

(parse)

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

Remove --text-h5-semibold

(parse)

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

Remove (

(parse)

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

Remove --text-18

(parse)

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

Remove )

(parse)

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

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

(parse)

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

Expected one of:

(parse)

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

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

(parse)

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

Remove (

(parse)

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

Remove --tracking-default

(parse)

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

Remove )

(parse)

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

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

(parse)

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

Remove (

(parse)

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

Remove --font-weight-semibold

(parse)

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

Remove )

(parse)

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

Remove --text-h5-bold

(parse)

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

Remove (

(parse)

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

Remove --text-18

(parse)

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

Remove )

(parse)

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

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

(parse)

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

Expected one of:

(parse)

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

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

(parse)

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

Remove (

(parse)

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

Remove --tracking-default

(parse)

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

Remove )

(parse)

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

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

(parse)

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

Remove (

(parse)

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

Remove --font-weight-bold

(parse)

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

Remove )

(parse)

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

Remove --text-h6-regular

(parse)

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

Remove (

(parse)

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

Remove --text-16

(parse)

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

Remove )

(parse)

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

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

(parse)

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

Expected one of:

(parse)

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

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

(parse)

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

Remove (

(parse)

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

Remove --tracking-default

(parse)

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

Remove )

(parse)

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

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

(parse)

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

Remove (

(parse)

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

Remove --font-weight-regular

(parse)

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

Remove )

(parse)

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

Remove --text-h6-medium

(parse)

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

Remove (

(parse)

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

Remove --text-16

(parse)

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

Remove )

(parse)

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

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

(parse)

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

Expected one of:

(parse)

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

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

(parse)

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

Remove (

(parse)

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

Remove --tracking-default

(parse)

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

Remove )

(parse)

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

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

(parse)

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

Remove (

(parse)

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

Remove --font-weight-medium

(parse)

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

Remove )

(parse)

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

Remove --text-h6-semibold

(parse)

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

Remove (

(parse)

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

Remove --text-16

(parse)

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

Remove )

(parse)

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

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

(parse)

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

Expected one of:

(parse)

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

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

(parse)

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

Remove (

(parse)

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

Remove --tracking-default

(parse)

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

Remove )

(parse)

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

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

(parse)

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

Remove (

(parse)

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

Remove --font-weight-semibold

(parse)

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

Remove )

(parse)

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

Remove --text-h6-bold

(parse)

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

Remove (

(parse)

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

Remove --text-16

(parse)

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

Remove )

(parse)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

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

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

[error] 1097-1097: 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). (4)
  • GitHub Check: CodeQL analysis (javascript-typescript)
  • GitHub Check: Agent
  • GitHub Check: Build packages
  • GitHub Check: Analyze (javascript)
🔇 Additional comments (3)
packages/propel/src/button/helper.tsx (1)

13-14: LGTM! Text color change improves visual balance for outline buttons.

Using text-danger-secondary (maps to red-700) instead of text-danger-primary (maps to red-900) provides better contrast against the subtle bg-layer-2 background and complements the border-danger-strong border styling.

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

509-509: LGTM! Dark mode border color improvement.

Changing --border-danger-strong from var(--red-400) to var(--red-700) in dark mode improves visibility. In the dark mode red scale, red-700 has higher lightness (0.7022 vs 0.5095 in oklch), providing better contrast against dark backgrounds.

1062-1100: These h5/h6 heading tokens are unused orphaned design tokens with zero impact on the codebase.

The text-h5 and text-h6 tokens are defined in variables.css but have no actual usage anywhere in the application. Even if these values changed, they would not affect any rendered UI. Consider removing these unused tokens from the design system or implementing actual usage if they were intended for future components.

Likely an incorrect or invalid review comment.

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

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

@makeplane
Copy link

makeplane bot commented Jan 12, 2026

Linked to Plane Work Item(s)

This comment was auto-generated by Plane

Copilot AI reviewed Jan 12, 2026
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This pull request updates error-related button styling and typography sizes in the design system. The main changes include updating text color for error outline buttons and adjusting border colors for dark mode, along with undocumented typography size increases.

Changes:

  • Updated error outline button text color from danger-primary to danger-secondary for better visual consistency with border colors
  • Changed border-danger-strong color in dark mode from red-400 to red-700 to match light mode
  • Increased h5 heading font sizes from 16px to 18px and h6 from 14px to 16px (not mentioned in PR description)

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
packages/tailwind-config/variables.css Updated border-danger-strong color for dark mode and increased h5/h6 typography sizes
packages/propel/src/button/helper.tsx Changed error-outline button text color to text-danger-secondary and fixed whitespace formatting

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

packages/tailwind-config/variables.css
Comment on lines +1062 to +1097
--text-h5-regular: var(--text-18);
--text-h5-regular--line-height: 1.2;
--text-h5-regular--letter-spacing: var(--tracking-default);
--text-h5-regular--font-weight: var(--font-weight-regular);

--text-h5-medium: var(--text-16);
--text-h5-medium: var(--text-18);
--text-h5-medium--line-height: 1.2;
--text-h5-medium--letter-spacing: var(--tracking-default);
--text-h5-medium--font-weight: var(--font-weight-medium);

--text-h5-semibold: var(--text-16);
--text-h5-semibold: var(--text-18);
--text-h5-semibold--line-height: 1.2;
--text-h5-semibold--letter-spacing: var(--tracking-default);
--text-h5-semibold--font-weight: var(--font-weight-semibold);

--text-h5-bold: var(--text-16);
--text-h5-bold: var(--text-18);
--text-h5-bold--line-height: 1.2;
--text-h5-bold--letter-spacing: var(--tracking-default);
--text-h5-bold--font-weight: var(--font-weight-bold);

--text-h6-regular: var(--text-14);
--text-h6-regular: var(--text-16);
--text-h6-regular--line-height: 1.2;
--text-h6-regular--letter-spacing: var(--tracking-default);
--text-h6-regular--font-weight: var(--font-weight-regular);

--text-h6-medium: var(--text-14);
--text-h6-medium: var(--text-16);
--text-h6-medium--line-height: 1.2;
--text-h6-medium--letter-spacing: var(--tracking-default);
--text-h6-medium--font-weight: var(--font-weight-medium);

--text-h6-semibold: var(--text-14);
--text-h6-semibold: var(--text-16);
--text-h6-semibold--line-height: 1.2;
--text-h6-semibold--letter-spacing: var(--tracking-default);
--text-h6-semibold--font-weight: var(--font-weight-semibold);

--text-h6-bold: var(--text-14);
--text-h6-bold: var(--text-16);
Copy link

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The typography size changes for h5 (from text-16 to text-18) and h6 (from text-14 to text-16) heading variants are not mentioned in the PR description. The PR description only mentions updating text color for error outline button and border danger primary value for dark mode. These typography changes represent a significant design system update that could affect many components across the application and should be explicitly documented in the PR description.

Copilot uses AI. Check for mistakes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@prateekshourya29 prateekshourya29 Awaiting requested review from prateekshourya29

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

🌟improvement requires approval 🎨UI / UX

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@aaryan610