Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
Loading items

Target

Select target project
  • to/weby/ui-styleguide
  • va-fighters/ui-styleguide
2 results
Select Git revision
Loading items
Show changes
Show whitespace changes
Inline Side-by-side
Showing
with 191 additions and 104 deletions
tailwind.config.js
View file @ aac6d1d3
const Color = require('color');
const screens = require("./screens");
const alpha = (clr, val) => Color(clr).alpha(val).rgb().string();
const lighen = (clr, val) => Color(clr).lighten(val).rgb().string();
const darken = (clr, val) => Color(clr).darken(val).rgb().string();
module.exports = {
content: [
"./source/**/*.mustache",
"./source/**/*.json",
"./source/**/*.js",
"./source/**/*.vue",
"./public/**/*.html",
],
options: {
whitelistPatterns: [
/^((sm|md|lg|xl)\:)?(block|inline|fixed|absolute|inline-block|flex|inline-flex|grid)/,
/^((sm|md|lg|xl)\:)?w-\d\d?/,
/^((sm|md|lg|xl)\:)?w-(auto|full|screen)/,
/^((sm|md|lg|xl)\:)?h-\d\d?/,
/^((sm|md|lg|xl)\:)?h-screen/,
/^((sm|md|lg|xl)\:)?-?m.?-\d\d?/,
/^((sm|md|lg|xl)\:)?-?m.?-auto?/,
/^((sm|md|lg|xl)\:)?p.?-\d\d?/,
/^((sm|md|lg|xl)\:)?space-.?-\d\d?/,
/^((sm|md|lg|xl)\:)?hidden/,
/^((sm|md|lg|xl)\:)?block/,
/^((sm|md|lg|xl)\:)?inline-block/,
/^((sm|md|lg|xl)\:)?flex/,
/^((sm|md|lg|xl)\:)?inline-flex/,
/^((sm|md|lg|xl)\:)?grid/,
/^((sm|md|lg|xl)\:)?gap-\d\d?/,
/^((sm|md|lg|xl)\:)?static/,
/^((sm|md|lg|xl)\:)?flex-row-*/,
/^((sm|md|lg|xl)\:)?flex-col-*/,
/^((sm|md|lg|xl)\:)?grid-cols-*/,
/^((sm|md|lg|xl)\:)?col-span-*/,
/^((sm|md|lg|xl)\:)?row-span-*/,
/^((sm|md|lg|xl)\:)?order-*/,
/^((sm|md|lg|xl)\:)?items-*/,
/^((sm|md|lg|xl)\:)?float-*/,
/^((sm|md|lg|xl|hover)\:)?text-*/,
/^((sm|md|lg|xl)\:)?grid-flow-*/,
/^((sm|md|lg|xl)\:)?head-*/,
/^((sm|md|lg|xl)\:)?clearfix/,
/^((sm|md|lg|xl|hover)\:)?elevation-*/,
/^((sm|md|lg|xl|hover)\:)?border(-.*)?/,
/^((sm|md|lg|xl|hover)\:)?bg-opacity-\d\d?/,
/whitespace-*/,
/opacity-*/,
/^truncate/,
/^break-*/,
/^overflow-*/,
/^duration-*/,
/^max-w-*/,
/^max-h-*/,
/ico--*/,
],
},
theme: {
extend: {
maxWidth: {
'xxs': '16rem',
},
gridTemplateColumns: {
'candidate-table-row': 'auto auto auto auto 1fr'
height: {
'120': '30rem',
},
opacity: {
'85': '0.85',
......@@ -21,21 +74,20 @@ module.exports = {
},
spacing: {
'0/5': '0.125rem',
'14': '3.5rem',
'28': '7rem',
'36': '9rem',
'44': '11rem',
'52': '13rem',
'80': '20rem'
}
'80': '20rem',
},
// Breakpoints
screens: {
'sm': '576px',
'md': '768px',
'lg': '992px',
'xl': '1200px',
'2xl': '1366px',
// flip-x
scale: {
'-1': '-1',
},
},
// Breakpoints
screens,
fontFamily: {
alt: ['Bebas Neue', 'Helvetica', 'Arial', 'sans-serif'],
body: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],
......@@ -53,7 +105,9 @@ module.exports = {
'4xl': '2.45rem',
'5xl': '3rem',
'6xl': '4rem',
'7xl': '5.6rem',
'7xl': '5.3rem',
'8xl': '6.5rem',
'9xl': '7.5rem',
},
fontWeight: {
light: 300,
......@@ -66,10 +120,10 @@ module.exports = {
'black': '#000000',
'white': '#ffffff',
'grey': {
'25': '#fafafa',
'50': '#f7f7f7',
'100': '#f3f3f3',
'125': '#f0f0f0',
'150': '#00000012',
'200': '#adadad',
'300': '#4c4c4c',
'400': '#343434',
......@@ -78,21 +132,56 @@ module.exports = {
'700': '#202020',
'800': '#1f1f1f',
},
'red': {
'100': '#d6151b',
'200': darken('#d6151b', 0.1),
'olive': {
'100': '#d6e8b3'
},
'green': {
'100': '#29bc51',
'200': darken('#29bc51', 0.1),
'300': darken('#29bc51', 0.18),
'200': '#92c6ab',
'300': '#76cc9f',
'400': '#4ca971',
},
'yellow': {
'100': '#fff7bf',
'200': '#f7f38a',
'300': '#ffea5a',
'400': '#fde119',
},
'red': {
'600': '#d60d53'
},
'brands': {
'facebook': '#067ceb',
'twitter': '#00c9ff',
'gmail': '#ec230e',
'linkedin': '#0066a9',
}
},
'blue': {
'100': '#abcdef',
'200': '#76b4cf',
'300': '#027da8',
},
'cyan': {
'100': '#a7d4d1',
'200': '#57b3bd',
'300': '#3e8793',
'400': '#497280',
'500': '#004958',
},
'orange': {
'100': '#f2d29f',
'200': '#f1ae7b',
'300': '#ed9654',
},
'violet': {
'100': '#edc8bd',
'200': '#d28c94',
'300': '#8d415f',
'400': '#840048',
'500': '#670047',
},
'pirati': {
'yellow': '#fec934'
},
},
container: {
center: true,
......@@ -109,90 +198,12 @@ module.exports = {
},
variants: {
textDecorationColor: ['responsive', 'hover'],
background: ['responsive'],
appearance: ['responsive'],
space: ['responsive'],
text: ['responsive', 'hover'],
zIndex: ['responsive'],
},
// textStyles: theme => ({ // defaults to {}
// heading: {
// output: false, // this means there won't be a "heading" component in the CSS, but it can be extended
// fontWeight: theme('fontWeight.bold'),
// lineHeight: theme('lineHeight.tight'),
// },
// h1: {
// extends: 'heading', // this means all the styles in "heading" will be copied here; "extends" can also be an array to extend multiple text styles
// fontSize: theme('fontSize.5xl'),
// '@screen sm': {
// fontSize: theme('fontSize.6xl'),
// },
// },
// h2: {
// extends: 'heading',
// fontSize: theme('fontSize.4xl'),
// '@screen sm': {
// fontSize: theme('fontSize.5xl'),
// },
// },
// h3: {
// extends: 'heading',
// fontSize: theme('fontSize.4xl'),
// },
// h4: {
// extends: 'heading',
// fontSize: theme('fontSize.3xl'),
// },
// h5: {
// extends: 'heading',
// fontSize: theme('fontSize.2xl'),
// },
// h6: {
// extends: 'heading',
// fontSize: theme('fontSize.xl'),
// },
// link: {
// '&:hover': {
// textDecoration: 'underline',
// },
// },
// richText: {
// fontWeight: theme('fontWeight.normal'),
// fontSize: theme('fontSize.base'),
// lineHeight: theme('lineHeight.relaxed'),
// '> * + *': {
// marginTop: '1em',
// },
// 'h1': {
// extends: 'h1',
// },
// 'h2': {
// extends: 'h2',
// },
// 'h3': {
// extends: 'h3',
// },
// 'h4': {
// extends: 'h4',
// },
// 'h5': {
// extends: 'h5',
// },
// 'h6': {
// extends: 'h6',
// },
// 'ul': {
// listStyleType: 'disc',
// },
// 'ol': {
// listStyleType: 'decimal',
// },
// 'a': {
// extends: 'link',
// },
// 'b, strong': {
// fontWeight: theme('fontWeight.bold'),
// },
// 'i, em': {
// fontStyle: 'italic',
// },
// },
// }),
plugins: [
require('tailwind-css-variables')(
{
......@@ -202,7 +213,7 @@ module.exports = {
// options
}
),
require('tailwindcss-typography')({
require('@tailwindcss/typography')({
// all these options default to the values specified here
ellipsis: false, // whether to generate ellipsis utilities
hyphens: false, // whether to generate hyphenation utilities
......@@ -214,5 +225,81 @@ module.exports = {
color: "#dddddd",
opacityBoost: '0.23',
}),
require("./tailwind-plugins/buttons")({
defaultColor: {
text: 'white',
background: 'black',
iconBorder: 'grey.300'
},
colors: {
'black': {
text: 'white',
background: 'black',
iconBorder: 'grey.400',
hoverIconBorder: 'grey.600',
},
'grey-700': {
text: 'white',
background: 'grey.700',
iconBorder: 'grey.500',
hoverBackground: 'grey.400',
hoverIconBorder: 'grey.600',
},
'grey-500': {
text: 'white',
background: 'grey.500',
iconBorder: 'grey.300',
hoverBackground: 'grey.300',
hoverIconBorder: 'grey.400',
},
'grey-125': {
text: 'black',
background: 'grey.125',
hoverText: 'black',
},
'white': {
text: 'black',
background: 'white',
iconBorder: 'grey.100',
hoverText: 'black',
},
'blue-300': {
text: 'white',
background: 'blue.300',
},
'cyan-200': {
text: 'white',
background: 'cyan.200',
},
'green-300': {
text: 'white',
background: 'green.300',
},
'green-400': {
text: 'white',
background: 'green.400',
},
'orange-300': {
text: 'white',
background: 'orange.300',
},
'violet-400': {
text: 'white',
background: 'violet.400',
},
'violet-500': {
text: 'white',
background: 'violet.500',
},
'red-600': {
text: 'white',
background: 'red.600',
},
'brands-facebook': {
text: 'white',
background: 'brands.facebook',
}
}
})
]
}

Pirátský GitLab - Home of the CopyLeft