From 83d946a4d9c64c79d0e2b37abda9de0c2dbbbae0 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Tue, 21 May 2024 10:27:14 +0300 Subject: [PATCH] Restore --- tailwindcss-primeui/index.js | 17 ++ tailwindcss-primeui/theme.js | 312 ++++++++++++++++++++ tailwindcss-primeui/utils/backface.js | 9 + tailwindcss-primeui/utils/delay.js | 11 + tailwindcss-primeui/utils/direction.js | 15 + tailwindcss-primeui/utils/duration.js | 11 + tailwindcss-primeui/utils/filleMode.js | 15 + tailwindcss-primeui/utils/iterationCount.js | 12 + tailwindcss-primeui/utils/playState.js | 9 + tailwindcss-primeui/utils/timingFunction.js | 15 + 10 files changed, 426 insertions(+) create mode 100644 tailwindcss-primeui/index.js create mode 100644 tailwindcss-primeui/theme.js create mode 100644 tailwindcss-primeui/utils/backface.js create mode 100644 tailwindcss-primeui/utils/delay.js create mode 100644 tailwindcss-primeui/utils/direction.js create mode 100644 tailwindcss-primeui/utils/duration.js create mode 100644 tailwindcss-primeui/utils/filleMode.js create mode 100644 tailwindcss-primeui/utils/iterationCount.js create mode 100644 tailwindcss-primeui/utils/playState.js create mode 100644 tailwindcss-primeui/utils/timingFunction.js diff --git a/tailwindcss-primeui/index.js b/tailwindcss-primeui/index.js new file mode 100644 index 000000000..ed36057cd --- /dev/null +++ b/tailwindcss-primeui/index.js @@ -0,0 +1,17 @@ +const plugin = require('tailwindcss/plugin'); + +module.exports = plugin( + (api) => { + require('./utils/backface')(api); + require('./utils/delay')(api); + require('./utils/direction')(api); + require('./utils/duration')(api); + require('./utils/fillMode')(api); + require('./utils/iterationCount')(api); + require('./utils/playState')(api); + require('./utils/timingFunction')(api); + }, + { + theme: require('./theme') + } +); diff --git a/tailwindcss-primeui/theme.js b/tailwindcss-primeui/theme.js new file mode 100644 index 000000000..93409ec03 --- /dev/null +++ b/tailwindcss-primeui/theme.js @@ -0,0 +1,312 @@ +const { transform } = require('typescript'); + +module.exports = { + extend: { + colors: { + primary: 'var(--p-primary-color)', + 'primary-contrast': 'var(--p-primary-contrast-color)', + 'primary-50': 'var(--p-primary-50)', + 'primary-100': 'var(--p-primary-100)', + 'primary-200': 'var(--p-primary-200)', + 'primary-300': 'var(--p-primary-300)', + 'primary-400': 'var(--p-primary-400)', + 'primary-500': 'var(--p-primary-500)', + 'primary-600': 'var(--p-primary-600)', + 'primary-700': 'var(--p-primary-700)', + 'primary-800': 'var(--p-primary-800)', + 'primary-900': 'var(--p-primary-900)', + 'primary-950': 'var(--p-primary-950)', + 'surface-0': 'var(--p-surface-0)', + 'surface-50': 'var(--p-surface-50)', + 'surface-100': 'var(--p-surface-100)', + 'surface-200': 'var(--p-surface-200)', + 'surface-300': 'var(--p-surface-300)', + 'surface-400': 'var(--p-surface-400)', + 'surface-500': 'var(--p-surface-500)', + 'surface-600': 'var(--p-surface-600)', + 'surface-700': 'var(--p-surface-700)', + 'surface-800': 'var(--p-surface-800)', + 'surface-900': 'var(--p-surface-900)', + 'surface-950': 'var(--p-surface-950)' + }, + keyframes: { + fadein: { + '0%': { + opacity: '0' + }, + '100%': { + opacity: '1' + } + }, + fadeout: { + '0%': { + opacity: '1' + }, + '100%': { + opacity: '0' + } + }, + scalein: { + '0%': { + opacity: '0', + transform: 'scaleY(0.8)', + transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)' + }, + '100%': { + opacity: '1', + transform: 'scaleY(1)' + } + }, + slidedown: { + '0%': { + maxHeight: '0' + }, + '100%': { + maxHeight: 'auto' + } + }, + slideup: { + '0%': { + maxHeight: '1000px' + }, + '100%': { + maxHeight: '0' + } + }, + fadeinleft: { + '0%': { + opacity: '0', + transform: 'translateX(-100%)', + transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)' + }, + '100%': { + opacity: '1', + transform: 'translateX(0%)' + } + }, + fadeoutleft: { + '0%': { + opacity: '1', + transform: 'translateX(0%)', + transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)' + }, + '100%': { + opacity: '0', + transform: 'translateX(-100%)' + } + }, + fadeinright: { + '0%': { + opacity: '0', + transform: 'translateX(100%)', + transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)' + }, + '100%': { + opacity: '1', + transform: 'translateX(0%)' + } + }, + fadeoutright: { + '0%': { + opacity: '1', + transform: 'translateX(0%)', + transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)' + }, + '100%': { + opacity: '0', + transform: 'translateX(100%)' + } + }, + fadeinup: { + '0%': { + opacity: '0', + transform: 'translateY(-100%)', + transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)' + }, + '100%': { + opacity: '1', + transform: 'translateY(0%)' + } + }, + fadeoutup: { + '0%': { + opacity: '1', + transform: 'translateY(0%)', + transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)' + }, + '100%': { + opacity: '0', + transform: 'translateY(-100%)' + } + }, + fadeindown: { + '0%': { + opacity: '0', + transform: 'translateY(100%)', + transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)' + }, + '100%': { + opacity: '1', + transform: 'translateY(0%)' + } + }, + fadeoutdown: { + '0%': { + opacity: '1', + transform: 'translateY(0%)', + transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)' + }, + '100%': { + opacity: '0', + transform: 'translateY(100%)' + } + }, + width: { + '0%': { + width: '0' + }, + '100%': { + width: '100%' + } + }, + flip: { + from: { + transform: 'perspective(2000px) rotateX(-100deg)' + }, + to: { + transform: 'perspective(2000px) rotateX(0)' + } + }, + flipleft: { + from: { + transform: 'perspective(2000px) rotateY(-100deg)', + opacity: '0' + }, + to: { + transform: 'perspective(2000px) rotateY(0)', + opacity: '1' + } + }, + flipright: { + from: { + transform: 'perspective(2000px) rotateY(100deg)', + opacity: '0' + }, + to: { + transform: 'perspective(2000px) rotateY(0)', + opacity: '1' + } + }, + flipup: { + from: { + transform: 'perspective(2000px) rotateX(-100deg)', + opacity: '0' + }, + to: { + transform: 'perspective(2000px) rotateX(0)', + opacity: '1' + } + }, + zoomin: { + from: { + transform: 'scale3d(0.3, 0.3, 0.3)', + opacity: '0' + }, + 50: { + opacity: '1' + } + }, + zoomindown: { + from: { + transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0)', + opacity: '0' + }, + 60: { + transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)', + opacity: '1' + } + }, + zoominleft: { + from: { + transform: 'scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0)', + opacity: '0' + }, + 60: { + transform: 'scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0)', + opacity: '1' + } + }, + zoominright: { + from: { + transform: 'scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0)', + opacity: '0' + }, + 60: { + transform: 'scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0)', + opacity: '1' + } + }, + zoominup: { + from: { + transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0)', + opacity: '0' + }, + 60: { + transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)', + opacity: '1' + } + } + }, + animation: { + fadein: 'fadein 0.15s linear', + fadeout: 'fadeout 0.15s linear', + slidedown: 'slidedown 0.45s ease-in-out', + slideup: 'slideup 0.45s cubic-bezier(0, 1, 0, 1)', + scalein: 'scalein 0.15s linear', + fadeinleft: 'fadeinleft 0.15s linear', + fadeoutleft: 'fadeoutleft 0.15s linear', + fadeinright: 'fadeinright 0.15s linear', + fadeoutright: 'fadeoutright 0.15s linear', + fadeinup: 'fadeinup 0.15s linear', + fadeoutup: 'fadeoutup 0.15s linear', + fadeindown: 'fadeindown 0.15s linear', + fadeoutdown: 'fadeoutdown 0.15s linear', + width: 'width 0.45s linear', + flip: 'flip 0.15s linear', + flipup: 'flipup 0.15s linear', + flipleft: 'flipleft 0.15s linear', + flipright: 'flipright 0.15s linear', + zoomin: 'zoomin 0.15s linear', + zoomindown: 'zoomindown 0.15s linear', + zoominleft: 'zoominleft 0.15s linear', + zoominright: 'zoominright 0.15s linear', + zoominup: 'zoominup 0.15s linear' + }, + animationDelay: { + 0: '0s', + 75: '75ms', + 100: '100ms', + 150: '150ms', + 200: '200ms', + 300: '300ms', + 400: '400ms', + 500: '500ms', + 700: '700ms', + 1000: '1000ms' + }, + animationDuration: { + 0: '0s', + 75: '75ms', + 100: '100ms', + 150: '150ms', + 200: '200ms', + 300: '300ms', + 400: '400ms', + 500: '500ms', + 700: '700ms', + 1000: '1000ms', + 2000: '2000ms', + 3000: '3000ms' + } + } +}; diff --git a/tailwindcss-primeui/utils/backface.js b/tailwindcss-primeui/utils/backface.js new file mode 100644 index 000000000..5d3c7e57f --- /dev/null +++ b/tailwindcss-primeui/utils/backface.js @@ -0,0 +1,9 @@ +module.exports = ({ addUtilities }) => + addUtilities({ + '.backface-visible': { + 'backface-visibility': 'visible' + }, + '.backface-hidden': { + 'backface-visibility': 'hidden' + } + }); diff --git a/tailwindcss-primeui/utils/delay.js b/tailwindcss-primeui/utils/delay.js new file mode 100644 index 000000000..79cc6344f --- /dev/null +++ b/tailwindcss-primeui/utils/delay.js @@ -0,0 +1,11 @@ +module.exports = ({ matchUtilities, theme }) => + matchUtilities( + { + 'animate-delay': (value) => ({ + 'animation-delay': value + }) + }, + { + values: theme('animationDelay') + } + ); diff --git a/tailwindcss-primeui/utils/direction.js b/tailwindcss-primeui/utils/direction.js new file mode 100644 index 000000000..5aaeff512 --- /dev/null +++ b/tailwindcss-primeui/utils/direction.js @@ -0,0 +1,15 @@ +module.exports = ({ addUtilities }) => + addUtilities({ + '.animate-normal': { + 'animation-direction': 'normal' + }, + '.animate-reverse': { + 'animation-direction': 'reverse' + }, + '.animate-alternate': { + 'animation-direction': 'alternate' + }, + '.animate-alternate-reverse': { + 'animation-direction': 'alternate-reverse' + } + }); diff --git a/tailwindcss-primeui/utils/duration.js b/tailwindcss-primeui/utils/duration.js new file mode 100644 index 000000000..c3a152ade --- /dev/null +++ b/tailwindcss-primeui/utils/duration.js @@ -0,0 +1,11 @@ +module.exports = ({ matchUtilities, theme }) => + matchUtilities( + { + 'animate-duration': (value) => ({ + 'animation-duration': value + }) + }, + { + values: theme('animationDuration') + } + ); diff --git a/tailwindcss-primeui/utils/filleMode.js b/tailwindcss-primeui/utils/filleMode.js new file mode 100644 index 000000000..11a66516f --- /dev/null +++ b/tailwindcss-primeui/utils/filleMode.js @@ -0,0 +1,15 @@ +module.exports = ({ addUtilities }) => + addUtilities({ + '.animate-fill-none': { + 'animation-fill-mode': 'none' + }, + '.animate-fill-forwards': { + 'animation-fill-mode': 'forwards' + }, + '.animate-fill-backwards': { + 'animation-fill-mode': 'backwards' + }, + '.animate-fill-both': { + 'animation-fill-mode': 'both' + } + }); diff --git a/tailwindcss-primeui/utils/iterationCount.js b/tailwindcss-primeui/utils/iterationCount.js new file mode 100644 index 000000000..dadb2eb9a --- /dev/null +++ b/tailwindcss-primeui/utils/iterationCount.js @@ -0,0 +1,12 @@ +module.exports = ({ addUtilities }) => + addUtilities({ + '.animate-infinite': { + 'animation-iteration-count': 'infinite' + }, + '.animate-once': { + 'animation-iteration-count': '1' + }, + '.animate-twice': { + 'animation-iteration-count': '2' + } + }); diff --git a/tailwindcss-primeui/utils/playState.js b/tailwindcss-primeui/utils/playState.js new file mode 100644 index 000000000..721687d7e --- /dev/null +++ b/tailwindcss-primeui/utils/playState.js @@ -0,0 +1,9 @@ +module.exports = ({ addUtilities }) => + addUtilities({ + '.animate-running': { + 'animation-play-state': 'running' + }, + '.animate-paused': { + 'animation-play-state': 'paused' + } + }); diff --git a/tailwindcss-primeui/utils/timingFunction.js b/tailwindcss-primeui/utils/timingFunction.js new file mode 100644 index 000000000..b3f3cc429 --- /dev/null +++ b/tailwindcss-primeui/utils/timingFunction.js @@ -0,0 +1,15 @@ +module.exports = ({ addUtilities }) => + addUtilities({ + '.animate-ease-linear': { + 'animation-timing-function': 'linear' + }, + '.animate-ease-in': { + 'animation-timing-function': 'cubic-bezier(0.4, 0, 1, 1)' + }, + '.animate-ease-out': { + 'animation-timing-function': 'cubic-bezier(0, 0, 0.2, 1)' + }, + '.animate-ease-in-out': { + 'animation-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)' + } + });