Skip to content

Apply borders to Figma components for high contrast theme #1375

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.

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

Open
andrew-ronaldson opened this issue Jan 28, 2025 · 1 comment
Open

Apply borders to Figma components for high contrast theme #1375

andrew-ronaldson opened this issue Jan 28, 2025 · 1 comment

Comments

@andrew-ronaldson
Copy link

andrew-ronaldson commented Jan 28, 2025

In most High contrast themes borders are used to show clear separation between objects on the screen. In our default theme, borders are not used on all components so in order to enable a true high contrast theme we need to support transparent borders on all borderless components.

Figma has a built in theme switcher that can instantly swap styles to different themes and modes. Adding a new transparent border token would help us take advantage of this functionality rather than maintaining extra theme files.

@github-project-automation github-project-automation bot moved this to Needs triage in PatternFly Issues Jan 28, 2025
@andrew-ronaldson andrew-ronaldson added this to the 2025.Q2 milestone Apr 9, 2025
@andrew-ronaldson andrew-ronaldson moved this from Needs triage to In Progress in PatternFly Issues Apr 9, 2025
@andrew-ronaldson andrew-ronaldson changed the title Spike: How to apply borders to components in high contrast theme Spike: How to apply borders to Figma components for high contrast theme Apr 9, 2025
@andrew-ronaldson andrew-ronaldson changed the title Spike: How to apply borders to Figma components for high contrast theme Spike: Apply borders to Figma components for high contrast theme Apr 9, 2025
@andrew-ronaldson andrew-ronaldson changed the title Spike: Apply borders to Figma components for high contrast theme Apply borders to Figma components for high contrast theme Apr 9, 2025
@lboehling
Copy link

lboehling commented Apr 23, 2025

Update --

Tina has been evaluating when/where to add borders in this figma file.

I've explored figma variables for applying the border in this file.

  • Exploring new high contrast border color variable that is set to transparent in L/D themes, and aliases to border--color--default in HCL/HCD.
  • Exploring new boolean border variable that is set to False in L/D themes and true in HCL/HCD.

*I think we may need to use a combination of the 2 proposed tokens to enable HC border toggles in figma (still evaluating though). POC will test to see if these proposed tokens can work in core as well.

Currently working on documenting a list of components that need a net-new border, and document standards around border styling updates across components.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: In Progress
Development

No branches or pull requests

2 participants