Skip to content
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

Create contrast chart of colors and adjust text-subtle and border-strong #2778

Closed
Thunear opened this issue Nov 14, 2024 · 0 comments · Fixed by #2784
Closed

Create contrast chart of colors and adjust text-subtle and border-strong #2778

Thunear opened this issue Nov 14, 2024 · 0 comments · Fixed by #2784
Assignees
@Thunear
Labels
🎨 figma Everything related to changes in Figma
Milestone
V1 - Helhetlig te...

Comments

@Thunear
Copy link
Collaborator

Thunear commented Nov 14, 2024 •
edited
Loading

Create a contrast chart of the colors in light and dark mode so that it will be easier to see contrast boundaries when adjusting colors.

  • Create it programatically in the theme-builder in the page "/contrast-charts" for internal testing.
  • Paste the images into the colors page of Figma Core UI kit.

Color adjustments:

  • Adjust border-default in light and dark mode so that is has 3:1 contrast against surface-default.
  • Make border-default and border-strong have the same lightness and have atleast 4.5:1 contrast against surface-default.

Image
@Thunear Thunear converted this from a draft issue Nov 14, 2024
@Thunear Thunear self-assigned this Nov 14, 2024
@Thunear Thunear added the 🎨 figma Everything related to changes in Figma label Nov 14, 2024
@Thunear Thunear added this to the V1 - Helhetlig tematisering milestone Nov 14, 2024
@Thunear Thunear changed the title Create contrast chart of colors in Figma Create contrast chart of colors and adjust border-default and border-strong Nov 15, 2024
@Thunear Thunear mentioned this issue Nov 15, 2024
Merged
@Febakke Febakke changed the title Create contrast chart of colors and adjust border-default and border-strong Create contrast chart of colors and adjust text-subtle and border-strong Nov 21, 2024
mimarz pushed a commit that referenced this issue Nov 21, 2024
@Thunear @Barsnes
chore: adjust color lightness and create contrast chart (#2784)
2cc2d2f 
resolves #2778

---------

Co-authored-by: Tobias Barsnes <[email protected]>
@github-project-automation github-project-automation bot moved this from 🏗 In progress to ✅ Done in Team Design System Nov 21, 2024
Barsnes added a commit that referenced this issue Nov 22, 2024
@Thunear @Barsnes
chore: adjust color lightness and create contrast chart (#2784)
871fc13 
resolves #2778

---------

Co-authored-by: Tobias Barsnes <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Thunear Thunear

Labels
🎨 figma Everything related to changes in Figma
Projects
Team Design System
Status: ✅ Done
Milestone
V1 - Helhetlig tematisering
Development

Successfully merging a pull request may close this issue.

chore: adjust color lightness and create contrast chart digdir/designsystemet
1 participant
@Thunear