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

Clean sdv4 #1055

Merged
merged 3 commits into from
Sep 19, 2024
Merged

Clean sdv4 #1055

merged 3 commits into from
Sep 19, 2024

Conversation

lukasoppermann
Copy link
Contributor

Summary

List of notable changes:

What should reviewers focus on?

Steps to test:

@lukasoppermann lukasoppermann requested review from a team as code owners September 12, 2024 11:59
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Sep 12, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: 36f2cc1

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

This PR includes changesets to release 1 package
Name Type
@primer/primitives Major

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

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Sep 12, 2024 •
edited
Loading

Design Token Diff

/css/functional/themes/dark-colorblind.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-colorblind.css	2024-09-19 07:33:25.148597914 +0000
@@ -264,11 +264,11 @@
 --button-outline-borderColor-hover: #3d444d;
 --button-outline-borderColor-selected: #3d444d;
 --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-danger-fgColor-rest: #e6713e;
+  --button-danger-fgColor-rest: #db6d28;
 --button-danger-fgColor-hover: #ffffff;
 --button-danger-fgColor-active: #ffffff;
 --button-danger-fgColor-disabled: #db6d2880;
-  --button-danger-iconColor-rest: #e6713e;
+  --button-danger-iconColor-rest: #db6d28;
 --button-danger-iconColor-hover: #ffffff;
 --button-danger-bgColor-rest: #212830;
 --button-danger-bgColor-hover: #9b4215;
@@ -833,11 +833,11 @@
   --button-outline-borderColor-hover: #3d444d;
   --button-outline-borderColor-selected: #3d444d;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-danger-fgColor-rest: #e6713e;
+    --button-danger-fgColor-rest: #db6d28;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-active: #ffffff;
   --button-danger-fgColor-disabled: #db6d2880;
-    --button-danger-iconColor-rest: #e6713e;
+    --button-danger-iconColor-rest: #db6d28;
   --button-danger-iconColor-hover: #ffffff;
   --button-danger-bgColor-rest: #212830;
   --button-danger-bgColor-hover: #9b4215;

/css/functional/themes/dark-high-contrast.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-high-contrast.css	2024-09-19 07:33:26.013600139 +0000
@@ -169,7 +169,7 @@
 --control-bgColor-selected: #262c36;
 --control-fgColor-rest: #ffffff;
 --control-fgColor-placeholder: #b7bdc8;
-  --control-fgColor-disabled: #9198a199;
+  --control-fgColor-disabled: #656c76;
 --control-borderColor-rest: #b7bdc8;
 --control-borderColor-emphasis: #b7bdc8;
 --control-borderColor-disabled: #9198a11f;
@@ -193,21 +193,21 @@
 --control-checked-bgColor-rest: #194fb1;
 --control-checked-bgColor-hover: #2b64c1;
 --control-checked-bgColor-active: #3c79d0;
-  --control-checked-bgColor-disabled: #9198a199;
+  --control-checked-bgColor-disabled: #656c76;
 --control-checked-fgColor-rest: #ffffff;
 --control-checked-fgColor-disabled: #010409;
 --control-checked-borderColor-rest: #91cbff;
 --control-checked-borderColor-hover: #91cbff;
 --control-checked-borderColor-active: #91cbff;
-  --control-checked-borderColor-disabled: #9198a199;
+  --control-checked-borderColor-disabled: #656c76;
 --controlTrack-bgColor-rest: #2a313c;
 --controlTrack-bgColor-hover: #2f3742;
 --controlTrack-bgColor-active: #3d444d;
-  --controlTrack-bgColor-disabled: #9198a199;
+  --controlTrack-bgColor-disabled: #656c76;
 --controlTrack-fgColor-rest: #ffffff;
 --controlTrack-fgColor-disabled: #ffffff;
 --controlTrack-borderColor-rest: #b7bdc8;
-  --controlTrack-borderColor-disabled: #9198a199;
+  --controlTrack-borderColor-disabled: #656c76;
 --controlKnob-bgColor-rest: #010409;
 --controlKnob-bgColor-disabled: #262c36;
 --controlKnob-bgColor-checked: #ffffff;
@@ -242,10 +242,10 @@
 --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
 --button-invisible-fgColor-rest: #ffffff;
 --button-invisible-fgColor-hover: #ffffff;
-  --button-invisible-fgColor-disabled: #9198a199;
+  --button-invisible-fgColor-disabled: #656c76;
 --button-invisible-iconColor-rest: #d1d7e0;
 --button-invisible-iconColor-hover: #d1d7e0;
-  --button-invisible-iconColor-disabled: #9198a199;
+  --button-invisible-iconColor-disabled: #656c76;
 --button-invisible-bgColor-rest: #00000000;
 --button-invisible-bgColor-hover: #151b23;
 --button-invisible-bgColor-active: #212830;
@@ -264,11 +264,11 @@
 --button-outline-borderColor-hover: #b7bdc8;
 --button-outline-borderColor-selected: #b7bdc8;
 --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-danger-fgColor-rest: #ffa8a6;
+  --button-danger-fgColor-rest: #ffb1af;
 --button-danger-fgColor-hover: #ffffff;
 --button-danger-fgColor-active: #ffffff;
 --button-danger-fgColor-disabled: #ff949280;
-  --button-danger-iconColor-rest: #ffa8a6;
+  --button-danger-iconColor-rest: #ffb1af;
 --button-danger-iconColor-hover: #ffffff;
 --button-danger-bgColor-rest: #262c36;
 --button-danger-bgColor-hover: #ad0116;
@@ -438,7 +438,7 @@
 --fgColor-onInverse: #010409;
 --fgColor-white: #ffffff;
 --fgColor-black: #010409;
-  --fgColor-disabled: #9198a199;
+  --fgColor-disabled: #656c76;
 --fgColor-link: #74b9ff;
 --fgColor-neutral: #d1d7e0;
 --fgColor-accent: #74b9ff;
@@ -738,7 +738,7 @@
   --control-bgColor-selected: #262c36;
   --control-fgColor-rest: #ffffff;
   --control-fgColor-placeholder: #b7bdc8;
-    --control-fgColor-disabled: #9198a199;
+    --control-fgColor-disabled: #656c76;
   --control-borderColor-rest: #b7bdc8;
   --control-borderColor-emphasis: #b7bdc8;
   --control-borderColor-disabled: #9198a11f;
@@ -762,21 +762,21 @@
   --control-checked-bgColor-rest: #194fb1;
   --control-checked-bgColor-hover: #2b64c1;
   --control-checked-bgColor-active: #3c79d0;
-    --control-checked-bgColor-disabled: #9198a199;
+    --control-checked-bgColor-disabled: #656c76;
   --control-checked-fgColor-rest: #ffffff;
   --control-checked-fgColor-disabled: #010409;
   --control-checked-borderColor-rest: #91cbff;
   --control-checked-borderColor-hover: #91cbff;
   --control-checked-borderColor-active: #91cbff;
-    --control-checked-borderColor-disabled: #9198a199;
+    --control-checked-borderColor-disabled: #656c76;
   --controlTrack-bgColor-rest: #2a313c;
   --controlTrack-bgColor-hover: #2f3742;
   --controlTrack-bgColor-active: #3d444d;
-    --controlTrack-bgColor-disabled: #9198a199;
+    --controlTrack-bgColor-disabled: #656c76;
   --controlTrack-fgColor-rest: #ffffff;
   --controlTrack-fgColor-disabled: #ffffff;
   --controlTrack-borderColor-rest: #b7bdc8;
-    --controlTrack-borderColor-disabled: #9198a199;
+    --controlTrack-borderColor-disabled: #656c76;
   --controlKnob-bgColor-rest: #010409;
   --controlKnob-bgColor-disabled: #262c36;
   --controlKnob-bgColor-checked: #ffffff;
@@ -811,10 +811,10 @@
   --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
   --button-invisible-fgColor-rest: #ffffff;
   --button-invisible-fgColor-hover: #ffffff;
-    --button-invisible-fgColor-disabled: #9198a199;
+    --button-invisible-fgColor-disabled: #656c76;
   --button-invisible-iconColor-rest: #d1d7e0;
   --button-invisible-iconColor-hover: #d1d7e0;
-    --button-invisible-iconColor-disabled: #9198a199;
+    --button-invisible-iconColor-disabled: #656c76;
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #151b23;
   --button-invisible-bgColor-active: #212830;
@@ -833,11 +833,11 @@
   --button-outline-borderColor-hover: #b7bdc8;
   --button-outline-borderColor-selected: #b7bdc8;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-danger-fgColor-rest: #ffa8a6;
+    --button-danger-fgColor-rest: #ffb1af;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-active: #ffffff;
   --button-danger-fgColor-disabled: #ff949280;
-    --button-danger-iconColor-rest: #ffa8a6;
+    --button-danger-iconColor-rest: #ffb1af;
   --button-danger-iconColor-hover: #ffffff;
   --button-danger-bgColor-rest: #262c36;
   --button-danger-bgColor-hover: #ad0116;
@@ -1007,7 +1007,7 @@
   --fgColor-onInverse: #010409;
   --fgColor-white: #ffffff;
   --fgColor-black: #010409;
-    --fgColor-disabled: #9198a199;
+    --fgColor-disabled: #656c76;
   --fgColor-link: #74b9ff;
   --fgColor-neutral: #d1d7e0;
   --fgColor-accent: #74b9ff;

/css/functional/themes/light-high-contrast.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-high-contrast.css	2024-09-19 07:33:21.434590263 +0000
@@ -186,7 +186,7 @@
 --control-transparent-borderColor-rest: #ffffff00;
 --control-transparent-borderColor-hover: #454c54;
 --control-transparent-borderColor-active: #454c54;
-  --control-danger-fgColor-rest: #8a071e;
+  --control-danger-fgColor-rest: #86061d;
 --control-danger-fgColor-hover: #ffffff;
 --control-danger-bgColor-hover: #a0111f;
 --control-danger-bgColor-active: #8c0b1d;
@@ -264,11 +264,11 @@
 --button-outline-borderColor-hover: #013d14;
 --button-outline-borderColor-active: #013d14;
 --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
-  --button-danger-fgColor-rest: #8a071e;
+  --button-danger-fgColor-rest: #86061d;
 --button-danger-fgColor-hover: #ffffff;
 --button-danger-fgColor-active: #ffffff;
-  --button-danger-fgColor-disabled: #8a071e80;
-  --button-danger-iconColor-rest: #8a071e;
+  --button-danger-fgColor-disabled: #86061d80;
+  --button-danger-iconColor-rest: #86061d;
 --button-danger-iconColor-hover: #ffffff;
 --button-danger-bgColor-rest: #e0e6eb;
 --button-danger-bgColor-hover: #86061d;
@@ -295,7 +295,7 @@
 --buttonCounter-danger-bgColor-rest: #a0111f1a;
 --buttonCounter-danger-fgColor-rest: #980e1e;
 --buttonCounter-danger-fgColor-hover: #ffffff;
-  --buttonCounter-danger-fgColor-disabled: #8a071e80;
+  --buttonCounter-danger-fgColor-disabled: #86061d80;
 --reactionButton-selected-bgColor-rest: #dff7ff;
 --reactionButton-selected-bgColor-hover: #c7e9ff;
 --reactionButton-selected-fgColor-rest: #023b95;
@@ -447,8 +447,8 @@
 --fgColor-open: #024c1a;
 --fgColor-attention: #603700;
 --fgColor-severe: #702c00;
-  --fgColor-danger: #8a071e;
-  --fgColor-closed: #8a071e;
+  --fgColor-danger: #86061d;
+  --fgColor-closed: #86061d;
 --fgColor-done: #512598;
 --fgColor-upsell: #512598;
 --fgColor-sponsors: #7d0c57;
@@ -755,7 +755,7 @@
   --control-transparent-borderColor-rest: #ffffff00;
   --control-transparent-borderColor-hover: #454c54;
   --control-transparent-borderColor-active: #454c54;
-    --control-danger-fgColor-rest: #8a071e;
+    --control-danger-fgColor-rest: #86061d;
   --control-danger-fgColor-hover: #ffffff;
   --control-danger-bgColor-hover: #a0111f;
   --control-danger-bgColor-active: #8c0b1d;
@@ -833,11 +833,11 @@
   --button-outline-borderColor-hover: #013d14;
   --button-outline-borderColor-active: #013d14;
   --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
-    --button-danger-fgColor-rest: #8a071e;
+    --button-danger-fgColor-rest: #86061d;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-active: #ffffff;
-    --button-danger-fgColor-disabled: #8a071e80;
-    --button-danger-iconColor-rest: #8a071e;
+    --button-danger-fgColor-disabled: #86061d80;
+    --button-danger-iconColor-rest: #86061d;
   --button-danger-iconColor-hover: #ffffff;
   --button-danger-bgColor-rest: #e0e6eb;
   --button-danger-bgColor-hover: #86061d;
@@ -864,7 +864,7 @@
   --buttonCounter-danger-bgColor-rest: #a0111f1a;
   --buttonCounter-danger-fgColor-rest: #980e1e;
   --buttonCounter-danger-fgColor-hover: #ffffff;
-    --buttonCounter-danger-fgColor-disabled: #8a071e80;
+    --buttonCounter-danger-fgColor-disabled: #86061d80;
   --reactionButton-selected-bgColor-rest: #dff7ff;
   --reactionButton-selected-bgColor-hover: #c7e9ff;
   --reactionButton-selected-fgColor-rest: #023b95;
@@ -1016,8 +1016,8 @@
   --fgColor-open: #024c1a;
   --fgColor-attention: #603700;
   --fgColor-severe: #702c00;
-    --fgColor-danger: #8a071e;
-    --fgColor-closed: #8a071e;
+    --fgColor-danger: #86061d;
+    --fgColor-closed: #86061d;
   --fgColor-done: #512598;
   --fgColor-upsell: #512598;
   --fgColor-sponsors: #7d0c57;

/css/functional/typography/typography.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/typography/typography.css	2024-09-19 07:33:26.804602174 +0000
@@ -1,23 +1,43 @@
:root {
+  --text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace); /* Inline code blocks using em units to inherit size from its parent. */
+  --text-codeInline-weight: var(--base-text-weight-normal);
 --text-codeInline-size: 0.9285em;
+  --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace); /* Default style for rendering code blocks. */
+  --text-codeBlock-weight: var(--base-text-weight-normal);
 --text-codeBlock-lineHeight: 1.5385;
 --text-codeBlock-size: 0.8125rem;
+  --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */
+  --text-caption-weight: var(--base-text-weight-normal);
 --text-caption-lineHeight: 1.3333;
 --text-caption-size: 0.75rem;
+  --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */
+  --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif); /* Default UI font. Most commonly used for body text. */
+  --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif); /* User-generated content, markdown rendering. */
+  --text-body-weight: var(--base-text-weight-normal);
 --text-body-lineHeight-small: 1.6666;
 --text-body-lineHeight-medium: 1.4285;
 --text-body-lineHeight-large: 1.5;
 --text-body-size-small: 0.75rem;
 --text-body-size-medium: 0.875rem;
 --text-body-size-large: 1rem;
+  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */
+  --text-subtitle-weight: var(--base-text-weight-normal);
 --text-subtitle-lineHeight: 1.6;
 --text-subtitle-size: 1.25rem;
+  --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif); /* Uses the same size as body (large) with a heavier weight of semibold (600). */
+  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */
+  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */
+  --text-title-weight-small: var(--base-text-weight-semibold);
+  --text-title-weight-medium: var(--base-text-weight-semibold);
+  --text-title-weight-large: var(--base-text-weight-semibold);
 --text-title-lineHeight-small: 1.5;
 --text-title-lineHeight-medium: 1.6;
 --text-title-lineHeight-large: 1.5;
 --text-title-size-small: 1rem;
 --text-title-size-medium: 1.25rem;
 --text-title-size-large: 2rem;
+  --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */
+  --text-display-weight: var(--base-text-weight-medium);
 --text-display-lineHeight: 1.4;
 --text-display-size: 2.5rem;
 --text-display-lineBoxHeight: 1.4;
@@ -25,24 +45,4 @@
 --fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
 --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
 --fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  --text-codeInline-weight: var(--base-text-weight-normal);
-  --text-codeBlock-weight: var(--base-text-weight-normal);
-  --text-caption-weight: var(--base-text-weight-normal);
-  --text-body-weight: var(--base-text-weight-normal);
-  --text-subtitle-weight: var(--base-text-weight-normal);
-  --text-title-weight-small: var(--base-text-weight-semibold);
-  --text-title-weight-medium: var(--base-text-weight-semibold);
-  --text-title-weight-large: var(--base-text-weight-semibold);
-  --text-display-weight: var(--base-text-weight-medium);
-  --text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace); /* Inline code blocks using em units to inherit size from its parent. */
-  --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace); /* Default style for rendering code blocks. */
-  --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */
-  --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */
-  --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif); /* Default UI font. Most commonly used for body text. */
-  --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif); /* User-generated content, markdown rendering. */
-  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */
-  --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif); /* Uses the same size as body (large) with a heavier weight of semibold (600). */
-  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */
-  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */
-  --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */
}

/css/primitives.css

 
+++ /home/runner/work/primitives/primitives/dist/css/primitives.css	2024-09-19 07:33:27.140603038 +0000
@@ -136,25 +136,45 @@
 --overlay-offset: 0.25rem;
}
:root {
+  --text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace); /* Inline code blocks using em units to inherit size from its parent. */
+  --text-codeInline-weight: var(--base-text-weight-normal);
 --text-codeInline-size: 0.9285em;
+  --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace); /* Default style for rendering code blocks. */
+  --text-codeBlock-weight: var(--base-text-weight-normal);
 --text-codeBlock-lineHeight: 1.5385;
 --text-codeBlock-size: 0.8125rem;
+  --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */
+  --text-caption-weight: var(--base-text-weight-normal);
 --text-caption-lineHeight: 1.3333;
 --text-caption-size: 0.75rem;
+  --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */
+  --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif); /* Default UI font. Most commonly used for body text. */
+  --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif); /* User-generated content, markdown rendering. */
+  --text-body-weight: var(--base-text-weight-normal);
 --text-body-lineHeight-small: 1.6666;
 --text-body-lineHeight-medium: 1.4285;
 --text-body-lineHeight-large: 1.5;
 --text-body-size-small: 0.75rem;
 --text-body-size-medium: 0.875rem;
 --text-body-size-large: 1rem;
+  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */
+  --text-subtitle-weight: var(--base-text-weight-normal);
 --text-subtitle-lineHeight: 1.6;
 --text-subtitle-size: 1.25rem;
+  --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif); /* Uses the same size as body (large) with a heavier weight of semibold (600). */
+  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */
+  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */
+  --text-title-weight-small: var(--base-text-weight-semibold);
+  --text-title-weight-medium: var(--base-text-weight-semibold);
+  --text-title-weight-large: var(--base-text-weight-semibold);
 --text-title-lineHeight-small: 1.5;
 --text-title-lineHeight-medium: 1.6;
 --text-title-lineHeight-large: 1.5;
 --text-title-size-small: 1rem;
 --text-title-size-medium: 1.25rem;
 --text-title-size-large: 2rem;
+  --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */
+  --text-display-weight: var(--base-text-weight-medium);
 --text-display-lineHeight: 1.4;
 --text-display-size: 2.5rem;
 --text-display-lineBoxHeight: 1.4;
@@ -162,24 +182,4 @@
 --fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
 --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
 --fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  --text-codeInline-weight: var(--base-text-weight-normal);
-  --text-codeBlock-weight: var(--base-text-weight-normal);
-  --text-caption-weight: var(--base-text-weight-normal);
-  --text-body-weight: var(--base-text-weight-normal);
-  --text-subtitle-weight: var(--base-text-weight-normal);
-  --text-title-weight-small: var(--base-text-weight-semibold);
-  --text-title-weight-medium: var(--base-text-weight-semibold);
-  --text-title-weight-large: var(--base-text-weight-semibold);
-  --text-display-weight: var(--base-text-weight-medium);
-  --text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace); /* Inline code blocks using em units to inherit size from its parent. */
-  --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace); /* Default style for rendering code blocks. */
-  --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */
-  --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */
-  --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif); /* Default UI font. Most commonly used for body text. */
-  --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif); /* User-generated content, markdown rendering. */
-  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */
-  --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif); /* Uses the same size as body (large) with a heavier weight of semibold (600). */
-  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */
-  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */
-  --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */
}

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Sep 16, 2024 •
edited
Loading

Design Token Contrast Check

light: ✅ all checks passed

Show results table for theme: light
contrastPair pass contrastRatio minimumContrastRatio
fgColor-default vs. bgColor-default ✅ 15.79:1 4.5:1
fgColor-muted vs. bgColor-default ✅ 6.11:1 4.5:1
fgColor-default vs. bgColor-muted ✅ 14.83:1 4.5:1
fgColor-muted vs. bgColor-muted ✅ 5.74:1 4.5:1
fgColor-default vs. bgColor-inset ✅ 14.83:1 4.5:1
fgColor-muted vs. bgColor-inset ✅ 5.74:1 4.5:1
control-fgColor-rest vs. bgColor-default ✅ 14.63:1 4.5:1
control-fgColor-rest vs. bgColor-muted ✅ 13.74:1 4.5:1
control-fgColor-rest vs. bgColor-inset ✅ 13.74:1 4.5:1
control-fgColor-rest vs. control-bgColor-rest ✅ 13.74:1 4.5:1
control-fgColor-placeholder vs. bgColor-default ✅ 6.11:1 4.5:1
control-fgColor-rest vs. control-bgColor-active ✅ 12.1:1 4.5:1
control-fgColor-rest vs. control-bgColor-hover ✅ 13.02:1 4.5:1
control-fgColor-rest vs. control-bgColor-selected ✅ 13.74:1 4.5:1
button-invisible-fgColor-rest vs. bgColor-muted ✅ 13.74:1 4.5:1
button-invisible-fgColor-hover vs. button-invisible-bgColor-hover on bgColor-default ✅ 13.16:1 4.5:1
button-invisible-fgColor-hover vs. button-invisible-bgColor-hover on bgColor-muted ✅ 12.45:1 4.5:1
button-invisible-iconColor-rest vs. bgColor-muted ✅ 5.74:1 4.5:1
button-invisible-iconColor-hover vs. button-invisible-bgColor-hover on bgColor-default ✅ 5.5:1 4.5:1
button-invisible-iconColor-hover vs. button-invisible-bgColor-hover on bgColor-muted ✅ 5.2:1 4.5:1
button-danger-fgColor-rest vs. button-danger-bgColor-rest ✅ 4.92:1 4.5:1
button-danger-fgColor-hover vs. button-danger-bgColor-hover ✅ 7.86:1 4.5:1
button-danger-fgColor-active vs. button-danger-bgColor-active ✅ 9.75:1 4.5:1
button-danger-iconColor-rest vs. button-danger-bgColor-rest ✅ 4.92:1 4.5:1
button-danger-iconColor-hover vs. button-danger-bgColor-hover ✅ 7.86:1 4.5:1
button-primary-fgColor-rest vs. button-primary-bgColor-rest ✅ 4.51:1 4.5:1
fgColor-default vs. bgColor-neutral-muted on bgColor-default ✅ 13.96:1 4.5:1
fgColor-default vs. bgColor-neutral-muted on bgColor-muted ✅ 13.2:1 4.5:1
fgColor-default vs. bgColor-accent-muted ✅ 13.88:1 4.5:1
fgColor-default vs. bgColor-success-muted ✅ 14.19:1 4.5:1
fgColor-default vs. bgColor-open-muted ✅ 14.19:1 4.5:1
fgColor-default vs. bgColor-danger-muted ✅ 13.77:1 4.5:1
fgColor-default vs. bgColor-closed-muted ✅ 13.77:1 4.5:1
fgColor-default vs. bgColor-attention-muted ✅ 14.65:1 4.5:1
fgColor-default vs. bgColor-severe-muted ✅ 14.26:1 4.5:1
fgColor-default vs. bgColor-done-muted ✅ 14.21:1 4.5:1
fgColor-default vs. bgColor-sponsors-muted ✅ 14.24:1 4.5:1
fgColor-neutral vs. bgColor-default ✅ 6.11:1 4.5:1
fgColor-neutral vs. bgColor-muted ✅ 5.74:1 4.5:1
fgColor-neutral vs. bgColor-inset ✅ 5.74:1 4.5:1
fgColor-accent vs. bgColor-default ✅ 5.19:1 4.5:1
fgColor-accent vs. bgColor-muted ✅ 4.87:1 4.5:1
fgColor-accent vs. bgColor-inset ✅ 4.87:1 4.5:1
fgColor-success vs. bgColor-default ✅ 5.07:1 4.5:1
fgColor-success vs. bgColor-muted ✅ 4.77:1 4.5:1
fgColor-success vs. bgColor-inset ✅ 4.77:1 4.5:1
fgColor-open vs. bgColor-default ✅ 5.07:1 4.5:1
fgColor-open vs. bgColor-muted ✅ 4.77:1 4.5:1
fgColor-open vs. bgColor-inset ✅ 4.77:1 4.5:1
fgColor-danger vs. bgColor-default ✅ 5.24:1 4.5:1
fgColor-danger vs. bgColor-muted ✅ 4.92:1 4.5:1
fgColor-danger vs. bgColor-inset ✅ 4.92:1 4.5:1
fgColor-closed vs. bgColor-default ✅ 5.24:1 4.5:1
fgColor-closed vs. bgColor-muted ✅ 4.92:1 4.5:1
fgColor-closed vs. bgColor-inset ✅ 4.92:1 4.5:1
fgColor-attention vs. bgColor-default ✅ 4.86:1 4.5:1
fgColor-attention vs. bgColor-muted ✅ 4.57:1 4.5:1
fgColor-attention vs. bgColor-inset ✅ 4.57:1 4.5:1
fgColor-severe vs. bgColor-default ✅ 5.03:1 4.5:1
fgColor-severe vs. bgColor-muted ✅ 4.72:1 4.5:1
fgColor-severe vs. bgColor-inset ✅ 4.72:1 4.5:1
fgColor-done vs. bgColor-default ✅ 5.04:1 4.5:1
fgColor-done vs. bgColor-muted ✅ 4.73:1 4.5:1
fgColor-done vs. bgColor-inset ✅ 4.73:1 4.5:1
fgColor-upsell vs. bgColor-default ✅ 5.04:1 4.5:1
fgColor-upsell vs. bgColor-muted ✅ 4.73:1 4.5:1
fgColor-upsell vs. bgColor-inset ✅ 4.73:1 4.5:1
fgColor-sponsors vs. bgColor-default ✅ 5.04:1 4.5:1
fgColor-sponsors vs. bgColor-muted ✅ 4.73:1 4.5:1
fgColor-sponsors vs. bgColor-inset ✅ 4.73:1 4.5:1
fgColor-neutral vs. bgColor-neutral-muted on bgColor-default ✅ 5.4:1 4.5:1
fgColor-neutral vs. bgColor-neutral-muted on bgColor-muted ✅ 5.1:1 4.5:1
fgColor-accent vs. bgColor-accent-muted ✅ 4.56:1 4.5:1
fgColor-success vs. bgColor-success-muted ✅ 4.56:1 4.5:1
fgColor-open vs. bgColor-open-muted ✅ 4.56:1 4.5:1
fgColor-danger vs. bgColor-danger-muted ✅ 4.57:1 4.5:1
fgColor-closed vs. bgColor-closed-muted ✅ 4.57:1 4.5:1
fgColor-attention vs. bgColor-attention-muted ✅ 4.51:1 4.5:1
fgColor-severe vs. bgColor-severe-muted ✅ 4.54:1 4.5:1
fgColor-done vs. bgColor-done-muted ✅ 4.53:1 4.5:1
fgColor-upsell vs. bgColor-upsell-muted ✅ 4.53:1 4.5:1
fgColor-sponsors vs. bgColor-sponsors-muted ✅ 4.55:1 4.5:1
fgColor-onEmphasis vs. bgColor-neutral-emphasis ✅ 6.11:1 4.5:1
fgColor-onEmphasis vs. bgColor-accent-emphasis ✅ 5.19:1 4.5:1
fgColor-onEmphasis vs. bgColor-success-emphasis ✅ 4.51:1 4.5:1
fgColor-onEmphasis vs. bgColor-open-emphasis ✅ 4.51:1 4.5:1
fgColor-onEmphasis vs. bgColor-danger-emphasis ✅ 5.35:1 4.5:1
fgColor-onEmphasis vs. bgColor-closed-emphasis ✅ 5.35:1 4.5:1
fgColor-onEmphasis vs. bgColor-attention-emphasis ✅ 4.86:1 4.5:1
fgColor-onEmphasis vs. bgColor-severe-emphasis ✅ 5.03:1 4.5:1
fgColor-onEmphasis vs. bgColor-done-emphasis ✅ 5.04:1 4.5:1
fgColor-onEmphasis vs. bgColor-upsell-emphasis ✅ 5.04:1 4.5:1
fgColor-onEmphasis vs. bgColor-sponsors-emphasis ✅ 5.04:1 4.5:1
control-borderColor-emphasis vs. bgColor-default ✅ 3.45:1 3:1
control-borderColor-emphasis vs. bgColor-muted ✅ 3.24:1 3:1
display-gray-fgColor vs. display-gray-bgColor-muted ✅ 4.98:1 4.5:1
display-indigo-fgColor vs. display-indigo-bgColor-muted ✅ 5.06:1 4.5:1
display-blue-fgColor vs. display-blue-bgColor-muted ✅ 5.02:1 4.5:1
display-cyan-fgColor vs. display-cyan-bgColor-muted ✅ 5.2:1 4.5:1
display-teal-fgColor vs. display-teal-bgColor-muted ✅ 5.05:1 4.5:1
display-pine-fgColor vs. display-pine-bgColor-muted ✅ 5.18:1 4.5:1
display-green-fgColor vs. display-green-bgColor-muted ✅ 5.18:1 4.5:1
display-lime-fgColor vs. display-lime-bgColor-muted ✅ 5.12:1 4.5:1
display-olive-fgColor vs. display-olive-bgColor-muted ✅ 5.2:1 4.5:1
display-lemon-fgColor vs. display-lemon-bgColor-muted ✅ 5.09:1 4.5:1
display-yellow-fgColor vs. display-yellow-bgColor-muted ✅ 5.3:1 4.5:1
display-orange-fgColor vs. display-orange-bgColor-muted ✅ 5.14:1 4.5:1
display-red-fgColor vs. display-red-bgColor-muted ✅ 4.96:1 4.5:1
display-coral-fgColor vs. display-coral-bgColor-muted ✅ 5.01:1 4.5:1
display-pink-fgColor vs. display-pink-bgColor-muted ✅ 4.99:1 4.5:1
display-plum-fgColor vs. display-plum-bgColor-muted ✅ 5.01:1 4.5:1
display-purple-fgColor vs. display-purple-bgColor-muted ✅ 4.93:1 4.5:1
display-brown-fgColor vs. display-brown-bgColor-muted ✅ 5.03:1 4.5:1
display-auburn-fgColor vs. display-auburn-bgColor-muted ✅ 5.03:1 4.5:1
fgColor-onEmphasis vs. display-gray-bgColor-emphasis ✅ 4.96:1 4.5:1
fgColor-onEmphasis vs. display-indigo-bgColor-emphasis ✅ 4.88:1 4.5:1
fgColor-onEmphasis vs. display-blue-bgColor-emphasis ✅ 4.93:1 4.5:1
fgColor-onEmphasis vs. display-cyan-bgColor-emphasis ✅ 4.92:1 4.5:1
fgColor-onEmphasis vs. display-teal-bgColor-emphasis ✅ 4.85:1 4.5:1
fgColor-onEmphasis vs. display-pine-bgColor-emphasis ✅ 5.06:1 4.5:1
fgColor-onEmphasis vs. display-green-bgColor-emphasis ✅ 4.85:1 4.5:1
fgColor-onEmphasis vs. display-lime-bgColor-emphasis ✅ 5.03:1 4.5:1
fgColor-onEmphasis vs. display-olive-bgColor-emphasis ✅ 5.03:1 4.5:1
fgColor-onEmphasis vs. display-lemon-bgColor-emphasis ✅ 4.94:1 4.5:1
fgColor-onEmphasis vs. display-yellow-bgColor-emphasis ✅ 4.86:1 4.5:1
fgColor-onEmphasis vs. display-orange-bgColor-emphasis ✅ 5:1 4.5:1
fgColor-onEmphasis vs. display-red-bgColor-emphasis ✅ 4.98:1 4.5:1
fgColor-onEmphasis vs. display-coral-bgColor-emphasis ✅ 4.86:1 4.5:1
fgColor-onEmphasis vs. display-pink-bgColor-emphasis ✅ 4.85:1 4.5:1
fgColor-onEmphasis vs. display-plum-bgColor-emphasis ✅ 4.93:1 4.5:1
fgColor-onEmphasis vs. display-purple-bgColor-emphasis ✅ 4.88:1 4.5:1
fgColor-onEmphasis vs. display-brown-bgColor-emphasis ✅ 4.89:1 4.5:1
fgColor-onEmphasis vs. display-auburn-bgColor-emphasis ✅ 4.88:1 4.5:1
bgColor-default vs. display-gray-borderColor-emphasis ✅ 4.96:1 3:1
bgColor-default vs. display-indigo-borderColor-emphasis ✅ 4.88:1 3:1
bgColor-default vs. display-blue-borderColor-emphasis ✅ 4.93:1 3:1
bgColor-default vs. display-cyan-borderColor-emphasis ✅ 4.92:1 3:1
bgColor-default vs. display-teal-borderColor-emphasis ✅ 4.85:1 3:1
bgColor-default vs. display-pine-borderColor-emphasis ✅ 5.06:1 3:1
bgColor-default vs. display-green-borderColor-emphasis ✅ 4.85:1 3:1
bgColor-default vs. display-lime-borderColor-emphasis ✅ 5.03:1 3:1
bgColor-default vs. display-olive-borderColor-emphasis ✅ 5.03:1 3:1
bgColor-default vs. display-lemon-borderColor-emphasis ✅ 4.94:1 3:1
bgColor-default vs. display-yellow-borderColor-emphasis ✅ 4.86:1 3:1
bgColor-default vs. display-orange-borderColor-emphasis ✅ 5:1 3:1
bgColor-default vs. display-red-borderColor-emphasis ✅ 4.98:1 3:1
bgColor-default vs. display-coral-borderColor-emphasis ✅ 4.86:1 3:1
bgColor-default vs. display-pink-borderColor-emphasis ✅ 4.85:1 3:1
bgColor-default vs. display-plum-borderColor-emphasis ✅ 4.93:1 3:1
bgColor-default vs. display-purple-borderColor-emphasis ✅ 4.88:1 3:1
bgColor-default vs. display-brown-borderColor-emphasis ✅ 4.89:1 3:1
bgColor-default vs. display-auburn-borderColor-emphasis ✅ 4.88:1 3:1
bgColor-muted vs. display-gray-borderColor-emphasis ✅ 4.66:1 3:1
bgColor-muted vs. display-indigo-borderColor-emphasis ✅ 4.58:1 3:1
bgColor-muted vs. display-blue-borderColor-emphasis ✅ 4.63:1 3:1
bgColor-muted vs. display-cyan-borderColor-emphasis ✅ 4.62:1 3:1
bgColor-muted vs. display-teal-borderColor-emphasis ✅ 4.55:1 3:1
bgColor-muted vs. display-pine-borderColor-emphasis ✅ 4.76:1 3:1
bgColor-muted vs. display-green-borderColor-emphasis ✅ 4.56:1 3:1
bgColor-muted vs. display-lime-borderColor-emphasis ✅ 4.72:1 3:1
bgColor-muted vs. display-olive-borderColor-emphasis ✅ 4.72:1 3:1
bgColor-muted vs. display-lemon-borderColor-emphasis ✅ 4.64:1 3:1
bgColor-muted vs. display-yellow-borderColor-emphasis ✅ 4.56:1 3:1
bgColor-muted vs. display-orange-borderColor-emphasis ✅ 4.7:1 3:1
bgColor-muted vs. display-red-borderColor-emphasis ✅ 4.67:1 3:1
bgColor-muted vs. display-coral-borderColor-emphasis ✅ 4.56:1 3:1
bgColor-muted vs. display-pink-borderColor-emphasis ✅ 4.56:1 3:1
bgColor-muted vs. display-plum-borderColor-emphasis ✅ 4.63:1 3:1
bgColor-muted vs. display-purple-borderColor-emphasis ✅ 4.59:1 3:1
bgColor-muted vs. display-brown-borderColor-emphasis ✅ 4.59:1 3:1
bgColor-muted vs. display-auburn-borderColor-emphasis ✅ 4.58:1 3:1
display-gray-borderColor-emphasis vs. display-gray-bgColor-muted ✅ 4.19:1 3:1
display-indigo-borderColor-emphasis vs. display-indigo-bgColor-muted ✅ 4.05:1 3:1
display-blue-borderColor-emphasis vs. display-blue-bgColor-muted ✅ 4.14:1 3:1
display-cyan-borderColor-emphasis vs. display-cyan-bgColor-muted ✅ 4.11:1 3:1
display-teal-borderColor-emphasis vs. display-teal-bgColor-muted ✅ 4.09:1 3:1
display-pine-borderColor-emphasis vs. display-pine-bgColor-muted ✅ 4.26:1 3:1
display-green-borderColor-emphasis vs. display-green-bgColor-muted ✅ 4.08:1 3:1
display-lime-borderColor-emphasis vs. display-lime-bgColor-muted ✅ 4.22:1 3:1
display-olive-borderColor-emphasis vs. display-olive-bgColor-muted ✅ 4.26:1 3:1
display-lemon-borderColor-emphasis vs. display-lemon-bgColor-muted ✅ 4.16:1 3:1
display-yellow-borderColor-emphasis vs. display-yellow-bgColor-muted ✅ 4.1:1 3:1
display-orange-borderColor-emphasis vs. display-orange-bgColor-muted ✅ 4.19:1 3:1
display-red-borderColor-emphasis vs. display-red-bgColor-muted ✅ 4.08:1 3:1
display-coral-borderColor-emphasis vs. display-coral-bgColor-muted ✅ 4.04:1 3:1
display-pink-borderColor-emphasis vs. display-pink-bgColor-muted ✅ 4.1:1 3:1
display-plum-borderColor-emphasis vs. display-plum-bgColor-muted ✅ 4.14:1 3:1
display-purple-borderColor-emphasis vs. display-purple-bgColor-muted ✅ 4.04:1 3:1
display-brown-borderColor-emphasis vs. display-brown-bgColor-muted ✅ 4.08:1 3:1
display-auburn-borderColor-emphasis vs. display-auburn-bgColor-muted ✅ 4.09:1 3:1

dark: ✅ all checks passed

Show results table for theme: dark
contrastPair pass contrastRatio minimumContrastRatio
fgColor-default vs. bgColor-default ✅ 17.38:1 4.5:1
fgColor-muted vs. bgColor-default ✅ 6.49:1 4.5:1
fgColor-default vs. bgColor-muted ✅ 15.9:1 4.5:1
fgColor-muted vs. bgColor-muted ✅ 5.94:1 4.5:1
fgColor-default vs. bgColor-inset ✅ 18.86:1 4.5:1
fgColor-muted vs. bgColor-inset ✅ 7.05:1 4.5:1
control-fgColor-rest vs. bgColor-default ✅ 17.38:1 4.5:1
control-fgColor-rest vs. bgColor-muted ✅ 15.9:1 4.5:1
control-fgColor-rest vs. bgColor-inset ✅ 18.86:1 4.5:1
control-fgColor-rest vs. control-bgColor-rest ✅ 13.67:1 4.5:1
control-fgColor-placeholder vs. bgColor-default ✅ 6.49:1 4.5:1
control-fgColor-rest vs. control-bgColor-active ✅ 12.03:1 4.5:1
control-fgColor-rest vs. control-bgColor-hover ✅ 12.89:1 4.5:1
control-fgColor-rest vs. control-bgColor-selected ✅ 13.67:1 4.5:1
button-invisible-fgColor-rest vs. bgColor-muted ✅ 15.9:1 4.5:1
button-invisible-fgColor-hover vs. button-invisible-bgColor-hover on bgColor-default ✅ 14.48:1 4.5:1
button-invisible-fgColor-hover vs. button-invisible-bgColor-hover on bgColor-muted ✅ 13.09:1 4.5:1
button-invisible-iconColor-rest vs. bgColor-muted ✅ 5.94:1 4.5:1
button-invisible-iconColor-hover vs. button-invisible-bgColor-hover on bgColor-default ✅ 5.41:1 4.5:1
button-invisible-iconColor-hover vs. button-invisible-bgColor-hover on bgColor-muted ✅ 4.89:1 4.5:1
button-danger-fgColor-rest vs. button-danger-bgColor-rest ✅ 4.81:1 4.5:1
button-danger-fgColor-hover vs. button-danger-bgColor-hover ✅ 6.45:1 4.5:1
button-danger-fgColor-active vs. button-danger-bgColor-active ✅ 4.95:1 4.5:1
button-danger-iconColor-rest vs. button-danger-bgColor-rest ✅ 4.81:1 4.5:1
button-danger-iconColor-hover vs. button-danger-bgColor-hover ✅ 6.45:1 4.5:1
button-primary-fgColor-rest vs. button-primary-bgColor-rest ✅ 4.63:1 4.5:1
fgColor-default vs. bgColor-neutral-muted on bgColor-default ✅ 14.48:1 4.5:1
fgColor-default vs. bgColor-neutral-muted on bgColor-muted ✅ 13.09:1 4.5:1
fgColor-default vs. bgColor-accent-muted on bgColor-default ✅ 15.57:1 4.5:1
fgColor-default vs. bgColor-accent-muted on bgColor-muted ✅ 14:1 4.5:1
fgColor-default vs. bgColor-success-muted on bgColor-default ✅ 14.59:1 4.5:1
fgColor-default vs. bgColor-success-muted on bgColor-muted ✅ 13.04:1 4.5:1
fgColor-default vs. bgColor-open-muted on bgColor-default ✅ 14.59:1 4.5:1
fgColor-default vs. bgColor-open-muted on bgColor-muted ✅ 13.04:1 4.5:1
fgColor-default vs. bgColor-danger-muted on bgColor-default ✅ 15.73:1 4.5:1
fgColor-default vs. bgColor-danger-muted on bgColor-muted ✅ 14.24:1 4.5:1
fgColor-default vs. bgColor-closed-muted on bgColor-default ✅ 15.73:1 4.5:1
fgColor-default vs. bgColor-closed-muted on bgColor-muted ✅ 14.24:1 4.5:1
fgColor-default vs. bgColor-attention-muted on bgColor-default ✅ 14.55:1 4.5:1
fgColor-default vs. bgColor-attention-muted on bgColor-muted ✅ 13.15:1 4.5:1
fgColor-default vs. bgColor-severe-muted on bgColor-default ✅ 15.68:1 4.5:1
fgColor-default vs. bgColor-severe-muted on bgColor-muted ✅ 14.18:1 4.5:1
fgColor-default vs. bgColor-done-muted on bgColor-default ✅ 14.23:1 4.5:1
fgColor-default vs. bgColor-done-muted on bgColor-muted ✅ 12.73:1 4.5:1
fgColor-default vs. bgColor-sponsors-muted on bgColor-default ✅ 15.63:1 4.5:1
fgColor-default vs. bgColor-sponsors-muted on bgColor-muted ✅ 14.12:1 4.5:1
fgColor-neutral vs. bgColor-default ✅ 6.49:1 4.5:1
fgColor-neutral vs. bgColor-muted ✅ 5.94:1 4.5:1
fgColor-neutral vs. bgColor-inset ✅ 7.05:1 4.5:1
fgColor-accent vs. bgColor-default ✅ 6.1:1 4.5:1
fgColor-accent vs. bgColor-muted ✅ 5.58:1 4.5:1
fgColor-accent vs. bgColor-inset ✅ 6.62:1 4.5:1
fgColor-success vs. bgColor-default ✅ 7.44:1 4.5:1
fgColor-success vs. bgColor-muted ✅ 6.81:1 4.5:1
fgColor-success vs. bgColor-inset ✅ 8.08:1 4.5:1
fgColor-open vs. bgColor-default ✅ 7.44:1 4.5:1
fgColor-open vs. bgColor-muted ✅ 6.81:1 4.5:1
fgColor-open vs. bgColor-inset ✅ 8.08:1 4.5:1
fgColor-danger vs. bgColor-default ✅ 5.64:1 4.5:1
fgColor-danger vs. bgColor-muted ✅ 5.16:1 4.5:1
fgColor-danger vs. bgColor-inset ✅ 6.12:1 4.5:1
fgColor-closed vs. bgColor-default ✅ 5.64:1 4.5:1
fgColor-closed vs. bgColor-muted ✅ 5.16:1 4.5:1
fgColor-closed vs. bgColor-inset ✅ 6.12:1 4.5:1
fgColor-attention vs. bgColor-default ✅ 7.49:1 4.5:1
fgColor-attention vs. bgColor-muted ✅ 6.85:1 4.5:1
fgColor-attention vs. bgColor-inset ✅ 8.13:1 4.5:1
fgColor-severe vs. bgColor-default ✅ 5.61:1 4.5:1
fgColor-severe vs. bgColor-muted ✅ 5.13:1 4.5:1
fgColor-severe vs. bgColor-inset ✅ 6.09:1 4.5:1
fgColor-done vs. bgColor-default ✅ 6.32:1 4.5:1
fgColor-done vs. bgColor-muted ✅ 5.78:1 4.5:1
fgColor-done vs. bgColor-inset ✅ 6.86:1 4.5:1
fgColor-upsell vs. bgColor-default ✅ 6.32:1 4.5:1
fgColor-upsell vs. bgColor-muted ✅ 5.78:1 4.5:1
fgColor-upsell vs. bgColor-inset ✅ 6.86:1 4.5:1
fgColor-sponsors vs. bgColor-default ✅ 5.62:1 4.5:1
fgColor-sponsors vs. bgColor-muted ✅ 5.14:1 4.5:1
fgColor-sponsors vs. bgColor-inset ✅ 6.1:1 4.5:1
fgColor-neutral vs. bgColor-neutral-muted on bgColor-default ✅ 5.41:1 4.5:1
fgColor-neutral vs. bgColor-neutral-muted on bgColor-muted ✅ 4.89:1 4.5:1
fgColor-accent vs. bgColor-accent-muted on bgColor-default ✅ 5.46:1 4.5:1
fgColor-accent vs. bgColor-accent-muted on bgColor-muted ✅ 4.91:1 4.5:1
fgColor-success vs. bgColor-success-muted on bgColor-default ✅ 6.25:1 4.5:1
fgColor-success vs. bgColor-success-muted on bgColor-muted ✅ 5.59:1 4.5:1
fgColor-open vs. bgColor-open-muted on bgColor-default ✅ 6.25:1 4.5:1
fgColor-open vs. bgColor-open-muted on bgColor-muted ✅ 5.59:1 4.5:1
fgColor-danger vs. bgColor-danger-muted on bgColor-default ✅ 5.1:1 4.5:1
fgColor-danger vs. bgColor-danger-muted on bgColor-muted ✅ 4.62:1 4.5:1
fgColor-closed vs. bgColor-closed-muted on bgColor-default ✅ 5.1:1 4.5:1
fgColor-closed vs. bgColor-closed-muted on bgColor-muted ✅ 4.62:1 4.5:1
fgColor-attention vs. bgColor-attention-muted on bgColor-default ✅ 6.27:1 4.5:1
fgColor-attention vs. bgColor-attention-muted on bgColor-muted ✅ 5.67:1 4.5:1
fgColor-severe vs. bgColor-severe-muted on bgColor-default ✅ 5.06:1 4.5:1
fgColor-severe vs. bgColor-severe-muted on bgColor-muted ✅ 4.58:1 4.5:1
fgColor-done vs. bgColor-done-muted on bgColor-default ✅ 5.18:1 4.5:1
fgColor-done vs. bgColor-done-muted on bgColor-muted ✅ 4.63:1 4.5:1
fgColor-upsell vs. bgColor-upsell-muted on bgColor-default ✅ 5.18:1 4.5:1
fgColor-upsell vs. bgColor-upsell-muted on bgColor-muted ✅ 4.63:1 4.5:1
fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-default ✅ 5.06:1 4.5:1
fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-muted ✅ 4.57:1 4.5:1
fgColor-onEmphasis vs. bgColor-neutral-emphasis ✅ 5.3:1 4.5:1
fgColor-onEmphasis vs. bgColor-accent-emphasis ✅ 4.63:1 4.5:1
fgColor-onEmphasis vs. bgColor-success-emphasis ✅ 4.63:1 4.5:1
fgColor-onEmphasis vs. bgColor-open-emphasis ✅ 4.63:1 4.5:1
fgColor-onEmphasis vs. bgColor-danger-emphasis ✅ 4.6:1 4.5:1
fgColor-onEmphasis vs. bgColor-closed-emphasis ✅ 4.6:1 4.5:1
fgColor-onEmphasis vs. bgColor-attention-emphasis ✅ 4.64:1 4.5:1
fgColor-onEmphasis vs. bgColor-severe-emphasis ✅ 4.65:1 4.5:1
fgColor-onEmphasis vs. bgColor-done-emphasis ✅ 4.6:1 4.5:1
fgColor-onEmphasis vs. bgColor-upsell-emphasis ✅ 4.6:1 4.5:1
fgColor-onEmphasis vs. bgColor-sponsors-emphasis ✅ 4.57:1 4.5:1
control-borderColor-emphasis vs. bgColor-default ✅ 3.56:1 3:1
control-borderColor-emphasis vs. bgColor-muted ✅ 3.26:1 3:1
display-gray-fgColor vs. display-gray-bgColor-muted ✅ 6.48:1 4.5:1
display-indigo-fgColor vs. display-indigo-bgColor-muted ✅ 6.48:1 4.5:1
display-blue-fgColor vs. display-blue-bgColor-muted ✅ 6.28:1 4.5:1
display-cyan-fgColor vs. display-cyan-bgColor-muted ✅ 6.53:1 4.5:1
display-teal-fgColor vs. display-teal-bgColor-muted ✅ 6.39:1 4.5:1
display-pine-fgColor vs. display-pine-bgColor-muted ✅ 6.42:1 4.5:1
display-green-fgColor vs. display-green-bgColor-muted ✅ 6.24:1 4.5:1
display-lime-fgColor vs. display-lime-bgColor-muted ✅ 6.47:1 4.5:1
display-olive-fgColor vs. display-olive-bgColor-muted ✅ 6.53:1 4.5:1
display-lemon-fgColor vs. display-lemon-bgColor-muted ✅ 6.12:1 4.5:1
display-yellow-fgColor vs. display-yellow-bgColor-muted ✅ 6.19:1 4.5:1
display-orange-fgColor vs. display-orange-bgColor-muted ✅ 6.26:1 4.5:1
display-red-fgColor vs. display-red-bgColor-muted ✅ 6.54:1 4.5:1
display-coral-fgColor vs. display-coral-bgColor-muted ✅ 6.54:1 4.5:1
display-pink-fgColor vs. display-pink-bgColor-muted ✅ 6.27:1 4.5:1
display-plum-fgColor vs. display-plum-bgColor-muted ✅ 6.49:1 4.5:1
display-purple-fgColor vs. display-purple-bgColor-muted ✅ 6.34:1 4.5:1
display-brown-fgColor vs. display-brown-bgColor-muted ✅ 6.25:1 4.5:1
display-auburn-fgColor vs. display-auburn-bgColor-muted ✅ 6.45:1 4.5:1
fgColor-onEmphasis vs. display-gray-bgColor-emphasis ✅ 6.2:1 4.5:1
fgColor-onEmphasis vs. display-indigo-bgColor-emphasis ✅ 6.19:1 4.5:1
fgColor-onEmphasis vs. display-blue-bgColor-emphasis ✅ 6.14:1 4.5:1
fgColor-onEmphasis vs. display-cyan-bgColor-emphasis ✅ 6.09:1 4.5:1
fgColor-onEmphasis vs. display-teal-bgColor-emphasis ✅ 6.17:1 4.5:1
fgColor-onEmphasis vs. display-pine-bgColor-emphasis ✅ 6:1 4.5:1
fgColor-onEmphasis vs. display-green-bgColor-emphasis ✅ 6.08:1 4.5:1
fgColor-onEmphasis vs. display-lime-bgColor-emphasis ✅ 6.07:1 4.5:1
fgColor-onEmphasis vs. display-olive-bgColor-emphasis ✅ 6.04:1 4.5:1
fgColor-onEmphasis vs. display-lemon-bgColor-emphasis ✅ 6.04:1 4.5:1
fgColor-onEmphasis vs. display-yellow-bgColor-emphasis ✅ 6:1 4.5:1
fgColor-onEmphasis vs. display-orange-bgColor-emphasis ✅ 6.27:1 4.5:1
fgColor-onEmphasis vs. display-red-bgColor-emphasis ✅ 6.09:1 4.5:1
fgColor-onEmphasis vs. display-coral-bgColor-emphasis ✅ 6.09:1 4.5:1
fgColor-onEmphasis vs. display-pink-bgColor-emphasis ✅ 6.15:1 4.5:1
fgColor-onEmphasis vs. display-plum-bgColor-emphasis ✅ 6.17:1 4.5:1
fgColor-onEmphasis vs. display-purple-bgColor-emphasis ✅ 6.22:1 4.5:1
fgColor-onEmphasis vs. display-brown-bgColor-emphasis ✅ 6.12:1 4.5:1
fgColor-onEmphasis vs. display-auburn-bgColor-emphasis ✅ 6.21:1 4.5:1
bgColor-default vs. display-gray-borderColor-emphasis ✅ 4.63:1 3:1
bgColor-default vs. display-indigo-borderColor-emphasis ✅ 4.59:1 3:1
bgColor-default vs. display-blue-borderColor-emphasis ✅ 4.54:1 3:1
bgColor-default vs. display-cyan-borderColor-emphasis ✅ 4.61:1 3:1
bgColor-default vs. display-teal-borderColor-emphasis ✅ 4.53:1 3:1
bgColor-default vs. display-pine-borderColor-emphasis ✅ 4.73:1 3:1
bgColor-default vs. display-green-borderColor-emphasis ✅ 4.65:1 3:1
bgColor-default vs. display-lime-borderColor-emphasis ✅ 4.6:1 3:1
bgColor-default vs. display-olive-borderColor-emphasis ✅ 4.59:1 3:1
bgColor-default vs. display-lemon-borderColor-emphasis ✅ 4.64:1 3:1
bgColor-default vs. display-yellow-borderColor-emphasis ✅ 4.57:1 3:1
bgColor-default vs. display-orange-borderColor-emphasis ✅ 4.59:1 3:1
bgColor-default vs. display-red-borderColor-emphasis ✅ 4.58:1 3:1
bgColor-default vs. display-coral-borderColor-emphasis ✅ 4.58:1 3:1
bgColor-default vs. display-pink-borderColor-emphasis ✅ 4.53:1 3:1
bgColor-default vs. display-plum-borderColor-emphasis ✅ 4.54:1 3:1
bgColor-default vs. display-purple-borderColor-emphasis ✅ 4.58:1 3:1
bgColor-default vs. display-brown-borderColor-emphasis ✅ 4.5:1 3:1
bgColor-default vs. display-auburn-borderColor-emphasis ✅ 4.64:1 3:1
bgColor-muted vs. display-gray-borderColor-emphasis ✅ 4.23:1 3:1
bgColor-muted vs. display-indigo-borderColor-emphasis ✅ 4.19:1 3:1
bgColor-muted vs. display-blue-borderColor-emphasis ✅ 4.15:1 3:1
bgColor-muted vs. display-cyan-borderColor-emphasis ✅ 4.22:1 3:1
bgColor-muted vs. display-teal-borderColor-emphasis ✅ 4.15:1 3:1
bgColor-muted vs. display-pine-borderColor-emphasis ✅ 4.32:1 3:1
bgColor-muted vs. display-green-borderColor-emphasis ✅ 4.26:1 3:1
bgColor-muted vs. display-lime-borderColor-emphasis ✅ 4.2:1 3:1
bgColor-muted vs. display-olive-borderColor-emphasis ✅ 4.2:1 3:1
bgColor-muted vs. display-lemon-borderColor-emphasis ✅ 4.24:1 3:1
bgColor-muted vs. display-yellow-borderColor-emphasis ✅ 4.18:1 3:1
bgColor-muted vs. display-orange-borderColor-emphasis ✅ 4.2:1 3:1
bgColor-muted vs. display-red-borderColor-emphasis ✅ 4.19:1 3:1
bgColor-muted vs. display-coral-borderColor-emphasis ✅ 4.19:1 3:1
bgColor-muted vs. display-pink-borderColor-emphasis ✅ 4.14:1 3:1
bgColor-muted vs. display-plum-borderColor-emphasis ✅ 4.15:1 3:1
bgColor-muted vs. display-purple-borderColor-emphasis ✅ 4.19:1 3:1
bgColor-muted vs. display-brown-borderColor-emphasis ✅ 4.12:1 3:1
bgColor-muted vs. display-auburn-borderColor-emphasis ✅ 4.24:1 3:1
display-gray-borderColor-emphasis vs. display-gray-bgColor-muted ✅ 4.17:1 3:1
display-indigo-borderColor-emphasis vs. display-indigo-bgColor-muted ✅ 4.07:1 3:1
display-blue-borderColor-emphasis vs. display-blue-bgColor-muted ✅ 4.07:1 3:1
display-cyan-borderColor-emphasis vs. display-cyan-bgColor-muted ✅ 4.17:1 3:1
display-teal-borderColor-emphasis vs. display-teal-bgColor-muted ✅ 4.1:1 3:1
display-pine-borderColor-emphasis vs. display-pine-bgColor-muted ✅ 4.22:1 3:1
display-green-borderColor-emphasis vs. display-green-bgColor-muted ✅ 4.11:1 3:1
display-lime-borderColor-emphasis vs. display-lime-bgColor-muted ✅ 4.14:1 3:1
display-olive-borderColor-emphasis vs. display-olive-bgColor-muted ✅ 4.15:1 3:1
display-lemon-borderColor-emphasis vs. display-lemon-bgColor-muted ✅ 4.05:1 3:1
display-yellow-borderColor-emphasis vs. display-yellow-bgColor-muted ✅ 4.01:1 3:1
display-orange-borderColor-emphasis vs. display-orange-bgColor-muted ✅ 4.06:1 3:1
display-red-borderColor-emphasis vs. display-red-bgColor-muted ✅ 4.13:1 3:1
display-coral-borderColor-emphasis vs. display-coral-bgColor-muted ✅ 4.13:1 3:1
display-pink-borderColor-emphasis vs. display-pink-bgColor-muted ✅ 4.04:1 3:1
display-plum-borderColor-emphasis vs. display-plum-bgColor-muted ✅ 4.08:1 3:1
display-purple-borderColor-emphasis vs. display-purple-bgColor-muted ✅ 4.13:1 3:1
display-brown-borderColor-emphasis vs. display-brown-bgColor-muted ✅ 3.99:1 3:1
display-auburn-borderColor-emphasis vs. display-auburn-bgColor-muted ✅ 4.19:1 3:1

light_high_contrast: ✅ all checks passed

Show results table for theme: light_high_contrast
contrastPair pass contrastRatio minimumContrastRatio
fgColor-default vs. bgColor-default ✅ 20.53:1 7:1
fgColor-muted vs. bgColor-default ✅ 8.69:1 7:1
fgColor-default vs. bgColor-muted ✅ 16.99:1 7:1
fgColor-muted vs. bgColor-muted ✅ 7.19:1 7:1
fgColor-default vs. bgColor-inset ✅ 18.27:1 7:1
fgColor-muted vs. bgColor-inset ✅ 7.73:1 7:1
control-fgColor-rest vs. bgColor-default ✅ 14.63:1 7:1
control-fgColor-rest vs. bgColor-muted ✅ 12.1:1 7:1
control-fgColor-rest vs. bgColor-inset ✅ 13.02:1 7:1
control-fgColor-rest vs. control-bgColor-rest ✅ 11.62:1 7:1
control-fgColor-placeholder vs. bgColor-default ✅ 8.69:1 7:1
control-fgColor-rest vs. control-bgColor-active ✅ 10.25:1 7:1
control-fgColor-rest vs. control-bgColor-hover ✅ 11:1 7:1
control-fgColor-rest vs. control-bgColor-selected ✅ 11.62:1 7:1
button-invisible-fgColor-rest vs. bgColor-muted ✅ 12.1:1 7:1
button-invisible-fgColor-hover vs. button-invisible-bgColor-hover ✅ 8:1 7:1
button-invisible-iconColor-rest vs. bgColor-muted ✅ 7.19:1 7:1
button-invisible-iconColor-hover vs. button-invisible-bgColor-hover ✅ 8:1 7:1
button-danger-fgColor-rest vs. button-danger-bgColor-rest ✅ 8.11:1 7:1
button-danger-fgColor-hover vs. button-danger-bgColor-hover ✅ 10.2:1 7:1
button-danger-fgColor-active vs. button-danger-bgColor-active ✅ 11.83:1 7:1
button-danger-iconColor-rest vs. button-danger-bgColor-rest ✅ 8.11:1 7:1
button-danger-iconColor-hover vs. button-danger-bgColor-hover ✅ 10.2:1 7:1
button-primary-fgColor-rest vs. button-primary-bgColor-rest ✅ 8.09:1 7:1
fgColor-default vs. bgColor-neutral-muted ✅ 16.31:1 7:1
fgColor-default vs. bgColor-accent-muted ✅ 18.46:1 7:1
fgColor-default vs. bgColor-success-muted ✅ 18.52:1 7:1
fgColor-default vs. bgColor-open-muted ✅ 18.52:1 7:1
fgColor-default vs. bgColor-danger-muted ✅ 18.53:1 7:1
fgColor-default vs. bgColor-closed-muted ✅ 18.53:1 7:1
fgColor-default vs. bgColor-attention-muted ✅ 18.76:1 7:1
fgColor-default vs. bgColor-severe-muted ✅ 18.49:1 7:1
fgColor-default vs. bgColor-done-muted ✅ 18.54:1 7:1
fgColor-default vs. bgColor-sponsors-muted ✅ 18.48:1 7:1
fgColor-neutral vs. bgColor-default ✅ 10.64:1 7:1
fgColor-neutral vs. bgColor-muted ✅ 8.8:1 7:1
fgColor-neutral vs. bgColor-inset ✅ 9.47:1 7:1
fgColor-accent vs. bgColor-default ✅ 10.18:1 7:1
fgColor-accent vs. bgColor-muted ✅ 8.42:1 7:1
fgColor-accent vs. bgColor-inset ✅ 9.06:1 7:1
fgColor-success vs. bgColor-default ✅ 10.23:1 7:1
fgColor-success vs. bgColor-muted ✅ 8.47:1 7:1
fgColor-success vs. bgColor-inset ✅ 9.11:1 7:1
fgColor-open vs. bgColor-default ✅ 10.23:1 7:1
fgColor-open vs. bgColor-muted ✅ 8.47:1 7:1
fgColor-open vs. bgColor-inset ✅ 9.11:1 7:1
fgColor-danger vs. bgColor-default ✅ 10.2:1 7:1
fgColor-danger vs. bgColor-muted ✅ 8.44:1 7:1
fgColor-danger vs. bgColor-inset ✅ 9.08:1 7:1
fgColor-closed vs. bgColor-default ✅ 10.2:1 7:1
fgColor-closed vs. bgColor-muted ✅ 8.44:1 7:1
fgColor-closed vs. bgColor-inset ✅ 9.08:1 7:1
fgColor-attention vs. bgColor-default ✅ 10.27:1 7:1
fgColor-attention vs. bgColor-muted ✅ 8.5:1 7:1
fgColor-attention vs. bgColor-inset ✅ 9.14:1 7:1
fgColor-severe vs. bgColor-default ✅ 10.24:1 7:1
fgColor-severe vs. bgColor-muted ✅ 8.48:1 7:1
fgColor-severe vs. bgColor-inset ✅ 9.12:1 7:1
fgColor-done vs. bgColor-default ✅ 10.15:1 7:1
fgColor-done vs. bgColor-muted ✅ 8.4:1 7:1
fgColor-done vs. bgColor-inset ✅ 9.03:1 7:1
fgColor-upsell vs. bgColor-default ✅ 10.15:1 7:1
fgColor-upsell vs. bgColor-muted ✅ 8.4:1 7:1
fgColor-upsell vs. bgColor-inset ✅ 9.03:1 7:1
fgColor-sponsors vs. bgColor-default ✅ 10.18:1 7:1
fgColor-sponsors vs. bgColor-muted ✅ 8.42:1 7:1
fgColor-sponsors vs. bgColor-inset ✅ 9.06:1 7:1
fgColor-neutral vs. bgColor-neutral-muted ✅ 8.45:1 7:1
fgColor-accent vs. bgColor-accent-muted ✅ 9.15:1 7:1
fgColor-success vs. bgColor-success-muted ✅ 9.23:1 7:1
fgColor-open vs. bgColor-open-muted ✅ 9.23:1 7:1
fgColor-danger vs. bgColor-danger-muted ✅ 9.21:1 7:1
fgColor-closed vs. bgColor-closed-muted ✅ 9.21:1 7:1
fgColor-attention vs. bgColor-attention-muted ✅ 9.38:1 7:1
fgColor-severe vs. bgColor-severe-muted ✅ 9.22:1 7:1
fgColor-done vs. bgColor-done-muted ✅ 9.16:1 7:1
fgColor-upsell vs. bgColor-upsell-muted ✅ 9.16:1 7:1
fgColor-sponsors vs. bgColor-sponsors-muted ✅ 9.16:1 7:1
fgColor-onEmphasis vs. bgColor-neutral-emphasis ✅ 8.69:1 7:1
fgColor-onEmphasis vs. bgColor-accent-emphasis ✅ 8.02:1 7:1
fgColor-onEmphasis vs. bgColor-success-emphasis ✅ 8.09:1 7:1
fgColor-onEmphasis vs. bgColor-open-emphasis ✅ 8.09:1 7:1
fgColor-onEmphasis vs. bgColor-danger-emphasis ✅ 8.09:1 7:1
fgColor-onEmphasis vs. bgColor-closed-emphasis ✅ 8.09:1 7:1
fgColor-onEmphasis vs. bgColor-attention-emphasis ✅ 8.09:1 7:1
fgColor-onEmphasis vs. bgColor-severe-emphasis ✅ 8.08:1 7:1
fgColor-onEmphasis vs. bgColor-done-emphasis ✅ 8.05:1 7:1
fgColor-onEmphasis vs. bgColor-upsell-emphasis ✅ 8.05:1 7:1
fgColor-onEmphasis vs. bgColor-sponsors-emphasis ✅ 8.04:1 7:1
control-borderColor-emphasis vs. bgColor-default ✅ 8.69:1 4.5:1
control-borderColor-emphasis vs. bgColor-muted ✅ 7.19:1 4.5:1
display-gray-fgColor vs. display-gray-bgColor-muted ✅ 8.22:1 7:1
display-indigo-fgColor vs. display-indigo-bgColor-muted ✅ 8.12:1 7:1
display-blue-fgColor vs. display-blue-bgColor-muted ✅ 8.28:1 7:1
display-cyan-fgColor vs. display-cyan-bgColor-muted ✅ 8.49:1 7:1
display-teal-fgColor vs. display-teal-bgColor-muted ✅ 8.6:1 7:1
display-pine-fgColor vs. display-pine-bgColor-muted ✅ 8.47:1 7:1
display-green-fgColor vs. display-green-bgColor-muted ✅ 8.27:1 7:1
display-lime-fgColor vs. display-lime-bgColor-muted ✅ 8.3:1 7:1
display-olive-fgColor vs. display-olive-bgColor-muted ✅ 8.19:1 7:1
display-lemon-fgColor vs. display-lemon-bgColor-muted ✅ 8.55:1 7:1
display-yellow-fgColor vs. display-yellow-bgColor-muted ✅ 8.35:1 7:1
display-orange-fgColor vs. display-orange-bgColor-muted ✅ 8.3:1 7:1
display-red-fgColor vs. display-red-bgColor-muted ✅ 8.08:1 7:1
display-coral-fgColor vs. display-coral-bgColor-muted ✅ 8.31:1 7:1
display-pink-fgColor vs. display-pink-bgColor-muted ✅ 8.31:1 7:1
display-plum-fgColor vs. display-plum-bgColor-muted ✅ 8.13:1 7:1
display-purple-fgColor vs. display-purple-bgColor-muted ✅ 8.13:1 7:1
display-brown-fgColor vs. display-brown-bgColor-muted ✅ 8.15:1 7:1
display-auburn-fgColor vs. display-auburn-bgColor-muted ✅ 8.36:1 7:1
fgColor-onEmphasis vs. display-gray-bgColor-emphasis ✅ 7.75:1 7:1
fgColor-onEmphasis vs. display-indigo-bgColor-emphasis ✅ 7.55:1 7:1
fgColor-onEmphasis vs. display-blue-bgColor-emphasis ✅ 7.74:1 7:1
fgColor-onEmphasis vs. display-cyan-bgColor-emphasis ✅ 7.95:1 7:1
fgColor-onEmphasis vs. display-teal-bgColor-emphasis ✅ 7.79:1 7:1
fgColor-onEmphasis vs. display-pine-bgColor-emphasis ✅ 7.86:1 7:1
fgColor-onEmphasis vs. display-green-bgColor-emphasis ✅ 7.82:1 7:1
fgColor-onEmphasis vs. display-lime-bgColor-emphasis ✅ 7.76:1 7:1
fgColor-onEmphasis vs. display-olive-bgColor-emphasis ✅ 7.55:1 7:1
fgColor-onEmphasis vs. display-lemon-bgColor-emphasis ✅ 7.85:1 7:1
fgColor-onEmphasis vs. display-yellow-bgColor-emphasis ✅ 7.63:1 7:1
fgColor-onEmphasis vs. display-orange-bgColor-emphasis ✅ 7.53:1 7:1
fgColor-onEmphasis vs. display-red-bgColor-emphasis ✅ 7.76:1 7:1
fgColor-onEmphasis vs. display-coral-bgColor-emphasis ✅ 7.79:1 7:1
fgColor-onEmphasis vs. display-pink-bgColor-emphasis ✅ 7.68:1 7:1
fgColor-onEmphasis vs. display-plum-bgColor-emphasis ✅ 7.63:1 7:1
fgColor-onEmphasis vs. display-purple-bgColor-emphasis ✅ 7.66:1 7:1
fgColor-onEmphasis vs. display-brown-bgColor-emphasis ✅ 7.55:1 7:1
fgColor-onEmphasis vs. display-auburn-bgColor-emphasis ✅ 7.69:1 7:1
bgColor-default vs. display-gray-borderColor-emphasis ✅ 5.91:1 4.5:1
bgColor-default vs. display-indigo-borderColor-emphasis ✅ 6.1:1 4.5:1
bgColor-default vs. display-blue-borderColor-emphasis ✅ 5.98:1 4.5:1
bgColor-default vs. display-cyan-borderColor-emphasis ✅ 6.22:1 4.5:1
bgColor-default vs. display-teal-borderColor-emphasis ✅ 5.98:1 4.5:1
bgColor-default vs. display-pine-borderColor-emphasis ✅ 6.16:1 4.5:1
bgColor-default vs. display-green-borderColor-emphasis ✅ 6.16:1 4.5:1
bgColor-default vs. display-lime-borderColor-emphasis ✅ 6.09:1 4.5:1
bgColor-default vs. display-olive-borderColor-emphasis ✅ 6.15:1 4.5:1
bgColor-default vs. display-lemon-borderColor-emphasis ✅ 6.04:1 4.5:1
bgColor-default vs. display-yellow-borderColor-emphasis ✅ 6.27:1 4.5:1
bgColor-default vs. display-orange-borderColor-emphasis ✅ 6.14:1 4.5:1
bgColor-default vs. display-red-borderColor-emphasis ✅ 6.06:1 4.5:1
bgColor-default vs. display-coral-borderColor-emphasis ✅ 6.02:1 4.5:1
bgColor-default vs. display-pink-borderColor-emphasis ✅ 5.91:1 4.5:1
bgColor-default vs. display-plum-borderColor-emphasis ✅ 5.97:1 4.5:1
bgColor-default vs. display-purple-borderColor-emphasis ✅ 5.95:1 4.5:1
bgColor-default vs. display-brown-borderColor-emphasis ✅ 6.04:1 4.5:1
bgColor-default vs. display-auburn-borderColor-emphasis ✅ 6:1 4.5:1
bgColor-muted vs. display-gray-borderColor-emphasis ✅ 4.89:1 4.5:1
bgColor-muted vs. display-indigo-borderColor-emphasis ✅ 5.05:1 4.5:1
bgColor-muted vs. display-blue-borderColor-emphasis ✅ 4.95:1 4.5:1
bgColor-muted vs. display-cyan-borderColor-emphasis ✅ 5.15:1 4.5:1
bgColor-muted vs. display-teal-borderColor-emphasis ✅ 4.95:1 4.5:1
bgColor-muted vs. display-pine-borderColor-emphasis ✅ 5.1:1 4.5:1
bgColor-muted vs. display-green-borderColor-emphasis ✅ 5.1:1 4.5:1
bgColor-muted vs. display-lime-borderColor-emphasis ✅ 5.04:1 4.5:1
bgColor-muted vs. display-olive-borderColor-emphasis ✅ 5.09:1 4.5:1
bgColor-muted vs. display-lemon-borderColor-emphasis ✅ 5:1 4.5:1
bgColor-muted vs. display-yellow-borderColor-emphasis ✅ 5.19:1 4.5:1
bgColor-muted vs. display-orange-borderColor-emphasis ✅ 5.08:1 4.5:1
bgColor-muted vs. display-red-borderColor-emphasis ✅ 5.01:1 4.5:1
bgColor-muted vs. display-coral-borderColor-emphasis ✅ 4.98:1 4.5:1
bgColor-muted vs. display-pink-borderColor-emphasis ✅ 4.89:1 4.5:1
bgColor-muted vs. display-plum-borderColor-emphasis ✅ 4.94:1 4.5:1
bgColor-muted vs. display-purple-borderColor-emphasis ✅ 4.93:1 4.5:1
bgColor-muted vs. display-brown-borderColor-emphasis ✅ 5:1 4.5:1
bgColor-muted vs. display-auburn-borderColor-emphasis ✅ 4.96:1 4.5:1
display-gray-borderColor-emphasis vs. display-gray-bgColor-muted ✅ 4.98:1 4.5:1
display-indigo-borderColor-emphasis vs. display-indigo-bgColor-muted ✅ 5.06:1 4.5:1
display-blue-borderColor-emphasis vs. display-blue-bgColor-muted ✅ 5.02:1 4.5:1
display-cyan-borderColor-emphasis vs. display-cyan-bgColor-muted ✅ 5.2:1 4.5:1
display-teal-borderColor-emphasis vs. display-teal-bgColor-muted ✅ 5.05:1 4.5:1
display-pine-borderColor-emphasis vs. display-pine-bgColor-muted ✅ 5.18:1 4.5:1
display-green-borderColor-emphasis vs. display-green-bgColor-muted ✅ 5.18:1 4.5:1
display-lime-borderColor-emphasis vs. display-lime-bgColor-muted ✅ 5.12:1 4.5:1
display-olive-borderColor-emphasis vs. display-olive-bgColor-muted ✅ 5.2:1 4.5:1
display-lemon-borderColor-emphasis vs. display-lemon-bgColor-muted ✅ 5.09:1 4.5:1
display-yellow-borderColor-emphasis vs. display-yellow-bgColor-muted ✅ 5.3:1 4.5:1
display-orange-borderColor-emphasis vs. display-orange-bgColor-muted ✅ 5.14:1 4.5:1
display-red-borderColor-emphasis vs. display-red-bgColor-muted ✅ 4.96:1 4.5:1
display-coral-borderColor-emphasis vs. display-coral-bgColor-muted ✅ 5.01:1 4.5:1
display-pink-borderColor-emphasis vs. display-pink-bgColor-muted ✅ 4.99:1 4.5:1
display-plum-borderColor-emphasis vs. display-plum-bgColor-muted ✅ 5.01:1 4.5:1
display-purple-borderColor-emphasis vs. display-purple-bgColor-muted ✅ 4.93:1 4.5:1
display-brown-borderColor-emphasis vs. display-brown-bgColor-muted ✅ 5.03:1 4.5:1
display-auburn-borderColor-emphasis vs. display-auburn-bgColor-muted ✅ 5.03:1 4.5:1

dark_high_contrast: ✅ all checks passed

Show results table for theme: dark_high_contrast
contrastPair pass contrastRatio minimumContrastRatio
fgColor-default vs. bgColor-default ✅ 20.53:1 7:1
fgColor-muted vs. bgColor-default ✅ 10.88:1 7:1
fgColor-default vs. bgColor-muted ✅ 17.31:1 7:1
fgColor-muted vs. bgColor-muted ✅ 9.17:1 7:1
fgColor-default vs. bgColor-inset ✅ 20.53:1 7:1
fgColor-muted vs. bgColor-inset ✅ 10.88:1 7:1
control-fgColor-rest vs. bgColor-default ✅ 20.53:1 7:1
control-fgColor-rest vs. bgColor-muted ✅ 17.31:1 7:1
control-fgColor-rest vs. bgColor-inset ✅ 20.53:1 7:1
control-fgColor-rest vs. control-bgColor-rest ✅ 14.03:1 7:1
control-fgColor-placeholder vs. bgColor-default ✅ 10.88:1 7:1
control-fgColor-rest vs. control-bgColor-active ✅ 12.02:1 7:1
control-fgColor-rest vs. control-bgColor-hover ✅ 13.1:1 7:1
control-fgColor-rest vs. control-bgColor-selected ✅ 14.03:1 7:1
button-invisible-fgColor-rest vs. bgColor-muted ✅ 17.31:1 7:1
button-invisible-fgColor-hover vs. button-invisible-bgColor-hover ✅ 17.31:1 7:1
button-invisible-iconColor-rest vs. bgColor-muted ✅ 11.96:1 7:1
button-invisible-iconColor-hover vs. button-invisible-bgColor-hover ✅ 11.96:1 7:1
button-danger-fgColor-rest vs. button-danger-bgColor-rest ✅ 8.12:1 7:1
button-danger-fgColor-hover vs. button-danger-bgColor-hover ✅ 7.51:1 7:1
button-danger-fgColor-active vs. button-danger-bgColor-active ✅ 7.51:1 7:1
button-danger-iconColor-rest vs. button-danger-bgColor-rest ✅ 8.12:1 7:1
button-danger-iconColor-hover vs. button-danger-bgColor-hover ✅ 7.51:1 7:1
button-primary-fgColor-rest vs. button-primary-bgColor-rest ✅ 7.58:1 7:1
fgColor-default vs. bgColor-neutral-muted ✅ 14.88:1 7:1
fgColor-default vs. bgColor-accent-muted on bgColor-default ✅ 18.36:1 7:1
fgColor-default vs. bgColor-accent-muted on bgColor-muted ✅ 14.58:1 7:1
fgColor-default vs. bgColor-success-muted on bgColor-default ✅ 17.09:1 7:1
fgColor-default vs. bgColor-success-muted on bgColor-muted ✅ 13.4:1 7:1
fgColor-default vs. bgColor-open-muted on bgColor-default ✅ 17.09:1 7:1
fgColor-default vs. bgColor-open-muted on bgColor-muted ✅ 13.4:1 7:1
fgColor-default vs. bgColor-danger-muted on bgColor-default ✅ 18.45:1 7:1
fgColor-default vs. bgColor-danger-muted on bgColor-muted ✅ 14.86:1 7:1
fgColor-default vs. bgColor-closed-muted on bgColor-default ✅ 18.45:1 7:1
fgColor-default vs. bgColor-closed-muted on bgColor-muted ✅ 14.86:1 7:1
fgColor-default vs. bgColor-attention-muted on bgColor-default ✅ 16.71:1 7:1
fgColor-default vs. bgColor-attention-muted on bgColor-muted ✅ 13.12:1 7:1
fgColor-default vs. bgColor-severe-muted on bgColor-default ✅ 18.48:1 7:1
fgColor-default vs. bgColor-severe-muted on bgColor-muted ✅ 14.9:1 7:1
fgColor-default vs. bgColor-done-muted on bgColor-default ✅ 17.06:1 7:1
fgColor-default vs. bgColor-done-muted on bgColor-muted ✅ 13.46:1 7:1
fgColor-default vs. bgColor-sponsors-muted on bgColor-default ✅ 18.52:1 7:1
fgColor-default vs. bgColor-sponsors-muted on bgColor-muted ✅ 14.79:1 7:1
fgColor-neutral vs. bgColor-default ✅ 14.18:1 7:1
fgColor-neutral vs. bgColor-muted ✅ 11.96:1 7:1
fgColor-neutral vs. bgColor-inset ✅ 14.18:1 7:1
fgColor-accent vs. bgColor-default ✅ 9.9:1 7:1
fgColor-accent vs. bgColor-muted ✅ 8.34:1 7:1
fgColor-accent vs. bgColor-inset ✅ 9.9:1 7:1
fgColor-success vs. bgColor-default ✅ 10.8:1 7:1
fgColor-success vs. bgColor-muted ✅ 9.11:1 7:1
fgColor-success vs. bgColor-inset ✅ 10.8:1 7:1
fgColor-open vs. bgColor-default ✅ 10.8:1 7:1
fgColor-open vs. bgColor-muted ✅ 9.11:1 7:1
fgColor-open vs. bgColor-inset ✅ 10.8:1 7:1
fgColor-danger vs. bgColor-default ✅ 9.68:1 7:1
fgColor-danger vs. bgColor-muted ✅ 8.16:1 7:1
fgColor-danger vs. bgColor-inset ✅ 9.68:1 7:1
fgColor-closed vs. bgColor-default ✅ 9.68:1 7:1
fgColor-closed vs. bgColor-muted ✅ 8.16:1 7:1
fgColor-closed vs. bgColor-inset ✅ 9.68:1 7:1
fgColor-attention vs. bgColor-default ✅ 11.26:1 7:1
fgColor-attention vs. bgColor-muted ✅ 9.49:1 7:1
fgColor-attention vs. bgColor-inset ✅ 11.26:1 7:1
fgColor-severe vs. bgColor-default ✅ 9.65:1 7:1
fgColor-severe vs. bgColor-muted ✅ 8.14:1 7:1
fgColor-severe vs. bgColor-inset ✅ 9.65:1 7:1
fgColor-done vs. bgColor-default ✅ 10.79:1 7:1
fgColor-done vs. bgColor-muted ✅ 9.1:1 7:1
fgColor-done vs. bgColor-inset ✅ 10.79:1 7:1
fgColor-upsell vs. bgColor-default ✅ 10.79:1 7:1
fgColor-upsell vs. bgColor-muted ✅ 9.1:1 7:1
fgColor-upsell vs. bgColor-inset ✅ 10.79:1 7:1
fgColor-sponsors vs. bgColor-default ✅ 9.85:1 7:1
fgColor-sponsors vs. bgColor-muted ✅ 8.3:1 7:1
fgColor-sponsors vs. bgColor-inset ✅ 9.85:1 7:1
fgColor-neutral vs. bgColor-neutral-muted ✅ 10.28:1 7:1
fgColor-accent vs. bgColor-accent-muted on bgColor-default ✅ 8.85:1 7:1
fgColor-accent vs. bgColor-accent-muted on bgColor-muted ✅ 7.03:1 7:1
fgColor-success vs. bgColor-success-muted on bgColor-default ✅ 8.99:1 7:1
fgColor-success vs. bgColor-success-muted on bgColor-muted ✅ 7.05:1 7:1
fgColor-open vs. bgColor-open-muted on bgColor-default ✅ 8.99:1 7:1
fgColor-open vs. bgColor-open-muted on bgColor-muted ✅ 7.05:1 7:1
fgColor-danger vs. bgColor-danger-muted on bgColor-default ✅ 8.7:1 7:1
fgColor-danger vs. bgColor-danger-muted on bgColor-muted ✅ 7.01:1 7:1
fgColor-closed vs. bgColor-closed-muted on bgColor-default ✅ 8.7:1 7:1
fgColor-closed vs. bgColor-closed-muted on bgColor-muted ✅ 7.01:1 7:1
fgColor-attention vs. bgColor-attention-muted on bgColor-default ✅ 9.16:1 7:1
fgColor-attention vs. bgColor-attention-muted on bgColor-muted ✅ 7.2:1 7:1
fgColor-severe vs. bgColor-severe-muted on bgColor-default ✅ 8.69:1 7:1
fgColor-severe vs. bgColor-severe-muted on bgColor-muted ✅ 7:1 7:1
fgColor-done vs. bgColor-done-muted on bgColor-default ✅ 8.96:1 7:1
fgColor-done vs. bgColor-done-muted on bgColor-muted ✅ 7.07:1 7:1
fgColor-upsell vs. bgColor-upsell-muted on bgColor-default ✅ 8.96:1 7:1
fgColor-upsell vs. bgColor-upsell-muted on bgColor-muted ✅ 7.07:1 7:1
fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-default ✅ 8.88:1 7:1
fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-muted ✅ 7.09:1 7:1
fgColor-onEmphasis vs. bgColor-neutral-emphasis ✅ 9.84:1 7:1
fgColor-onEmphasis vs. bgColor-accent-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-success-emphasis ✅ 7.58:1 7:1
fgColor-onEmphasis vs. bgColor-open-emphasis ✅ 7.58:1 7:1
fgColor-onEmphasis vs. bgColor-danger-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-closed-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-attention-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-severe-emphasis ✅ 7.46:1 7:1
fgColor-onEmphasis vs. bgColor-done-emphasis ✅ 7.5:1 7:1
fgColor-onEmphasis vs. bgColor-upsell-emphasis ✅ 7.5:1 7:1
fgColor-onEmphasis vs. bgColor-sponsors-emphasis ✅ 7.5:1 7:1
control-borderColor-emphasis vs. bgColor-default ✅ 10.88:1 4.5:1
control-borderColor-emphasis vs. bgColor-muted ✅ 9.17:1 4.5:1
display-gray-fgColor vs. display-gray-bgColor-muted ✅ 9.23:1 7:1
display-indigo-fgColor vs. display-indigo-bgColor-muted ✅ 9.1:1 7:1
display-blue-fgColor vs. display-blue-bgColor-muted ✅ 9:1 7:1
display-cyan-fgColor vs. display-cyan-bgColor-muted ✅ 9.07:1 7:1
display-teal-fgColor vs. display-teal-bgColor-muted ✅ 9.35:1 7:1
display-pine-fgColor vs. display-pine-bgColor-muted ✅ 9.17:1 7:1
display-green-fgColor vs. display-green-bgColor-muted ✅ 9:1 7:1
display-lime-fgColor vs. display-lime-bgColor-muted ✅ 9.07:1 7:1
display-olive-fgColor vs. display-olive-bgColor-muted ✅ 9.05:1 7:1
display-lemon-fgColor vs. display-lemon-bgColor-muted ✅ 8.74:1 7:1
display-yellow-fgColor vs. display-yellow-bgColor-muted ✅ 8.84:1 7:1
display-orange-fgColor vs. display-orange-bgColor-muted ✅ 9.02:1 7:1
display-red-fgColor vs. display-red-bgColor-muted ✅ 9.37:1 7:1
display-coral-fgColor vs. display-coral-bgColor-muted ✅ 9.17:1 7:1
display-pink-fgColor vs. display-pink-bgColor-muted ✅ 9.16:1 7:1
display-plum-fgColor vs. display-plum-bgColor-muted ✅ 9:1 7:1
display-purple-fgColor vs. display-purple-bgColor-muted ✅ 9.18:1 7:1
display-brown-fgColor vs. display-brown-bgColor-muted ✅ 8.91:1 7:1
display-auburn-fgColor vs. display-auburn-bgColor-muted ✅ 9.14:1 7:1
fgColor-onEmphasis vs. display-gray-bgColor-emphasis ✅ 8.41:1 7:1
fgColor-onEmphasis vs. display-indigo-bgColor-emphasis ✅ 8.59:1 7:1
fgColor-onEmphasis vs. display-blue-bgColor-emphasis ✅ 8.6:1 7:1
fgColor-onEmphasis vs. display-cyan-bgColor-emphasis ✅ 8.5:1 7:1
fgColor-onEmphasis vs. display-teal-bgColor-emphasis ✅ 8.52:1 7:1
fgColor-onEmphasis vs. display-pine-bgColor-emphasis ✅ 8.21:1 7:1
fgColor-onEmphasis vs. display-green-bgColor-emphasis ✅ 8.3:1 7:1
fgColor-onEmphasis vs. display-lime-bgColor-emphasis ✅ 8.56:1 7:1
fgColor-onEmphasis vs. display-olive-bgColor-emphasis ✅ 8.41:1 7:1
fgColor-onEmphasis vs. display-lemon-bgColor-emphasis ✅ 8.25:1 7:1
fgColor-onEmphasis vs. display-yellow-bgColor-emphasis ✅ 8.47:1 7:1
fgColor-onEmphasis vs. display-orange-bgColor-emphasis ✅ 8.41:1 7:1
fgColor-onEmphasis vs. display-red-bgColor-emphasis ✅ 8.57:1 7:1
fgColor-onEmphasis vs. display-coral-bgColor-emphasis ✅ 8.32:1 7:1
fgColor-onEmphasis vs. display-pink-bgColor-emphasis ✅ 8.5:1 7:1
fgColor-onEmphasis vs. display-plum-bgColor-emphasis ✅ 8.51:1 7:1
fgColor-onEmphasis vs. display-purple-bgColor-emphasis ✅ 8.52:1 7:1
fgColor-onEmphasis vs. display-brown-bgColor-emphasis ✅ 8.43:1 7:1
fgColor-onEmphasis vs. display-auburn-bgColor-emphasis ✅ 8.3:1 7:1
bgColor-default vs. display-gray-borderColor-emphasis ✅ 7.81:1 4.5:1
bgColor-default vs. display-indigo-borderColor-emphasis ✅ 7.92:1 4.5:1
bgColor-default vs. display-blue-borderColor-emphasis ✅ 7.61:1 4.5:1
bgColor-default vs. display-cyan-borderColor-emphasis ✅ 7.85:1 4.5:1
bgColor-default vs. display-teal-borderColor-emphasis ✅ 7.67:1 4.5:1
bgColor-default vs. display-pine-borderColor-emphasis ✅ 7.8:1 4.5:1
bgColor-default vs. display-green-borderColor-emphasis ✅ 7.66:1 4.5:1
bgColor-default vs. display-lime-borderColor-emphasis ✅ 7.8:1 4.5:1
bgColor-default vs. display-olive-borderColor-emphasis ✅ 7.84:1 4.5:1
bgColor-default vs. display-lemon-borderColor-emphasis ✅ 7.61:1 4.5:1
bgColor-default vs. display-yellow-borderColor-emphasis ✅ 7.65:1 4.5:1
bgColor-default vs. display-orange-borderColor-emphasis ✅ 7.7:1 4.5:1
bgColor-default vs. display-red-borderColor-emphasis ✅ 7.85:1 4.5:1
bgColor-default vs. display-coral-borderColor-emphasis ✅ 7.61:1 4.5:1
bgColor-default vs. display-pink-borderColor-emphasis ✅ 7.63:1 4.5:1
bgColor-default vs. display-plum-borderColor-emphasis ✅ 7.83:1 4.5:1
bgColor-default vs. display-purple-borderColor-emphasis ✅ 7.62:1 4.5:1
bgColor-default vs. display-brown-borderColor-emphasis ✅ 7.65:1 4.5:1
bgColor-default vs. display-auburn-borderColor-emphasis ✅ 7.75:1 4.5:1
bgColor-muted vs. display-gray-borderColor-emphasis ✅ 6.58:1 4.5:1
bgColor-muted vs. display-indigo-borderColor-emphasis ✅ 6.68:1 4.5:1
bgColor-muted vs. display-blue-borderColor-emphasis ✅ 6.42:1 4.5:1
bgColor-muted vs. display-cyan-borderColor-emphasis ✅ 6.62:1 4.5:1
bgColor-muted vs. display-teal-borderColor-emphasis ✅ 6.46:1 4.5:1
bgColor-muted vs. display-pine-borderColor-emphasis ✅ 6.58:1 4.5:1
bgColor-muted vs. display-green-borderColor-emphasis ✅ 6.46:1 4.5:1
bgColor-muted vs. display-lime-borderColor-emphasis ✅ 6.58:1 4.5:1
bgColor-muted vs. display-olive-borderColor-emphasis ✅ 6.61:1 4.5:1
bgColor-muted vs. display-lemon-borderColor-emphasis ✅ 6.41:1 4.5:1
bgColor-muted vs. display-yellow-borderColor-emphasis ✅ 6.45:1 4.5:1
bgColor-muted vs. display-orange-borderColor-emphasis ✅ 6.49:1 4.5:1
bgColor-muted vs. display-red-borderColor-emphasis ✅ 6.62:1 4.5:1
bgColor-muted vs. display-coral-borderColor-emphasis ✅ 6.42:1 4.5:1
bgColor-muted vs. display-pink-borderColor-emphasis ✅ 6.43:1 4.5:1
bgColor-muted vs. display-plum-borderColor-emphasis ✅ 6.6:1 4.5:1
bgColor-muted vs. display-purple-borderColor-emphasis ✅ 6.42:1 4.5:1
bgColor-muted vs. display-brown-borderColor-emphasis ✅ 6.45:1 4.5:1
bgColor-muted vs. display-auburn-borderColor-emphasis ✅ 6.53:1 4.5:1
display-gray-borderColor-emphasis vs. display-gray-bgColor-muted ✅ 6.48:1 4.5:1
display-indigo-borderColor-emphasis vs. display-indigo-bgColor-muted ✅ 6.48:1 4.5:1
display-blue-borderColor-emphasis vs. display-blue-bgColor-muted ✅ 6.28:1 4.5:1
display-cyan-borderColor-emphasis vs. display-cyan-bgColor-muted ✅ 6.53:1 4.5:1
display-teal-borderColor-emphasis vs. display-teal-bgColor-muted ✅ 6.39:1 4.5:1
display-pine-borderColor-emphasis vs. display-pine-bgColor-muted ✅ 6.42:1 4.5:1
display-green-borderColor-emphasis vs. display-green-bgColor-muted ✅ 6.24:1 4.5:1
display-lime-borderColor-emphasis vs. display-lime-bgColor-muted ✅ 6.47:1 4.5:1
display-olive-borderColor-emphasis vs. display-olive-bgColor-muted ✅ 6.53:1 4.5:1
display-lemon-borderColor-emphasis vs. display-lemon-bgColor-muted ✅ 6.12:1 4.5:1
display-yellow-borderColor-emphasis vs. display-yellow-bgColor-muted ✅ 6.19:1 4.5:1
display-orange-borderColor-emphasis vs. display-orange-bgColor-muted ✅ 6.26:1 4.5:1
display-red-borderColor-emphasis vs. display-red-bgColor-muted ✅ 6.54:1 4.5:1
display-coral-borderColor-emphasis vs. display-coral-bgColor-muted ✅ 6.34:1 4.5:1
display-pink-borderColor-emphasis vs. display-pink-bgColor-muted ✅ 6.27:1 4.5:1
display-plum-borderColor-emphasis vs. display-plum-bgColor-muted ✅ 6.49:1 4.5:1
display-purple-borderColor-emphasis vs. display-purple-bgColor-muted ✅ 6.34:1 4.5:1
display-brown-borderColor-emphasis vs. display-brown-bgColor-muted ✅ 6.25:1 4.5:1
display-auburn-borderColor-emphasis vs. display-auburn-bgColor-muted ✅ 6.45:1 4.5:1

langermank
langermank approved these changes Sep 18, 2024
View reviewed changes
Copy link
Contributor

@langermank langermank left a comment

Choose a reason for hiding this comment

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

Thanks for your hard work on this!! The VRT changes look fine to me

@lukasoppermann lukasoppermann added the update snapshots Update visual regression test snapshots label Sep 19, 2024
@lukasoppermann lukasoppermann merged commit 7806a4c into main Sep 19, 2024
26 checks passed
@lukasoppermann lukasoppermann deleted the sdv4-clean branch September 19, 2024 07:45
@primer primer bot mentioned this pull request Sep 19, 2024
Open
@github-actions github-actions bot removed the update snapshots Update visual regression test snapshots label Sep 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@langermank langermank langermank approved these changes

@jonrohan jonrohan Awaiting requested review from jonrohan jonrohan is a code owner automatically assigned from primer/css-reviewers

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@lukasoppermann @langermank @siddharthkp