linuxmint / linuxmint/mint-themes

Replace radio/checkbox PNG assets with pure CSS (Mint-Y)

Open
#549 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
CSS
Stars
265
Forks
137
PR merge metrics
No merged PRs in 30d

Description

Target: Mint-Y GTK3 radio buttons and checkboxes
Current: 16×16 PNG + 32×32 @2x PNG for each state (×5 states × 2 widget types ≈ 20+ PNG files)
Proposal: Replace PNG assets with pure CSS via appearance: none + border-radius + radial-gradient

Current assets

Each radio/checkbox has up to 5 state variants, each with 1× and 2× PNGs:

assets/radio-unchecked.png          (16×16)
assets/radio-unchecked@2.png        (32×32)
assets/radio-unchecked-dark.png
assets/radio-checked.png
assets/radio-checked-dark.png
assets/radio-unchecked-selected.png
assets/radio-checked-selected.png
assets/radio-indeterminate.png
... (same for checkboxes)

Proposed CSS approach (conceptual)

radio,
check {
  appearance: none;
  -gtk-icon-source: none;
  min-width: 16px;
  min-height: 16px;
  border-radius: 50%;
  border: 2px solid @borders;
  background: @theme_base_color;
  transition: border-color 200ms, background 200ms;
}

radio:checked {
  border-color: @theme_selected_bg_color;
  background: radial-gradient(
    circle at 50% 50%,
    @theme_base_color 1.5px,
    @theme_selected_bg_color 2.5px
  );
}

Benefits

  • ~20 fewer PNG files — smaller package size
  • HiDPI native — no separate @2x assets, renders crisp at any scale
  • Easier theming — colors come from CSS variables, no need to regenerate PNGs for each accent
  • Animations — smooth transition between states
  • Hover state — trivially added via CSS if desired
  • Focus ring:focus-visible outline can be styled directly

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the Mint-Y GTK3 CSS and references to the radio and checkbox assets, including radio-unchecked.png, radio-checked.png, and their dark, selected, indeterminate, and @2 variants. Compare all five states for both widget types; done means the PNG assets are replaced with CSS styling while the stated states, HiDPI rendering, and theming behavior remain covered.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
design, desktop
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.