From e4db832e3b7406e6996157d9899ac56ada478c5d Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Fri, 5 Dec 2025 14:08:43 +0530 Subject: [PATCH 1/2] 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); } } } From 21b7a50cf11ac89e45b279861f9f247d5dd65894 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Fri, 5 Dec 2025 16:21:11 +0530 Subject: [PATCH 2/2] chore: remove spacing tokens --- apps/web/styles/emoji.css | 88 +-- apps/web/styles/power-k.css | 64 ++- .../propel/src/styles/react-day-picker.css | 534 +++++++++--------- packages/tailwind-config/variables.css | 63 +-- 4 files changed, 373 insertions(+), 376 deletions(-) diff --git a/apps/web/styles/emoji.css b/apps/web/styles/emoji.css index ce75bd9af6..399917735a 100644 --- a/apps/web/styles/emoji.css +++ b/apps/web/styles/emoji.css @@ -1,54 +1,56 @@ @reference "@plane/tailwind-config/index.css"; -.EmojiPickerReact { - --epr-category-navigation-button-size: 1.25rem !important; - --epr-category-label-height: 1.5rem !important; - --epr-emoji-size: 1.25rem !important; - --epr-picker-border-radius: 0.25rem !important; - --epr-horizontal-padding: 0.5rem !important; - --epr-emoji-padding: 0.5rem !important; - background-color: rgba(var(--color-background-100)) !important; -} +@layer components { + .EmojiPickerReact { + --epr-category-navigation-button-size: 1.25rem !important; + --epr-category-label-height: 1.5rem !important; + --epr-emoji-size: 1.25rem !important; + --epr-picker-border-radius: 0.25rem !important; + --epr-horizontal-padding: 0.5rem !important; + --epr-emoji-padding: 0.5rem !important; + background-color: rgba(var(--color-background-100)) !important; + } -.epr-main { - border: none !important; - border-radius: 0 !important; -} + .epr-main { + border: none !important; + border-radius: 0 !important; + } -.epr-emoji-category-label { - font-size: 0.7875rem !important; - background-color: rgba(var(--color-background-100), 0.8) !important; - @apply text-tertiary!; -} + .epr-emoji-category-label { + font-size: 0.7875rem !important; + background-color: rgba(var(--color-background-100), 0.8) !important; + @apply text-tertiary!; + } -.epr-category-nav, -.epr-header-overlay { - padding: 0.5rem !important; -} + .epr-category-nav, + .epr-header-overlay { + padding: 0.5rem !important; + } -button.epr-emoji:hover > *, -button.epr-emoji:focus > * { - background-color: rgba(var(--color-background-80)) !important; -} + button.epr-emoji:hover > *, + button.epr-emoji:focus > * { + background-color: rgba(var(--color-background-80)) !important; + } -input.epr-search { - font-size: 0.7875rem !important; - height: 2rem !important; - background: transparent !important; - @apply border-subtle!; - border-radius: 0.25rem !important; -} + input.epr-search { + font-size: 0.7875rem !important; + height: 2rem !important; + background: transparent !important; + @apply border-subtle!; + border-radius: 0.25rem !important; + } -input.epr-search::placeholder { - @apply text-placeholder!; -} + input.epr-search::placeholder { + @apply text-placeholder!; + } -button.epr-btn-clear-search:hover { - background-color: rgba(var(--color-background-80)) !important; - @apply text-tertiary!; -} + button.epr-btn-clear-search:hover { + background-color: rgba(var(--color-background-80)) !important; + @apply text-tertiary!; + } -.epr-emoji-variation-picker { - background-color: rgba(var(--color-background-100)) !important; - @apply border-subtle-1!; + .epr-emoji-variation-picker { + background-color: rgba(var(--color-background-100)) !important; + @apply border-subtle-1!; + } } diff --git a/apps/web/styles/power-k.css b/apps/web/styles/power-k.css index 7ceeeef0ef..c5b3c0b253 100644 --- a/apps/web/styles/power-k.css +++ b/apps/web/styles/power-k.css @@ -1,39 +1,41 @@ @reference "@plane/tailwind-config/index.css"; -[cmdk-group] { - padding-left: 0.45rem; - padding-right: 0.45rem; - margin-top: 0.5rem; -} +@layer components { + [cmdk-group] { + padding-left: 0.45rem; + padding-right: 0.45rem; + margin-top: 0.5rem; + } -[cmdk-group-heading] { - @apply text-tertiary; - font-size: 0.75rem; - font-weight: 500; - margin-bottom: 0.5rem; - padding-left: 0.45rem; - padding-right: 0.45rem; -} + [cmdk-group-heading] { + @apply text-tertiary; + font-size: 0.75rem; + font-weight: 500; + margin-bottom: 0.5rem; + padding-left: 0.45rem; + padding-right: 0.45rem; + } -[cmdk-item] { - 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] { + 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, -[cmdk-item][aria-selected="true"] { - @apply bg-layer-1; -} + [cmdk-item]:focus, + [cmdk-item][aria-selected="true"] { + @apply bg-layer-1; + } -[cmdk-item][aria-disabled="true"], -[cmdk-item][data-disabled="true"] { - @apply bg-transparent opacity-50 cursor-not-allowed; -} + [cmdk-item][aria-disabled="true"], + [cmdk-item][data-disabled="true"] { + @apply bg-transparent opacity-50 cursor-not-allowed; + } -[cmdk-item][aria-disabled="true"]:focus, -[cmdk-item][data-disabled="true"]:focus { - @apply bg-layer-1/70; + [cmdk-item][aria-disabled="true"]:focus, + [cmdk-item][data-disabled="true"]:focus { + @apply bg-layer-1/70; + } } diff --git a/packages/propel/src/styles/react-day-picker.css b/packages/propel/src/styles/react-day-picker.css index 7373b3f9cf..fbc034b379 100644 --- a/packages/propel/src/styles/react-day-picker.css +++ b/packages/propel/src/styles/react-day-picker.css @@ -1,311 +1,313 @@ -.rdp-root { - font-size: 12px; +@layer components { + .rdp-root { + font-size: 12px; - --rdp-cell-size: 40px; - /* Size of the day cells. */ - --rdp-caption-font-size: 1rem; - /* Font size for the caption labels. */ - --rdp-caption-navigation-size: 1.25rem; - /* Font size for the caption labels. */ - --rdp-accent-color: rgba(var(--color-primary-100)); - /* Accent color for the background of selected days. */ - --rdp-background-color: rgba(var(--color-primary-100), 0.5); - /* Background color for the hovered/focused elements. */ - --rdp-dark-background-color: rgba(var(--color-primary-300)); - /* Background color for the hovered/focused, already selected elements. */ - --rdp-outline: 2px solid var(--rdp-accent-color); - /* Outline border for focused elements */ - --rdp-selected-color: #ffffff; - /* Color of selected day text */ + --rdp-cell-size: 40px; + /* Size of the day cells. */ + --rdp-caption-font-size: 1rem; + /* Font size for the caption labels. */ + --rdp-caption-navigation-size: 1.25rem; + /* Font size for the caption labels. */ + --rdp-accent-color: rgba(var(--color-primary-100)); + /* Accent color for the background of selected days. */ + --rdp-background-color: rgba(var(--color-primary-100), 0.5); + /* Background color for the hovered/focused elements. */ + --rdp-dark-background-color: rgba(var(--color-primary-300)); + /* Background color for the hovered/focused, already selected elements. */ + --rdp-outline: 2px solid var(--rdp-accent-color); + /* Outline border for focused elements */ + --rdp-selected-color: #ffffff; + /* Color of selected day text */ - background: transparent; -} + background: transparent; + } -.rdp-root { - position: relative; /* Required to position the nav. */ - box-sizing: border-box; -} + .rdp-root { + position: relative; /* Required to position the nav. */ + box-sizing: border-box; + } -/* ---------- */ -/* Day Buttons */ -/* ----------- */ + /* ---------- */ + /* Day Buttons */ + /* ----------- */ -.rdp-day_button { - display: flex; - overflow: hidden; - align-items: center; - justify-content: center; - box-sizing: border-box; - width: var(--rdp-cell-size); - max-width: var(--rdp-cell-size); - height: var(--rdp-cell-size); - margin: 0; - border: 2px solid transparent; - border-radius: 50%; -} + .rdp-day_button { + display: flex; + overflow: hidden; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: var(--rdp-cell-size); + max-width: var(--rdp-cell-size); + height: var(--rdp-cell-size); + margin: 0; + border: 2px solid transparent; + border-radius: 50%; + } -.rdp-day.rdp-outside:not(.rdp-selected) .rdp-day_button { - opacity: 0.5; -} + .rdp-day.rdp-outside:not(.rdp-selected) .rdp-day_button { + opacity: 0.5; + } -.rdp-day.rdp-disabled:not(.rdp-selected) .rdp-day_button { - opacity: 0.25; -} + .rdp-day.rdp-disabled:not(.rdp-selected) .rdp-day_button { + opacity: 0.25; + } -.rdp-day:not(.rdp-disabled) .rdp-day_button { - cursor: pointer; -} + .rdp-day:not(.rdp-disabled) .rdp-day_button { + cursor: pointer; + } -.rdp-day:not(.rdp-selected, .rdp-disabled) .rdp-day_button:focus-visible { - color: inherit; - background-color: var(--rdp-background-color); -} + .rdp-day:not(.rdp-selected, .rdp-disabled) .rdp-day_button:focus-visible { + color: inherit; + background-color: var(--rdp-background-color); + } -.rdp-selected:not(.rdp-range_middle, .rdp-disabled) .rdp-day_button:focus-visible { - outline: var(--rdp-outline); - outline-offset: 2px; - background-color: var(--rdp-dark-background-color); - outline-width: thin; -} + .rdp-selected:not(.rdp-range_middle, .rdp-disabled) .rdp-day_button:focus-visible { + outline: var(--rdp-outline); + outline-offset: 2px; + background-color: var(--rdp-dark-background-color); + outline-width: thin; + } -.rdp-day:not(.rdp-disabled) .rdp-day_button:hover { - background-color: var(--rdp-background-color); -} + .rdp-day:not(.rdp-disabled) .rdp-day_button:hover { + background-color: var(--rdp-background-color); + } -.rdp-selected .rdp-day_button { - background-color: var(--rdp-accent-color); - border-radius: 50%; - color: var(--rdp-selected-color); - z-index: 1; -} + .rdp-selected .rdp-day_button { + background-color: var(--rdp-accent-color); + border-radius: 50%; + color: var(--rdp-selected-color); + z-index: 1; + } -.rdp-selected .rdp-day_button:hover:not(.rdp-disabled) { - background-color: var(--rdp-dark-background-color); -} + .rdp-selected .rdp-day_button:hover:not(.rdp-disabled) { + background-color: var(--rdp-dark-background-color); + } -.rdp-week { - margin: 0; - padding: 0; -} + .rdp-week { + margin: 0; + padding: 0; + } -.rdp-today:not(.rdp-outside) { - position: relative; -} + .rdp-today:not(.rdp-outside) { + position: relative; + } -.rdp-today:not(.rdp-outside)::after { - content: ""; - position: absolute; - left: 50%; - bottom: 2px; - width: 0.5em; - height: 0.5em; - background-color: var(--rdp-background-color); - border-radius: 100%; - transform: translate(-50%, 0); -} + .rdp-today:not(.rdp-outside)::after { + content: ""; + position: absolute; + left: 50%; + bottom: 2px; + width: 0.5em; + height: 0.5em; + background-color: var(--rdp-background-color); + border-radius: 100%; + transform: translate(-50%, 0); + } -.rdp-selected .rdp-day_button:focus-visible, -.rdp-selected .rdp-day_button:hover { - color: var(--rdp-selected-color); - opacity: 1; - background-color: var(--rdp-accent-color); -} + .rdp-selected .rdp-day_button:focus-visible, + .rdp-selected .rdp-day_button:hover { + color: var(--rdp-selected-color); + opacity: 1; + background-color: var(--rdp-accent-color); + } -.rdp-weekday { - vertical-align: middle; - font-weight: 700; - text-align: center; - font-size: 0.75em; - height: var(--rdp-cell-size); - padding: 0; - text-transform: uppercase; -} + .rdp-weekday { + vertical-align: middle; + font-weight: 700; + text-align: center; + font-size: 0.75em; + height: var(--rdp-cell-size); + padding: 0; + text-transform: uppercase; + } -/* ---------- */ -/* Top Nav */ -/* ---------- */ + /* ---------- */ + /* Top Nav */ + /* ---------- */ -.rdp-nav { - box-sizing: border-box; - position: absolute; - padding: inherit; + .rdp-nav { + box-sizing: border-box; + position: absolute; + padding: inherit; - top: 1.2em; - right: 1em; + top: 1.2em; + right: 1em; - display: flex; - align-items: center; -} + display: flex; + align-items: center; + } -.rdp-button_next, -.rdp-button_previous { - border: none; - background: none; - padding: 0; - margin: 0; - cursor: pointer; - font: inherit; - -moz-appearance: none; - -webkit-appearance: none; - display: inline-flex; - align-items: center; - justify-content: center; - position: relative; - appearance: none; - width: var(--rdp-caption-navigation-size); - height: var(--rdp-caption-navigation-size); - padding: 0.25em; - border-radius: 2px; -} + .rdp-button_next, + .rdp-button_previous { + border: none; + background: none; + padding: 0; + margin: 0; + cursor: pointer; + font: inherit; + -moz-appearance: none; + -webkit-appearance: none; + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + appearance: none; + width: var(--rdp-caption-navigation-size); + height: var(--rdp-caption-navigation-size); + padding: 0.25em; + border-radius: 2px; + } -.rdp-chevron { - fill: rgba(var(--color-text-200)); - height: 0.75rem; - width: 0.75rem; -} + .rdp-chevron { + fill: rgba(var(--color-text-200)); + height: 0.75rem; + width: 0.75rem; + } -.rdp-button_next:hover, -.rdp-button_previous:hover, -.rdp-button_next:focus-visible, -.rdp-button_previous:focus-visible { - background-color: rgba(var(--color-background-80)) !important; -} - -/* ---------- */ -/* Dropdowns */ -/* ---------- */ - -.rdp-dropdowns { - position: relative; - /* width: 100%; */ - display: inline-flex; - align-items: center; -} - -.rdp-dropdown { - appearance: none; - --webkit-appearance: none; - --moz-appearance: none; - position: absolute; - z-index: 2; - top: 0; - bottom: 0; - left: 0; - width: 100%; - margin: 0; - padding: 0; - opacity: 0; - border: none; - font-family: inherit; - font-size: 1rem; - line-height: inherit; - cursor: pointer; - background: transparent; - - &:hover { + .rdp-button_next:hover, + .rdp-button_previous:hover, + .rdp-button_next:focus-visible, + .rdp-button_previous:focus-visible { background-color: rgba(var(--color-background-80)) !important; } -} -.rdp-dropdown_root { - margin: 0; - position: relative; - display: inline-flex; - align-items: center; -} + /* ---------- */ + /* Dropdowns */ + /* ---------- */ -.rdp-months_dropdown { - text-transform: capitalize; -} - -.rdp-dropdown[data-disabled="true"] { - opacity: unset; - color: unset; -} - -.rdp-caption_label { - z-index: 1; - display: inline-flex; - align-items: center; - gap: 0.25rem; - margin: 0; - padding: 0 0.25em; - white-space: nowrap; - color: currentColor; - border: 0; - border: 2px solid transparent; - font-family: inherit; - font-size: var(--rdp-caption-font-size); - font-weight: 600; - background: transparent; - border-radius: 4px; -} - -.rdp-dropdown:not([data-disabled="true"]) { - &:focus-visible + .rdp-caption_label { - border: var(--rdp-outline); - border-radius: 6px; + .rdp-dropdowns { + position: relative; + /* width: 100%; */ + display: inline-flex; + align-items: center; } - &:hover { - & + .rdp-caption_label { + .rdp-dropdown { + appearance: none; + --webkit-appearance: none; + --moz-appearance: none; + position: absolute; + z-index: 2; + top: 0; + bottom: 0; + left: 0; + width: 100%; + margin: 0; + padding: 0; + opacity: 0; + border: none; + font-family: inherit; + font-size: 1rem; + line-height: inherit; + cursor: pointer; + background: transparent; + + &:hover { background-color: rgba(var(--color-background-80)) !important; } } -} -.rdp-dropdown_icon { - margin: 0 0 0 5px; -} + .rdp-dropdown_root { + margin: 0; + position: relative; + display: inline-flex; + align-items: center; + } -/* --------------- */ -/* Range selection */ -/* --------------- */ + .rdp-months_dropdown { + text-transform: capitalize; + } -.rdp-range_start, -.rdp-range_middle, -.rdp-range_end { - position: relative; -} + .rdp-dropdown[data-disabled="true"] { + opacity: unset; + color: unset; + } -.rdp-range_start::before, -.rdp-range_middle::before, -.rdp-range_end::before { - content: ""; - position: absolute; - background-color: var(--rdp-background-color); - top: 50%; - height: 100%; - width: 50%; - transform: translate(0, -50%); - z-index: -1; -} + .rdp-caption_label { + z-index: 1; + display: inline-flex; + align-items: center; + gap: 0.25rem; + margin: 0; + padding: 0 0.25em; + white-space: nowrap; + color: currentColor; + border: 0; + border: 2px solid transparent; + font-family: inherit; + font-size: var(--rdp-caption-font-size); + font-weight: 600; + background: transparent; + border-radius: 4px; + } -.rdp-range_start::before { - left: 50%; -} + .rdp-dropdown:not([data-disabled="true"]) { + &:focus-visible + .rdp-caption_label { + border: var(--rdp-outline); + border-radius: 6px; + } -.rdp-range_middle::before { - left: 50%; - width: 100%; - transform: translate(-50%, -50%); -} + &:hover { + & + .rdp-caption_label { + background-color: rgba(var(--color-background-80)) !important; + } + } + } -.rdp-range_end::before { - right: 50%; -} + .rdp-dropdown_icon { + margin: 0 0 0 5px; + } -.rdp-range_start.rdp-range_end::before { - display: none; -} + /* --------------- */ + /* Range selection */ + /* --------------- */ -.rdp-range_middle .rdp-day_button { - background-color: transparent; - color: inherit; -} + .rdp-range_start, + .rdp-range_middle, + .rdp-range_end { + position: relative; + } -.rdp-day.rdp-range_middle .rdp-day_button:hover, -.rdp-day.rdp-range_middle .rdp-day_button:focus-visible { - background-color: var(--rdp-background-color); - color: inherit; + .rdp-range_start::before, + .rdp-range_middle::before, + .rdp-range_end::before { + content: ""; + position: absolute; + background-color: var(--rdp-background-color); + top: 50%; + height: 100%; + width: 50%; + transform: translate(0, -50%); + z-index: -1; + } + + .rdp-range_start::before { + left: 50%; + } + + .rdp-range_middle::before { + left: 50%; + width: 100%; + transform: translate(-50%, -50%); + } + + .rdp-range_end::before { + right: 50%; + } + + .rdp-range_start.rdp-range_end::before { + display: none; + } + + .rdp-range_middle .rdp-day_button { + background-color: transparent; + color: inherit; + } + + .rdp-day.rdp-range_middle .rdp-day_button:hover, + .rdp-day.rdp-range_middle .rdp-day_button:focus-visible { + background-color: var(--rdp-background-color); + color: inherit; + } } diff --git a/packages/tailwind-config/variables.css b/packages/tailwind-config/variables.css index 042a1319d1..5327bffd94 100644 --- a/packages/tailwind-config/variables.css +++ b/packages/tailwind-config/variables.css @@ -34,26 +34,6 @@ --color-alpha-black-1100: oklch(0.1482 0.0034 196.79 / 90%); --color-alpha-black-1200: oklch(0.1482 0.0034 196.79 / 95%); - --background-color-backdrop: oklch(0 0 0 / 25%); - - /* ---------- Spacing ---------- */ - --spacing-0: 0; - --spacing-25: 0.0625rem; - --spacing-50: 0.125rem; - --spacing-100: 0.25rem; - --spacing-150: 0.375rem; - --spacing-200: 0.5rem; - --spacing-300: 0.75rem; - --spacing-400: 1rem; - --spacing-500: 1.25rem; - --spacing-600: 1.5rem; - --spacing-700: 1.75rem; - --spacing-800: 2rem; - --spacing-900: 2.25rem; - --spacing-1000: 2.5rem; - --spacing-1100: 2.75rem; - --spacing-1200: 3rem; - /* ---------- Border radius ---------- */ --radius-*: initial; --radius-none: 0; @@ -74,6 +54,15 @@ --border-width-xl: 2.5px; --default-border-width: 1px; + /* ---------- Shadow ---------- */ + --shadow-raised-0: 0px 1px 6px -1px #292f3d08, 0px 1px 4px 0px #292f3d0a; + --shadow-raised-1: 0px 1px 2px -1px #292f3d0f, 0px 1px 3px 0px #292f3d0d; + --shadow-raised-2: 0px 2px 4px -1px #292f3d0a, 0px 4px 6px -1px #292f3d0d; + --shadow-overlay-1: 0px 10px 10px -5px #292f3d0a, 0px 10px 40px -5px #292f3d0a; + --shadow-overlay-2: 0px 10px 10px -10px #292f3d0a, 0px 30px 60px -12px #292f3d1a; + --shadow-direction-left: -10px 0px 30px -5px #292f3d05, -5px 0px 80px -5px #292f3d0a; + --shadow-direction-right: 10px 0px 30px -5px #0000000a, 5px 0px 80px -5px #0000000a; + /* Neutral colors */ --color-neutral-white: oklch(1 0 0); --color-neutral-100: oklch(0.9851 0 129.63); @@ -301,6 +290,7 @@ --background-color-danger-transparent-hover: var(--color-red-100); --background-color-danger-transparent-active: var(--color-red-100); --background-color-danger-transparent-selected: var(--color-red-100); + --background-color-backdrop: var(--color-alpha-black-400); /* Border colors */ --border-color-subtle: var(--color-neutral-400); @@ -325,9 +315,9 @@ --text-color-placeholder: var(--color-neutral-900); --text-color-disabled: var(--color-neutral-800); --text-color-accent-primary: var(--color-brand-default); - --text-color-on-color: var(--color-neutral-100); --text-color-accent-secondary: var(--color-brand-700); - --text-color-on-color-disabled: hsla(201, 7%, 18%, 0.25); + --text-color-on-color: var(--color-neutral-100); + --text-color-on-color-disabled: var(--color-alpha-black-400); --text-color-inverse: var(--color-neutral-white); --text-color-success: var(--color-green-700); --text-color-success-primary: var(--color-green-900); @@ -357,7 +347,7 @@ --text-color-icon-disabled: var(--color-neutral-700); --text-color-icon-danger: var(--color-red-700); --text-color-icon-on-color: var(--color-neutral-white); - --text-color-icon-on-color-disabled: hsla(201, 7%, 18%, 0.25); + --text-color-icon-on-color-disabled: var(--color-alpha-black-400); --text-color-icon-inverse: var(--color-neutral-white); /* Link colors */ @@ -371,28 +361,28 @@ --label-indigo-hover: var(--extended-color-indigo-300); --label-indigo-icon: var(--extended-color-indigo-700); --label-indigo-text: var(--extended-color-indigo-700); - --label-indigo-border: hsla(0, 0%, 100%, 0); + --label-indigo-border: var(--extended-color-indigo-700); --label-indigo-focus: var(--extended-color-indigo-500); --label-emerald-bg: var(--extended-color-emerald-50); --label-emerald-bg-strong: var(--extended-color-emerald-600); --label-emerald-hover: var(--extended-color-emerald-200); --label-emerald-icon: var(--extended-color-emerald-600); --label-emerald-text: var(--extended-color-emerald-800); - --label-emerald-border: hsla(0, 0%, 100%, 0); + --label-emerald-border: var(--extended-color-emerald-800); --label-emerald-focus: var(--extended-color-emerald-700); --label-grey-bg: var(--extended-color-grey-50); --label-grey-bg-strong: var(--extended-color-grey-700); --label-grey-hover: var(--extended-color-grey-100); --label-grey-icon: var(--extended-color-grey-700); --label-grey-text: var(--extended-color-grey-700); - --label-grey-border: hsla(0, 0%, 100%, 0); + --label-grey-border: var(--extended-color-grey-700); --label-grey-focus: var(--extended-color-grey-500); --label-crimson-bg: var(--extended-color-crimson-50); --label-crimson-bg-strong: var(--extended-color-crimson-700); --label-crimson-hover: var(--extended-color-crimson-100); --label-crimson-icon: var(--extended-color-crimson-700); --label-crimson-text: var(--extended-color-crimson-700); - --label-crimson-border: hsla(0, 0%, 100%, 0); + --label-crimson-border: var(--extended-color-crimson-700); --label-crimson-focus: var(--extended-color-crimson-500); /* Illustration colors */ @@ -524,6 +514,7 @@ --background-color-danger-transparent-hover: var(--color-red-100); --background-color-danger-transparent-active: var(--color-red-100); --background-color-danger-transparent-selected: var(--color-red-100); + --background-color-backdrop: var(--color-alpha-white-400); /* Border colors */ --border-color-subtle: var(--color-neutral-400); @@ -548,9 +539,9 @@ --text-color-placeholder: var(--color-neutral-900); --text-color-disabled: var(--color-neutral-800); --text-color-accent-primary: var(--color-brand-default); - --text-color-on-color: var(--color-neutral-1200); --text-color-accent-secondary: var(--color-brand-700); - --text-color-on-color-disabled: hsla(201, 7%, 92%, 0.25); + --text-color-on-color: var(--color-neutral-1200); + --text-color-on-color-disabled: var(--color-alpha-white-400); --text-color-inverse: var(--color-neutral-black); --text-color-success: var(--color-green-700); --text-color-success-primary: var(--color-green-900); @@ -566,21 +557,21 @@ --text-color-icon-primary: var(--color-neutral-1200); --text-color-icon-accent-subtle: var(--color-brand-700); --text-color-icon-accent-primary: var(--color-brand-default); + --text-color-icon-accent-primary-inverse: var(--color-brand-900); + --text-color-icon-accent-secondary: var(--color-brand-1200); --text-color-icon-danger-primary: var(--color-red-900); --text-color-icon-danger-secondary: var(--color-red-700); --text-color-icon-success-primary: var(--color-green-900); --text-color-icon-success-secondary: var(--color-green-700); --text-color-icon-warning-primary: var(--color-amber-900); --text-color-icon-warning-secondary: var(--color-amber-700); - --text-color-icon-accent-primary-inverse: var(--color-brand-900); - --text-color-icon-accent-secondary: var(--color-brand-1200); --text-color-icon-secondary: var(--color-neutral-1100); --text-color-icon-tertiary: var(--color-neutral-1000); --text-color-icon-placeholder: var(--color-neutral-800); --text-color-icon-disabled: var(--color-neutral-700); --text-color-icon-danger: var(--color-red-700); --text-color-icon-on-color: var(--color-neutral-white); - --text-color-icon-on-color-disabled: hsla(201, 7%, 92%, 0.25); + --text-color-icon-on-color-disabled: var(--color-alpha-white-400); --text-color-icon-inverse: var(--color-neutral-black); /* Link colors */ @@ -594,28 +585,28 @@ --label-indigo-hover: var(--extended-color-indigo-700); --label-indigo-icon: var(--extended-color-indigo-500); --label-indigo-text: var(--extended-color-indigo-500); - --label-indigo-border: hsla(0, 0%, 100%, 0); + --label-indigo-border: var(--extended-color-indigo-500); --label-indigo-focus: var(--extended-color-indigo-400); --label-emerald-bg: var(--extended-color-emerald-700); --label-emerald-bg-strong: var(--extended-color-emerald-600); --label-emerald-hover: var(--extended-color-emerald-800); --label-emerald-icon: var(--extended-color-emerald-600); --label-emerald-text: var(--extended-color-emerald-400); - --label-emerald-border: hsla(0, 0%, 100%, 0); + --label-emerald-border: var(--extended-color-emerald-400); --label-emerald-focus: var(--extended-color-emerald-700); --label-grey-bg: var(--extended-color-grey-800); --label-grey-bg-strong: var(--extended-color-grey-500); --label-grey-hover: var(--extended-color-grey-700); --label-grey-icon: var(--extended-color-grey-500); --label-grey-text: var(--extended-color-grey-500); - --label-grey-border: hsla(0, 0%, 100%, 0); + --label-grey-border: var(--extended-color-grey-500); --label-grey-focus: var(--extended-color-grey-400); --label-crimson-bg: var(--extended-color-crimson-800); --label-crimson-bg-strong: var(--extended-color-crimson-500); --label-crimson-hover: var(--extended-color-crimson-700); --label-crimson-icon: var(--extended-color-crimson-500); --label-crimson-text: var(--extended-color-crimson-500); - --label-crimson-border: hsla(0, 0%, 100%, 0); + --label-crimson-border: var(--extended-color-crimson-500); --label-crimson-focus: var(--extended-color-crimson-400); /* Illustration colors */