FilesExpand file tree

main

/

tailwind.config.mts

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

122 lines (108 loc) · 3.72 KB

main

/

tailwind.config.mts

Copy path

Top

File metadata and controls

• Code
• Blame

122 lines (108 loc) · 3.72 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

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

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

import type { Config } from 'tailwindcss';

import colors from 'tailwindcss/colors';

import plugin from 'tailwindcss/plugin';

const sidebarWidth = '2.5rem'; // 40px

const config: Config = {

content: ['./src/**/*.ts', './src/**/*.tsx'],

darkMode: ['class', '[data-color-mode="dark"]'], // GitHub Primer Theme Provider color mode custom selector

theme: {

extend: {

fontSize: {

xxs: '0.625rem', // 10px

},

keyframes: {

'login-fade-up': {

'0%': { opacity: '0', transform: 'translateY(6px)' },

'100%': { opacity: '1', transform: 'translateY(0)' },

},

'login-panel-fade': {

'0%': { opacity: '0', transform: 'translateY(4px)' },

'100%': { opacity: '1', transform: 'translateY(0)' },

},

},

animation: {

'login-fade-up': 'login-fade-up 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both',

'login-panel-fade': 'login-panel-fade 220ms cubic-bezier(0.2, 0.7, 0.2, 1) both',

},

transitionTimingFunction: {

'login-out': 'cubic-bezier(0.2, 0.7, 0.2, 1)',

},

spacing: {

sidebar: sidebarWidth,

},

width: {

sidebar: sidebarWidth,

},

colors: {

gitify: {

font: 'var(--fgColor-default)',

background: 'var(--gitify-background)',

sidebar: 'var(--gitify-sidebar)',

footer: 'var(--gitify-footer)',

caution: colors.orange[600],

error: 'var(--fgColor-danger)',

link: 'var(--gitify-link)',

input: {

rest: 'var(--control-bgColor-rest)',

focus: 'var(--control-bgColor-active)',

},

icon: {

attention: 'var(--gitify-icon-attention)',

closed: 'var(--gitify-icon-closed)',

done: 'var(--gitify-icon-done)',

muted: 'var(--fgColor-muted)',

open: 'var(--gitify-icon-open)',

},

counter: {

text: 'var(--gitify-counter-text)',

primary: 'var(--gitify-counter-primary)',

secondary: 'var(--gitify-counter-secondary)',

},

accounts: 'var(--bgColor-neutral-muted)',

success: colors.green[500],

danger: colors.red[500],

warning: colors.orange[500],

account: {

rest: 'var(--control-bgColor-active)',

error: 'var(--gitify-account-error-bg)',

},

repository: 'var(--control-bgColor-disabled)',

notification: {

border: 'var(--borderColor-disabled)',

hover: 'var(--control-bgColor-hover)',

pill: {

hover: 'var(--control-bgColor-active)',

},

},

tooltip: {

icon: 'var(--fgColor-accent)',

popout: 'var(--bgColor-disabled)',

},

},

},

},

},

plugins: [

plugin(({ addBase, addComponents }) => {

addComponents({

'.gitify-scope-row': {

'@apply rounded-md bg-gitify-accounts': {},

},

});

addBase({

'[data-color-mode]': {

'--gitify-background': 'light-dark(var(--bgColor-default), var(--bgColor-muted))',

'--gitify-account-error-bg':

'light-dark(var(--bgColor-danger-muted), var(--bgColor-danger-emphasis))',

'--gitify-scrollbar-track': 'var(--bgColor-muted)',

'--gitify-scrollbar-thumb': 'var(--borderColor-default)',

'--gitify-scrollbar-thumb-hover': 'var(--borderColor-emphasis)',

'--gitify-counter-primary': 'var(--bgColor-accent-muted)',

'--gitify-counter-secondary': 'var(--bgColor-neutral-muted)',

'--gitify-counter-text': 'var(--fgColor-default)',

},

});

}),

],

};

export default config;