Prep for high contrast theme updates (#2979)

primer · Jul 29, 2024 · ae6e3d7 · ae6e3d7
1 parent d589604
commit ae6e3d7
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 2 deletions.
diff --git a/.changeset/curly-plums-explode.md b/.changeset/curly-plums-explode.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Prep for high contrast theme updates
diff --git a/app/components/primer/alpha/segmented_control.pcss b/app/components/primer/alpha/segmented_control.pcss
@@ -7,6 +7,7 @@
   display: inline-flex;
   list-style: none;
   background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));
+  border-color: var(--controlTrack-borderColor-rest, transparent);
   border-radius: var(--borderRadius-medium);
 }
 

diff --git a/app/components/primer/alpha/tool_tip.ts b/app/components/primer/alpha/tool_tip.ts
@@ -71,15 +71,15 @@ class ToolTipElement extends HTMLElement {
         --tooltip-left: var(--tool-tip-position-left, 0);
         padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed) !important;
         font: var(--text-body-shorthand-small);
-        color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important;
+        color: var(--tooltip-fgColor, var(--fgColor-onEmphasis)) !important;
         text-align: center;
         text-decoration: none;
         text-shadow: none;
         text-transform: none;
         letter-spacing: normal;
         word-wrap: break-word;
         white-space: pre;
-        background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important;
+        background: var(--tooltip-bgColor, var(--bgColor-emphasis)) !important;
         border-radius: var(--borderRadius-medium);
         border: 0 !important;
         opacity: 0;

diff --git a/app/components/primer/beta/state.pcss b/app/components/primer/beta/state.pcss
@@ -20,21 +20,25 @@
   color: var(--fgColor-onEmphasis);
   background-color: var(--bgColor-neutral-emphasis);
   border: var(--borderWidth-thin) solid transparent;
+  box-shadow: var(--boxShadow-thin) var(--borderColor-neutral-emphasis);
 }
 
 .State--open {
   color: var(--fgColor-onEmphasis);
   background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));
+  box-shadow: var(--boxShadow-thin) var(--borderColor-open-emphasis);
 }
 
 .State--merged {
   color: var(--fgColor-onEmphasis);
   background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));
+  box-shadow: var(--boxShadow-thin) var(--borderColor-done-emphasis);
 }
 
 .State--closed {
   color: var(--fgColor-onEmphasis);
   background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));
+  box-shadow: var(--boxShadow-thin) var(--borderColor-closed-emphasis);
 }
 
 /* Small 24px */