voidcut/tailwind.config.js at main · timii/voidcut · 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
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
130
131
132
133
134
135
136
137

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    fontSize: {
      xxxs: '9px',
      xxs: '10px'
    },
    extend: {
      backgroundImage: {
        // custom background stripes
        "hover-stipes": "repeating-linear-gradient(45deg,#0284c733,#0284c733 10px,#01517933 10px,#01517933 20px)",
      },
      keyframes: {
        // custom keyframes
        loadingStripes: {
          '100%': { backgroundPosition: '100% 100%' },
        },
        loadingIndicator: {
          '0%': { transform: 'rotate(0deg)' },
          '100%': { transform: 'rotate(360deg)' }
        },
      },
      animation: {
        // custom animations
        loadingStripes: 'loadingStripes 2s linear infinite',
        loadingIndicator: 'loadingIndicator 2s linear infinite',

      },
      colors: {
        // background colors
        "background-color": '#151519',
        "background-highlight": '#212127',
        "background-progress": '#111114',
        "background-loading": '#111114',
        "background-button": '#E6E6E6',
        "background-button-hover": '#e6e6e6cc',
        "background-icon-button": "#434346",
        "background-tooltip": "#434346",
        "background-timeline-row": "#2c2c35",
        "background-timeline-row-element": "#414149",
        "background-timeline-row-element-hover": "#0369a1", // dark accent color
        "background-timeline-row-element-audio": "#cc7000", // complementary accent color
        "background-timeline-divider": "#0369a1", // dark accent color
        "background-media-pool-element": "#cc7000", // complementary accent color
        "background-media-pool-time": "#151519",
        "background-stripe1": "#0284c733", // accent color (opacity 0.2)
        "background-stripe2": "#01517933", // darker accent color (opacity 0.2)
        "background-ruler": "#c2c2c2",
        "background-scrollbar-track": "#212127",
        "background-scrollbar-thumb": "#808080", // taken from firefox scrollbar
        "background-scrollbar-thumb-hover": "#959595", // taken from firefox scrollbar

        // accent colors
        "accent-color": '#0284c7',

        // complementary color to accent color
        "second-accent-color": "#cc7000",
        "lighter-second-accent-color": "#ff981a",

        // text colors
        "text-color": '#c2c2c2',
        "text-highlight": '#dfdfdf',
        "text-info": '#6b7280',
        "text-button": '#151519',
        "text-button-hover": '#0E0E11',
        "text-media-pool-time": "#aeaeae",
        "text-tooltip": "#d6d6d6",

        // misc colors
        "ruler-color": '#dfdfdf66',
        "backdrop-color": "#111114",
        "hover-outline": "#0369a1", // dark accent color

        // color palettes
        "text": {
          50: "#FAFAFA",
          100: "#F2F2F2",
          200: "#E6E6E6",
          300: "#DBDBDB",
          400: "#CFCFCF",
          500: "#C2C2C2", // used as default text color
          600: "#9C9C9C",
          700: "#757575",
          800: "#4D4D4D",
          900: "#262626",
          950: "#141414"
        },

        // alternative palette for the text color
        "text2": {
          50: "#FDFDFC",
          100: "#FCFBF8",
          200: "#FAF9F5",
          300: "#F7F6EE",
          400: "#F5F4EA",
          500: "#F2F0E3", // used as default text color
          600: "#D5CEA4",
          700: "#B6AB62",
          800: "#81783C",
          900: "#3F3A1D",
          950: "#1F1D0F"
        },

        "background": {
          50: "#EEEEF1",
          100: "#DBDBE1",
          200: "#B7B7C2",
          300: "#9393A4",
          400: "#707085",
          500: "#515161",
          600: "#33333D",
          700: "#151519", // used as default background color
          800: "#0E0E11",
          900: "#070708",
          950: "#050506"
        },

        "accent": {
          50: "#E1F5FF",
          100: "#C2EAFE",
          200: "#86D6FE",
          300: "#49C1FD",
          400: "#0DADFD",
          500: "#0284C7", // used as default accent color
          600: "#026CA2",
          700: "#015179",
          800: "#013651",
          900: "#001B28",
          950: "#000E14"
        },
      }
    },
  },
  plugins: [],
}