style presets.js file

This commit is contained in:
Cüneyt Şentürk 2023-04-11 12:09:31 +03:00
parent c9e244712b
commit 2e5f562c4f

706
presets.js vendored
View File

@ -1,6 +1,7 @@
const defaultTheme = require('tailwindcss/defaultTheme') const defaultTheme = require('tailwindcss/defaultTheme')
const fontFamily = defaultTheme.fontFamily; const fontFamily = defaultTheme.fontFamily;
fontFamily['sans'] = [ fontFamily['sans'] = [
'Quicksand', // <-- Quicksand is default sans font now 'Quicksand', // <-- Quicksand is default sans font now
'system-ui', 'system-ui',
@ -8,59 +9,71 @@ fontFamily['sans'] = [
]; ];
module.exports = { module.exports = {
content: [ content: [
'./resources/views/**/*.blade.php', './resources/views/**/*.blade.php',
'./resources/assets/js/**/*.vue', './resources/assets/js/**/*.vue',
'./vendor/akaunting/laravel-menu/src/Presenters/Admin/Tailwind.php', './vendor/akaunting/laravel-menu/src/Presenters/Admin/Tailwind.php',
'./safelist.txt' './safelist.txt'
], ],
safelist: [ safelist: [
{ {
pattern: /^[^/&]*$/, pattern: /^[^/&]*$/,
}, },
{
pattern: /^p-/, {
variants: ['ltr', 'rtl'], pattern: /^p-/,
}, variants: ['ltr', 'rtl'],
{ },
pattern: /^m-/,
variants: ['ltr', 'rtl'], {
}, pattern: /^m-/,
{ variants: ['ltr', 'rtl'],
pattern: /^left-/, },
variants: ['ltr', 'rtl'],
}, {
{ pattern: /^left-/,
pattern: /^right-/, variants: ['ltr', 'rtl'],
variants: ['ltr', 'rtl'], },
},
{ {
pattern: /^w/, pattern: /^right-/,
}, variants: ['ltr', 'rtl'],
{ },
pattern: /^h/,
}, {
{ pattern: /^w/,
pattern: /^inset/, },
},
{ {
pattern: /^top/, pattern: /^h/,
}, },
{
pattern: /^bottom/, {
}, pattern: /^inset/,
{ },
pattern: /^translate/,
}, {
pattern: /^top/,
},
{
pattern: /^bottom/,
},
{
pattern: /^translate/,
},
], ],
darkMode: 'class', // or 'media' or 'class', darkMode: 'class', // or 'media' or 'class',
theme: { theme: {
fontFamily: fontFamily, fontFamily: fontFamily,
extend: { extend: {
fontSize: { fontSize: {
'2xl': ['1.375rem','1.5rem'], // 22PX '2xl': ['1.375rem','1.5rem'], // 22PX
'3xl': ['1.5rem','1.75rem'], // 24PX '3xl': ['1.5rem','1.75rem'], // 24PX
'4xl': ['1.75rem','2rem'], // 28PX '4xl': ['1.75rem','2rem'], // 28PX
@ -68,336 +81,405 @@ module.exports = {
'6xl': ['2.5rem','2.75rem'], // 40PX '6xl': ['2.5rem','2.75rem'], // 40PX
'7xl': ['2.75rem', '3rem'], // 44PX '7xl': ['2.75rem', '3rem'], // 44PX
'8xl': ['3rem', '3.25rem'], '8xl': ['3rem', '3.25rem'],
}, },
colors: { colors: {
'green': { 'green': {
DEFAULT: '#6ea152', DEFAULT: '#6ea152',
'50': '#f8faf6', '50': '#f8faf6',
'100': '#f1f6ee', '100': '#f1f6ee',
'200': '#dbe8d4', '200': '#dbe8d4',
'300': '#c5d9ba', '300': '#c5d9ba',
'400': '#9abd86', '400': '#9abd86',
'500': '#6ea152', '500': '#6ea152',
'600': '#63914a', '600': '#63914a',
'700': '#53793e', '700': '#53793e',
'800': '#426131', '800': '#426131',
'900': '#364f28' '900': '#364f28'
}, },
'purple': { 'purple': {
DEFAULT: '#55588b', DEFAULT: '#55588b',
'50': '#f7f7f9', '50': '#f7f7f9',
'100': '#eeeef3', '100': '#eeeef3',
'200': '#d5d5e2', '200': '#d5d5e2',
'300': '#bbbcd1', '300': '#bbbcd1',
'400': '#888aae', '400': '#888aae',
'500': '#55588b', '500': '#55588b',
'600': '#4d4f7d', '600': '#4d4f7d',
'700': '#404268', '700': '#404268',
'800': '#333553', '800': '#333553',
'900': '#2a2b44' '900': '#2a2b44'
}, },
'red': { 'red': {
DEFAULT: '#cc0000', DEFAULT: '#cc0000',
'50': '#fcf2f2', '50': '#fcf2f2',
'100': '#fae6e6', '100': '#fae6e6',
'200': '#f2bfbf', '200': '#f2bfbf',
'300': '#eb9999', '300': '#eb9999',
'400': '#db4d4d', '400': '#db4d4d',
'500': '#cc0000', '500': '#cc0000',
'600': '#b80000', '600': '#b80000',
'700': '#990000', '700': '#990000',
'800': '#7a0000', '800': '#7a0000',
'900': '#640000' '900': '#640000'
}, },
'orange': { 'orange': {
DEFAULT: '#f59e0b', DEFAULT: '#f59e0b',
'50': '#fffaf3', '50': '#fffaf3',
'100': '#fef5e7', '100': '#fef5e7',
'200': '#fde7c2', '200': '#fde7c2',
'300': '#fbd89d', '300': '#fbd89d',
'400': '#f8bb54', '400': '#f8bb54',
'500': '#f59e0b', '500': '#f59e0b',
'600': '#dd8e0a', '600': '#dd8e0a',
'700': '#b87708', '700': '#b87708',
'800': '#935f07', '800': '#935f07',
'900': '#784d05' '900': '#784d05'
}, },
'blue': { 'blue': {
DEFAULT: '#006ea6', DEFAULT: '#006ea6',
'50': '#f2f8fb', '50': '#f2f8fb',
'100': '#e6f1f6', '100': '#e6f1f6',
'200': '#bfdbe9', '200': '#bfdbe9',
'300': '#99c5db', '300': '#99c5db',
'400': '#4d9ac1', '400': '#4d9ac1',
'500': '#006ea6', '500': '#006ea6',
'600': '#006395', '600': '#006395',
'700': '#00537d', '700': '#00537d',
'800': '#004264', '800': '#004264',
'900': '#003651' '900': '#003651'
}, },
'black': { 'black': {
DEFAULT: '#424242', DEFAULT: '#424242',
'50': '#f6f6f6', '50': '#f6f6f6',
'100': '#ececec', '100': '#ececec',
'200': '#d0d0d0', '200': '#d0d0d0',
'300': '#b3b3b3', '300': '#b3b3b3',
'400': '#7b7b7b', '400': '#7b7b7b',
'500': '#424242', '500': '#424242',
'600': '#3b3b3b', '600': '#3b3b3b',
'700': '#323232', '700': '#323232',
'800': '#282828', '800': '#282828',
'900': '#202020' '900': '#202020'
}, },
'lilac': { 'lilac': {
DEFAULT: '#F8F9FE', DEFAULT: '#F8F9FE',
'100': '#F5F7FA', '100': '#F5F7FA',
'300': '#EDF0FC', '300': '#EDF0FC',
'900': '#DCE2F9' '900': '#DCE2F9'
}, },
'golden': { 'golden': {
DEFAULT: '#D1C989', DEFAULT: '#D1C989',
'900': '#BFB882', '900': '#BFB882',
}, },
'rose': { 'rose': {
DEFAULT: '#f43f5e', DEFAULT: '#f43f5e',
'50' : '#fff1f2', '50' : '#fff1f2',
'100': '#ffe4e6', '100': '#ffe4e6',
'200': '#fecdd3', '200': '#fecdd3',
'300': '#fda4af', '300': '#fda4af',
'400': '#fb7185', '400': '#fb7185',
'500': '#f43f5e', '500': '#f43f5e',
'600': '#e11d48', '600': '#e11d48',
'700': '#be123c', '700': '#be123c',
'800': '#9f1239', '800': '#9f1239',
'900': '#881337' '900': '#881337'
}, },
'silver': { 'silver': {
DEFAULT: '#7F8997', DEFAULT: '#7F8997',
'50': '#F0F1F3', '50': '#F0F1F3',
'100': '#D4D7DC', '100': '#D4D7DC',
'200': '#B8BDC5', '200': '#B8BDC5',
'300': '#9CA3AE', '300': '#9CA3AE',
'400': '#7F8997', '400': '#7F8997',
'500': '#636F80', '500': '#636F80',
'600': '#475569', '600': '#475569',
'700': '#424F61', '700': '#424F61',
'800': '#3A4555', '800': '#3A4555',
'900': '#323B49' '900': '#323B49'
}, },
'pastel_green': { 'pastel_green': {
DEFAULT: '#E0F1E3', DEFAULT: '#E0F1E3',
'50': '#E0F1E3', '50': '#E0F1E3',
'100': '#CCE0D0', '100': '#CCE0D0',
'200': '#B8D0BD', '200': '#B8D0BD',
'300': '#A3BFAB', '300': '#A3BFAB',
'400': '#8FAE98', '400': '#8FAE98',
'500': '#7B9E85', '500': '#7B9E85',
'600': '#678D72', '600': '#678D72',
'700': '#5E8268', '700': '#5E8268',
'800': '#56765F', '800': '#56765F',
'900': '#4D6A55' '900': '#4D6A55'
}, },
'peach_orange': { 'peach_orange': {
DEFAULT: '#FCF2D9', DEFAULT: '#FCF2D9',
'50': '#FCF2D9', '50': '#FCF2D9',
'100': '#F0E0BE', '100': '#F0E0BE',
'200': '#E5CFA4', '200': '#E5CFA4',
'300': '#DABE89', '300': '#DABE89',
'400': '#CEAC6E', '400': '#CEAC6E',
'500': '#C39B54', '500': '#C39B54',
'600': '#B78939', '600': '#B78939',
'700': '#AC8035', '700': '#AC8035',
'800': '#9C7430', '800': '#9C7430',
'900': '#8C692B' '900': '#8C692B'
}, },
'wisteria': { 'wisteria': {
DEFAULT: '#E5E4FA', DEFAULT: '#E5E4FA',
'50': '#E5E4FA', '50': '#E5E4FA',
'100': '#D0CEE8', '100': '#D0CEE8',
'200': '#BAB9D5', '200': '#BAB9D5',
'300': '#A5A4C3', '300': '#A5A4C3',
'400': '#908EB1', '400': '#908EB1',
'500': '#7A799E', '500': '#7A799E',
'600': '#65638C', '600': '#65638C',
'700': '#5F5D83', '700': '#5F5D83',
'800': '#565577', '800': '#565577',
'900': '#4D4C6B' '900': '#4D4C6B'
}, },
'status': { 'status': {
'success': '#F1F6EE', 'success': '#F1F6EE',
'danger': '#fae6e6', 'danger': '#fae6e6',
'sent': '#FEF5E7', 'sent': '#FEF5E7',
'viewed': '#EEEEF3', 'viewed': '#EEEEF3',
'draft': '#ECECEC', 'draft': '#ECECEC',
'partial': '#E6F1F6', 'partial': '#E6F1F6',
'canceled': '#282828', 'canceled': '#282828',
'warning': '#FEF5E7' 'warning': '#FEF5E7'
}, },
'text-status': { 'text-status': {
'success': '#63914A', 'success': '#63914A',
'danger': '#B80000', 'danger': '#B80000',
'sent': '#DD8E0A', 'sent': '#DD8E0A',
'viewed': '#4D4F7D', 'viewed': '#4D4F7D',
'draft': '#3B3B3B', 'draft': '#3B3B3B',
'partial': '#006395', 'partial': '#006395',
'canceled': '#ffffff', 'canceled': '#ffffff',
'warning': '#b87708' 'warning': '#b87708'
}, },
'body': { 'body': {
DEFAULT: '#fcfcfc' DEFAULT: '#fcfcfc'
}, },
'light-gray': '#C7C9D9', 'light-gray': '#C7C9D9',
'dark-blue': '#15284B', 'dark-blue': '#15284B',
'lighter-gray': '#F2F2F5', 'lighter-gray': '#F2F2F5',
'purple-lighter': '#F2F4FC', 'purple-lighter': '#F2F4FC',
'modal-background': 'rgba(0, 0, 0, 0.3)', 'modal-background': 'rgba(0, 0, 0, 0.3)',
'black-medium': '#424242', 'black-medium': '#424242',
'red-light': '#FF6B6B', 'red-light': '#FF6B6B',
'default': '#6ea152', 'default': '#6ea152',
}, },
spacing: { spacing: {
'modal': '610px', 'modal': '610px',
'500': '500px', '500': '500px',
'5.5': '1.30rem', '5.5': '1.30rem',
'9.5': '2.45rem', '9.5': '2.45rem',
'12.5': '3.2rem', '12.5': '3.2rem',
'18': '4.5rem', '18': '4.5rem',
'31': '30.938rem', '31': '30.938rem',
'32.5': '8.5rem', '32.5': '8.5rem',
'33': '8.5rem', '33': '8.5rem',
'37': '9.25rem', '37': '9.25rem',
'46': '46.875rem', '46': '46.875rem',
'98': '27.8rem', '98': '27.8rem',
}, },
margin: { margin: {
'10.5': '2.6rem', '10.5': '2.6rem',
}, },
keyframes: { keyframes: {
vibrate: { vibrate: {
'0.50%, 10%, 20%, 30%, 40%, 50%': { transform: 'translate3d(0.5px, 0, 0)' }, '0.50%, 10%, 20%, 30%, 40%, 50%': { transform: 'translate3d(0.5px, 0, 0)' },
'5%, 15%, 25%, 35%, 45%': { transform: 'translate3d(-0.5px, 0, 0)' }, '5%, 15%, 25%, 35%, 45%': { transform: 'translate3d(-0.5px, 0, 0)' },
'100%': { transform: 'translate3d(0.5px, 0, 0)' }, '100%': { transform: 'translate3d(0.5px, 0, 0)' },
}, },
pulsate_transparent: {
'0%': { transform: 'scale(0.9, 0.9)' },
'50%': { transform: 'scale(1.14, 1.14)' },
'100%': { transform: 'scale(0.9, 0.9)' },
},
pulsate: {
'0%': { transform: 'transform: scale(1, 1)', opacity: '0.05' },
'50%': { opacity: '0.25' },
'100%': { transform: 'scale(1.5, 1.5)', opacity: '0' },
},
spin: {
'0%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)' },
},
submit: {
'0%': { boxShadow: '0 28px 0 -28px #ffffff' },
'100%': { boxShadow: '0 28px 0 #ffffff' },
},
submit_second: {
'0%': { boxShadow: '0 28px 0 -28px #55588b' },
'100%': { boxShadow: '0 28px 0 #55588b' },
},
marquee: {
'0%': { transform: 'translateX(0%)' },
'100%': { transform: 'translateX(-100%)' },
},
marquee_long: {
'0%': { transform: 'translateX(0%)' },
'100%': { transform: 'translateX(-350%)' },
}
},
animation: { pulsate_transparent: {
vibrate: 'vibrate 2s cubic-bezier(.36, .07, .19, .97) infinite;', '0%': { transform: 'scale(0.9, 0.9)' },
pulsate_transparent: 'pulsate_transparent 1500ms ease infinite;', '50%': { transform: 'scale(1.14, 1.14)' },
pulsate: 'pulsate 1500ms ease infinite;', '100%': { transform: 'scale(0.9, 0.9)' },
spin: 'spin 1000ms infinite', },
submit: 'submit 0.7s ease alternate infinite',
submit_second: 'submit_second 0.7s ease alternate infinite',
marquee: 'marquee 9s linear infinite',
marquee_long: 'marquee_long 14s linear infinite'
},
transitionProperty: { pulsate: {
'height': 'height', '0%': { transform: 'transform: scale(1, 1)', opacity: '0.05' },
'spacing': 'margin, padding', '50%': { opacity: '0.25' },
'visible': 'visible, opacity', '100%': { transform: 'scale(1.5, 1.5)', opacity: '0' },
'backgroundSize': 'background-size' },
},
backgroundSize: { spin: {
'0-2': '0 2px', '0%': { transform: 'rotate(0deg)' },
'full-2': '100% 2px' '100%': { transform: 'rotate(360deg)' },
}, },
submit: {
'0%': { boxShadow: '0 28px 0 -28px #ffffff' },
'100%': { boxShadow: '0 28px 0 #ffffff' },
},
submit_second: {
'0%': { boxShadow: '0 28px 0 -28px #55588b' },
'100%': { boxShadow: '0 28px 0 #55588b' },
},
marquee: {
'0%': { transform: 'translateX(0%)' },
'100%': { transform: 'translateX(-100%)' },
},
marquee_long: {
'0%': { transform: 'translateX(0%)' },
'100%': { transform: 'translateX(-350%)' },
}
},
animation: {
vibrate: 'vibrate 2s cubic-bezier(.36, .07, .19, .97) infinite;',
pulsate_transparent: 'pulsate_transparent 1500ms ease infinite;',
pulsate: 'pulsate 1500ms ease infinite;',
spin: 'spin 1000ms infinite',
submit: 'submit 0.7s ease alternate infinite',
submit_second: 'submit_second 0.7s ease alternate infinite',
marquee: 'marquee 9s linear infinite',
marquee_long: 'marquee_long 14s linear infinite'
},
transitionProperty: {
'height': 'height',
'spacing': 'margin, padding',
'visible': 'visible, opacity',
'backgroundSize': 'background-size'
},
backgroundSize: {
'0-2': '0 2px',
'full-2': '100% 2px'
},
backgroundPosition: { backgroundPosition: {
'0-full': ' 0 100%' '0-full': ' 0 100%'
}, },
minHeight: { minHeight: {
'500': '500px', '500': '500px',
} }
}, },
appearance: ['hover', 'focus'], appearance: ['hover', 'focus'],
container: { container: {
center: true, center: true,
}, },
}, },
variants: { variants: {
transitionProperty: ['responsive', 'motion-safe', 'motion-reduce'], transitionProperty: [
float: ['responsive', 'direction'], 'responsive',
margin: ['responsive', 'direction'], 'motion-safe',
padding: ['responsive', 'direction'], 'motion-reduce'
inset: ['responsive', 'direction'], ],
textAlign: ['responsive', 'direction'],
space: ['responsive', 'direction'], float: [
rotate: ['responsive', 'direction'], 'responsive',
'direction'
extend: { ],
display: ['group-hover'],
opacity: ['checked', 'disabled'], margin: [
borderColor: ['checked'], 'responsive',
fontWeight: ['hover'], 'direction'
borderRadius: ['responsive', 'hover', 'focus'], ],
borderWidth: ['responsive', 'hover', 'focus'],
translate: ['responsive', 'hover'], padding: [
} 'responsive',
'direction'
],
inset: [
'responsive',
'direction'
],
textAlign: [
'responsive',
'direction'
],
space: [
'responsive',
'direction'
],
rotate: [
'responsive',
'direction'
],
extend: {
display: ['group-hover'],
opacity: ['checked', 'disabled'],
borderColor: ['checked'],
fontWeight: ['hover'],
borderRadius: ['responsive', 'hover', 'focus'],
borderWidth: ['responsive', 'hover', 'focus'],
translate: ['responsive', 'hover'],
}
}, },
plugins: [ plugins: [
require('@tailwindcss/forms'), require('@tailwindcss/forms'),
require('@themesberg/flowbite/plugin'), require('@themesberg/flowbite/plugin'),
require('tailwindcss-dir')(), require('tailwindcss-dir')(),
function ({ addComponents }) { function ({ addComponents }) {
addComponents({ addComponents({
'.container': { '.container': {
maxWidth: '100%', maxWidth: '100%',
'@screen sm': {
maxWidth: '100%', '@screen sm': {
}, maxWidth: '100%',
'@screen md': { },
maxWidth: '100%',
}, '@screen md': {
'@screen lg': { maxWidth: '100%',
maxWidth: '1000px', },
},
'@screen xl': { '@screen lg': {
maxWidth: '895px', maxWidth: '1000px',
}, },
'@screen 2xl': {
maxWidth: '1145px', '@screen xl': {
}, maxWidth: '895px',
} },
})
'@screen 2xl': {
maxWidth: '1145px',
},
}
})
} }
] ]
}; };