1
1
mirror of https://github.com/urbit/shrub.git synced 2024-12-27 06:02:27 +03:00
shrub/pkg/grid/tailwind.config.js
2021-09-23 12:11:05 +10:00

216 lines
4.2 KiB
JavaScript

const defaultTheme = require('tailwindcss/defaultTheme');
const resolveConfig = require('tailwindcss/resolveConfig');
const { Theme, ThemeManager } = require('tailwindcss-theming/api');
const themableProperties = [
'spacing',
'fontFamily',
//'fontSize', would require change in tailwindcss-theming
'fontWeight',
'letterSpacing',
'lineHeight',
'borderRadius',
'borderWidth',
'boxShadow'
];
function variablizeTheme(themeConfig, theme) {
themableProperties.forEach((prop) => {
const propSet = themeConfig[prop];
Object.entries(propSet).forEach(([key, value]) => {
theme.setVariable(key, value, prop, prop);
});
});
}
const config = resolveConfig({
theme: {
fontFamily: {
sans: [
'Inter',
'Inter UI',
'-apple-system',
'BlinkMacSystemFont',
'San Francisco',
'Helvetica Neue',
'Arial',
'sans-serif'
],
mono: ['Source Code Pro', 'Roboto mono', 'Courier New', 'monospace']
},
extend: {
lineHeight: {
tight: 1.2,
snug: 1.33334,
relaxed: 1.66667
}
}
}
});
const base = new Theme().addColors({
transparent: 'transparent',
white: '#FFFFFF',
black: '#000000',
gray: {
50: '#F2F2F2',
100: '#E5E5E5',
200: '#CCCCCC',
300: '#B3B3B3',
400: '#999999',
500: '#808080',
600: '#666666',
700: '#4D4D4D',
800: '#333333',
900: '#1A1A1A'
},
blue: {
50: '#EFF9FF',
100: '#C8EDFF',
200: '#A0E1FF',
300: '#5FBFFF',
400: '#219DFF',
500: '#0F75D8',
600: '#0252B2',
700: '#00388B',
800: '#002364',
900: '#00133E'
},
red: {
50: '#FFF4F2',
100: '#FFDED6',
200: '#FFC8B9',
300: '#FC9B84',
400: '#F57456',
500: '#EE5432',
600: '#D03B22',
700: '#B12918',
800: '#931C13',
900: '#751410'
},
orange: {
50: '#FFF4EF',
100: '#FFE2CE',
200: '#FFCEAB',
300: '#FFA56F',
400: '#FF7E36',
500: '#D85E1E',
600: '#B2420C',
700: '#8B2B00',
800: '#641E00',
900: '#3E1100'
},
green: {
100: '#E6F5F0',
200: '#B3E2D1',
300: '#009F65'
},
yellow: {
100: '#FFF9E6',
200: '#FFEEB3',
300: '#FFDD66',
400: '#FFC700'
}
});
variablizeTheme(config.theme, base);
const dark = new Theme()
.setName('dark')
.targetable()
.addColors({
transparent: 'transparent',
white: '#000000',
black: '#FFFFFF',
gray: {
50: '#1A1A1A',
100: '#333333',
200: '#4D4D4D',
300: '#666666',
400: '#808080',
500: '#999999',
600: '#B3B3B3',
700: '#CCCCCC',
800: '#E5E5E5',
900: '#F2F2F2'
},
red: {
50: '#751410',
100: '#931C13',
200: '#B12918',
300: '#D03B22',
400: '#EE5432',
500: '#F57456',
600: '#FC9B84',
700: '#FFC8B9',
800: '#FFDED6',
900: '#FFF4F2'
},
blue: {
50: '#00133E',
100: '#002364',
200: '#00388B',
300: '#0252B2',
400: '#0F75D8',
500: '#219DFF',
600: '#5FBFFF',
700: '#A0E1FF',
800: '#C8EDFF',
900: '#EFF9FF'
},
orange: {
50: '#3E1100',
100: '#641E00',
200: '#8B2B00',
300: '#B2420C',
400: '#D85E1E',
500: '#FF7E36',
600: '#FFA56F',
700: '#FFCEAB',
800: '#FFE2CE',
900: '#FFF4EF'
},
green: {
100: '#182722',
200: '#134231',
300: '#009F65'
},
yellow: {
100: '#312B18',
200: '#5F4E13',
300: '#A4820B',
400: '#FFC700'
}
});
const themes = new ThemeManager().setDefaultTheme(base).addTheme(dark);
module.exports = {
mode: 'jit',
purge: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {
minWidth: (theme) => theme('spacing')
}
},
screens: {
...defaultTheme.screens,
xl: '1440px',
'2xl': '2200px'
},
variants: {
extend: {
opacity: ['hover-none'],
display: ['group-hover']
}
},
plugins: [
require('@tailwindcss/aspect-ratio'),
require('tailwindcss-touch')(),
require('tailwindcss-theming')({
themes,
strategy: 'class'
})
]
};