@primer/components 0.0.0-20219214338 → 0.0.0-202192214359

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @primer/components
 
-## 0.0.0-20219214338
+## 0.0.0-202192214359
 
 ### Major Changes
 
@@ -12,6 +12,8 @@
 
 - Fake entry to force publishing
 
+* [#1512](https://github.com/primer/react/pull/1512) [`1e5ac406`](https://github.com/primer/react/commit/1e5ac406f8558a20248157a9bfe13ee4709890c8) Thanks [@pksjce](https://github.com/pksjce)! - Change disabled color from muted to custom primer disabled color
+
 ## 30.3.0
 
 ### Minor Changes

package/dist/browser.esm.js

@@ -45,7 +45,7 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
   }
 
   &:disabled {
-    color: ${Nt("colors.fg.muted")};
+    color: ${Nt("colors.primer.fg.disabled")};
     background-color: ${Nt("colors.btn.bg")};
     border-color: ${Nt("colors.btn.border")};
   }
@@ -198,12 +198,17 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
   box-shadow: none;
 
   &:disabled {
-    color: ${Nt("colors.fg.muted")};
+    color: ${Nt("colors.primer.fg.disabled")};
   }
-
   &:focus {
     box-shadow: ${Nt("shadows.btn.focusShadow")};
   }
+  &:hover {
+    background-color: ${Nt("colors.btn.hoverBg")};
+  }
+  &:active {
+    background-color: ${Nt("colors.btn.selectedBg")};
+  }
 
   ${Ur};
   ${rr}
@@ -227,7 +232,7 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
   &:disabled {
     &,
     &:hover {
-      color: rgba(${Nt("colors.fg.muted")}, 0.5);
+      color: ${Nt("colors.primer.fg.disabled")};
       cursor: default;
     }
   }
@@ -413,7 +418,7 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
   background: ${Nt("colors.border.muted")};
   margin-top: calc(${Nt("space.2")} - 1px);
   margin-bottom: ${Nt("space.2")};
-`;function ka(){return e.createElement($a,null)}ka.displayName="Divider",ka.renderItem=ka;const Ta={default:{hover:{light:"rgba(46, 77, 108, 0.06)",dark:"rgba(201, 206, 212, 0.12)",dark_dimmed:"rgba(201, 206, 212, 0.12)"},focus:{light:"rgba(54, 77, 100, 0.16)",dark:"rgba(201, 206, 212, 0.24)",dark_dimmed:"rgba(201, 206, 212, 0.24)"}},danger:{hover:{light:"rgba(234, 74, 90, 0.08)",dark:"rgba(248, 81, 73, 0.16)",dark_dimmed:"rgba(248, 81, 73, 0.16)"},focus:{light:"rgba(234, 74, 90, 0.14)",dark:"rgba(248, 81, 73, 0.24)",dark_dimmed:"rgba(248, 81, 73, 0.24)"}}},Sa=(e="default",t)=>{if(t)return{color:Nt("colors.fg.muted"),iconColor:Nt("colors.fg.muted"),annotationColor:Nt("colors.fg.muted"),hoverCursor:"default"};switch(e){case"danger":return{color:Nt("colors.danger.fg"),iconColor:Nt("colors.danger.fg"),annotationColor:Nt("colors.fg.muted"),hoverCursor:"pointer"};default:return{color:Nt("colors.fg.default"),iconColor:Nt("colors.fg.muted"),annotationColor:Nt("colors.fg.muted"),hoverCursor:"pointer"}}},Ea=f.div`
+`;function ka(){return e.createElement($a,null)}ka.displayName="Divider",ka.renderItem=ka;const Ta={default:{hover:{light:"rgba(46, 77, 108, 0.06)",dark:"rgba(201, 206, 212, 0.12)",dark_dimmed:"rgba(201, 206, 212, 0.12)"},focus:{light:"rgba(54, 77, 100, 0.16)",dark:"rgba(201, 206, 212, 0.24)",dark_dimmed:"rgba(201, 206, 212, 0.24)"}},danger:{hover:{light:"rgba(234, 74, 90, 0.08)",dark:"rgba(248, 81, 73, 0.16)",dark_dimmed:"rgba(248, 81, 73, 0.16)"},focus:{light:"rgba(234, 74, 90, 0.14)",dark:"rgba(248, 81, 73, 0.24)",dark_dimmed:"rgba(248, 81, 73, 0.24)"}}},Sa=(e="default",t)=>{if(t)return{color:Nt("colors.primer.fg.disabled"),iconColor:Nt("colors.primer.fg.disabled"),annotationColor:Nt("colors.primer.fg.disabled"),hoverCursor:"default"};switch(e){case"danger":return{color:Nt("colors.danger.fg"),iconColor:Nt("colors.danger.fg"),annotationColor:Nt("colors.fg.muted"),hoverCursor:"pointer"};default:return{color:Nt("colors.fg.default"),iconColor:Nt("colors.fg.muted"),annotationColor:Nt("colors.fg.muted"),hoverCursor:"pointer"}}},Ea=f.div`
   display: flex;
   min-width: 0;
 
@@ -631,7 +636,7 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
 
   ${e=>e.contrast&&p(["background-color:",";"],Nt("colors.canvas.inset"))}
 
-  ${e=>e.disabled&&p(["color:",";background-color:",";border-color:",";"],Nt("colors.fg.muted"),Nt("colors.input.disabledBg"),Nt("colors.border.default"))}
+  ${e=>e.disabled&&p(["color:",";background-color:",";border-color:",";"],Nt("colors.primer.fg.disabled"),Nt("colors.input.disabledBg"),Nt("colors.border.default"))}
   
     ${e=>e.block&&p(["display:block;width:100%;"])}
   
@@ -1243,7 +1248,7 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
 
   &[aria-disabled],
   &[aria-disabled]:hover {
-    color: ${Nt("colors.fg.muted")}; // check
+    color: ${Nt("colors.primer.fg.disabled")}; // check
     cursor: default;
     border-color: transparent;
   }