2023-04-03 14:54:38 +03:00
|
|
|
const plugin = require('tailwindcss/plugin');
|
2023-01-31 17:55:57 +03:00
|
|
|
const config = {
|
2023-02-24 12:46:41 +03:00
|
|
|
content: ['./src/**/*.{html,js,svelte,ts}'],
|
|
|
|
darkMode: 'class',
|
2023-06-19 11:29:11 +03:00
|
|
|
corePlugins: {
|
|
|
|
backgroundOpacity: false
|
|
|
|
},
|
2023-02-24 12:46:41 +03:00
|
|
|
theme: {
|
|
|
|
fontFamily: {
|
2023-03-10 18:19:38 +03:00
|
|
|
sans: ['Inter', 'SF Pro', '-apple-system', 'system-ui'],
|
|
|
|
mono: ['SF Mono', 'Consolas', 'Liberation Mono', 'monospace']
|
2023-02-24 12:46:41 +03:00
|
|
|
},
|
|
|
|
fontSize: {
|
|
|
|
xs: '10px',
|
2023-04-26 17:08:06 +03:00
|
|
|
sm: '11px',
|
2023-02-24 12:46:41 +03:00
|
|
|
base: '13px',
|
|
|
|
lg: '15px',
|
2023-04-26 17:08:06 +03:00
|
|
|
xl: '18px',
|
|
|
|
'2xl': '22px',
|
|
|
|
'3xl': '27px',
|
|
|
|
'4xl': '32px'
|
2023-02-24 12:46:41 +03:00
|
|
|
},
|
2023-03-29 18:00:54 +03:00
|
|
|
colors: {
|
2023-04-26 16:07:19 +03:00
|
|
|
modal: {
|
|
|
|
background: '#242429',
|
|
|
|
stroke: '#3f3f3f'
|
|
|
|
},
|
2023-03-29 18:00:54 +03:00
|
|
|
gb: {
|
|
|
|
700: '#52525B'
|
|
|
|
},
|
|
|
|
interactive: '#2563EB',
|
|
|
|
divider: '#3f3f46',
|
|
|
|
card: {
|
|
|
|
active: '#3B3B3F',
|
|
|
|
default: '#2F2F33'
|
|
|
|
},
|
|
|
|
app: {
|
|
|
|
gradient: '#27272A'
|
|
|
|
},
|
|
|
|
overlay: {
|
|
|
|
default: '#18181B'
|
|
|
|
},
|
2023-05-09 17:31:27 +03:00
|
|
|
text: {
|
|
|
|
default: '#D4D4D8',
|
|
|
|
subdued: '#71717A'
|
|
|
|
},
|
2023-03-29 18:00:54 +03:00
|
|
|
icon: {
|
|
|
|
default: '#A1A1AA'
|
|
|
|
},
|
2023-05-22 14:31:03 +03:00
|
|
|
bookmark: {
|
|
|
|
selected: '#2563EB'
|
|
|
|
},
|
2023-03-29 18:00:54 +03:00
|
|
|
white: '#FFFFFF',
|
2023-06-19 21:52:49 +03:00
|
|
|
black: '#000000',
|
2023-03-29 18:00:54 +03:00
|
|
|
transparent: 'transparent',
|
|
|
|
gray: {
|
|
|
|
400: '#9ca3af',
|
|
|
|
500: '#6B7280'
|
|
|
|
},
|
2023-06-19 11:29:11 +03:00
|
|
|
dark: {
|
2023-06-22 23:57:08 +03:00
|
|
|
50: '#FAFAFA', // Button text
|
|
|
|
100: '#D4D4D8', // Normal text
|
|
|
|
200: '#A1A1AA', // Commit sequence line, meatballs menu
|
|
|
|
300: '#71717A', // Subtle text
|
|
|
|
400: '#545454', // File card border
|
|
|
|
500: '#414141', // Commit message border
|
|
|
|
600: '#393939', // Commit card border
|
|
|
|
700: '#373737', // Commit message background
|
|
|
|
800: '#2C2C2C', // Tray and commit card background
|
|
|
|
900: '#212121', // Header background
|
|
|
|
1000: '#1E1E1E' // Board and inactive tab background
|
2023-06-19 11:29:11 +03:00
|
|
|
},
|
|
|
|
light: {
|
2023-06-22 23:57:08 +03:00
|
|
|
50: '#F6F6F7', // Active tab and file card background
|
|
|
|
100: '#F4F4F5', // Branch background in tray
|
|
|
|
200: '#E4E4E7', // Board background and commit message border
|
|
|
|
300: '#DDDDDE', // File card border
|
|
|
|
400: '#D4D4D8', // Branch lane border and disabled text
|
|
|
|
500: '#CDCDD0', // Scroll bar color
|
|
|
|
600: '#A1A1AA', // Commit sequence line, meatballs menu, icons
|
|
|
|
700: '#6D7175', // Subtle text
|
|
|
|
800: '#3F3F46', // Branch text in tray
|
|
|
|
900: '#202223' // Normal text
|
2023-06-19 11:29:11 +03:00
|
|
|
},
|
2023-03-29 18:00:54 +03:00
|
|
|
blue: {
|
|
|
|
200: '#bfdbfe',
|
|
|
|
400: '#60a5fa',
|
|
|
|
500: '#3b82f6',
|
|
|
|
600: '#2563eb',
|
|
|
|
700: '#1d4ed8',
|
|
|
|
900: '#1e3a8a'
|
|
|
|
},
|
|
|
|
yellow: {
|
|
|
|
400: '#facc15',
|
|
|
|
500: '#eab308',
|
|
|
|
900: '#713f12'
|
|
|
|
},
|
|
|
|
red: {
|
2023-05-08 09:27:27 +03:00
|
|
|
400: '#F87171',
|
2023-04-17 18:03:50 +03:00
|
|
|
500: '#ef4444',
|
2023-04-03 09:44:22 +03:00
|
|
|
600: '#dc2626',
|
2023-03-29 18:00:54 +03:00
|
|
|
700: '#b91c1c',
|
|
|
|
900: '#7c2d12'
|
|
|
|
},
|
|
|
|
green: {
|
|
|
|
400: '#4ade80',
|
2023-04-17 18:03:50 +03:00
|
|
|
500: '#22c55e',
|
2023-03-29 18:00:54 +03:00
|
|
|
600: '#16a34a',
|
|
|
|
700: '#15803d',
|
|
|
|
900: '#14532d'
|
|
|
|
},
|
|
|
|
orange: {
|
|
|
|
200: '#fed7aa'
|
|
|
|
},
|
|
|
|
zinc: {
|
|
|
|
50: '#fafafa',
|
|
|
|
100: '#f4f4f5',
|
|
|
|
200: '#e5e5e5',
|
|
|
|
300: '#d4d4d8',
|
|
|
|
400: '#a1a1aa',
|
|
|
|
500: '#71717a',
|
|
|
|
600: '#52525b',
|
|
|
|
700: '#3f3f46',
|
|
|
|
800: '#27272a',
|
|
|
|
900: '#18181b'
|
2023-03-16 17:52:57 +03:00
|
|
|
}
|
2023-03-16 17:49:12 +03:00
|
|
|
}
|
2023-02-24 12:46:41 +03:00
|
|
|
},
|
2023-04-03 14:54:38 +03:00
|
|
|
plugins: [
|
|
|
|
// Expose color palette as CSS variables (--color-xxx-yyy)
|
|
|
|
// https://gist.github.com/Merott/d2a19b32db07565e94f10d13d11a8574
|
|
|
|
plugin(function ({ addBase, theme }) {
|
|
|
|
function extractColorVars(colorObj, colorGroup = '') {
|
|
|
|
return Object.keys(colorObj).reduce((vars, colorKey) => {
|
|
|
|
const value = colorObj[colorKey];
|
|
|
|
|
|
|
|
const newVars =
|
|
|
|
typeof value === 'string'
|
|
|
|
? { [`--color${colorGroup}-${colorKey}`]: value }
|
|
|
|
: extractColorVars(value, `-${colorKey}`);
|
|
|
|
|
|
|
|
return { ...vars, ...newVars };
|
|
|
|
}, {});
|
|
|
|
}
|
|
|
|
|
|
|
|
addBase({
|
|
|
|
':root': extractColorVars(theme('colors'))
|
|
|
|
});
|
|
|
|
})
|
|
|
|
]
|
2023-01-31 17:55:57 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
module.exports = config;
|