@primer/brand-css 0.56.3 → 0.56.4-rc.42864aaf

package/components/ActionMenu/ActionMenu.css

@@ -278,6 +278,13 @@
   fill: var(--base-color-scale-gray-3);
 }
 
+@media (forced-colors: active) {
+  .ActionMenu__item:focus-visible {
+    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline-offset: var(--base-size-2);
+  }
+}
+
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   .ActionMenu,

package/components/FAQ/FAQGroup.css

@@ -50,3 +50,11 @@
   font-size: var(--brand-text-size-200);
   line-height: var(--brand-text-lineHeight-200);
 }
+
+@media (forced-colors: active) {
+  .FAQGroup__tablist-button[aria-selected='true'] {
+    border-color: Highlight;
+    border-width: var(--brand-borderWidth-thicker);
+    color: HighlightText;
+  }
+}

package/components/Pagination/Pagination.css

@@ -117,6 +117,14 @@
   }
 }
 
+@media (forced-colors: active) {
+  .Pagination__item[aria-current],
+  .Pagination__item[aria-current]:hover {
+    border-color: Highlight;
+    border-width: var(--brand-borderWidth-thicker);
+  }
+}
+
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   .Pagination,

package/components/VideoPlayer/VideoPlayer.css

@@ -31,6 +31,12 @@
   height: 100%;
 }
 
+@media (forced-colors: active) {
+  .VideoPlayer__container {
+    border: var(--brand-borderWidth-thin) solid ButtonBorder;
+  }
+}
+
 /* ---------------------------------------------------------- */
 /* 2. Player                                                  */
 /* ---------------------------------------------------------- */
@@ -87,6 +93,13 @@
   color: var(--brand-videoPlayer-playButton-fgColor-rest);
 }
 
+@media (forced-colors: active) {
+  .VideoPlayer__playButton {
+    color: Highlight;
+    opacity: 1;
+  }
+}
+
 /* ---------------------------------------------------------- */
 /* 4. Title                                                   */
 /* ---------------------------------------------------------- */
@@ -114,6 +127,13 @@
   visibility: hidden;
 }
 
+@media (forced-colors: active) {
+  .VideoPlayer__title {
+    background: Canvas;
+    color: CanvasText;
+  }
+}
+
 /* ---------------------------------------------------------- */
 /* 5. Controls                                                */
 /* ---------------------------------------------------------- */
@@ -173,12 +193,15 @@
 }
 
 .VideoPlayer__iconControl:focus-visible {
-  border-color: var(--brand-color-focus);
-  outline: none;
-  box-shadow: 0 0 0 0.125rem var(--brand-color-focus);
+  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+  outline-offset: var(--base-size-6);
   opacity: 1;
 }
 
+.VideoPlayer__iconControl:not(.VideoPlayer__closedCaption):focus-visible {
+  border-radius: var(--brand-borderRadius-small);
+}
+
 .VideoPlayer__iconControl svg {
   color: var(--brand-videoPlayer-controls-fgColor);
 }
@@ -224,6 +247,30 @@
   color: var(--brand-videoPlayer-closedCaption-fgColor-disabled);
 }
 
+@media (forced-colors: active) {
+  .VideoPlayer__iconControl svg {
+    color: ButtonText;
+  }
+
+  .VideoPlayer__iconControl:focus-visible {
+    outline-color: Highlight;
+  }
+
+  .VideoPlayer__closedCaption:focus-visible {
+    outline: none;
+  }
+
+  .VideoPlayer__closedCaption:not(.VideoPlayer__ccOff) {
+    background: Highlight;
+    border-color: Highlight;
+  }
+
+  .VideoPlayer__closedCaption:not(.VideoPlayer__ccOff) .VideoPlayer__ccText {
+    background-color: Highlight;
+    color: HighlightText;
+  }
+}
+
 /* ---------------------------------------------------------- */
 /* 6. Range Element                                           */
 /* ---------------------------------------------------------- */
@@ -254,7 +301,8 @@
 
 .VideoPlayer__rangeInput:focus-visible {
   outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
-  outline-offset: var(--base-size-4);
+  outline-offset: var(--base-size-8);
+  border-radius: var(--brand-borderRadius-small);
   opacity: 1;
 }
 
@@ -303,6 +351,28 @@
   border: none;
 }
 
+@media (forced-colors: active) {
+  .VideoPlayer__rangeProgress::-webkit-progress-bar {
+    background-color: FieldText;
+  }
+
+  .VideoPlayer__rangeProgress::-webkit-progress-value {
+    background-color: Highlight;
+  }
+
+  .VideoPlayer__rangeProgress::-moz-progress-bar {
+    background: Highlight;
+  }
+
+  .VideoPlayer__rangeProgress::-ms-fill-lower {
+    background-color: Highlight;
+  }
+
+  .VideoPlayer__rangeProgress::-ms-fill-upper {
+    background-color: FieldText;
+  }
+}
+
 /* ---------------------------------------------------------- */
 /* 7. Tooltip                                                 */
 /* ---------------------------------------------------------- */

package/components/forms/Checkbox/Checkbox.css

@@ -87,6 +87,21 @@
   opacity: 1;
 }
 
+@media (forced-colors: active) {
+  .Checkbox-input:focus + .Checkbox {
+    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline-offset: var(--base-size-2);
+  }
+
+  .Checkbox-input:checked + .Checkbox .Checkbox-checkmark-path {
+    stroke: Highlight;
+  }
+
+  .Checkbox {
+    transition: none;
+  }
+}
+
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   .Checkbox,

package/components/forms/Radio/Radio.css

@@ -110,6 +110,17 @@ Fixes safari bug where outline doesn't respect border-radius
   opacity: 1;
 }
 
+@media (forced-colors: active) {
+  .Radio-input:focus + .Radio {
+    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline-offset: var(--base-size-4);
+  }
+
+  .Radio-input:checked + .Radio .Radio-dot {
+    background-color: Highlight;
+  }
+}
+
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   .Radio,

package/components/forms/Select/Select.css

@@ -41,6 +41,13 @@
   box-shadow: 0 0 0 2px var(--brand-color-focus);
 }
 
+@media (forced-colors: active) {
+  .Select:focus-visible {
+    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline-offset: var(--base-size-2);
+  }
+}
+
 .Select[disabled] {
   -webkit-text-fill-color: var(--brand-control-color-fg-disabled);
   color: var(--brand-control-color-fg-disabled);

package/components/forms/TextInput/TextInput.css

@@ -107,6 +107,13 @@
   outline: none;
 }
 
+@media (forced-colors: active) {
+  .TextInput-wrapper:focus-within {
+    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline-offset: var(--base-size-2);
+  }
+}
+
 /*
  * Validation
  */

package/components/forms/Textarea/Textarea.css

@@ -114,6 +114,13 @@
   outline: none;
 }
 
+@media (forced-colors: active) {
+  .Textarea-wrapper:focus-within {
+    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline-offset: var(--base-size-2);
+  }
+}
+
 /*
  * Validation
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.56.3",
+  "version": "0.56.4-rc.42864aaf",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",