maher
309
common/resources/client/shared.tailwind.js
vendored
Executable file
309
common/resources/client/shared.tailwind.js
vendored
Executable file
@@ -0,0 +1,309 @@
|
||||
module.exports = {
|
||||
sharedOverride: {
|
||||
spacing: {
|
||||
px: '1px',
|
||||
0: '0px',
|
||||
1: '0.063rem',
|
||||
2: '0.125rem',
|
||||
3: '0.188rem',
|
||||
4: '0.25rem',
|
||||
5: '0.313rem',
|
||||
6: '0.375rem',
|
||||
8: '0.5rem',
|
||||
10: '0.625rem',
|
||||
12: '0.75rem',
|
||||
14: '0.875rem',
|
||||
16: '1rem',
|
||||
18: '1.125rem',
|
||||
20: '1.25rem',
|
||||
22: '1.375rem',
|
||||
24: '1.5rem',
|
||||
26: '1.625rem',
|
||||
28: '1.75rem',
|
||||
30: '1.875rem',
|
||||
32: '2rem',
|
||||
34: '2.125rem',
|
||||
36: '2.25rem',
|
||||
38: '2.375rem',
|
||||
40: '2.5rem',
|
||||
42: '2.625rem',
|
||||
44: '2.75rem',
|
||||
46: '2.875rem',
|
||||
48: '3rem',
|
||||
50: '3.125rem',
|
||||
52: '3.25rem',
|
||||
54: '3.375rem',
|
||||
56: '3.5rem',
|
||||
60: '3.75rem',
|
||||
64: '4rem',
|
||||
66: '4.125rem',
|
||||
68: '4.25rem',
|
||||
70: '4.375rem',
|
||||
76: '4.75rem',
|
||||
80: '5rem',
|
||||
82: '5.125rem',
|
||||
84: '5.25rem',
|
||||
86: '5.375rem',
|
||||
90: '5.625rem',
|
||||
92: '5.75rem',
|
||||
96: '6rem',
|
||||
100: '6.25rem',
|
||||
110: '6.875rem',
|
||||
112: '7rem',
|
||||
120: '7.5rem',
|
||||
124: '7.75rem',
|
||||
128: '8rem',
|
||||
132: '8.25rem',
|
||||
136: '8.5rem',
|
||||
140: '8.75rem',
|
||||
144: '9rem',
|
||||
160: '10rem',
|
||||
172: '10.75rem',
|
||||
176: '11rem',
|
||||
180: '11.25rem',
|
||||
184: '11.5rem',
|
||||
192: '12rem',
|
||||
200: '12.5rem',
|
||||
204: '12.75rem',
|
||||
208: '13rem',
|
||||
224: '14rem',
|
||||
240: '15rem',
|
||||
256: '16rem',
|
||||
264: '16.5rem',
|
||||
280: '17.5rem',
|
||||
288: '18rem',
|
||||
320: '20rem',
|
||||
350: '21.875rem',
|
||||
375: '23.438rem',
|
||||
384: '24rem',
|
||||
400: '25rem',
|
||||
440: '27.5rem',
|
||||
450: '28.125rem',
|
||||
500: '31.25rem',
|
||||
512: '32rem',
|
||||
580: '36.25rem',
|
||||
620: '38.75rem',
|
||||
640: '40rem',
|
||||
672: '42rem',
|
||||
680: '42.5rem',
|
||||
720: '45rem',
|
||||
780: '48.75rem',
|
||||
850: '53.125rem',
|
||||
950: '59.375rem',
|
||||
1280: '80rem',
|
||||
1408: '88rem',
|
||||
'5vw': '5vw',
|
||||
'10vw': '10vw',
|
||||
'safe-area': 'env(safe-area-inset-bottom)',
|
||||
font: '1em',
|
||||
inherit: 'inherit',
|
||||
},
|
||||
colors: theme => ({
|
||||
transparent: 'transparent',
|
||||
inherit: 'inherit',
|
||||
current: 'currentColor',
|
||||
white: 'rgb(255 255 255)',
|
||||
black: 'rgb(0 0 0)',
|
||||
toast: 'rgb(50, 50, 50)',
|
||||
'slider-disabled': 'rgb(189, 189, 189)',
|
||||
hover: `rgb(var(--be-foreground-base) / ${theme('opacity.hover')})`,
|
||||
selected: `rgb(var(--be-foreground-base) / ${theme('opacity.selected')})`,
|
||||
focus: `rgb(var(--be-foreground-base) / ${theme('opacity.focus')})`,
|
||||
link: 'rgb(var(--be-link-color, var(--be-primary)) / <alpha-value>)',
|
||||
divider: `rgb(var(--be-foreground-base) / var(--be-divider-opacity))`,
|
||||
'disabled-bg':
|
||||
'rgb(var(--be-foreground-base) / var(--be-disabled-bg-opacity))',
|
||||
'disabled-fg':
|
||||
'rgb(var(--be-foreground-base) / var(--be-disabled-fg-opacity))',
|
||||
'primary-light': 'rgb(var(--be-primary-light) / <alpha-value>)',
|
||||
primary: 'rgb(var(--be-primary) / <alpha-value>)',
|
||||
'primary-dark': 'rgb(var(--be-primary-dark) / <alpha-value>)',
|
||||
'on-primary': 'rgb(var(--be-on-primary) / <alpha-value>)',
|
||||
'danger-lighter': '#fecaca',
|
||||
danger: '#ef4444',
|
||||
'danger-darker': '#991b1b',
|
||||
'positive-lighter': '#bbf7d0',
|
||||
positive: '#22c55e',
|
||||
'positive-darker': '#166534',
|
||||
warning: '#f3a432',
|
||||
google: '#d34836',
|
||||
facebook: '#3b5998',
|
||||
twitter: '#000000',
|
||||
envato: '#6ca12b',
|
||||
tumblr: '#2b5a9f',
|
||||
background: 'rgb(var(--be-background) / <alpha-value>)',
|
||||
'background-alt': 'rgb(var(--be-background-alt) / <alpha-value>)',
|
||||
chip: 'rgb(var(--be-background-chip) / <alpha-value>)',
|
||||
paper: 'rgb(var(--be-paper) / <alpha-value>)',
|
||||
'fg-base': 'rgb(var(--be-foreground-base) / <alpha-value>)',
|
||||
'text-muted':
|
||||
'rgb(var(--be-foreground-base) / var(--be-text-muted-opacity))',
|
||||
'text-main':
|
||||
'rgb(var(--be-foreground-base) / var(--be-text-main-opacity))',
|
||||
}),
|
||||
borderColor: theme => ({
|
||||
...theme('colors'),
|
||||
bg: theme('backgroundColor.DEFAULT'),
|
||||
'bg-alt': theme('backgroundColor.alt'),
|
||||
'text-muted': theme('textColor.muted'),
|
||||
DEFAULT: theme('colors.divider'),
|
||||
}),
|
||||
borderWidth: theme => ({
|
||||
...theme('spacing'),
|
||||
DEFAULT: '1px',
|
||||
}),
|
||||
textColor: theme => ({
|
||||
...theme('colors'),
|
||||
main: theme('colors.text-main'),
|
||||
muted: theme('colors.text-muted'),
|
||||
disabled: theme('colors.disabled-fg'),
|
||||
DEFAULT: theme('colors.text-main'),
|
||||
}),
|
||||
ringColor: theme => ({
|
||||
...theme('colors'),
|
||||
DEFAULT: 'rgb(var(--be-primary) / <alpha-value>)',
|
||||
}),
|
||||
ringWidth: () => ({
|
||||
0: '0px',
|
||||
1: '1px',
|
||||
2: '2px',
|
||||
4: '4px',
|
||||
8: '8px',
|
||||
DEFAULT: '4px',
|
||||
}),
|
||||
backgroundColor: theme => ({
|
||||
...theme('colors'),
|
||||
disabled: theme('colors.disabled-bg'),
|
||||
DEFAULT: 'rgb(var(--be-background) / <alpha-value>)',
|
||||
alt: 'rgb(var(--be-background-alt) / <alpha-value>)',
|
||||
}),
|
||||
},
|
||||
sharedExtend: {
|
||||
borderRadius: {
|
||||
button: 'var(--be-button-radius, 0.25rem)',
|
||||
input: 'var(--be-input-radius, 0.25rem)',
|
||||
panel: 'var(--be-panel-radius, 0.25rem)',
|
||||
},
|
||||
flex: {
|
||||
2: '2 1 0%',
|
||||
3: '3 1 0%',
|
||||
},
|
||||
outlineColor: {
|
||||
DEFAULT: 'rgb(var(--be-primary-lighter) / <alpha-value>)',
|
||||
},
|
||||
outlineWidth: {
|
||||
DEFAULT: 2,
|
||||
},
|
||||
height: {
|
||||
screen: '100dvh',
|
||||
dialog: 'calc(var(--be-viewport-height, 100vh) * 0.9 - 2px)',
|
||||
},
|
||||
width: {
|
||||
screen: '100vw',
|
||||
dialog: 'calc(var(--be-viewport-width, 100vw) * 0.9 - 2px)',
|
||||
},
|
||||
minHeight: theme => ({
|
||||
...theme('spacing'),
|
||||
screen: '100dvh',
|
||||
dialog: 'calc(var(--be-viewport-height, 100vh) * 0.9)',
|
||||
}),
|
||||
minWidth: theme => ({
|
||||
...theme('spacing'),
|
||||
}),
|
||||
maxWidth: theme => ({
|
||||
...theme('spacing'),
|
||||
'4/5': '80%',
|
||||
dialog: ' calc(var(--be-viewport-width, 100vw) * 0.9)',
|
||||
}),
|
||||
maxHeight: theme => ({
|
||||
...theme('spacing'),
|
||||
dialog: 'calc(var(--be-viewport-height, 100vh) * 0.9)',
|
||||
tray: 'calc(var(--be-viewport-height, 100vh) * 0.9)',
|
||||
}),
|
||||
zIndex: {
|
||||
toast: 160,
|
||||
tooltip: 150,
|
||||
'overlay-container': 140,
|
||||
popover: 130,
|
||||
tray: 120,
|
||||
modal: 110,
|
||||
},
|
||||
opacity: {
|
||||
2: '2%',
|
||||
4: '4%',
|
||||
6: '6%',
|
||||
8: '8%',
|
||||
12: '12%',
|
||||
26: '26%',
|
||||
15: '15%',
|
||||
87: '87%',
|
||||
selected: 'var(--be-selected-opacity)',
|
||||
hover: 'var(--be-hover-opacity)',
|
||||
focus: 'var(--be-focus-opacity)',
|
||||
},
|
||||
transitionProperty: {
|
||||
height: 'height',
|
||||
width: 'width',
|
||||
left: 'left',
|
||||
size: 'width, height',
|
||||
fill: 'fill',
|
||||
'transform-opacity': 'transform, opacity',
|
||||
'shadow-opacity': 'box-shadow, opacity',
|
||||
'bg-color': 'background-color',
|
||||
icon: 'transform, fill',
|
||||
button: 'background-color, box-shadow, border-color, color',
|
||||
},
|
||||
cursor: {
|
||||
'nwse-resize': 'nwse-resize',
|
||||
'nesw-resize': 'nesw-resize',
|
||||
'sw-resize': 'sw-resize',
|
||||
'se-resize': 'se-resize',
|
||||
inherit: 'inherit',
|
||||
},
|
||||
scale: {
|
||||
10: '.1',
|
||||
},
|
||||
backgroundPosition: {
|
||||
'1/2': '50%',
|
||||
},
|
||||
},
|
||||
sharedPlugins: plugin => {
|
||||
return [
|
||||
require('@tailwindcss/container-queries'),
|
||||
plugin(({addUtilities, addComponents}) => {
|
||||
addUtilities({
|
||||
// ICONS
|
||||
'.icon-2xs': {
|
||||
'font-size': '0.75rem',
|
||||
},
|
||||
'.icon-xs': {
|
||||
'font-size': '1rem',
|
||||
},
|
||||
'.icon-sm': {
|
||||
'font-size': '1.25rem',
|
||||
},
|
||||
'.icon-md': {
|
||||
'font-size': '1.5rem',
|
||||
},
|
||||
'.icon-lg': {
|
||||
'font-size': '2.1875rem',
|
||||
},
|
||||
'.icon-xl': {
|
||||
'font-size': '2.6875rem',
|
||||
},
|
||||
|
||||
// UTILS
|
||||
'.no-tap-highlight': {
|
||||
'-webkit-tap-highlight-color': 'transparent',
|
||||
},
|
||||
});
|
||||
addComponents({
|
||||
'.svg-icon': {
|
||||
'@apply select-none inline-block fill-current flex-shrink-0 transition-icon':
|
||||
{},
|
||||
},
|
||||
});
|
||||
}),
|
||||
];
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user