@charcoal-ui/react 3.7.0 → 3.9.0

package/dist/styled.d.ts

@@ -61,17 +61,17 @@ export declare const theme: (specFn: (o: Record<string, unknown> & Readonly<{
 }> & {
     readonly typography: (size: keyof import("@charcoal-ui/theme").Typography) => import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "bold" | "monospace" | "preserveHalfLeading">;
 } & {
-    readonly margin: import("@charcoal-ui/styled/dist/factories/lib").MethodChain<import("@charcoal-ui/styled/dist/internals").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 4 | 8 | 40 | 16 | 24 | 64 | 104 | 168 | 272 | 440]>;
-    readonly padding: import("@charcoal-ui/styled/dist/factories/lib").MethodChain<import("@charcoal-ui/styled/dist/internals").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 4 | 8 | 40 | 16 | 24 | 64 | 104 | 168 | 272 | 440]>;
+    readonly margin: import("@charcoal-ui/styled/dist/factories/lib").MethodChain<import("@charcoal-ui/styled/dist/internals").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 4 | 40 | 8 | 16 | 24 | 64 | 104 | 168 | 272 | 440]>;
+    readonly padding: import("@charcoal-ui/styled/dist/factories/lib").MethodChain<import("@charcoal-ui/styled/dist/internals").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 4 | 40 | 8 | 16 | 24 | 64 | 104 | 168 | 272 | 440]>;
 } & {
     readonly height: Readonly<{
-        px: (size: 0 | "auto" | 4 | 8 | 40 | 16 | 24 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
+        px: (size: 0 | "auto" | 4 | 40 | 8 | 16 | 24 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
         column: (span: number) => import("@charcoal-ui/styled/dist/internals").Internal;
         auto: import("@charcoal-ui/styled/dist/internals").Internal;
         full: import("@charcoal-ui/styled/dist/internals").Internal;
     }>;
     readonly width: Readonly<{
-        px: (size: 0 | "auto" | 4 | 8 | 40 | 16 | 24 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
+        px: (size: 0 | "auto" | 4 | 40 | 8 | 16 | 24 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
         column: (span: number) => import("@charcoal-ui/styled/dist/internals").Internal;
         auto: import("@charcoal-ui/styled/dist/internals").Internal;
         full: import("@charcoal-ui/styled/dist/internals").Internal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "3.7.0",
+  "version": "3.9.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -18,6 +18,7 @@
     "clean": "rimraf dist .tsbuildinfo"
   },
   "devDependencies": {
+    "@charcoal-ui/esbuild-plugin-styled-components": "^3.9.0",
     "@react-types/switch": "^3.1.2",
     "@storybook/addon-actions": "^7.4.1",
     "@storybook/addon-knobs": "^7.0.2",
@@ -51,10 +52,10 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^3.7.0",
-    "@charcoal-ui/styled": "^3.7.0",
-    "@charcoal-ui/theme": "^3.7.0",
-    "@charcoal-ui/utils": "^3.7.0",
+    "@charcoal-ui/icons": "^3.9.0",
+    "@charcoal-ui/styled": "^3.9.0",
+    "@charcoal-ui/theme": "^3.9.0",
+    "@charcoal-ui/utils": "^3.9.0",
     "@react-aria/button": "^3.9.1",
     "@react-aria/checkbox": "^3.13.0",
     "@react-aria/dialog": "^3.5.10",
@@ -87,5 +88,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "ebb9480045faf2418cb5a2f95f69848f946e14ed"
+  "gitHead": "fe760d136886d2227013d73067544c5a42ff075b"
 }

package/src/components/Button/StyledButton.tsx

@@ -3,6 +3,7 @@ import Clickable from '../Clickable'
 import { variantToFont } from './lib/variantToFont'
 import { variantToBackground } from './lib/variantToBackground'
 import type { Size } from '.'
+import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
 
 const horizontalPaddingSmall = css`
   padding-right: 16px;
@@ -19,6 +20,7 @@ type StyledButtonProps = {
   $size: Size
   $background: ReturnType<typeof variantToBackground>
   $color: ReturnType<typeof variantToFont>
+  $isActive: boolean
 }
 
 export const StyledButton = styled(Clickable)<StyledButtonProps>`
@@ -41,21 +43,24 @@ export const StyledButton = styled(Clickable)<StyledButtonProps>`
 
   &:not(:disabled):not([aria-disabled]),
   &[aria-disabled='false'] {
-    &:active,
-    &:focus,
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
+    ${focusVisibleFocusRingCss}
 
-    &:hover {
-      color: var(--charcoal-${(p) => p.$color}-hover);
-      background-color: var(--charcoal-${(p) => p.$background}-hover);
-    }
-    &:active {
-      color: var(--charcoal-${(p) => p.$color}-press);
-      background-color: var(--charcoal-${(p) => p.$background}-press);
-    }
+    ${({ $isActive: $active, $color, $background }) =>
+      $active
+        ? css`
+            color: var(--charcoal-${$color}-press);
+            background-color: var(--charcoal-${$background}-press);
+          `
+        : css`
+            &:hover {
+              color: var(--charcoal-${$color}-hover);
+              background-color: var(--charcoal-${$background}-hover);
+            }
+            &:active {
+              color: var(--charcoal-${$color}-press);
+              background-color: var(--charcoal-${$background}-press);
+            }
+          `}
   }
 
   &:disabled,