From e4db832e3b7406e6996157d9899ac56ada478c5d Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Fri, 5 Dec 2025 14:08:43 +0530 Subject: [PATCH] chore: update animations --- apps/web/styles/emoji.css | 10 +-- apps/web/styles/globals.css | 6 +- apps/web/styles/power-k.css | 2 +- packages/editor/src/styles/editor.css | 6 +- packages/propel/.storybook/preview.ts | 3 +- packages/propel/.storybook/tailwind.css | 2 + .../src/animated-counter/animated-counter.tsx | 29 +++------ .../propel/src/empty-state/assets/helper.tsx | 12 ++-- packages/tailwind-config/animations.css | 65 ++++++++++++++++++- packages/tailwind-config/index.css | 53 --------------- packages/tailwind-config/variables.css | 28 ++++---- 11 files changed, 110 insertions(+), 106 deletions(-) create mode 100644 packages/propel/.storybook/tailwind.css diff --git a/apps/web/styles/emoji.css b/apps/web/styles/emoji.css index bf18012481..ce75bd9af6 100644 --- a/apps/web/styles/emoji.css +++ b/apps/web/styles/emoji.css @@ -18,7 +18,7 @@ .epr-emoji-category-label { font-size: 0.7875rem !important; background-color: rgba(var(--color-background-100), 0.8) !important; - @apply !text-tertiary; + @apply text-tertiary!; } .epr-category-nav, @@ -35,20 +35,20 @@ input.epr-search { font-size: 0.7875rem !important; height: 2rem !important; background: transparent !important; - @apply !border-subtle; + @apply border-subtle!; border-radius: 0.25rem !important; } input.epr-search::placeholder { - @apply !text-placeholder; + @apply text-placeholder!; } button.epr-btn-clear-search:hover { background-color: rgba(var(--color-background-80)) !important; - @apply !text-tertiary; + @apply text-tertiary!; } .epr-emoji-variation-picker { background-color: rgba(var(--color-background-100)) !important; - @apply !border-subtle-1; + @apply border-subtle-1!; } diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css index efe98f74e4..3d530b8848 100644 --- a/apps/web/styles/globals.css +++ b/apps/web/styles/globals.css @@ -124,16 +124,16 @@ } .epr-search-container > input { - @apply !bg-surface-2 !text-primary; + @apply bg-surface-2! text-primary!; border: none !important; } .epr-search-container > input::placeholder { - @apply !text-placeholder; + @apply text-placeholder!; } .epr-search-container > .epr-icn-search { - @apply !text-placeholder; + @apply text-placeholder!; } /* Lock icon animations */ diff --git a/apps/web/styles/power-k.css b/apps/web/styles/power-k.css index 9d0683e000..7ceeeef0ef 100644 --- a/apps/web/styles/power-k.css +++ b/apps/web/styles/power-k.css @@ -16,11 +16,11 @@ } [cmdk-item] { - @apply flex items-center justify-between cursor-pointer; border-radius: 0.375rem; padding: 0.5rem; font-size: 0.825rem; line-height: 1.25rem; + @apply flex items-center justify-between cursor-pointer; } [cmdk-item]:focus, diff --git a/packages/editor/src/styles/editor.css b/packages/editor/src/styles/editor.css index ef5bca2630..c049a4069f 100644 --- a/packages/editor/src/styles/editor.css +++ b/packages/editor/src/styles/editor.css @@ -84,7 +84,7 @@ /* Custom gap cursor styles */ .ProseMirror-gapcursor::after { - border-top: 1px solid rgb(var(--color-text-100)) !important; + @apply border-t! border-strong!; } /* to-do list */ @@ -105,7 +105,7 @@ ul[data-type="taskList"] li > div { } ul[data-type="taskList"] li > label input[type="checkbox"] { - border: 1px solid rgba(var(--color-text-100), 0.2) !important; + @apply border! border-strong/20!; outline: none; border-radius: 2px; transform: scale(1.05); @@ -151,7 +151,7 @@ ul[data-type="taskList"] li > label input[type="checkbox"] { width: 0.8rem; height: 0.8rem; position: relative; - border: 1.5px solid rgb(var(--color-text-100)); + @apply border-md border-subtle-1; margin-right: 0.2rem; margin-top: 0.15rem; diff --git a/packages/propel/.storybook/preview.ts b/packages/propel/.storybook/preview.ts index b1402e0bd0..917f3f3739 100644 --- a/packages/propel/.storybook/preview.ts +++ b/packages/propel/.storybook/preview.ts @@ -1,6 +1,5 @@ import type { Preview } from "@storybook/react-vite"; -import "@plane/tailwind-config/global.css"; -import "../src/styles/react-day-picker.css"; +import "./tailwind.css"; const parameters: Preview["parameters"] = { controls: { diff --git a/packages/propel/.storybook/tailwind.css b/packages/propel/.storybook/tailwind.css new file mode 100644 index 0000000000..aca4ed08ea --- /dev/null +++ b/packages/propel/.storybook/tailwind.css @@ -0,0 +1,2 @@ +@import "@plane/tailwind-config/index.css"; +@import "../src/styles/react-day-picker.css"; diff --git a/packages/propel/src/animated-counter/animated-counter.tsx b/packages/propel/src/animated-counter/animated-counter.tsx index ed4402adb7..849bad1175 100644 --- a/packages/propel/src/animated-counter/animated-counter.tsx +++ b/packages/propel/src/animated-counter/animated-counter.tsx @@ -51,17 +51,15 @@ export function AnimatedCounter({ count, className, size = "md" }: AnimatedCount key={`prev-${animationKey}`} className={cn( "absolute inset-0 flex items-center justify-center font-medium", - "animate-[slideOut_0.25s_ease-out_forwards]", + "animate-slide-out", direction === "up" && "[--slide-out-dir:-100%]", direction === "down" && "[--slide-out-dir:100%]", - sizeClass + sizeClass, + { + "animate-slide-out animate-fade-out": isAnimating && direction === "up", + "animate-slide-out-down animate-fade-out": isAnimating && direction === "down", + } )} - style={{ - animation: - direction === "up" - ? "slideOut 0.25s ease-out forwards, fadeOut 0.25s ease-out forwards" - : "slideOutDown 0.25s ease-out forwards, fadeOut 0.25s ease-out forwards", - }} > {prevCount} @@ -72,21 +70,14 @@ export function AnimatedCounter({ count, className, size = "md" }: AnimatedCount key={`current-${animationKey}`} className={cn( "flex items-center justify-center font-medium", - isAnimating && "animate-[slideIn_0.25s_ease-out_forwards]", !isAnimating && "opacity-100", sizeClass, + { + "animate-slide-in-from-bottom": isAnimating && direction === "up", + "animate-slide-in-from-top": isAnimating && direction === "down", + }, className )} - style={ - isAnimating - ? { - animation: - direction === "up" - ? "slideInFromBottom 0.25s ease-out forwards" - : "slideInFromTop 0.25s ease-out forwards", - } - : undefined - } > {displayCount} diff --git a/packages/propel/src/empty-state/assets/helper.tsx b/packages/propel/src/empty-state/assets/helper.tsx index 0ef1a11148..ade94441ff 100644 --- a/packages/propel/src/empty-state/assets/helper.tsx +++ b/packages/propel/src/empty-state/assets/helper.tsx @@ -1,12 +1,14 @@ export const ILLUSTRATION_COLOR_TOKEN_MAP = { fill: { - primary: "rgba(var(--color-background-100))", // white or #fff, - secondary: "rgba(var(--color-background-90))", // #F4F5F5 - tertiary: "rgba(var(--color-background-80))", // #E5E7E8 + primary: "var(--illustration-fill-primary)", + secondary: "var(--illustration-fill-secondary)", + tertiary: "var(--illustration-fill-tertiary)", + quaternary: "var(--illustration-fill-quaternary)", }, stroke: { - primary: "rgba(var(--color-text-200))", // #1D1F20 - secondary: "rgba(var(--color-border-400))", // #7A8185 or #CFD2D3 + primary: "var(--illustration-stroke-primary)", + secondary: "var(--illustration-stroke-secondary)", + tertiary: "var(--illustration-stroke-tertiary)", }, }; diff --git a/packages/tailwind-config/animations.css b/packages/tailwind-config/animations.css index c5468e7da1..3c846184c2 100644 --- a/packages/tailwind-config/animations.css +++ b/packages/tailwind-config/animations.css @@ -1,6 +1,6 @@ @theme { + /* slide up */ --animate-slide-up: slide-up 0.3s ease-out forwards; - @keyframes slide-up { from { transform: translateY(10px); @@ -11,4 +11,67 @@ opacity: 1; } } + + /* slide in from bottom */ + --animate-slide-in-from-bottom: slideInFromBottom 0.25s ease-out forwards; + @keyframes slideInFromBottom { + 0% { + transform: translateY(100%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } + } + + /* slide in from top */ + --animate-slide-in-from-top: slideInFromTop 0.25s ease-out forwards; + @keyframes slideInFromTop { + 0% { + transform: translateY(-100%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } + } + + /* slide out */ + --animate-slide-out: slideOut 0.25s ease-out forwards; + @keyframes slideOut { + 0% { + transform: translateY(0); + opacity: 1; + } + 100% { + transform: translateY(-100%); + opacity: 0; + } + } + + /* slide out down */ + --animate-slide-out-down: slideOutDown 0.25s ease-out forwards; + @keyframes slideOutDown { + 0% { + transform: translateY(0); + opacity: 1; + } + 100% { + transform: translateY(100%); + opacity: 0; + } + } + + /* fade out */ + --animate-fade-out: fadeOut 0.25s ease-out forwards; + @keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } + } } diff --git a/packages/tailwind-config/index.css b/packages/tailwind-config/index.css index 43aee30f38..4c1dd6b1d0 100644 --- a/packages/tailwind-config/index.css +++ b/packages/tailwind-config/index.css @@ -350,56 +350,3 @@ div.web-view-spinner div.bar12 { .disable-autofill-style:-webkit-autofill:active { -webkit-background-clip: text; } - -@keyframes slideInFromBottom { - 0% { - transform: translateY(100%); - opacity: 0; - } - 100% { - transform: translateY(0); - opacity: 1; - } -} - -@keyframes slideInFromTop { - 0% { - transform: translateY(-100%); - opacity: 0; - } - 100% { - transform: translateY(0); - opacity: 1; - } -} - -@keyframes slideOut { - 0% { - transform: translateY(0); - opacity: 1; - } - 100% { - transform: translateY(-100%); - opacity: 0; - } -} - -@keyframes slideOutDown { - 0% { - transform: translateY(0); - opacity: 1; - } - 100% { - transform: translateY(100%); - opacity: 0; - } -} - -@keyframes fadeOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} diff --git a/packages/tailwind-config/variables.css b/packages/tailwind-config/variables.css index 5551969649..042a1319d1 100644 --- a/packages/tailwind-config/variables.css +++ b/packages/tailwind-config/variables.css @@ -396,13 +396,13 @@ --label-crimson-focus: var(--extended-color-crimson-500); /* Illustration colors */ - --illustration-fill-white: var(--color-neutral-white); - --illustration-fill-1: var(--color-neutral-200); - --illustration-fill-2: var(--color-neutral-400); - --illustration-fill-3: var(--color-neutral-700); - --illustration-stroke-1: var(--color-neutral-700); - --illustration-stroke-2: var(--color-neutral-800); - --illustration-stroke-3: var(--color-neutral-1200); + --illustration-fill-primary: var(--color-neutral-white); + --illustration-fill-secondary: var(--color-neutral-200); + --illustration-fill-tertiary: var(--color-neutral-400); + --illustration-fill-quaternary: var(--color-neutral-700); + --illustration-stroke-primary: var(--color-neutral-700); + --illustration-stroke-secondary: var(--color-neutral-800); + --illustration-stroke-tertiary: var(--color-neutral-1200); } @layer theme { @@ -619,13 +619,13 @@ --label-crimson-focus: var(--extended-color-crimson-400); /* Illustration colors */ - --illustration-fill-white: var(--color-neutral-400); - --illustration-fill-1: var(--color-neutral-500); - --illustration-fill-2: var(--color-neutral-700); - --illustration-fill-3: var(--color-neutral-700); - --illustration-stroke-1: var(--color-neutral-700); - --illustration-stroke-2: var(--color-neutral-800); - --illustration-stroke-3: var(--color-neutral-1000); + --illustration-fill-primary: var(--color-neutral-400); + --illustration-fill-secondary: var(--color-neutral-500); + --illustration-fill-tertiary: var(--color-neutral-700); + --illustration-fill-quaternary: var(--color-neutral-700); + --illustration-stroke-primary: var(--color-neutral-700); + --illustration-stroke-secondary: var(--color-neutral-800); + --illustration-stroke-tertiary: var(--color-neutral-1000); } } }