feat(Checkbox): add var7 red color variant to CheckboxMultiSelect

[yashpreetbathla]

Why?

We needed a red checkbox color option for use inside CheckboxMultiSelect (and Checkbox directly). The component already ships six color variants (var1–var6), but none of them is red, so consumers had no token-backed way to render a red checkbox.

This adds a new var7 variant wired to the existing danger palette — the checked fill resolves to #ff2323 (= palette.danger.400), the same red already used elsewhere in the design system. The change is purely additive: no existing variant, token, or color is modified, so it is non-breaking.

How?

The variant prop flows straight through CheckboxMultiSelect.Item → MultiSelectCheckboxItem → Checkbox, so CheckboxMultiSelect itself needed no code change. var7 was added at the same four layers every other variant lives in:

1. Design tokens (tokens/themes/dark.json, light.json) — new var7 entry under click.checkbox.color.variations, modeled on var1 but referencing {palette.danger.*} instead of {palette.success.*} / chart green. The active fill points at {palette.danger.400} (#ff2323).
2. Regenerated token output — ran yarn generate:tokens, which emits --click-checkbox-color-variations-var7-* into tokens-{dark,light}.css and variables.{dark,light}.ts. These files are generated, not hand-edited.
3. Variant class (Checkbox.module.css) — new .checkinput_variant_var7 block mapping those tokens onto the component's --checkbox-* CSS custom properties (identical shape to var1–var6).
4. Type + class map — 'var7' added to the CheckboxVariants union (Checkbox.types.ts) and to the cva variant map (Checkbox.tsx).

Because var7 reuses existing palette primitives, both light and dark themes are covered:

• Dark: checked fill #ff2323, stroke #c10000 → #ff7575 on hover/active
• Light: checked fill #ff2323, stroke #ff5353

Why reuse the danger palette instead of a new color?

#ff2323 already exists as palette.danger.400. Referencing it (rather than hardcoding a hex or introducing a new primitive) keeps the variant in sync with the rest of the danger scale and follows exactly how var1–var6 reference their palette families.

Tickets?

N/A

Contribution checklist?

• You've done enough research before writing
• You have reviewed the PR
• The commit messages are detailed
• The build command runs locally
• Assets or static content are linked and stored in the project
• For documentation, guides or references, you've tested the commands

Security checklist?

• All user inputs are validated and sanitized
• No usage of dangerouslySetInnerHTML
• Sensitive data has been identified and is being protected properly
• Build output contains no secrets or API keys

Preview?

Verified in Storybook:

• Forms → CheckboxMultiSelect → Checkbox Multi Select Variants — new Variant 7 row renders a red checkbox when selected.
• Forms → Checkbox → Var7 Checked — the red checkbox in isolation.

<CheckboxMultiSelect onSelect={handleSelect} placeholder={label}>
  <CheckboxMultiSelect.Item value="variant 7" variant="var7">
    Variant 7
  </CheckboxMultiSelect.Item>
</CheckboxMultiSelect>

// or directly
<Checkbox variant="var7" checked />

Validation run locally (all green):

• tsc --noEmit — no type errors
• eslint on the changed files — clean
• vitest run — Checkbox (2) + CheckboxMultiSelect (17) suites pass
• yarn generate:tokens — regenerates cleanly; diff is additive-only

Changed files

• tokens/themes/dark.json, tokens/themes/light.json — new var7 token entry referencing {palette.danger.*}
• src/theme/styles/tokens-dark.css, src/theme/styles/tokens-light.css — generated --click-checkbox-color-variations-var7-* vars
• src/theme/tokens/variables.dark.ts, src/theme/tokens/variables.light.ts — generated TS token entries
• src/components/Checkbox/Checkbox.types.ts — 'var7' added to CheckboxVariants
• src/components/Checkbox/Checkbox.tsx — var7 added to the cva variant map
• src/components/Checkbox/Checkbox.module.css — .checkinput_variant_var7 class
• src/components/Checkbox/Checkbox.stories.tsx — Var7Checked story
• src/components/CheckboxMultiSelect/CheckboxMultiSelect.stories.tsx — "Variant 7" item in the variants story
• .changeset/feat-checkbox-var7-variant.md — minor bump

Screenshots

Light Theme

Dark Theme

[changeset-bot]

🦋 Changeset detected

Latest commit: d57f746

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clickhouse/click-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[crisalbu]

For dark mode, we need a lighter colour. ff2323 works well for when it's filled, but it has a low contrast when it's just used for the border.

Could we use the same colour we have for the danger text instead?

[workflow-authentication-public]

Storybook Preview Deployed

✅ Preview URL: https://click-4sh6ldkxa-clickhouse.vercel.app

Built from commit: e0fd6176a5660f957117709d8fb2e078c1232cd5

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit d57f746. Configure here.}