fluentui-react-native/packages/components/Button/src/ButtonColorTokens.android.ts at 9e349966c2fd6ecfa2051aaa8c8bba517765b737 · microsoft/fluentui-react-native · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import type { Theme } from '@fluentui-react-native/framework';
import type { TokenSettings } from '@fluentui-react-native/use-styling';

import type { ButtonTokens } from './Button.types';

export const defaultButtonColorTokens: TokenSettings<ButtonTokens, Theme> = (t: Theme) =>
  ({
    /** Android does not have a different styles for 'default' button.
     * 'primary', 'accent' and if no appearance is mentioned, picks this.
     */
    backgroundColor: t.colors.brandBackground,
    rippleColor: '#D4D4D4',
    color: t.colors.neutralForegroundOnColor,
    iconColor: t.colors.neutralForegroundOnColor,
    disabled: {
      backgroundColor: t.colors.neutralBackground5,
      color: t.colors.neutralForegroundDisabled1,
      iconColor: t.colors.neutralForegroundDisabled1,
    },
    pressed: {
      backgroundColor: t.colors.brandBackgroundPressed,
      color: t.colors.neutralForegroundOnColor,
      iconColor: t.colors.neutralForegroundOnColor,
    },
    focused: {
      backgroundColor: t.colors.brandBackground,
      color: t.colors.neutralForegroundOnColor,
      borderColor: t.colors.strokeFocus2,
      borderInnerColor: t.colors.strokeFocus1,
      iconColor: t.colors.neutralForegroundOnColor,
    },
    subtle: {
      backgroundColor: 'transparent',
      rippleColor: '#D4D4D4',
      color: t.colors.brandForeground1,
      iconColor: t.colors.brandForeground1,
      disabled: {
        backgroundColor: 'transparent',
        color: t.colors.neutralForegroundDisabled1,
        iconColor: t.colors.neutralForegroundDisabled1,
      },
      pressed: {
        backgroundColor: 'transparent',
        color: t.colors.brandForeground1Pressed,
        iconColor: t.colors.brandForeground1Pressed,
      },
      focused: {
        backgroundColor: 'transparent',
        borderColor: t.colors.strokeFocus2,
        borderInnerColor: t.colors.strokeFocus1,
        color: t.colors.brandForeground1,
        iconColor: t.colors.brandForeground1,
      },
    },
    outline: {
      backgroundColor: 'transparent',
      rippleColor: '#D4D4D4',
      color: t.colors.brandForeground1,
      iconColor: t.colors.brandForeground1,
      borderColor: t.colors.brandStroke1,
      disabled: {
        backgroundColor: 'transparent',
        color: t.colors.neutralForegroundDisabled1,
        iconColor: t.colors.neutralForegroundDisabled1,
        borderColor: t.colors.neutralStrokeDisabled,
      },
      pressed: {
        backgroundColor: 'transparent',
        color: t.colors.brandForeground1Pressed,
        iconColor: t.colors.brandForeground1Pressed,
        borderColor: t.colors.brandStroke1Pressed,
      },
      focused: {
        backgroundColor: 'transparent',
        borderColor: t.colors.strokeFocus2,
        borderInnerColor: t.colors.strokeFocus1,
        color: t.colors.brandForeground1,
        iconColor: t.colors.brandForeground1,
      },
    },
  } as ButtonTokens);