Rename 'scrimColor' prop to 'scrim'

Author: adamgraham

src/components/Lightbox.tsx

@@ -34,7 +34,7 @@ export default function Lightbox({
   onChangeImage,
   onRequestClose,
   rounded,
-  scrimColor = 'auto',
+  scrim = 'auto',
   ...rest
 }: LightboxProps) {
   const currentImage =
@@ -70,7 +70,7 @@ export default function Lightbox({
       closeOnScrimClick={false}
       dialogClassName="lightbox__dialog"
       onRequestClose={onRequestClose}
-      scrimColor={scrimColor}
+      scrim={scrim}
       {...rest}
     >
       <div className="lightbox__container">

src/components/Overlay.tsx

@@ -17,7 +17,7 @@ export type OverlayProps = {
   open?: boolean;
   reflow?: boolean;
   rootElement?: string;
-  scrimColor?: 'auto' | 'dark' | 'light';
+  scrim?: 'auto' | 'dark' | 'light';
   theme?: ThemeToken;
 } & React.ComponentPropsWithoutRef<'div'>;
 
@@ -33,17 +33,15 @@ export default function Overlay({
   open = false,
   reflow = true,
   rootElement = 'body',
-  scrimColor = 'dark',
+  scrim = 'dark',
   theme,
   ...rest
 }: OverlayProps) {
   const scrimClassNames = classNames('overlay__scrim', {
-    'bg-white':
-      scrimColor === 'light' || (scrimColor === 'auto' && theme === 'light'),
+    'bg-white': scrim === 'light' || (scrim === 'auto' && theme === 'light'),
     'bg-black':
-      scrimColor === 'dark' ||
-      (scrimColor === 'auto' && theme !== 'light' && theme),
-    'bg-background': scrimColor === 'auto' && !theme,
+      scrim === 'dark' || (scrim === 'auto' && theme !== 'light' && theme),
+    'bg-background': scrim === 'auto' && !theme,
     hidden: hideScrim,
   });
   useBodyOverflow(open, reflow);

stories/Lightbox.stories.tsx

@@ -88,7 +88,7 @@ export const Rounded: Story = {
 
 export const DarkScrim: Story = {
   args: {
-    scrimColor: 'dark',
+    scrim: 'dark',
     images: [
       'https://picsum.photos/seed/10/1280/720',
       'https://picsum.photos/seed/100/1280/720',

stories/Overlay.stories.tsx

@@ -32,7 +32,7 @@ export const Default: Story = {
 };
 
 export const LightScrim: Story = {
-  args: { scrimColor: 'light' },
+  args: { scrim: 'light' },
   decorators: [Decorator],
 };