fix(Spinner): use controlActivatedInverse token as default when used …

…inside inverse variant (#1133)

src/__screenshot_tests__/spinner-screenshot-test.tsx

@@ -0,0 +1,28 @@
+import {openStoryPage, screen} from '../test-utils';
+
+const DEVICES = ['DESKTOP', 'MOBILE_ANDROID', 'MOBILE_IOS'] as const;
+
+test.each(DEVICES)('Spinner - default %s', async (device) => {
+    await openStoryPage({
+        id: 'components-spinner--default',
+        device,
+    });
+
+    const spinner = await screen.findByLabelText('Cargando');
+
+    const image = await spinner.screenshot();
+    expect(image).toMatchImageSnapshot();
+});
+
+test.each(DEVICES)('Spinner - inverse %s', async (device) => {
+    await openStoryPage({
+        id: 'components-spinner--default',
+        device,
+        args: {inverse: true},
+    });
+
+    const spinner = await screen.findByLabelText('Cargando');
+
+    const image = await spinner.screenshot();
+    expect(image).toMatchImageSnapshot();
+});

src/__stories__/spinner-story.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Spinner} from '..';
+import {Box, ResponsiveLayout, Spinner} from '..';
 
 export default {
     title: 'Components/Spinner',
@@ -9,17 +9,26 @@ export default {
             control: {type: 'range', min: 24, max: 100, step: 4},
         },
     },
+    parameters: {fullScreen: true},
 };
 
 type Args = {
     size: number;
+    inverse: boolean;
 };
 
-export const Default: StoryComponent<Args> = ({size}) => {
-    return <Spinner size={size} />;
+export const Default: StoryComponent<Args> = ({size, inverse}) => {
+    return (
+        <ResponsiveLayout isInverse={inverse} fullWidth>
+            <Box padding={16}>
+                <Spinner size={size} />
+            </Box>
+        </ResponsiveLayout>
+    );
 };
 
 Default.storyName = 'Spinner';
 Default.args = {
     size: 24,
+    inverse: false,
 };

src/spinner.tsx

@@ -5,6 +5,7 @@ import FadeIn from './fade-in';
 import {useAriaId, useTheme} from './hooks';
 import * as styles from './spinner.css';
 import {vars} from './skins/skin-contract.css';
+import {useIsInverseVariant} from './theme-variant-context';
 
 type Props = {
     color?: string;
@@ -17,7 +18,8 @@ type Props = {
 
 const Spinner: React.FC<Props> = ({color, delay = '500ms', size = 24, style, rolePresentation}) => {
     const {texts, platformOverrides} = useTheme();
-    color = color || vars.colors.controlActivated;
+    const isInverse = useIsInverseVariant();
+    color = color || (isInverse ? vars.colors.controlActivatedInverse : vars.colors.controlActivated);
     const spinnerId = useAriaId();
     const withTitle = !rolePresentation;
     const title = texts.loading;