-
Notifications
You must be signed in to change notification settings - Fork 2
/
tailwind.config.js
129 lines (115 loc) · 5.27 KB
/
tailwind.config.js
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
123
124
125
126
127
128
129
const plugin = require('tailwindcss/plugin')
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
screens: {
'xs': '485px',
...defaultTheme.screens,
},
extend: {
fontFamily: {
"inter": ['"Inter"', 'Arial', 'sans-serif'],
"source-serif-pro": ['"Source Serif Pro"', 'Arial', 'sans-serif'],
"source-code-pro": ['"Source Code Pro"', 'Arial', 'sans-serif'],
},
colors: {
'sat-blue-1': '#0090FF',
'sat-blue-1-60-fallback-1': '#0A67BB',
'sat-blue-2': '#162653',
'sat-blue-3': '#0E67FF',
'sat-blue-3-30-fallback-1': '#143679',
'sat-blue-4': '#001324', //bg-star-image overlay blue colour
'sat-blue-5': '#06213A',
'sat-gray-1': '#CCD0DF',
'sat-gray-2': '#8B93A9',
'sat-green-1': '#39C1CB',
'sat-white-5-fallback-1': '#25335E',
'sat-white-10-fallback-1': '#323E68',
'sat-white-20-fallback-1': '#465175',
'sat-white-30-fallback-1': '#5D6785',
'sat-white-10-fallback-2': '#232B3E',
'sat-white-20-fallback-2': '#3B4153',
'sat-white-30-fallback-2': '#535866',
},
backgroundImage: {
// gradient colours
'unset': "unset;",
'sat-grad-blue-green-1': "linear-gradient(90deg, #39C1CB 0%, #0090FF 100%);",
'sat-grad-blue-green-1-10': "linear-gradient(90deg, rgba(57, 193, 203, 0.1) 0%, rgba(7, 143, 255, 0.1) 100%);",
'sat-grad-blue-green-1-10-fallback-1': "linear-gradient(90deg, rgb(6, 37, 53) 0%, rgb(1, 32, 58) 100%);",
'sat-grad-blue-green-1-10-fallback-2': "linear-gradient(90deg, rgb(6, 37, 53, 0.6) 0%, rgb(1, 32, 58, 0.6) 100%);",
'sat-grad-blue-green-1-20': "linear-gradient(90deg, rgba(57, 193, 203, 0.2) 0%, rgba(7, 143, 255, 0.2) 100%)",
'sat-grad-blue-green-1-30': "linear-gradient(90deg, rgba(57, 193, 203, 0.3) 0%, rgba(7, 143, 255, 0.3) 100%)",
'sat-grad-blue-green-1-40': "linear-gradient(90deg, rgba(57, 193, 203, 0.4) 0%, rgba(7, 143, 255, 0.4) 100%)",
'sat-grad-blue-green-1-20-fallback-1': "linear-gradient(90deg, #1D4469 0%, #143B74 100%)",
'sat-grad-blue-green-1-20-fallback-2': "linear-gradient(90deg, #0C3646 0%, #022D50 100%)",
'sat-grad-blue-green-1-30-fallback-2': "linear-gradient(90deg, #114656 0%, #023865 100%)",
'sat-grad-blue-green-1-30-fallback-1': "linear-gradient(90deg, #114656 0%, #023865 100%)",
'sat-grad-blue-green-1-40-fallback-1': "linear-gradient(90deg, #175969 0%, #05477D 100%)",
'sat-grad-blue-green-2': "radial-gradient(63.44% 63.44% at 29.7% 70.3%, #0090FF 0%, #39C1CB 100%)",
'sat-grad-blue-green-3': "radial-gradient(76.79% 76.79% at 89.29% 16.07%, #0090FF 0%, #39C1CB 100%)",
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'sat-grad-black-1': "linear-gradient( rgb(0, 19, 36, 1) 0%, rgb(0, 19, 36, 1) 30%, rgb(0, 19, 36, 0.1) 85%, rgb(0, 19, 36, 0.1) 100%);",
'saturn-logo': "url('/saturn-logo.svg')",
'inner-menu-button': "url('/inner-menu-button.svg')",
'outer-menu-button': "url('/outer-menu-button.svg')",
'inner-menu-button-hover': "url('/inner-menu-button-hover.svg')",
'outer-menu-button-hover': "url('/outer-menu-button-hover.svg')",
'outer-menu-button-focus': "url('/outer-menu-button-focus.svg')",
'docs-logo': "url('/docs-logo.svg')",
'github-logo': "url('/github-logo.svg')",
'slack-logo': "url('/slack-logo.svg')",
'twitter-logo': "url('/twitter-logo.svg')",
'x-logo': "url('/x-logo.svg')",
'heart-logo': "url('/heart-logo.svg')",
'lightning-logo': "url('/lightning-logo.svg')",
'multi-peer-logo': "url('/multi-peer-logo.svg')",
'deduplication-logo': "url('/deduplication-logo.svg')",
'serve-content-logo': "url('/serve-content-logo.svg')",
'arrow-right': "url('/arrow-right.svg')",
'backdropblur-ellipsis': "url('/backdropblur-ellipsis.svg')",
'copy-button': "url('/copy-button.svg')",
'check-icon': "url('/check-icon.svg')",
'dummy-image': "url('/dummy-image.png')",
'wide-arrow-icon-white': "url('/wide-arrow-icon-white.svg')",
'wide-arrow-icon-green': "url('/wide-arrow-icon-green.svg')",
'filecoin-bg-logo': "url('/filecoin-bg-logo.png')",
'slashes-pattern': "url('/slashes.svg')"
},
boxShadow: {
'colored': '0 0 40px #0090FF',
'black-sm': '0 0 20px rgb(0 0 0 / 0.2)',
'black-md': '0 0 30px rgb(0 0 0 / 0.2)',
'black-lg': '0 0 40px rgb(0 0 0 / 0.2)',
'ellipse': '0 0 70px #0E67FF'
},
outlineStyle: {
'auto': 'auto'
},
borderRadius: {
'2.5xl': '20px'
}
},
animation: {
fade: "fadein 6s forwards",
fadeFast: "fadein 3s forwards",
},
keyframes: {
fadein: {
from: {opacity: 0},
to: {opacity: 1}
},
}
},
plugins: [
plugin(function({ addVariant })
{
addVariant('supports-blur', '@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) and (not ( -moz-appearance:none ))')
}),
require('@tailwindcss/typography'),
]
}