fluentui-react-native/packages/components/Button/src/ButtonColorTokens.ts at 7d029b4518d9ccff60841265a796a575925014be · 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
82
83
84
85
86
87
88
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) =>
  ({
    backgroundColor: t.colors.buttonBackground,
    color: t.colors.buttonText,
    borderColor: t.colors.buttonBorder,
    iconColor: t.colors.buttonIcon,
    disabled: {
      backgroundColor: t.colors.defaultDisabledBackground,
      color: t.colors.defaultDisabledContent,
      borderColor: t.colors.defaultDisabledBorder,
      iconColor: t.colors.defaultDisabledIcon,
    },
    hovered: {
      backgroundColor: t.colors.defaultHoveredBackground,
      color: t.colors.defaultHoveredContent,
      borderColor: t.colors.defaultHoveredBorder,
      iconColor: t.colors.defaultHoveredIcon,
    },
    pressed: {
      backgroundColor: t.colors.defaultPressedBackground,
      color: t.colors.defaultPressedContent,
      borderColor: t.colors.defaultPressedBorder,
      iconColor: t.colors.defaultPressedIcon,
    },
    focused: {
      backgroundColor: t.colors.defaultFocusedBackground,
      color: t.colors.defaultFocusedContent,
      borderColor: t.colors.defaultFocusedBorder,
      iconColor: t.colors.defaultFocusedIcon,
    },
    primary: {
      backgroundColor: t.colors.brandBackground,
      color: t.colors.neutralForegroundOnColor,
      borderColor: t.colors.brandStroke1,
      iconColor: t.colors.neutralForegroundOnColor,
      disabled: {
        backgroundColor: t.colors.brandBackgroundDisabled,
        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,
        iconColor: t.colors.neutralForegroundOnColor,
      },
    },
    subtle: {
      backgroundColor: t.colors.ghostBackground,
      color: t.colors.ghostContent,
      borderColor: t.colors.ghostBorder,
      iconColor: t.colors.ghostIcon,
      disabled: {
        color: t.colors.ghostDisabledContent,
        borderColor: t.colors.ghostDisabledBorder,
        backgroundColor: t.colors.ghostDisabledBackground,
        iconColor: t.colors.ghostDisabledIcon,
      },
      hovered: {
        backgroundColor: t.colors.ghostHoveredBackground,
        color: t.colors.ghostHoveredContent,
        borderColor: t.colors.ghostHoveredBorder,
        iconColor: t.colors.ghostHoveredIcon,
      },
      pressed: {
        backgroundColor: t.colors.ghostPressedBackground,
        borderColor: t.colors.ghostPressedBorder,
        color: t.colors.ghostPressedContent,
        iconColor: t.colors.ghostPressedIcon,
      },
      focused: {
        borderColor: t.colors.ghostFocusedBorder,
        backgroundColor: t.colors.ghostFocusedBackground,
        color: t.colors.ghostFocusedContent,
        iconColor: t.colors.ghostFocusedIcon,
      },
    },
  } as ButtonTokens);