gilles/scrutiny
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Jason Kulatunga
2020-08-19 16:04:21 -07:00
commit 8482272d45
336 changed files with 197309 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/frontend/src/tailwind/config.js
+455
View File
@@ -0,0 +1,455 @@
const forEach = require('lodash/forEach');
const isObject = require('lodash/isObject');
const {colors} = require('tailwindcss/defaultTheme');
module.exports = {
// PurgeCSS
purge: false,
// Options
important: true,
// Theme
theme: {
colors : {
current : 'currentColor',
transparent: 'transparent',
white : '#FFFFFF',
black : '#000000',
gray : {
'50' : '#F9FAFB',
'100' : '#F4F5F7',
'200' : '#E5E7EB',
'300' : '#D2D6DC',
'400' : '#9FA6B2',
'500' : '#6B7280',
default: '#6B7280',
'600' : '#4B5563',
'700' : '#374151',
'800' : '#252F3F',
'900' : '#161E2E'
},
'cool-gray': {
'50' : '#FBFDFE',
'100' : '#F1F5F9',
'200' : '#E2E8F0',
'300' : '#CFD8E3',
'400' : '#97A6BA',
'500' : '#64748B',
default: '#64748B',
'600' : '#475569',
'700' : '#364152',
'800' : '#27303F',
'900' : '#1A202E'
},
red : {
'50' : '#FDF2F2',
'100' : '#FDE8E8',
'200' : '#FBD5D5',
'300' : '#F8B4B4',
'400' : '#F98080',
'500' : '#F05252',
default: '#F05252',
'600' : '#E02424',
'700' : '#C81E1E',
'800' : '#9B1C1C',
'900' : '#771D1D'
},
orange : {
'50' : '#FFF8F1',
'100' : '#FEECDC',
'200' : '#FCD9BD',
'300' : '#FDBA8C',
'400' : '#FF8A4C',
'500' : '#FF5A1F',
default: '#FF5A1F',
'600' : '#D03801',
'700' : '#B43403',
'800' : '#8A2C0D',
'900' : '#771D1D'
},
yellow : {
'50' : '#FDFDEA',
'100' : '#FDF6B2',
'200' : '#FCE96A',
'300' : '#FACA15',
'400' : '#E3A008',
'500' : '#C27803',
default: '#C27803',
'600' : '#9F580A',
'700' : '#8E4B10',
'800' : '#723B13',
'900' : '#633112'
},
green : {
'50' : '#F3FAF7',
'100' : '#DEF7EC',
'200' : '#BCF0DA',
'300' : '#84E1BC',
'400' : '#31C48D',
'500' : '#0E9F6E',
default: '#0E9F6E',
'600' : '#057A55',
'700' : '#046C4E',
'800' : '#03543F',
'900' : '#014737'
},
teal : {
'50' : '#EDFAFA',
'100' : '#D5F5F6',
'200' : '#AFECEF',
'300' : '#7EDCE2',
'400' : '#16BDCA',
'500' : '#0694A2',
default: '#0694A2',
'600' : '#047481',
'700' : '#036672',
'800' : '#05505C',
'900' : '#014451'
},
blue : {
'50' : '#EBF5FF',
'100' : '#E1EFFE',
'200' : '#C3DDFD',
'300' : '#A4CAFE',
'400' : '#76A9FA',
'500' : '#3F83F8',
default: '#3F83F8',
'600' : '#1C64F2',
'700' : '#1A56DB',
'800' : '#1E429F',
'900' : '#233876'
},
indigo : {
'50' : '#F0F5FF',
'100' : '#E5EDFF',
'200' : '#CDDBFE',
'300' : '#B4C6FC',
'400' : '#8DA2FB',
'500' : '#6875F5',
default: '#6875F5',
'600' : '#5850EC',
'700' : '#5145CD',
'800' : '#42389D',
'900' : '#362F78'
},
purple : {
'50' : '#F6F5FF',
'100' : '#EDEBFE',
'200' : '#DCD7FE',
'300' : '#CABFFD',
'400' : '#AC94FA',
'500' : '#9061F9',
default: '#9061F9',
'600' : '#7E3AF2',
'700' : '#6C2BD9',
'800' : '#5521B5',
'900' : '#4A1D96'
},
pink : {
'50' : '#FDF2F8',
'100' : '#FCE8F3',
'200' : '#FAD1E8',
'300' : '#F8B4D9',
'400' : '#F17EB8',
'500' : '#E74694',
default: '#E74694',
'600' : '#D61F69',
'700' : '#BF125D',
'800' : '#99154B',
'900' : '#751A3D'
}
},
fontSize: {
'xs' : '0.625rem',
'sm' : '0.75rem',
'md' : '0.8125rem',
'base': '0.875rem',
'lg' : '1rem',
'xl' : '1.125rem',
'2xl' : '1.25rem',
'3xl' : '1.5rem',
'4xl' : '2rem',
'5xl' : '2.25rem',
'6xl' : '2.5rem',
'7xl' : '3rem',
'8xl' : '4rem',
'9xl' : '6rem',
'10xl': '8rem'
},
screens : {
// XSmall
'xs' : {
min: '0',
max: '599px'
},
// Small
'sm' : {
min: '600px',
max: '959px'
},
// Medium
'md' : {
min: '960px',
max: '1279px'
},
// Large
'lg' : {
min: '1280px',
max: '1439px'
},
// XLarge
'xl' : {
min: '1440px'
},
// Less than Medium
'lt-md': {
max: '959px'
},
// Less than Large
'lt-lg': {
max: '1279px'
},
// Less than XLarge
'lt-xl': {
max: '1439px'
},
// Greater than XSmall
'gt-xs': {
min: '600px'
},
// Greater than Small
'gt-sm': {
min: '960px'
},
// Greater than Medium
'gt-md': {
min: '1280px'
}
},
sizes : theme => ({
// Sizes are used in width & height helpers
...theme('spacing'),
'50' : '12.5rem',
'60' : '15rem',
'80' : '20rem',
'90' : '24rem',
'100' : '25rem',
'120' : '30rem',
'128' : '32rem',
'140' : '35rem',
'160' : '40rem',
'180' : '45rem',
'192' : '48rem',
'200' : '50rem',
'240' : '60rem',
'256' : '64rem',
'280' : '70rem',
'320' : '80rem',
'360' : '90rem',
'400' : '100rem',
'480' : '120rem',
'1/2' : '50%',
'1/3' : '33.33333%',
'2/3' : '66.66667%',
'1/4' : '25%',
'2/4' : '50%',
'3/4' : '75%',
'1/5' : '20%',
'2/5' : '40%',
'3/5' : '60%',
'4/5' : '80%',
'1/12' : '8.33333%',
'2/12' : '16.66667%',
'3/12' : '25%',
'4/12' : '33.33333%',
'5/12' : '41.66667%',
'6/12' : '50%',
'7/12' : '58.33333%',
'8/12' : '66.66667%',
'9/12' : '75%',
'10/12': '83.33333%',
'11/12': '91.66667%'
}),
// Extending default configurations
extend : {
/*
// Once TailwindCSS adds the above colors to their default config,
// this code will be used for generating the default colors
// and the theme.colors object will be removed from above
colors : theme => {
// Extend the colors to add 'default' values that uses the hue 500.
// This will generate utilities like 'text-indigo' or 'bg-red',
// which will be defaulted to the hue 500 of that color palette.
const defaultColors = colors;
forEach(defaultColors, (value, key) => {
if ( isObject(value) )
{
defaultColors[key]['default'] = defaultColors[key]['500']
}
});
return defaultColors;
},
*/
/*
// Use this map to define custom contrasting colors for the custom colors
colorContrasts: theme => ({
brand-color: {
50 : theme('colors.brand-color.900'), // Use the 900 from the 'brand-color' palette as the contrasting color of the 50
100 : theme('colors.brand-color.900'),
200 : theme('colors.brand-color.900'),
300 : theme('colors.brand-color.900'),
400 : theme('colors.brand-color.900'),
500 : theme('colors.brand-color.900'),
600 : theme('colors.brand-color.50'),
700 : theme('colors.brand-color.50'),
800 : theme('colors.brand-color.50'),
900 : theme('colors.brand-color.50'),
default: theme('colors.brand-color.900')
}
},
*/
/*
// Use this map to extend the iconSize utility sizes
iconSize: {
8: '8px',
10: '10px'
},
*/
boxShadow : {
solid: '0 0 0 2px currentColor'
},
flex : {
'0': '0 0 auto'
},
fontFamily: {
sans: [
'Inter',
'system-ui',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"'
],
mono: [
'"IBM Plex Mono"',
'Menlo',
'Monaco',
'Consolas',
'"Liberation Mono"',
'"Courier New"',
'monospace'
]
},
opacity : {
12: '0.12',
38: '0.38',
54: '0.54',
70: '0.70',
84: '0.84'
},
rotate : {
'-270': '270deg',
'15' : '15deg',
'30' : '30deg',
'60' : '60deg',
'270' : '270deg'
},
spacing : {
'2px': '2px',
'14' : '3.5rem',
'18' : '4.5rem',
'22' : '5.5rem',
'26' : '6.5rem',
'28' : '7rem',
'30' : '7.5rem',
'36' : '9rem'
},
zIndex : {
'-1' : -1,
'60' : 60,
'70' : 70,
'80' : 80,
'90' : 90,
'99' : 99,
'999' : 999,
'9999' : 9999,
'99999': 99999
},
maxHeight : theme => ({
none: 'none',
...theme('sizes')
}),
minHeight : theme => ({
...theme('sizes')
}),
height : theme => ({
...theme('sizes')
}),
maxWidth : theme => ({
screen: '100vw',
...theme('sizes')
}),
minWidth : theme => ({
screen: '100vw',
...theme('sizes')
}),
width : theme => ({
...theme('sizes')
})
}
},
// Variants
variants: {
backgroundColor : ['dark-light'],
borderColor : ['dark-light'],
borderWidth : ['responsive', 'first', 'last'],
cursor : [],
fontFamily : [],
fontSmoothing : [],
fontWeight : ['responsive'],
iconSize : ['responsive'],
resize : [],
textColor : ['dark-light'],
scale : [],
rotate : [],
translate : [],
skew : [],
transitionProperty : [],
transitionTimingFunction: [],
transitionDuration : [],
transitionDelay : []
},
// Core plugins
corePlugins: {
container : false,
clear : false,
float : false,
placeholderColor: false
},
// Custom plugins
plugins: [
// Custom plugins required by Treo
...require('../@treo/tailwind/plugins')
// Other third party and custom plugins can be required here
// ...
]
};
webapp/frontend/src/tailwind/main.css
+33
View File
@@ -0,0 +1,33 @@
/* ----------------------------------------------------------------------------------------------------- */
/* This injects Tailwind's component classes and any component classes registered by plugins.
/* ----------------------------------------------------------------------------------------------------- */
@tailwind components;
/* ----------------------------------------------------------------------------------------------------- */
/* Use custom @apply directives here to inline any existing utility classes into your own custom CSS.
/* ----------------------------------------------------------------------------------------------------- */
/**
* .btn {
* @apply font-bold py-2 px-4 rounded;
* }
*/
/* ----------------------------------------------------------------------------------------------------- */
/* This injects Tailwind's utility classes and any utility classes registered by plugins.
/* ----------------------------------------------------------------------------------------------------- */
@tailwind utilities;
/* ----------------------------------------------------------------------------------------------------- */
/* Use custom @variant directives here to build them.
/* ----------------------------------------------------------------------------------------------------- */
@variants dark-light {}
/* ----------------------------------------------------------------------------------------------------- */
/* Use this directive to control where Tailwind injects the responsive variations of each utility.
/* If omitted, Tailwind will append these classes to the very end of your stylesheet by default.
/* ----------------------------------------------------------------------------------------------------- */
@tailwind screens;