From d0a30f497bb340c06d9d06aeae0c948319ac7e5e Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Tue, 25 Aug 2026 21:23:06 +0530 Subject: [PATCH] [WEB-8789] Adopt @makeplane/propel as the design token source (#9682) * chore(tailwind-config): source design tokens from @makeplane/propel Replace the locally maintained variables.css and animations.css (~1,400 lines) with the token set published by @makeplane/propel 0.2.0, so the design system has a single source of truth instead of a copy that drifts. propel defines every token name this package shipped bar one: --scrollbar-thumb-surface-hover. Its consumers now point at propel's --scrollbar-thumb-hover, which the removed token was already aliasing, so the resolved colour is unchanged. Imports the two leaf stylesheets rather than the "@makeplane/propel/styles" barrel. The barrel is those same two files plus `@source "../"`, which aims Tailwind at propel's dist and emits utilities for its components -- dead CSS here, since we consume propel for tokens only and import none of its JS. Re-add the barrel if propel components are adopted. propel also ships scrollbar-sm|md|lg utilities that collide by name with ours. Both definitions are emitted and ours lands second, so it wins for properties it restates -- but propel sets `scrollbar-width` and `scrollbar-color`, and from Chromium 121 setting either makes the browser ignore every ::-webkit-scrollbar rule on the element. Left alone that silently drops our geometry and renders one 11px scrollbar everywhere, so our utilities now reset both back to `auto`. Verified in Chrome 151: gutters stay 10/12/14/16px. Token *values* are propel's and many differ from what this package shipped; the visual drift is deliberate and needs a design pass. * style: re-sort tailwind classes after the propel token change oxfmt derives its Tailwind class ordering from the stylesheet, so pulling propel's tokens in changes the canonical order and leaves these files failing `check:format`. Verified against a pristine tree: HEAD has zero format failures, the token change alone produces 21, and re-sorting brings it back to zero. Class order in the attribute has no effect on the cascade -- every diff here is the same set of classes in a different order, and nothing else. Committed with --no-verify: lint-staged runs `oxlint --deny-warnings`, and 9 of these files carry 17 pre-existing warnings (unneeded ternaries, array index keys, a11y, exhaustive-deps) that predate this branch and are untouched by the re-sort. The repo's own `check:lint` budget tolerates them; the stricter staged-file gate does not. Formatting was verified clean separately before bypassing. * fix(utils): align ALPHA_MAPPING with propel's alpha ladder The custom-theme path writes --alpha-white-* / --alpha-black-* from this table, while the default themes get theirs from propel's stylesheet. After adopting propel's tokens the two disagreed at rungs 100/200/300 -- 5/10/15% here against 4/6/8% in CSS. Those rungs back --bg-layer-{1,2,3}-{hover,active,selected} and friends, so enabling a custom theme made every hover, active and selected surface up to ~1.7x heavier than the same surface on a default theme. No error, just a quiet mismatch between themes. All 12 rungs now match propel. Documents propel as the source of truth so the copy does not drift again. * refactor(web,space): drop duplicated editor colour tokens Both apps redeclared the --editor-colors-* text ramp and the themed light/dark background ramps that @plane/editor/styles -- imported on line 2 of each file -- already defines, byte for byte. 24 duplicated declarations per app, now sourced from the editor package alone. Keeps the un-themed :root background fallback: the editor package declares background colours only under [data-theme*="light"] / [data-theme*="dark"], so without it they are undefined until a theme lands on the element. Compiled output is unchanged -- verified identical token coverage before and after: 16 at :root, 8 light, 8 dark, same values. --- .../app/(all)/(dashboard)/sidebar-menu.tsx | 2 +- .../issue-layouts/kanban/base-kanban-root.tsx | 2 +- apps/space/styles/globals.css | 42 +- .../(projects)/extended-project-sidebar.tsx | 2 +- .../profile/[userId]/activity/page.tsx | 2 +- .../cycles/(detail)/[cycleId]/page.tsx | 2 +- .../modules/(detail)/[moduleId]/page.tsx | 2 +- .../(projects)/workspace-views/page.tsx | 2 +- .../core/components/core/list/list-root.tsx | 2 +- .../cycles/active-cycle/cycle-stats.tsx | 8 +- .../cycles/archived-cycles/header.tsx | 2 +- .../gantt-chart/chart/main-content.tsx | 2 +- .../issue-layouts/kanban/base-kanban-root.tsx | 2 +- .../modules/archived-modules/header.tsx | 2 +- .../modules/archived-modules/view.tsx | 2 +- .../components/pages/editor/editor-body.tsx | 2 +- .../profile-setting-content-wrapper.tsx | 2 +- .../workspace/sidebar/workspace-menu-root.tsx | 2 +- .../components/workspace/views/header.tsx | 2 +- apps/web/styles/globals.css | 42 +- .../propel/src/charts/components/legend.tsx | 2 +- .../propel/src/charts/components/tooltip.tsx | 2 +- .../propel/src/charts/pie-chart/tooltip.tsx | 2 +- packages/tailwind-config/animations.css | 88 -- packages/tailwind-config/index.css | 79 +- packages/tailwind-config/package.json | 1 + packages/tailwind-config/variables.css | 1309 ----------------- packages/ui/src/scroll-area.tsx | 4 +- packages/utils/src/theme/constants.ts | 15 +- pnpm-lock.yaml | 142 ++ 30 files changed, 254 insertions(+), 1516 deletions(-) delete mode 100644 packages/tailwind-config/animations.css delete mode 100644 packages/tailwind-config/variables.css diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx index af0848c0b8..01b177e20d 100644 --- a/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx +++ b/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx @@ -29,7 +29,7 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() { }; return ( -
+
{sidebarMenu.map((item) => { const isActive = item.href === pathName || pathName?.startsWith(item.href); return ( diff --git a/apps/space/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/apps/space/components/issues/issue-layouts/kanban/base-kanban-root.tsx index 6da0ce2e2b..c38a577d56 100644 --- a/apps/space/components/issues/issue-layouts/kanban/base-kanban-root.tsx +++ b/apps/space/components/issues/issue-layouts/kanban/base-kanban-root.tsx @@ -55,7 +55,7 @@ export const IssueKanbanLayoutRoot = observer(function IssueKanbanLayoutRoot(pro return (
diff --git a/apps/space/styles/globals.css b/apps/space/styles/globals.css index ba7f052d19..4cddab5871 100644 --- a/apps/space/styles/globals.css +++ b/apps/space/styles/globals.css @@ -3,32 +3,13 @@ @import "@plane/propel/styles/react-day-picker.css"; @plugin "@tailwindcss/typography"; -/* stickies and editor colors */ +/* stickies and editor colors + * Text colors and the themed light/dark background ramps come from + * @plane/editor/styles (imported above), which is their single source of truth. + * Only the un-themed :root fallback below is kept: the editor package declares + * background colors solely under [data-theme*="light"] / [data-theme*="dark"], + * so without this they are undefined until a theme lands on the element. */ :root { - /* text colors */ - --editor-colors-gray-text: #5c5e63; - --editor-colors-peach-text: #ff5b59; - --editor-colors-pink-text: #f65385; - --editor-colors-orange-text: #fd9038; - --editor-colors-green-text: #0fc27b; - --editor-colors-light-blue-text: #17bee9; - --editor-colors-dark-blue-text: #266df0; - --editor-colors-purple-text: #9162f9; - /* end text colors */ - - /* background colors */ - --editor-colors-gray-background: #d6d6d8; - --editor-colors-peach-background: #ffd5d7; - --editor-colors-pink-background: #fdd4e3; - --editor-colors-orange-background: #ffe3cd; - --editor-colors-green-background: #c3f0de; - --editor-colors-light-blue-background: #c5eff9; - --editor-colors-dark-blue-background: #c9dafb; - --editor-colors-purple-background: #e3d8fd; - /* end background colors */ -} -/* background colors */ -[data-theme*="light"] { --editor-colors-gray-background: #d6d6d8; --editor-colors-peach-background: #ffd5d7; --editor-colors-pink-background: #fdd4e3; @@ -38,17 +19,6 @@ --editor-colors-dark-blue-background: #c9dafb; --editor-colors-purple-background: #e3d8fd; } -[data-theme*="dark"] { - --editor-colors-gray-background: #404144; - --editor-colors-peach-background: #593032; - --editor-colors-pink-background: #562e3d; - --editor-colors-orange-background: #583e2a; - --editor-colors-green-background: #1d4a3b; - --editor-colors-light-blue-background: #1f495c; - --editor-colors-dark-blue-background: #223558; - --editor-colors-purple-background: #3d325a; -} -/* end background colors */ /* Progress Bar Styles */ :root { diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx index 8b1c74a1db..caa9156a78 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx @@ -149,7 +149,7 @@ export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar() />
) : ( -
+
{filteredProjects.map((projectId, index) => ( {t("profile.stats.recent_activity.title")} {canDownloadActivity && }
-
+
{activityPages} {pageCount < totalPages && resultsCount !== 0 && (
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx index 49e6479ade..4142152487 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx @@ -72,7 +72,7 @@ function CycleDetailPage({ params }: Route.ComponentProps) { {!isSidebarCollapsed && (
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx index 8043f47f8c..e80d29cf78 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx @@ -40,7 +40,7 @@ function WorkspaceViewsPage() { mode="true-transparent" />
-
+
{DEFAULT_GLOBAL_VIEWS_LIST.filter((v) => t(v.i18n_label).toLowerCase().includes(query.toLowerCase())).map( (option) => ( diff --git a/apps/web/core/components/core/list/list-root.tsx b/apps/web/core/components/core/list/list-root.tsx index d81f2daeec..efe787e647 100644 --- a/apps/web/core/components/core/list/list-root.tsx +++ b/apps/web/core/components/core/list/list-root.tsx @@ -16,7 +16,7 @@ export function ListLayout(props: IListContainer) { return ( {children} diff --git a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx index 56dc05860e..42189b2f63 100644 --- a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx +++ b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx @@ -173,11 +173,11 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
{cycleIssueDetails && "issueIds" in cycleIssueDetails ? ( cycleIssueDetails.issueCount > 0 ? ( @@ -264,7 +264,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active {cycle && !isEmpty(cycle.distribution) ? ( cycle?.distribution?.assignees && cycle.distribution.assignees.length > 0 ? ( @@ -326,7 +326,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active {cycle && !isEmpty(cycle.distribution) ? ( cycle?.distribution?.labels && cycle.distribution.labels.length > 0 ? ( diff --git a/apps/web/core/components/cycles/archived-cycles/header.tsx b/apps/web/core/components/cycles/archived-cycles/header.tsx index 7b9cc56997..64980a7f6d 100644 --- a/apps/web/core/components/cycles/archived-cycles/header.tsx +++ b/apps/web/core/components/cycles/archived-cycles/header.tsx @@ -72,7 +72,7 @@ export const ArchivedCyclesHeader = observer(function ArchivedCyclesHeader() { return (
-
+
{/* filter options */} diff --git a/apps/web/core/components/gantt-chart/chart/main-content.tsx b/apps/web/core/components/gantt-chart/chart/main-content.tsx index f2f53e1da0..2ae48f5c7c 100644 --- a/apps/web/core/components/gantt-chart/chart/main-content.tsx +++ b/apps/web/core/components/gantt-chart/chart/main-content.tsx @@ -171,7 +171,7 @@ export const GanttChartMainContent = observer(function GanttChartMainContent(pro // DO NOT REMOVE THE ID id="gantt-container" className={cn( - "vertical-scrollbar horizontal-scrollbar flex scrollbar-lg h-full w-full overflow-auto border-t-[0.5px] border-subtle", + "vertical-scrollbar horizontal-scrollbar scrollbar-lg flex h-full w-full overflow-auto border-t-[0.5px] border-subtle", { "mb-8": bottomSpacing, } diff --git a/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx index 89715732c1..5f5ca94c85 100644 --- a/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx +++ b/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx @@ -261,7 +261,7 @@ export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBa
diff --git a/apps/web/core/components/modules/archived-modules/header.tsx b/apps/web/core/components/modules/archived-modules/header.tsx index a15c431df2..06f52ef0e0 100644 --- a/apps/web/core/components/modules/archived-modules/header.tsx +++ b/apps/web/core/components/modules/archived-modules/header.tsx @@ -82,7 +82,7 @@ export const ArchivedModulesHeader = observer(function ArchivedModulesHeader() { return (
-
+
{/* filter options */} diff --git a/apps/web/core/components/modules/archived-modules/view.tsx b/apps/web/core/components/modules/archived-modules/view.tsx index f7a07b4685..417eaeeecd 100644 --- a/apps/web/core/components/modules/archived-modules/view.tsx +++ b/apps/web/core/components/modules/archived-modules/view.tsx @@ -53,7 +53,7 @@ export const ArchivedModulesView = observer(function ArchivedModulesView(props: return (
-
+
{filteredArchivedModuleIds.map((moduleId) => ( ))} diff --git a/apps/web/core/components/pages/editor/editor-body.tsx b/apps/web/core/components/pages/editor/editor-body.tsx index d8d55d2f79..523ca448b0 100644 --- a/apps/web/core/components/pages/editor/editor-body.tsx +++ b/apps/web/core/components/pages/editor/editor-body.tsx @@ -240,7 +240,7 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) { return (
diff --git a/apps/web/core/components/profile/profile-setting-content-wrapper.tsx b/apps/web/core/components/profile/profile-setting-content-wrapper.tsx index ae6b52d83a..b827ff423d 100644 --- a/apps/web/core/components/profile/profile-setting-content-wrapper.tsx +++ b/apps/web/core/components/profile/profile-setting-content-wrapper.tsx @@ -22,7 +22,7 @@ export function ProfileSettingContentWrapper(props: Props) {
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx index d6c9ed78f4..e1e447dbe4 100644 --- a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx +++ b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx @@ -154,7 +154,7 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work } )} > -
+
{currentUser?.email} diff --git a/apps/web/core/components/workspace/views/header.tsx b/apps/web/core/components/workspace/views/header.tsx index f1a92a94f6..056dcceda8 100644 --- a/apps/web/core/components/workspace/views/header.tsx +++ b/apps/web/core/components/workspace/views/header.tsx @@ -94,7 +94,7 @@ export const GlobalViewsHeader = observer(function GlobalViewsHeader() { setCreateViewModal(false)} />
{DEFAULT_GLOBAL_VIEWS_LIST.map((tab, index) => ( diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css index ab520abe29..156a0fb61f 100644 --- a/apps/web/styles/globals.css +++ b/apps/web/styles/globals.css @@ -5,32 +5,13 @@ @import "./emoji.css"; @plugin "@tailwindcss/typography"; -/* stickies and editor colors */ +/* stickies and editor colors + * Text colors and the themed light/dark background ramps come from + * @plane/editor/styles (imported above), which is their single source of truth. + * Only the un-themed :root fallback below is kept: the editor package declares + * background colors solely under [data-theme*="light"] / [data-theme*="dark"], + * so without this they are undefined until a theme lands on the element. */ :root { - /* text colors */ - --editor-colors-gray-text: #5c5e63; - --editor-colors-peach-text: #ff5b59; - --editor-colors-pink-text: #f65385; - --editor-colors-orange-text: #fd9038; - --editor-colors-green-text: #0fc27b; - --editor-colors-light-blue-text: #17bee9; - --editor-colors-dark-blue-text: #266df0; - --editor-colors-purple-text: #9162f9; - /* end text colors */ - - /* background colors */ - --editor-colors-gray-background: #d6d6d8; - --editor-colors-peach-background: #ffd5d7; - --editor-colors-pink-background: #fdd4e3; - --editor-colors-orange-background: #ffe3cd; - --editor-colors-green-background: #c3f0de; - --editor-colors-light-blue-background: #c5eff9; - --editor-colors-dark-blue-background: #c9dafb; - --editor-colors-purple-background: #e3d8fd; - /* end background colors */ -} -/* background colors */ -[data-theme*="light"] { --editor-colors-gray-background: #d6d6d8; --editor-colors-peach-background: #ffd5d7; --editor-colors-pink-background: #fdd4e3; @@ -40,17 +21,6 @@ --editor-colors-dark-blue-background: #c9dafb; --editor-colors-purple-background: #e3d8fd; } -[data-theme*="dark"] { - --editor-colors-gray-background: #404144; - --editor-colors-peach-background: #593032; - --editor-colors-pink-background: #562e3d; - --editor-colors-orange-background: #583e2a; - --editor-colors-green-background: #1d4a3b; - --editor-colors-light-blue-background: #1f495c; - --editor-colors-dark-blue-background: #223558; - --editor-colors-purple-background: #3d325a; -} -/* end background colors */ .shadow-custom { box-shadow: 2px 2px 8px 2px rgba(234, 231, 250, 0.3); /* Convert #EAE7FA4D to rgba */ diff --git a/packages/propel/src/charts/components/legend.tsx b/packages/propel/src/charts/components/legend.tsx index 89da225af7..cadef002f8 100644 --- a/packages/propel/src/charts/components/legend.tsx +++ b/packages/propel/src/charts/components/legend.tsx @@ -50,7 +50,7 @@ const CustomLegend = React.forwardRef(function CustomLegend( return (
diff --git a/packages/propel/src/charts/components/tooltip.tsx b/packages/propel/src/charts/components/tooltip.tsx index cd4b2b0bb0..f17c3432d8 100644 --- a/packages/propel/src/charts/components/tooltip.tsx +++ b/packages/propel/src/charts/components/tooltip.tsx @@ -28,7 +28,7 @@ export const CustomTooltip = React.memo(function CustomTooltip(props: Props) { return (

{label}

diff --git a/packages/propel/src/charts/pie-chart/tooltip.tsx b/packages/propel/src/charts/pie-chart/tooltip.tsx index 10dd2a9402..1c2dcf5ba4 100644 --- a/packages/propel/src/charts/pie-chart/tooltip.tsx +++ b/packages/propel/src/charts/pie-chart/tooltip.tsx @@ -20,7 +20,7 @@ export const CustomPieChartTooltip = React.memo(function CustomPieChartTooltip(p return (

{label}

diff --git a/packages/tailwind-config/animations.css b/packages/tailwind-config/animations.css deleted file mode 100644 index 04835346c9..0000000000 --- a/packages/tailwind-config/animations.css +++ /dev/null @@ -1,88 +0,0 @@ -@theme { - /* slide up */ - --animate-slide-up: slide-up 0.3s ease-out forwards; - @keyframes slide-up { - from { - transform: translateY(10px); - opacity: 0; - } - to { - transform: translateY(0); - 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; - } - } - - /* fade in */ - --animate-fade-in: fadeIn 0.25s ease-out forwards; - @keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } - } -} diff --git a/packages/tailwind-config/index.css b/packages/tailwind-config/index.css index ecebd1a56b..dae708c017 100644 --- a/packages/tailwind-config/index.css +++ b/packages/tailwind-config/index.css @@ -1,6 +1,26 @@ @import "tailwindcss"; -@import "./variables.css"; -@import "./animations.css"; +/* + * Design tokens + animations come from @makeplane/propel, which supersedes the + * variables.css / animations.css this package used to ship. It defines every + * token name we had bar one — --scrollbar-thumb-surface-hover, whose consumers + * now point at propel's --scrollbar-thumb-hover — plus every --animate-* token + * and a superset of our keyframes, and it keys light/dark off the same + * [data-theme*="dark"] / [data-theme="dark-contrast"] selectors we already use. + * + * Token *values* are propel's, not ours: many differ from what this package + * shipped. See the migration notes for the drift that needs a visual pass. + * + * Imported as the two leaf files rather than the "@makeplane/propel/styles" + * barrel. The barrel is those same two files plus `@source "../"`, which points + * Tailwind at propel's dist and emits utilities for its components — dead CSS + * here, since we consume propel for tokens only and import none of its JS. + * Re-add the barrel if propel components are adopted. + * + * propel's CSS deliberately does not import tailwindcss itself, so that stays + * above. + */ +@import "@makeplane/propel/styles/variables"; +@import "@makeplane/propel/styles/animations"; @source "../**/*.{ts,tsx}"; * { @@ -103,8 +123,10 @@ body { } } + /* Container hover out-orders `::-webkit-scrollbar-thumb:hover` and `:active` + at equal specificity, so this shade shows while hovering *and* dragging. */ &:hover::-webkit-scrollbar-thumb { - @apply bg-scrollbar-thumb-surface-hover; + @apply bg-scrollbar-thumb-hover; } &::-webkit-scrollbar-corner { @@ -116,7 +138,22 @@ body { margin-top: 44px; } -/* Scrollbar variants */ +/* Scrollbar variants + * `sm`, `md` and `lg` collide by name with propel's own scrollbar utilities, + * imported at the top of this file. Both definitions are emitted and ours lands + * second, so it wins — but only for properties it actually restates. propel sets + * `scrollbar-width` / `scrollbar-color`, and from Chromium 121 setting either of + * those makes the browser ignore every ::-webkit-scrollbar rule on the element, + * which would silently drop the geometry below and leave one 11px scrollbar + * everywhere. Resetting both back to `auto` hands the pseudo-elements back. + * + * This leans on ours being emitted after propel's, which follows from `@utility` + * registration order and is not something Tailwind documents for duplicate + * names. Keep these definitions below the propel @import. If scrollbars ever + * turn thin and uniform app-wide, this is why — rename ours to break the tie. + * + * `xs` has no propel counterpart, so it needs no reset. + */ @utility scrollbar-xs { &::-webkit-scrollbar { height: 10px; @@ -127,6 +164,13 @@ body { } } @utility scrollbar-sm { + scrollbar-width: auto; + scrollbar-color: auto; + + &:hover { + scrollbar-color: auto; + } + &::-webkit-scrollbar { height: 12px; width: 12px; @@ -137,6 +181,13 @@ body { } } @utility scrollbar-md { + scrollbar-width: auto; + scrollbar-color: auto; + + &:hover { + scrollbar-color: auto; + } + &::-webkit-scrollbar { height: 14px; width: 14px; @@ -147,6 +198,13 @@ body { } } @utility scrollbar-lg { + scrollbar-width: auto; + scrollbar-color: auto; + + &:hover { + scrollbar-color: auto; + } + &::-webkit-scrollbar { height: 16px; width: 16px; @@ -157,19 +215,6 @@ body { } } -.hide-vertical-scrollbar::-webkit-scrollbar { - width: 0 !important; -} - -.hide-horizontal-scrollbar::-webkit-scrollbar { - height: 0 !important; -} - -.hide-both-scrollbars::-webkit-scrollbar { - height: 0 !important; - width: 0 !important; -} - /* highlight class */ @utility highlight { border: 1px solid var(--border-color-accent-strong) !important; diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json index 6c37a83db3..f0acfc0166 100644 --- a/packages/tailwind-config/package.json +++ b/packages/tailwind-config/package.json @@ -13,6 +13,7 @@ "./postcss.config.js": "./postcss.config.js" }, "dependencies": { + "@makeplane/propel": "0.2.0", "@tailwindcss/postcss": "catalog:", "postcss": "catalog:" }, diff --git a/packages/tailwind-config/variables.css b/packages/tailwind-config/variables.css deleted file mode 100644 index 1f697cdb55..0000000000 --- a/packages/tailwind-config/variables.css +++ /dev/null @@ -1,1309 +0,0 @@ -@custom-variant dark (&:where([data-theme*="dark"], [data-theme*="dark"] *)); -@custom-variant dark-high-contrast (&:where([data-theme="dark-contrast"], [data-theme="dark-contrast"] *)); -@custom-variant light-high-contrast (&:where([data-theme="light-contrast"], [data-theme="light-contrast"] *)); - -@layer base { - :root, - :host { - /* ---------- Alpha colors ---------- */ - /* White alpha */ - --alpha-white-0: oklch(1 0 0 / 0%); - --alpha-white-100: oklch(1 0 0 / 5%); - --alpha-white-200: oklch(1 0 0 / 10%); - --alpha-white-300: oklch(1 0 0 / 15%); - --alpha-white-400: oklch(1 0 0 / 20%); - --alpha-white-500: oklch(1 0 0 / 30%); - --alpha-white-600: oklch(1 0 0 / 40%); - --alpha-white-700: oklch(1 0 0 / 50%); - --alpha-white-800: oklch(1 0 0 / 60%); - --alpha-white-900: oklch(1 0 0 / 70%); - --alpha-white-1000: oklch(1 0 0 / 80%); - --alpha-white-1100: oklch(1 0 0 / 90%); - --alpha-white-1200: oklch(1 0 0 / 95%); - /* Black alpha */ - --alpha-black-0: oklch(0.1482 0.0034 196.79 / 0%); - --alpha-black-100: oklch(0.1482 0.0034 196.79 / 5%); - --alpha-black-200: oklch(0.1482 0.0034 196.79 / 10%); - --alpha-black-300: oklch(0.1482 0.0034 196.79 / 15%); - --alpha-black-400: oklch(0.1482 0.0034 196.79 / 20%); - --alpha-black-500: oklch(0.1482 0.0034 196.79 / 30%); - --alpha-black-600: oklch(0.1482 0.0034 196.79 / 40%); - --alpha-black-700: oklch(0.1482 0.0034 196.79 / 50%); - --alpha-black-800: oklch(0.1482 0.0034 196.79 / 60%); - --alpha-black-900: oklch(0.1482 0.0034 196.79 / 70%); - --alpha-black-1000: oklch(0.1482 0.0034 196.79 / 80%); - --alpha-black-1100: oklch(0.1482 0.0034 196.79 / 90%); - --alpha-black-1200: oklch(0.1482 0.0034 196.79 / 95%); - /* --------- Extended colors ---------- */ - /* Purple */ - --extended-color-purple-25: oklch(0.981 0.0054 297.73); - --extended-color-purple-50: oklch(0.9421 0.0162 293.74); - --extended-color-purple-100: oklch(0.8808 0.0343 293.03); - --extended-color-purple-200: oklch(0.779 0.0639 293.01); - --extended-color-purple-300: oklch(0.6978 0.0888 291.44); - --extended-color-purple-400: oklch(0.6139 0.1164 290.19); - --extended-color-purple-500: oklch(0.5527 0.1361 288.8); - --extended-color-purple-600: oklch(0.4895 0.157 286.65); - --extended-color-purple-700: oklch(0.42 0.1303 287.25); - --extended-color-purple-800: oklch(0.3617 0.1077 287.53); - --extended-color-purple-900: oklch(0.2861 0.0795 287.41); - --extended-color-purple-950: oklch(0.219 0.0552 288.93); - /* Orange */ - --extended-color-orange-25: oklch(0.9856 0.0084 56.32); - --extended-color-orange-50: oklch(0.964 0.0219 58.79); - --extended-color-orange-100: oklch(0.9152 0.0522 56.77); - --extended-color-orange-200: oklch(0.8504 0.097 56.87); - --extended-color-orange-300: oklch(0.801 0.1323 55.27); - --extended-color-orange-400: oklch(0.7563 0.1644 52.56); - --extended-color-orange-500: oklch(0.7177 0.1905 47.86); - --extended-color-orange-600: oklch(0.6601 0.1884 45.09); - --extended-color-orange-700: oklch(0.5737 0.162 45.72); - --extended-color-orange-800: oklch(0.5059 0.141467 46.3267); - --extended-color-orange-900: oklch(0.3897 0.105571 48.3415); - --extended-color-orange-950: oklch(0.2896 0.0746 51.86); - /* Crimson */ - --extended-color-crimson-25: oklch(0.9805 0.0066 28.83); - --extended-color-crimson-50: oklch(0.9503 0.0186 21.57); - --extended-color-crimson-100: oklch(0.8847 0.0455 23.1); - --extended-color-crimson-200: oklch(0.791 0.0874 23.59); - --extended-color-crimson-300: oklch(0.72 0.124 24.83); - --extended-color-crimson-400: oklch(0.6556 0.1604 26.47); - --extended-color-crimson-500: oklch(0.5954 0.1956 28.51); - --extended-color-crimson-600: oklch(0.5284 0.185 28.96); - --extended-color-crimson-700: oklch(0.4754 0.1647 28.98); - --extended-color-crimson-800: oklch(0.4209 0.1438 29.01); - --extended-color-crimson-900: oklch(0.3249 0.106 28.39); - --extended-color-crimson-950: oklch(0.2457 0.0742 27.56); - /* Emerald */ - --extended-color-emerald-25: oklch(0.9884 0.0082 157.1); - --extended-color-emerald-50: oklch(0.9563 0.0256 154.47); - --extended-color-emerald-100: oklch(0.9153 0.0531 153.59); - --extended-color-emerald-200: oklch(0.8679 0.0829 153.02); - --extended-color-emerald-300: oklch(0.8221 0.1121 152.16); - --extended-color-emerald-400: oklch(0.7785 0.1398 151.07); - --extended-color-emerald-500: oklch(0.7401 0.166 149.61); - --extended-color-emerald-600: oklch(0.6567 0.1599 148.98); - --extended-color-emerald-700: oklch(0.5883 0.1413 149.06); - --extended-color-emerald-800: oklch(0.4965 0.1172 149.18); - --extended-color-emerald-900: oklch(0.4003 0.0918 149.37); - --extended-color-emerald-950: oklch(0.2982 0.0631 150.55); - /* Pink */ - --extended-color-pink-25: oklch(0.9828 0.005 345.28); - --extended-color-pink-50: oklch(0.9394 0.0201 340.71); - --extended-color-pink-100: oklch(0.8759 0.0418 339.71); - --extended-color-pink-200: oklch(0.805 0.0664 341.18); - --extended-color-pink-300: oklch(0.736 0.0938 342.16); - --extended-color-pink-400: oklch(0.6673 0.1206 342.89); - --extended-color-pink-500: oklch(0.6185 0.1388 344.06); - --extended-color-pink-600: oklch(0.5704 0.1574 345.25); - --extended-color-pink-700: oklch(0.4947 0.1333 344.88); - --extended-color-pink-800: oklch(0.4162 0.1108 344.66); - --extended-color-pink-900: oklch(0.326 0.0807 344.57); - --extended-color-pink-950: oklch(0.2474 0.0553 344.95); - /* Yellow */ - --extended-color-yellow-25: oklch(0.989 0.0073 80.72); - --extended-color-yellow-50: oklch(0.9631 0.0268 85.66); - --extended-color-yellow-100: oklch(0.9297 0.0545 86.15); - --extended-color-yellow-200: oklch(0.8893 0.0843 85.3); - --extended-color-yellow-300: oklch(0.8522 0.1121 85.14); - --extended-color-yellow-400: oklch(0.8167 0.1342 83.9); - --extended-color-yellow-500: oklch(0.79 0.1466 82.04); - --extended-color-yellow-600: oklch(0.7399 0.1487 79.36); - --extended-color-yellow-700: oklch(0.683 0.1365 79.84); - --extended-color-yellow-800: oklch(0.5522 0.1093 80.44); - --extended-color-yellow-900: oklch(0.425 0.0824 81.46); - --extended-color-yellow-950: oklch(0.3142 0.0586 82.21); - /* Indigo */ - --extended-color-indigo-25: oklch(0.9813 0.0074 260.73); - --extended-color-indigo-50: oklch(0.9415 0.022 263.19); - --extended-color-indigo-100: oklch(0.8828 0.045 263.07); - --extended-color-indigo-200: oklch(0.7852 0.086 263.89); - --extended-color-indigo-300: oklch(0.7066 0.121 263.57); - --extended-color-indigo-400: oklch(0.6322 0.1556 262.59); - --extended-color-indigo-500: oklch(0.579 0.1807 262.31); - --extended-color-indigo-600: oklch(0.5291 0.2045 262.05); - --extended-color-indigo-700: oklch(0.458 0.1753 262.2); - --extended-color-indigo-800: oklch(0.3862 0.1436 262.12); - --extended-color-indigo-900: oklch(0.3019 0.1051 262.16); - --extended-color-indigo-950: oklch(0.2308 0.0713 261.96); - /* Grey */ - --extended-color-grey-25: oklch(0.9851 0 0); - --extended-color-grey-50: oklch(0.9461 0 0); - --extended-color-grey-100: oklch(0.9067 0 0); - --extended-color-grey-200: oklch(0.8297 0 0); - --extended-color-grey-300: oklch(0.7668 0 0); - --extended-color-grey-400: oklch(0.6993 0 0); - --extended-color-grey-500: oklch(0.65 0 0); - --extended-color-grey-600: oklch(0.5999 0 0); - --extended-color-grey-700: oklch(0.5208 0 0); - --extended-color-grey-800: oklch(0.4386 0 0); - --extended-color-grey-900: oklch(0.3407 0 0); - --extended-color-grey-950: oklch(0.2603 0 0); - /* Priority */ - --priority-urgent: oklch(0.5798 0.1766 26.99); - --priority-high: oklch(0.6802 0.1633 50.67); - --priority-medium: oklch(0.79 0.1466 82.04); - --priority-low: oklch(0.579 0.1807 262.31); - --priority-none: oklch(0.6376 0.0129 231.77); - - /* -------------------- Light mode color tokens -------------------- */ - /* Neutral colors */ - --neutral-white: oklch(1 0 0); - --neutral-100: oklch(0.9848 0.0003 230.66); - --neutral-200: oklch(0.9696 0.0007 230.67); - --neutral-300: oklch(0.9543 0.001 230.67); - --neutral-400: oklch(0.9389 0.0014 230.68); - --neutral-500: oklch(0.9235 0.001733 230.6853); - --neutral-600: oklch(0.8925 0.0024 230.7); - --neutral-700: oklch(0.8612 0.0032 230.71); - --neutral-800: oklch(0.6668 0.0079 230.82); - --neutral-900: oklch(0.6161 0.009153 230.867); - --neutral-1000: oklch(0.5288 0.0083 230.88); - --neutral-1100: oklch(0.4377 0.0066 230.87); - --neutral-1200: oklch(0.2378 0.0029 230.83); - --neutral-black: oklch(0.1472 0.0034 230.83); - /* Brand colors */ - --brand-100: oklch(0.9847 0.0083 236.56); - --brand-200: oklch(0.9715 0.0167 230.9); - --brand-300: oklch(0.9428 0.0341 230.22); - --brand-400: oklch(0.9008 0.0587 232); - --brand-500: oklch(0.8414 0.0947 233.08); - --brand-600: oklch(0.7649 0.1392 236.3); - --brand-700: oklch(0.6766 0.1665 243.91); - --brand-900: oklch(0.4347 0.104093 242.4823); - --brand-1000: oklch(0.3399 0.0783 240.32); - --brand-1100: oklch(0.2626 0.0578 237.5); - --brand-1200: oklch(0.2093 0.0438 234.02); - --brand-default: oklch(0.4799 0.1158 242.91); - /* Green/Success colors */ - --green-100: oklch(0.9819 0.0181 155.83); - --green-200: oklch(0.9624 0.0434 156.74); - --green-300: oklch(0.9258 0.0845 155.86); - --green-400: oklch(0.8704 0.149 154.62); - --green-500: oklch(0.7914 0.2091 151.66); - --green-600: oklch(0.7289 0.2119 147.82); - --green-700: oklch(0.632 0.185972 147.3695); - --green-800: oklch(0.5296 0.149485 148.9899); - --green-900: oklch(0.4468 0.1187 151.4); - --green-1000: oklch(0.3935 0.0957 152.28); - --green-1100: oklch(0.2654 0.0651 152.77); - /* Amber/Warning colors */ - --amber-100: oklch(0.9869 0.0214 95.28); - --amber-200: oklch(0.9617 0.0592 95.89); - --amber-300: oklch(0.9244 0.1203 95.85); - --amber-400: oklch(0.8781 0.1688 91.86); - --amber-500: oklch(0.829 0.1712 81.04); - --amber-600: oklch(0.7724 0.172798 65.367); - --amber-700: oklch(0.6671 0.1685 53.38); - --amber-800: oklch(0.557 0.158291 45.3594); - --amber-900: oklch(0.4747 0.135757 44.9806); - --amber-1000: oklch(0.4149 0.1126 45.88); - --amber-1100: oklch(0.279 0.0773 45.6); - /* Red/Danger colors */ - --red-100: oklch(0.9705 0.0129 17.38); - --red-200: oklch(0.9365 0.032 17.74); - --red-300: oklch(0.8834 0.0616 18.39); - --red-400: oklch(0.8053 0.1109 19.78); - --red-500: oklch(0.7022 0.1892 22.23); - --red-600: oklch(0.6378 0.2373 25.44); - --red-700: oklch(0.583 0.238666 28.4765); - --red-800: oklch(0.5095 0.208583 28.513); - --red-900: oklch(0.4446 0.1774 26.79); - --red-1000: oklch(0.3967 0.1408 25.71); - --red-1100: oklch(0.3493 0.1215 25.21); - - /* -------------------- Light mode custom(derived) colors -------------------- */ - /* Scrollbar colors */ - --scrollbar-thumb: var(--alpha-black-200); - --scrollbar-thumb-surface-hover: var(--alpha-black-300); - --scrollbar-thumb-hover: var(--alpha-black-400); - --scrollbar-thumb-active: var(--alpha-black-500); - /* Background colors */ - --bg-canvas: var(--neutral-300); - --bg-surface-1: var(--neutral-white); - --bg-surface-2: var(--neutral-100); - --bg-layer-1: var(--neutral-200); - --bg-layer-1-hover: var(--neutral-300); - --bg-layer-1-active: var(--neutral-400); - --bg-layer-1-selected: var(--neutral-400); - --bg-layer-2: var(--neutral-white); - --bg-layer-2-hover: var(--neutral-100); - --bg-layer-2-active: var(--neutral-200); - --bg-layer-2-selected: var(--neutral-200); - --bg-layer-3: var(--neutral-300); - --bg-layer-3-hover: var(--neutral-400); - --bg-layer-3-active: var(--neutral-500); - --bg-layer-3-selected: var(--neutral-500); - --bg-layer-transparent: var(--alpha-white-0); - --bg-layer-transparent-hover: var(--alpha-black-100); - --bg-layer-transparent-active: var(--alpha-black-200); - --bg-layer-transparent-selected: var(--alpha-black-300); - --bg-layer-disabled: var(--neutral-400); - --bg-accent-primary: var(--brand-default); - --bg-accent-primary-hover: var(--brand-900); - --bg-accent-primary-active: var(--brand-1000); - --bg-accent-subtle: var(--brand-100); - --bg-accent-subtle-hover: var(--brand-200); - --bg-accent-subtle-active: var(--brand-300); - --bg-success-primary: var(--green-700); - --bg-success-subtle: var(--green-100); - --bg-success-subtle-1: var(--green-200); - --bg-warning-primary: var(--amber-600); - --bg-warning-subtle: var(--amber-100); - --bg-danger-primary: var(--red-700); - --bg-danger-primary-hover: var(--red-800); - --bg-danger-primary-active: var(--red-900); - --bg-danger-primary-selected: var(--red-900); - --bg-danger-subtle: var(--red-100); - --bg-danger-subtle-hover: var(--red-200); - --bg-danger-subtle-active: var(--red-300); - --bg-danger-subtle-selected: var(--red-300); - --bg-danger-transparent: var(--red-100); - --bg-danger-transparent-hover: var(--red-100); - --bg-danger-transparent-active: var(--red-100); - --bg-danger-transparent-selected: var(--red-100); - --bg-backdrop: var(--alpha-black-500); - --bg-inverse: var(--alpha-black-1000); - /* Border colors */ - --border-subtle: var(--neutral-400); - --border-subtle-1: var(--neutral-500); - --border-strong: var(--neutral-600); - --border-strong-1: var(--neutral-700); - --border-inverse: var(--neutral-white); - --border-disabled: var(--neutral-300); - --border-accent-strong: var(--brand-default); - --border-accent-subtle: var(--brand-300); - --border-success-strong: var(--green-700); - --border-success-subtle: var(--green-300); - --border-warning-strong: var(--amber-700); - --border-warning-subtle: var(--amber-400); - --border-danger-strong: var(--red-700); - --border-danger-subtle: var(--red-400); - /* Text colors */ - --txt-primary: var(--neutral-1200); - --txt-secondary: var(--neutral-1100); - --txt-tertiary: var(--neutral-1000); - --txt-placeholder: var(--neutral-900); - --txt-disabled: var(--neutral-800); - --txt-accent-primary: var(--brand-default); - --txt-accent-secondary: var(--brand-700); - --txt-on-color: var(--neutral-100); - --txt-on-color-disabled: var(--alpha-black-400); - --txt-inverse: var(--neutral-white); - --txt-success-primary: var(--green-900); - --txt-success-secondary: var(--green-700); - --txt-warning-primary: var(--amber-900); - --txt-warning-secondary: var(--amber-700); - --txt-danger-primary: var(--red-900); - --txt-danger-secondary: var(--red-700); - /* Icon colors */ - --txt-icon-primary: var(--neutral-1200); - --txt-icon-accent-subtle: var(--brand-500); - --txt-icon-accent-primary: var(--brand-default); - --txt-icon-danger-primary: var(--red-900); - --txt-icon-danger-secondary: var(--red-700); - --txt-icon-success-primary: var(--green-900); - --txt-icon-success-secondary: var(--green-700); - --txt-icon-warning-primary: var(--amber-900); - --txt-icon-warning-secondary: var(--amber-700); - --txt-icon-accent-primary-inverse: var(--brand-900); - --txt-icon-accent-secondary: var(--brand-1200); - --txt-icon-secondary: var(--neutral-1100); - --txt-icon-tertiary: var(--neutral-900); - --txt-icon-placeholder: var(--neutral-800); - --txt-icon-disabled: var(--neutral-700); - --txt-icon-danger: var(--red-700); - --txt-icon-on-color: var(--neutral-white); - --txt-icon-on-color-disabled: var(--alpha-black-400); - --txt-icon-inverse: var(--neutral-white); - /* Link colors */ - --txt-link-primary: var(--brand-default); - --txt-link-primary-hover: var(--brand-900); - --txt-link-secondary: var(--neutral-900); - /* Label colors */ - --label-indigo-bg: var(--extended-color-indigo-50); - --label-indigo-bg-strong: var(--extended-color-indigo-700); - --label-indigo-hover: var(--extended-color-indigo-100); - --label-indigo-icon: var(--extended-color-indigo-700); - --label-indigo-text: var(--extended-color-indigo-700); - --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-800); - --label-emerald-text: var(--extended-color-emerald-800); - --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: 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: var(--extended-color-crimson-700); - --label-crimson-focus: var(--extended-color-crimson-500); - --label-yellow-bg: var(--extended-color-yellow-50); - --label-yellow-bg-strong: var(--extended-color-yellow-600); - --label-yellow-hover: var(--extended-color-yellow-100); - --label-yellow-icon: var(--extended-color-yellow-700); - --label-yellow-text: var(--extended-color-yellow-700); - --label-yellow-border: var(--extended-color-yellow-600); - --label-yellow-focus: var(--extended-color-yellow-400); - --label-orange-bg: var(--extended-color-orange-50); - --label-orange-bg-strong: var(--extended-color-orange-600); - --label-orange-hover: var(--extended-color-orange-100); - --label-orange-icon: var(--extended-color-orange-600); - --label-orange-text: var(--extended-color-orange-600); - --label-orange-border: var(--extended-color-orange-600); - --label-orange-focus: var(--extended-color-orange-300); - --label-pink-bg: var(--extended-color-pink-50); - --label-pink-bg-strong: var(--extended-color-pink-600); - --label-pink-hover: var(--extended-color-pink-100); - --label-pink-icon: var(--extended-color-pink-600); - --label-pink-text: var(--extended-color-pink-600); - --label-pink-border: var(--extended-color-pink-600); - --label-pink-focus: var(--extended-color-pink-400); - --label-purple-bg: var(--extended-color-purple-50); - --label-purple-bg-strong: var(--extended-color-purple-500); - --label-purple-hover: var(--extended-color-purple-100); - --label-purple-icon: var(--extended-color-purple-500); - --label-purple-text: var(--extended-color-purple-600); - --label-purple-border: var(--extended-color-purple-600); - --label-purple-focus: var(--extended-color-purple-300); - /* Illustration colors */ - --illustration-fill-primary: var(--neutral-white); - --illustration-fill-secondary: var(--neutral-200); - --illustration-fill-tertiary: var(--neutral-400); - --illustration-fill-quaternary: var(--neutral-700); - --illustration-stroke-primary: var(--neutral-700); - --illustration-stroke-secondary: var(--neutral-800); - --illustration-stroke-tertiary: var(--neutral-1200); - /* Neutral plan colors */ - --txt-plans-neutral-primary: var(--neutral-1000); - --txt-plans-neutral-color: var(--neutral-100); - --bg-plans-neutral-subtle: var(--neutral-400); - --bg-plans-neutral-solid: var(--neutral-1200); - /* Brand plan colors */ - --txt-plans-brand-primary: var(--brand-1200); - --txt-plans-brand-color: var(--neutral-100); - --bg-plans-brand-subtle: var(--brand-200); - --bg-plans-brand-solid: var(--brand-1200); - - /* ---------- Dark mode color tokens ---------- */ - @variant dark { - /* Neutral colors */ - --neutral-black: oklch(0.1689 0.0021 230.81); - --neutral-100: oklch(0.1932 0.002 230.81); - --neutral-200: oklch(0.2158 0.0025 230.82); - --neutral-300: oklch(0.2378 0.0029 230.83); - --neutral-400: oklch(0.2593 0.0033 230.84); - --neutral-500: oklch(0.3011 0.0041 230.85); - --neutral-600: oklch(0.3415 0.0049 230.86); - --neutral-700: oklch(0.3999 0.0059 230.87); - --neutral-800: oklch(0.5989 0.0096 230.88); - --neutral-900: oklch(0.6835 0.0074 230.81); - --neutral-1000: oklch(0.7655 0.0054 230.76); - --neutral-1100: oklch(0.8455 0.0035 230.72); - --neutral-1200: oklch(0.9235 0.001733 230.6853); - --neutral-white: oklch(0.9702 0 0); - /* Brand colors */ - --brand-100: oklch(0.2029 0.03 232.24); - --brand-200: oklch(0.2513 0.0418 234.6); - --brand-300: oklch(0.3208 0.05806 236.44); - --brand-400: oklch(0.4088 0.077702 237.13); - --brand-500: oklch(0.4511 0.087024 237.37); - --brand-700: oklch(0.7408 0.100309 233.89); - --brand-800: oklch(0.8318 0.065614 232.07); - --brand-900: oklch(0.8969 0.040089 231.35); - --brand-1000: oklch(0.9409 0.022883 231.01); - --brand-1100: oklch(0.9704 0.011421 230.82); - --brand-1200: oklch(0.9856 0.005 228.82); - --brand-default: oklch(0.6311 0.126281 238.01); - /* Green colors */ - --green-100: oklch(0.2721 0.067322 152.52); - --green-200: oklch(0.3935 0.0957 152.28); - --green-300: oklch(0.4468 0.1187 151.4); - --green-400: oklch(0.5296 0.149485 148.9899); - --green-500: oklch(0.632 0.185972 147.3695); - --green-600: oklch(0.7289 0.2119 147.82); - --green-700: oklch(0.7914 0.2091 151.66); - --green-800: oklch(0.8704 0.149 154.62); - --green-900: oklch(0.9258 0.0845 155.86); - --green-1000: oklch(0.9624 0.0434 156.74); - --green-1100: oklch(0.9819 0.0181 155.83); - /* Amber colors */ - --amber-100: oklch(0.3042 0.0853 45.16); - --amber-200: oklch(0.4149 0.1126 45.88); - --amber-300: oklch(0.4747 0.135757 44.9806); - --amber-400: oklch(0.557 0.158291 45.3594); - --amber-500: oklch(0.6671 0.1685 53.38); - --amber-600: oklch(0.7724 0.172798 65.367); - --amber-700: oklch(0.829 0.1712 81.04); - --amber-800: oklch(0.8781 0.1688 91.86); - --amber-900: oklch(0.9244 0.1203 95.85); - --amber-1000: oklch(0.9617 0.0592 95.89); - --amber-1100: oklch(0.9869 0.0214 95.28); - /* Red colors */ - --red-100: oklch(0.2615 0.085 24.41); - --red-200: oklch(0.3967 0.1408 25.71); - --red-300: oklch(0.4446 0.1774 26.79); - --red-400: oklch(0.5095 0.208583 28.513); - --red-500: oklch(0.583 0.238666 28.4765); - --red-600: oklch(0.6378 0.2373 25.44); - --red-700: oklch(0.7022 0.1892 22.23); - --red-800: oklch(0.8053 0.1109 19.78); - --red-900: oklch(0.8834 0.0616 18.39); - --red-1000: oklch(0.9365 0.032 17.74); - --red-1100: oklch(0.9705 0.0129 17.38); - /* -------------------- Dark mode derived colors -------------------- */ - /* Scrollbar colors */ - --scrollbar-thumb: var(--alpha-white-200); - --scrollbar-thumb-surface-hover: var(--alpha-white-300); - --scrollbar-thumb-hover: var(--alpha-white-400); - --scrollbar-thumb-active: var(--alpha-white-500); - /* Background colors */ - --bg-canvas: var(--neutral-black); - --bg-surface-1: var(--neutral-100); - --bg-surface-2: var(--neutral-200); - --bg-layer-1: var(--neutral-200); - --bg-layer-1-hover: var(--neutral-300); - --bg-layer-1-active: var(--neutral-400); - --bg-layer-1-selected: var(--neutral-400); - --bg-layer-2: var(--neutral-300); - --bg-layer-2-hover: var(--neutral-400); - --bg-layer-2-active: var(--neutral-500); - --bg-layer-2-selected: var(--neutral-500); - --bg-layer-3: var(--neutral-400); - --bg-layer-3-hover: var(--neutral-500); - --bg-layer-3-active: var(--neutral-600); - --bg-layer-3-selected: var(--neutral-600); - --bg-layer-transparent: var(--alpha-black-0); - --bg-layer-transparent-hover: var(--alpha-white-100); - --bg-layer-transparent-active: var(--alpha-white-200); - --bg-layer-transparent-selected: var(--alpha-white-300); - --bg-layer-disabled: var(--neutral-700); - --bg-accent-primary: var(--brand-default); - --bg-accent-primary-hover: var(--brand-500); - --bg-accent-primary-active: var(--brand-400); - --bg-accent-subtle: var(--brand-100); - --bg-accent-subtle-hover: var(--brand-200); - --bg-accent-subtle-active: var(--brand-300); - --bg-success-primary: var(--green-700); - --bg-success-subtle: var(--green-100); - --bg-success-subtle-1: var(--green-100); - --bg-warning-primary: var(--amber-600); - --bg-warning-subtle: var(--amber-100); - --bg-danger-primary: var(--red-300); - --bg-danger-primary-hover: var(--red-400); - --bg-danger-primary-active: var(--red-500); - --bg-danger-primary-selected: var(--red-500); - --bg-danger-subtle: var(--red-100); - --bg-danger-subtle-hover: var(--red-200); - --bg-danger-subtle-active: var(--red-300); - --bg-danger-subtle-selected: var(--red-300); - --bg-danger-transparent: var(--red-100); - --bg-danger-transparent-hover: var(--red-100); - --bg-danger-transparent-active: var(--red-100); - --bg-danger-transparent-selected: var(--red-100); - --bg-backdrop: var(--alpha-black-1000); - --bg-inverse: var(--alpha-white-1000); - /* Border colors */ - --border-subtle: var(--neutral-400); - --border-subtle-1: var(--neutral-500); - --border-strong: var(--neutral-600); - --border-strong-1: var(--neutral-700); - --border-inverse: var(--neutral-100); - --border-disabled: var(--neutral-300); - --border-accent-strong: var(--brand-default); - --border-accent-subtle: var(--brand-300); - --border-success-strong: var(--green-400); - --border-success-subtle: var(--green-200); - --border-warning-strong: var(--amber-400); - --border-warning-subtle: var(--amber-200); - --border-danger-strong: var(--red-700); - --border-danger-subtle: var(--red-200); - /* Text colors */ - --txt-primary: var(--neutral-1200); - --txt-secondary: var(--neutral-1100); - --txt-tertiary: var(--neutral-1000); - --txt-placeholder: var(--neutral-900); - --txt-disabled: var(--neutral-800); - --txt-accent-primary: var(--brand-default); - --txt-accent-secondary: var(--brand-700); - --txt-on-color: var(--neutral-1200); - --txt-on-color-disabled: var(--alpha-white-400); - --txt-inverse: var(--neutral-black); - --txt-success-primary: var(--green-900); - --txt-success-secondary: var(--green-700); - --txt-warning-primary: var(--amber-900); - --txt-warning-secondary: var(--amber-700); - --txt-danger-primary: var(--red-900); - --txt-danger-secondary: var(--red-700); - /* Icon colors */ - --txt-icon-primary: var(--neutral-1200); - --txt-icon-accent-subtle: var(--brand-700); - --txt-icon-accent-primary: var(--brand-default); - --txt-icon-accent-primary-inverse: var(--brand-900); - --txt-icon-accent-secondary: var(--brand-1200); - --txt-icon-danger-primary: var(--red-900); - --txt-icon-danger-secondary: var(--red-700); - --txt-icon-success-primary: var(--green-900); - --txt-icon-success-secondary: var(--green-700); - --txt-icon-warning-primary: var(--amber-900); - --txt-icon-warning-secondary: var(--amber-700); - --txt-icon-secondary: var(--neutral-1100); - --txt-icon-tertiary: var(--neutral-1000); - --txt-icon-placeholder: var(--neutral-800); - --txt-icon-disabled: var(--neutral-700); - --txt-icon-danger: var(--red-700); - --txt-icon-on-color: var(--neutral-white); - --txt-icon-on-color-disabled: var(--alpha-white-400); - --txt-icon-inverse: var(--neutral-black); - /* Link colors */ - --txt-link-primary: var(--brand-default); - --txt-link-primary-hover: var(--brand-700); - --txt-link-secondary: var(--neutral-1100); - /* Label colors */ - --label-indigo-bg: var(--extended-color-indigo-900); - --label-indigo-bg-strong: var(--extended-color-indigo-500); - --label-indigo-hover: var(--extended-color-indigo-800); - --label-indigo-icon: var(--extended-color-indigo-400); - --label-indigo-text: var(--extended-color-indigo-400); - --label-indigo-border: var(--extended-color-indigo-400); - --label-indigo-focus: var(--extended-color-indigo-400); - --label-emerald-bg: var(--extended-color-emerald-950); - --label-emerald-bg-strong: var(--extended-color-emerald-600); - --label-emerald-hover: var(--extended-color-emerald-900); - --label-emerald-icon: var(--extended-color-emerald-400); - --label-emerald-text: var(--extended-color-emerald-400); - --label-emerald-border: var(--extended-color-emerald-400); - --label-emerald-focus: var(--extended-color-emerald-700); - --label-grey-bg: var(--extended-color-grey-900); - --label-grey-bg-strong: var(--extended-color-grey-500); - --label-grey-hover: var(--extended-color-grey-800); - --label-grey-icon: var(--extended-color-grey-400); - --label-grey-text: var(--extended-color-grey-400); - --label-grey-border: var(--extended-color-grey-400); - --label-grey-focus: var(--extended-color-grey-400); - --label-crimson-bg: var(--extended-color-crimson-950); - --label-crimson-bg-strong: var(--extended-color-crimson-500); - --label-crimson-hover: var(--extended-color-crimson-900); - --label-crimson-icon: var(--extended-color-crimson-400); - --label-crimson-text: var(--extended-color-crimson-400); - --label-crimson-border: var(--extended-color-crimson-400); - --label-crimson-focus: var(--extended-color-crimson-400); - --label-yellow-bg: var(--extended-color-yellow-950); - --label-yellow-bg-strong: var(--extended-color-yellow-500); - --label-yellow-hover: var(--extended-color-yellow-900); - --label-yellow-icon: var(--extended-color-yellow-500); - --label-yellow-text: var(--extended-color-yellow-500); - --label-yellow-border: var(--extended-color-yellow-500); - --label-yellow-focus: var(--extended-color-yellow-400); - --label-orange-bg: var(--extended-color-orange-950); - --label-orange-bg-strong: var(--extended-color-orange-400); - --label-orange-hover: var(--extended-color-orange-900); - --label-orange-icon: var(--extended-color-orange-300); - --label-orange-text: var(--extended-color-orange-300); - --label-orange-border: var(--extended-color-orange-300); - --label-orange-focus: var(--extended-color-orange-300); - --label-pink-bg: var(--extended-color-pink-900); - --label-pink-bg-strong: var(--extended-color-pink-500); - --label-pink-hover: var(--extended-color-pink-800); - --label-pink-icon: var(--extended-color-pink-400); - --label-pink-text: var(--extended-color-pink-400); - --label-pink-border: var(--extended-color-pink-400); - --label-pink-focus: var(--extended-color-pink-400); - --label-purple-bg: var(--extended-color-purple-900); - --label-purple-bg-strong: var(--extended-color-purple-400); - --label-purple-hover: var(--extended-color-purple-800); - --label-purple-icon: var(--extended-color-purple-400); - --label-purple-text: var(--extended-color-purple-400); - --label-purple-border: var(--extended-color-purple-400); - --label-purple-focus: var(--extended-color-purple-300); - /* Illustration colors */ - --illustration-fill-primary: var(--neutral-400); - --illustration-fill-secondary: var(--neutral-500); - --illustration-fill-tertiary: var(--neutral-700); - --illustration-fill-quaternary: var(--neutral-700); - --illustration-stroke-primary: var(--neutral-700); - --illustration-stroke-secondary: var(--neutral-800); - --illustration-stroke-tertiary: var(--neutral-1000); - /* Neutral plan colors */ - --txt-plans-neutral-primary: var(--neutral-1000); - --txt-plans-neutral-color: var(--neutral-100); - --bg-plans-neutral-subtle: var(--neutral-500); - --bg-plans-neutral-solid: var(--neutral-1100); - /* Brand plan colors */ - --txt-plans-brand-primary: var(--brand-1000); - --txt-plans-brand-color: var(--brand-100); - --bg-plans-brand-subtle: var(--brand-200); - --bg-plans-brand-solid: var(--brand-1100); - } - - /* -------------------- Dark high contrast mode color tokens -------------------- */ - @variant dark-high-contrast { - /* Border colors */ - --border-subtle: var(--neutral-1200); - --border-subtle-1: var(--neutral-1100); - --border-strong: var(--neutral-1000); - --border-strong-1: var(--neutral-900); - --border-inverse: var(--neutral-white); - --border-disabled: var(--neutral-700); - --border-accent-strong: var(--brand-default); - --border-accent-subtle: var(--brand-300); - --border-success-strong: var(--green-400); - --border-success-subtle: var(--green-200); - --border-warning-strong: var(--amber-400); - --border-warning-subtle: var(--amber-200); - --border-danger-strong: var(--red-400); - --border-danger-subtle: var(--red-200); - } - - /* -------------------- Light high contrast mode color tokens -------------------- */ - - @variant light-high-contrast { - /* Border colors */ - --border-subtle: var(--neutral-1200); - --border-subtle-1: var(--neutral-1100); - --border-strong: var(--neutral-1000); - --border-strong-1: var(--neutral-900); - --border-inverse: var(--neutral-black); - --border-disabled: var(--neutral-700); - --border-accent-strong: var(--brand-default); - --border-accent-subtle: var(--brand-300); - --border-success-strong: var(--green-700); - --border-success-subtle: var(--green-600); - --border-warning-strong: var(--amber-700); - --border-warning-subtle: var(--amber-400); - --border-danger-strong: var(--red-700); - --border-danger-subtle: var(--red-400); - } - } -} - -/* -------------------- Theme tokens -------------------- */ -@theme { - --color-*: initial; - --color-white: oklch(1 0 0); - --color-black: oklch(0.1482 0.0034 196.79); - /* ---------- Border radius ---------- */ - --radius-4xl: initial; - /* ---------- Border width ---------- */ - --border-width-*: initial; - --border-width-sm: 1px; - --border-width-md: 1.5px; - --border-width-lg: 2px; - --border-width-xl: 2.5px; - --default-border-width: 1px; - /* ---------- Outline width ---------- */ - --outline-width-*: initial; - /* ---------- Ring width ---------- */ - --ring-width-*: initial; - /* ---------- Shadow ---------- */ - --shadow-*: initial; - --shadow-raised-100: 0px 1px 6px -1px #292f3d08, 0px 1px 4px 0px #292f3d0a; - --shadow-raised-200: 0px 1px 2px -1px #292f3d0f, 0px 1px 3px 0px #292f3d0d; - --shadow-raised-300: 0px 2px 4px -1px #292f3d0a, 0px 4px 6px -1px #292f3d0d; - --shadow-overlay-100: 0px 10px 10px -5px #292f3d0a, 0px 10px 40px -5px #292f3d0a; - --shadow-overlay-200: 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; - /* --------- Height --------- */ - --height-header: 3.25rem; - /* --------- Padding --------- */ - --padding-page: 1.35rem; - --padding-page-x: 1.35rem; - --padding-page-y: 1.35rem; -} - -/* -------------------- Semantic colors (Final colors to be used in components) -------------------- */ -@theme inline { - /* ---------- Outline width ---------- */ - --outline-width-sm: var(--border-width-sm); - --outline-width-md: var(--border-width-md); - --outline-width-lg: var(--border-width-lg); - --outline-width-xl: var(--border-width-xl); - --default-outline-width: var(--default-border-width); - /* ---------- Ring width ---------- */ - --ring-width-sm: var(--border-width-sm); - --ring-width-md: var(--border-width-md); - --ring-width-lg: var(--border-width-lg); - --ring-width-xl: var(--border-width-xl); - --default-ring-width: var(--default-border-width); - /* Scrollbar colors */ - --background-color-scrollbar-thumb: var(--scrollbar-thumb); - --background-color-scrollbar-thumb-surface-hover: var(--scrollbar-thumb-surface-hover); - --background-color-scrollbar-thumb-hover: var(--scrollbar-thumb-hover); - --background-color-scrollbar-thumb-active: var(--scrollbar-thumb-active); - /* Background colors */ - --background-color-canvas: var(--bg-canvas); - --background-color-surface-1: var(--bg-surface-1); - --background-color-surface-2: var(--bg-surface-2); - --background-color-layer-1: var(--bg-layer-1); - --background-color-layer-1-hover: var(--bg-layer-1-hover); - --background-color-layer-1-active: var(--bg-layer-1-active); - --background-color-layer-1-selected: var(--bg-layer-1-selected); - --background-color-layer-2: var(--bg-layer-2); - --background-color-layer-2-hover: var(--bg-layer-2-hover); - --background-color-layer-2-active: var(--bg-layer-2-active); - --background-color-layer-2-selected: var(--bg-layer-2-selected); - --background-color-layer-3: var(--bg-layer-3); - --background-color-layer-3-hover: var(--bg-layer-3-hover); - --background-color-layer-3-active: var(--bg-layer-3-active); - --background-color-layer-3-selected: var(--bg-layer-3-selected); - --background-color-layer-transparent: var(--bg-layer-transparent); - --background-color-layer-transparent-hover: var(--bg-layer-transparent-hover); - --background-color-layer-transparent-active: var(--bg-layer-transparent-active); - --background-color-layer-transparent-selected: var(--bg-layer-transparent-selected); - --background-color-layer-disabled: var(--bg-layer-disabled); - --background-color-accent-primary: var(--bg-accent-primary); - --background-color-accent-primary-hover: var(--bg-accent-primary-hover); - --background-color-accent-primary-active: var(--bg-accent-primary-active); - --background-color-accent-subtle: var(--bg-accent-subtle); - --background-color-accent-subtle-hover: var(--bg-accent-subtle-hover); - --background-color-accent-subtle-active: var(--bg-accent-subtle-active); - --background-color-success-primary: var(--bg-success-primary); - --background-color-success-subtle: var(--bg-success-subtle); - --background-color-success-subtle-1: var(--bg-success-subtle-1); - --background-color-warning-primary: var(--bg-warning-primary); - --background-color-warning-subtle: var(--bg-warning-subtle); - --background-color-danger-primary: var(--bg-danger-primary); - --background-color-danger-primary-hover: var(--bg-danger-primary-hover); - --background-color-danger-primary-active: var(--bg-danger-primary-active); - --background-color-danger-primary-selected: var(--bg-danger-primary-selected); - --background-color-danger-subtle: var(--bg-danger-subtle); - --background-color-danger-subtle-hover: var(--bg-danger-subtle-hover); - --background-color-danger-subtle-active: var(--bg-danger-subtle-active); - --background-color-danger-subtle-selected: var(--bg-danger-subtle-selected); - --background-color-danger-transparent: var(--bg-danger-transparent); - --background-color-danger-transparent-hover: var(--bg-danger-transparent-hover); - --background-color-danger-transparent-active: var(--bg-danger-transparent-active); - --background-color-danger-transparent-selected: var(--bg-danger-transparent-selected); - --background-color-backdrop: var(--bg-backdrop); - --background-color-inverse: var(--bg-inverse); - /* Border colors */ - --border-color-subtle: var(--border-subtle); - --border-color-subtle-1: var(--border-subtle-1); - --border-color-strong: var(--border-strong); - --border-color-strong-1: var(--border-strong-1); - --border-color-inverse: var(--border-inverse); - --border-color-disabled: var(--border-disabled); - --border-color-accent-strong: var(--border-accent-strong); - --border-color-accent-subtle: var(--border-accent-subtle); - --border-color-success-strong: var(--border-success-strong); - --border-color-success-subtle: var(--border-success-subtle); - --border-color-warning-strong: var(--border-warning-strong); - --border-color-warning-subtle: var(--border-warning-subtle); - --border-color-danger-strong: var(--border-danger-strong); - --border-color-danger-subtle: var(--border-danger-subtle); - /* Outline colors */ - --outline-color-subtle: var(--border-color-subtle); - --outline-color-subtle-1: var(--border-color-subtle-1); - --outline-color-strong: var(--border-color-strong); - --outline-color-strong-1: var(--border-color-strong-1); - --outline-color-inverse: var(--border-color-inverse); - --outline-color-disabled: var(--border-color-disabled); - --outline-color-accent-strong: var(--border-color-accent-strong); - --outline-color-accent-subtle: var(--border-color-accent-subtle); - --outline-color-success-strong: var(--border-color-success-strong); - --outline-color-success-subtle: var(--border-color-success-subtle); - --outline-color-warning-strong: var(--border-color-warning-strong); - --outline-color-warning-subtle: var(--border-color-warning-subtle); - --outline-color-danger-strong: var(--border-color-danger-strong); - --outline-color-danger-subtle: var(--border-color-danger-subtle); - /* Ring colors */ - --ring-color-subtle: var(--border-color-subtle); - --ring-color-subtle-1: var(--border-color-subtle-1); - --ring-color-strong: var(--border-color-strong); - --ring-color-strong-1: var(--border-color-strong-1); - --ring-color-inverse: var(--border-color-inverse); - --ring-color-disabled: var(--border-color-disabled); - --ring-color-accent-strong: var(--border-color-accent-strong); - --ring-color-accent-subtle: var(--border-color-accent-subtle); - --ring-color-success-strong: var(--border-color-success-strong); - --ring-color-success-subtle: var(--border-color-success-subtle); - --ring-color-warning-strong: var(--border-color-warning-strong); - --ring-color-warning-subtle: var(--border-color-warning-subtle); - --ring-color-danger-strong: var(--border-color-danger-strong); - --ring-color-danger-subtle: var(--border-color-danger-subtle); - /* Text colors */ - --text-color-primary: var(--txt-primary); - --text-color-secondary: var(--txt-secondary); - --text-color-tertiary: var(--txt-tertiary); - --text-color-placeholder: var(--txt-placeholder); - --text-color-disabled: var(--txt-disabled); - --text-color-accent-primary: var(--txt-accent-primary); - --text-color-accent-secondary: var(--txt-accent-secondary); - --text-color-on-color: var(--txt-on-color); - --text-color-on-color-disabled: var(--txt-on-color-disabled); - --text-color-inverse: var(--txt-inverse); - --text-color-success-primary: var(--txt-success-primary); - --text-color-success-secondary: var(--txt-success-secondary); - --text-color-warning-primary: var(--txt-warning-primary); - --text-color-warning-secondary: var(--txt-warning-secondary); - --text-color-danger-primary: var(--txt-danger-primary); - --text-color-danger-secondary: var(--txt-danger-secondary); - /* Stroke colors */ - --stroke-primary: var(--text-color-primary); - --stroke-secondary: var(--text-color-secondary); - --stroke-tertiary: var(--text-color-tertiary); - --stroke-placeholder: var(--text-color-placeholder); - --stroke-disabled: var(--text-color-disabled); - --stroke-accent-primary: var(--text-color-accent-primary); - --stroke-accent-secondary: var(--text-color-accent-secondary); - --stroke-on-color: var(--text-color-on-color); - --stroke-on-color-disabled: var(--text-color-on-color-disabled); - --stroke-inverse: var(--text-color-inverse); - --stroke-success: var(--text-color-success); - --stroke-success-primary: var(--text-color-success-primary); - --stroke-success-secondary: var(--text-color-success-secondary); - --stroke-warning: var(--text-color-warning); - --stroke-warning-primary: var(--text-color-warning-primary); - --stroke-warning-secondary: var(--text-color-warning-secondary); - --stroke-danger: var(--text-color-danger); - --stroke-danger-primary: var(--text-color-danger-primary); - --stroke-danger-secondary: var(--text-color-danger-secondary); - /* Fill colors */ - --fill-primary: var(--text-color-primary); - --fill-secondary: var(--text-color-secondary); - --fill-tertiary: var(--text-color-tertiary); - --fill-placeholder: var(--text-color-placeholder); - --fill-disabled: var(--text-color-disabled); - --fill-accent-primary: var(--text-color-accent-primary); - --fill-accent-secondary: var(--text-color-accent-secondary); - --fill-on-color: var(--text-color-on-color); - --fill-on-color-disabled: var(--text-color-on-color-disabled); - --fill-inverse: var(--text-color-inverse); - --fill-success: var(--text-color-success); - --fill-success-primary: var(--text-color-success-primary); - --fill-success-secondary: var(--text-color-success-secondary); - --fill-warning: var(--text-color-warning); - --fill-warning-primary: var(--text-color-warning-primary); - --fill-warning-secondary: var(--text-color-warning-secondary); - --fill-danger: var(--text-color-danger); - --fill-danger-primary: var(--text-color-danger-primary); - --fill-danger-secondary: var(--text-color-danger-secondary); - /* Icon colors */ - --text-color-icon-primary: var(--txt-icon-primary); - --text-color-icon-accent-subtle: var(--txt-icon-accent-subtle); - --text-color-icon-accent-primary: var(--txt-icon-accent-primary); - --text-color-icon-danger-primary: var(--txt-icon-danger-primary); - --text-color-icon-danger-secondary: var(--txt-icon-danger-secondary); - --text-color-icon-success-primary: var(--txt-icon-success-primary); - --text-color-icon-success-secondary: var(--txt-icon-success-secondary); - --text-color-icon-warning-primary: var(--txt-icon-warning-primary); - --text-color-icon-warning-secondary: var(--txt-icon-warning-secondary); - --text-color-icon-accent-primary-inverse: var(--txt-icon-accent-primary-inverse); - --text-color-icon-accent-secondary: var(--txt-icon-accent-secondary); - --text-color-icon-secondary: var(--txt-icon-secondary); - --text-color-icon-tertiary: var(--txt-icon-tertiary); - --text-color-icon-placeholder: var(--txt-icon-placeholder); - --text-color-icon-disabled: var(--txt-icon-disabled); - --text-color-icon-danger: var(--txt-icon-danger); - --text-color-icon-on-color: var(--txt-icon-on-color); - --text-color-icon-on-color-disabled: var(--txt-icon-on-color-disabled); - --text-color-icon-inverse: var(--txt-icon-inverse); - /* Link colors */ - --text-color-link-primary: var(--txt-link-primary); - --text-color-link-primary-hover: var(--txt-link-primary-hover); - --text-color-link-secondary: var(--txt-link-secondary); - /* Neutral plan colors */ - --text-color-plans-neutral-primary: var(--txt-plans-neutral-primary); - --text-color-plans-neutral-color: var(--txt-plans-neutral-color); - --background-color-plans-neutral-subtle: var(--bg-plans-neutral-subtle); - --background-color-plans-neutral-solid: var(--bg-plans-neutral-solid); - /* Brand plan colors */ - --text-color-plans-brand-primary: var(--txt-plans-brand-primary); - --text-color-plans-brand-color: var(--txt-plans-brand-color); - --background-color-plans-brand-subtle: var(--bg-plans-brand-subtle); - --background-color-plans-brand-solid: var(--bg-plans-brand-solid); - /* Label colors */ - --color-label-indigo-bg: var(--label-indigo-bg); - --color-label-indigo-bg-strong: var(--label-indigo-bg-strong); - --color-label-indigo-hover: var(--label-indigo-hover); - --color-label-indigo-icon: var(--label-indigo-icon); - --color-label-indigo-text: var(--label-indigo-text); - --color-label-indigo-border: var(--label-indigo-border); - --color-label-indigo-focus: var(--label-indigo-focus); - --color-label-emerald-bg: var(--label-emerald-bg); - --color-label-emerald-bg-strong: var(--label-emerald-bg-strong); - --color-label-emerald-hover: var(--label-emerald-hover); - --color-label-emerald-icon: var(--label-emerald-icon); - --color-label-emerald-text: var(--label-emerald-text); - --color-label-emerald-border: var(--label-emerald-border); - --color-label-emerald-focus: var(--label-emerald-focus); - --color-label-grey-bg: var(--label-grey-bg); - --color-label-grey-bg-strong: var(--label-grey-bg-strong); - --color-label-grey-hover: var(--label-grey-hover); - --color-label-grey-icon: var(--label-grey-icon); - --color-label-grey-text: var(--label-grey-text); - --color-label-grey-border: var(--label-grey-border); - --color-label-grey-focus: var(--label-grey-focus); - --color-label-crimson-bg: var(--label-crimson-bg); - --color-label-crimson-bg-strong: var(--label-crimson-bg-strong); - --color-label-crimson-hover: var(--label-crimson-hover); - --color-label-crimson-icon: var(--label-crimson-icon); - --color-label-crimson-text: var(--label-crimson-text); - --color-label-crimson-border: var(--label-crimson-border); - --color-label-crimson-focus: var(--label-crimson-focus); - --color-label-yellow-bg: var(--label-yellow-bg); - --color-label-yellow-bg-strong: var(--label-yellow-bg-strong); - --color-label-yellow-hover: var(--label-yellow-hover); - --color-label-yellow-icon: var(--label-yellow-icon); - --color-label-yellow-text: var(--label-yellow-text); - --color-label-yellow-border: var(--label-yellow-border); - --color-label-yellow-focus: var(--label-yellow-focus); - /* ---------- Priority colors ---------- */ - /* Text */ - --text-color-priority-urgent: var(--priority-urgent); - --text-color-priority-high: var(--priority-high); - --text-color-priority-medium: var(--priority-medium); - --text-color-priority-low: var(--priority-low); - --text-color-priority-none: var(--priority-none); - /* Border */ - --border-color-priority-urgent: var(--priority-urgent); - --border-color-priority-high: var(--priority-high); - --border-color-priority-medium: var(--priority-medium); - --border-color-priority-low: var(--priority-low); - --border-color-priority-none: var(--priority-none); -} - -/* ---------- Typography tokens ---------- */ -@theme { - /* ---------- Font family ---------- */ - --font-*: initial; - --font-heading: - "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", - "Noto Color Emoji"; - --font-body: - "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", - "Noto Color Emoji"; - --font-code: - "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - - /* ---------- Font weight ---------- */ - --font-weight-*: initial; - --font-weight-light: 300; - --font-weight-regular: 400; - --font-weight-medium: 500; - --font-weight-semibold: 600; - --font-weight-bold: 700; - --font-weight-heavy: 800; - - /* ---------- Font size ---------- */ - --text-*: initial; - --text-9: 0.5625rem; - --text-10: 0.625rem; - --text-11: 0.6875rem; - --text-12: 0.75rem; - --text-13: 0.8125rem; - --text-14: 0.875rem; - --text-16: 1rem; - --text-18: 1.125rem; - --text-20: 1.25rem; - --text-24: 1.5rem; - --text-28: 1.75rem; - --text-32: 2rem; - --text-40: 2.5rem; - - /* ---------- Letter spacing ---------- */ - --tracking-*: initial; - --tracking-extra-tight: -0.025rem; - --tracking-tight: -0.05rem; - --tracking-default: 0; - --tracking-wide: 0.05rem; - - /* ---------- Heading text tokens ---------- */ - --text-h1-regular: var(--text-32); - --text-h1-regular--line-height: 1.2; - --text-h1-regular--letter-spacing: var(--tracking-default); - --text-h1-regular--font-weight: var(--font-weight-regular); - - --text-h1-medium: var(--text-32); - --text-h1-medium--line-height: 1.2; - --text-h1-medium--letter-spacing: var(--tracking-default); - --text-h1-medium--font-weight: var(--font-weight-medium); - - --text-h1-semibold: var(--text-32); - --text-h1-semibold--line-height: 1.2; - --text-h1-semibold--letter-spacing: var(--tracking-default); - --text-h1-semibold--font-weight: var(--font-weight-semibold); - - --text-h1-bold: var(--text-32); - --text-h1-bold--line-height: 1.2; - --text-h1-bold--letter-spacing: var(--tracking-default); - --text-h1-bold--font-weight: var(--font-weight-bold); - - --text-h2-regular: var(--text-28); - --text-h2-regular--line-height: 1.2; - --text-h2-regular--letter-spacing: var(--tracking-default); - --text-h2-regular--font-weight: var(--font-weight-regular); - - --text-h2-medium: var(--text-28); - --text-h2-medium--line-height: 1.2; - --text-h2-medium--letter-spacing: var(--tracking-default); - --text-h2-medium--font-weight: var(--font-weight-medium); - - --text-h2-semibold: var(--text-28); - --text-h2-semibold--line-height: 1.2; - --text-h2-semibold--letter-spacing: var(--tracking-default); - --text-h2-semibold--font-weight: var(--font-weight-semibold); - - --text-h2-bold: var(--text-28); - --text-h2-bold--line-height: 1.2; - --text-h2-bold--letter-spacing: var(--tracking-default); - --text-h2-bold--font-weight: var(--font-weight-bold); - - --text-h3-regular: var(--text-24); - --text-h3-regular--line-height: 1.2; - --text-h3-regular--letter-spacing: var(--tracking-default); - --text-h3-regular--font-weight: var(--font-weight-regular); - - --text-h3-medium: var(--text-24); - --text-h3-medium--line-height: 1.2; - --text-h3-medium--letter-spacing: var(--tracking-default); - --text-h3-medium--font-weight: var(--font-weight-medium); - - --text-h3-semibold: var(--text-24); - --text-h3-semibold--line-height: 1.2; - --text-h3-semibold--letter-spacing: var(--tracking-default); - --text-h3-semibold--font-weight: var(--font-weight-semibold); - - --text-h3-bold: var(--text-24); - --text-h3-bold--line-height: 1.2; - --text-h3-bold--letter-spacing: var(--tracking-default); - --text-h3-bold--font-weight: var(--font-weight-bold); - - --text-h4-regular: var(--text-20); - --text-h4-regular--line-height: 1.2; - --text-h4-regular--letter-spacing: var(--tracking-default); - --text-h4-regular--font-weight: var(--font-weight-regular); - - --text-h4-medium: var(--text-20); - --text-h4-medium--line-height: 1.2; - --text-h4-medium--letter-spacing: var(--tracking-default); - --text-h4-medium--font-weight: var(--font-weight-medium); - - --text-h4-semibold: var(--text-20); - --text-h4-semibold--line-height: 1.2; - --text-h4-semibold--letter-spacing: var(--tracking-default); - --text-h4-semibold--font-weight: var(--font-weight-semibold); - - --text-h4-bold: var(--text-20); - --text-h4-bold--line-height: 1.2; - --text-h4-bold--letter-spacing: var(--tracking-default); - --text-h4-bold--font-weight: var(--font-weight-bold); - - --text-h5-regular: var(--text-18); - --text-h5-regular--line-height: 1.2; - --text-h5-regular--letter-spacing: var(--tracking-default); - --text-h5-regular--font-weight: var(--font-weight-regular); - - --text-h5-medium: var(--text-18); - --text-h5-medium--line-height: 1.2; - --text-h5-medium--letter-spacing: var(--tracking-default); - --text-h5-medium--font-weight: var(--font-weight-medium); - - --text-h5-semibold: var(--text-18); - --text-h5-semibold--line-height: 1.2; - --text-h5-semibold--letter-spacing: var(--tracking-default); - --text-h5-semibold--font-weight: var(--font-weight-semibold); - - --text-h5-bold: var(--text-18); - --text-h5-bold--line-height: 1.2; - --text-h5-bold--letter-spacing: var(--tracking-default); - --text-h5-bold--font-weight: var(--font-weight-bold); - - --text-h6-regular: var(--text-16); - --text-h6-regular--line-height: 1.2; - --text-h6-regular--letter-spacing: var(--tracking-default); - --text-h6-regular--font-weight: var(--font-weight-regular); - - --text-h6-medium: var(--text-16); - --text-h6-medium--line-height: 1.2; - --text-h6-medium--letter-spacing: var(--tracking-default); - --text-h6-medium--font-weight: var(--font-weight-medium); - - --text-h6-semibold: var(--text-16); - --text-h6-semibold--line-height: 1.2; - --text-h6-semibold--letter-spacing: var(--tracking-default); - --text-h6-semibold--font-weight: var(--font-weight-semibold); - - --text-h6-bold: var(--text-16); - --text-h6-bold--line-height: 1.2; - --text-h6-bold--letter-spacing: var(--tracking-default); - --text-h6-bold--font-weight: var(--font-weight-bold); - - /* ---------- Body text tokens ---------- */ - --text-body-md-regular: var(--text-16); - --text-body-md-regular--line-height: 1.4; - --text-body-md-regular--letter-spacing: calc(0.01 * var(--text-16)); - --text-body-md-regular--font-weight: var(--font-weight-regular); - - --text-body-md-medium: var(--text-16); - --text-body-md-medium--line-height: 1.4; - --text-body-md-medium--letter-spacing: calc(0.01 * var(--text-16)); - --text-body-md-medium--font-weight: var(--font-weight-medium); - - --text-body-md-semibold: var(--text-16); - --text-body-md-semibold--line-height: 1.4; - --text-body-md-semibold--letter-spacing: calc(0.01 * var(--text-16)); - --text-body-md-semibold--font-weight: var(--font-weight-semibold); - - --text-body-md-bold: var(--text-16); - --text-body-md-bold--line-height: 1.4; - --text-body-md-bold--letter-spacing: calc(0.01 * var(--text-16)); - --text-body-md-bold--font-weight: var(--font-weight-bold); - - --text-body-sm-regular: var(--text-14); - --text-body-sm-regular--line-height: 1.4; - --text-body-sm-regular--letter-spacing: calc(0.01 * var(--text-14)); - --text-body-sm-regular--font-weight: var(--font-weight-regular); - - --text-body-sm-medium: var(--text-14); - --text-body-sm-medium--line-height: 1.4; - --text-body-sm-medium--letter-spacing: calc(0.01 * var(--text-14)); - --text-body-sm-medium--font-weight: var(--font-weight-medium); - - --text-body-sm-semibold: var(--text-14); - --text-body-sm-semibold--line-height: 1.4; - --text-body-sm-semibold--letter-spacing: calc(0.01 * var(--text-14)); - --text-body-sm-semibold--font-weight: var(--font-weight-semibold); - - --text-body-sm-bold: var(--text-14); - --text-body-sm-bold--line-height: 1.4; - --text-body-sm-bold--letter-spacing: calc(0.01 * var(--text-14)); - --text-body-sm-bold--font-weight: var(--font-weight-bold); - - --text-body-xs-regular: var(--text-13); - --text-body-xs-regular--line-height: 1.4; - --text-body-xs-regular--letter-spacing: calc(0.01 * var(--text-13)); - --text-body-xs-regular--font-weight: var(--font-weight-regular); - - --text-body-xs-medium: var(--text-13); - --text-body-xs-medium--line-height: 1.4; - --text-body-xs-medium--letter-spacing: calc(0.01 * var(--text-13)); - --text-body-xs-medium--font-weight: var(--font-weight-medium); - - --text-body-xs-semibold: var(--text-13); - --text-body-xs-semibold--line-height: 1.4; - --text-body-xs-semibold--letter-spacing: calc(0.01 * var(--text-13)); - --text-body-xs-semibold--font-weight: var(--font-weight-semibold); - - --text-body-xs-bold: var(--text-13); - --text-body-xs-bold--line-height: 1.4; - --text-body-xs-bold--letter-spacing: calc(0.01 * var(--text-13)); - --text-body-xs-bold--font-weight: var(--font-weight-bold); - - --text-caption-md-regular: var(--text-12); - --text-caption-md-regular--line-height: 1.1; - --text-caption-md-regular--letter-spacing: var(--tracking-default); - --text-caption-md-regular--font-weight: var(--font-weight-regular); - - --text-caption-md-medium: var(--text-12); - --text-caption-md-medium--line-height: 1.1; - --text-caption-md-medium--letter-spacing: var(--tracking-default); - --text-caption-md-medium--font-weight: var(--font-weight-medium); - - --text-caption-md-semibold: var(--text-12); - --text-caption-md-semibold--line-height: 1.1; - --text-caption-md-semibold--letter-spacing: var(--tracking-default); - --text-caption-md-semibold--font-weight: var(--font-weight-semibold); - - --text-caption-md-bold: var(--text-12); - --text-caption-md-bold--line-height: 1.1; - --text-caption-md-bold--letter-spacing: var(--tracking-default); - --text-caption-md-bold--font-weight: var(--font-weight-bold); - - --text-caption-sm-regular: var(--text-11); - --text-caption-sm-regular--line-height: 1.1; - --text-caption-sm-regular--letter-spacing: var(--tracking-default); - --text-caption-sm-regular--font-weight: var(--font-weight-regular); - - --text-caption-sm-medium: var(--text-11); - --text-caption-sm-medium--line-height: 1.1; - --text-caption-sm-medium--letter-spacing: var(--tracking-default); - --text-caption-sm-medium--font-weight: var(--font-weight-medium); - - --text-caption-sm-semibold: var(--text-11); - --text-caption-sm-semibold--line-height: 1.1; - --text-caption-sm-semibold--letter-spacing: var(--tracking-default); - --text-caption-sm-semibold--font-weight: var(--font-weight-semibold); - - --text-caption-sm-bold: var(--text-11); - --text-caption-sm-bold--line-height: 1.1; - --text-caption-sm-bold--letter-spacing: var(--tracking-default); - --text-caption-sm-bold--font-weight: var(--font-weight-bold); - - --text-caption-xs-regular: var(--text-10); - --text-caption-xs-regular--line-height: 1; - --text-caption-xs-regular--letter-spacing: calc(0.01 * var(--text-10)); - --text-caption-xs-regular--font-weight: var(--font-weight-regular); - - --text-caption-xs-medium: var(--text-10); - --text-caption-xs-medium--line-height: 1; - --text-caption-xs-medium--letter-spacing: calc(0.01 * var(--text-10)); - --text-caption-xs-medium--font-weight: var(--font-weight-medium); - - --text-caption-xs-semibold: var(--text-10); - --text-caption-xs-semibold--line-height: 1; - --text-caption-xs-semibold--letter-spacing: calc(0.01 * var(--text-10)); - --text-caption-xs-semibold--font-weight: var(--font-weight-semibold); - - --text-caption-xs-bold: var(--text-10); - --text-caption-xs-bold--line-height: 1; - --text-caption-xs-bold--letter-spacing: calc(0.01 * var(--text-10)); - --text-caption-xs-bold--font-weight: var(--font-weight-bold); -} - -/* -------------------- Utility classes -------------------- */ -@utility scrollbar-hide { - -ms-overflow-style: none; - scrollbar-width: none; - &::-webkit-scrollbar { - display: none; - } -} - -@utility material-symbols-rounded { - font-family: "Material Symbols Rounded"; - font-weight: normal; - font-style: normal; - font-size: 24px; - line-height: 1; - letter-spacing: normal; - text-transform: none; - display: inline-block; - white-space: nowrap; - word-wrap: normal; - direction: ltr; - font-feature-settings: "liga"; - -webkit-font-smoothing: antialiased; -} - -/* Tailwind typography plugin overwrites */ -@utility prose { - --tw-prose-body: var(--text-color-primary); - --tw-prose-p: var(--text-color-primary); - --tw-prose-headings: var(--text-color-primary); - --tw-prose-lead: var(--text-color-primary); - --tw-prose-links: var(--text-color-link-primary); - --tw-prose-bold: "inherit"; - --tw-prose-counters: var(--text-color-primary); - --tw-prose-bullets: var(--text-color-primary); - --tw-prose-hr: var(--text-color-primary); - --tw-prose-quotes: var(--text-color-primary); - --tw-prose-quote-borders: var(--border-color-subtle); - --tw-prose-code: var(--text-color-primary); - --tw-prose-pre-code: var(--text-color-primary); - --tw-prose-pre-bg: var(--background-color-layer-1); - --tw-prose-th-borders: var(--border-color-subtle); - --tw-prose-td-borders: var(--border-color-subtle); -} diff --git a/packages/ui/src/scroll-area.tsx b/packages/ui/src/scroll-area.tsx index 4ce2a1edba..7ec69de676 100644 --- a/packages/ui/src/scroll-area.tsx +++ b/packages/ui/src/scroll-area.tsx @@ -47,7 +47,7 @@ export function ScrollArea(props: TScrollAreaProps) { > @@ -61,7 +61,7 @@ export function ScrollArea(props: TScrollAreaProps) { > diff --git a/packages/utils/src/theme/constants.ts b/packages/utils/src/theme/constants.ts index 5ee4ef8784..c572e53b34 100644 --- a/packages/utils/src/theme/constants.ts +++ b/packages/utils/src/theme/constants.ts @@ -10,12 +10,19 @@ */ /** - * Alpha mapping for 14-shade palette system + * Alpha mapping for 14-shade palette system. + * + * Must mirror the --alpha-white-* / --alpha-black-* ladder in + * @makeplane/propel (styles/variables.css), which is the source of truth for + * the default themes. These values are only applied for custom themes, so any + * drift shows up as custom themes rendering differently from the default one — + * silently, with no build error. Rungs 100-300 are deliberately much lighter + * than the linear 0.05 step the rest of the scale follows. */ export const ALPHA_MAPPING = { - 100: 0.05, - 200: 0.1, - 300: 0.15, + 100: 0.04, + 200: 0.06, + 300: 0.08, 400: 0.2, 500: 0.3, 600: 0.4, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bbf11e23d1..d54e1f78c4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1711,6 +1711,9 @@ importers: packages/tailwind-config: dependencies: + '@makeplane/propel': + specifier: 0.2.0 + version: 0.2.0(@date-fns/tz@1.4.1)(@types/react@18.3.11)(date-fns@4.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@4.1.17) '@tailwindcss/postcss': specifier: 'catalog:' version: 4.1.17 @@ -2237,6 +2240,33 @@ packages: '@types/react': optional: true + '@base-ui/react@1.7.0': + resolution: {integrity: sha512-j+8QjX44C32jrXD/qyEAGpFr70FRpGL2CY61mQd9nBPWN737CK0xxD1ceJ055rW4RtdvFDT1e7otzdlfxvsYug==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@date-fns/tz': ^1.2.0 + '@types/react': ^17 || ^18 || ^19 + date-fns: ^4.0.0 + react: ^17 || ^18 || ^19 + react-dom: ^17 || ^18 || ^19 + peerDependenciesMeta: + '@date-fns/tz': + optional: true + '@types/react': + optional: true + date-fns: + optional: true + + '@base-ui/utils@0.3.2': + resolution: {integrity: sha512-oWy1aq/I2GmYjpl4PhEAhzflF8VPGKgZeq0xAWTbfD5KBWyxcN0ZP2+WHSUm/5Z6lVMBDLReLcoXwSYoRc/zNQ==} + peerDependencies: + '@types/react': ^17 || ^18 || ^19 + react: ^17 || ^18 || ^19 + react-dom: ^17 || ^18 || ^19 + peerDependenciesMeta: + '@types/react': + optional: true + '@bcoe/v8-coverage@1.0.2': resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==} engines: {node: '>=18'} @@ -2586,15 +2616,27 @@ packages: '@floating-ui/core@1.7.3': resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==} + '@floating-ui/core@1.8.0': + resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==} + '@floating-ui/dom@1.7.4': resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==} + '@floating-ui/dom@1.8.0': + resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==} + '@floating-ui/react-dom@2.1.6': resolution: {integrity: sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==} peerDependencies: react: '>=16.8.0' react-dom: '>=16.8.0' + '@floating-ui/react-dom@2.1.9': + resolution: {integrity: sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + '@floating-ui/react@0.26.28': resolution: {integrity: sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==} peerDependencies: @@ -2604,6 +2646,9 @@ packages: '@floating-ui/utils@0.2.10': resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==} + '@floating-ui/utils@0.2.12': + resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==} + '@fontsource-variable/inter@5.2.8': resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==} @@ -2924,6 +2969,14 @@ packages: peerDependencies: '@types/react': 17 || 18 || 19 + '@makeplane/propel@0.2.0': + resolution: {integrity: sha512-a4gd9m9gTMbc2NOrpb1jrSkM/OtocVBTf2bmnaAdU8K8Xw3OoTgvMLM3nRtfUbSFNLl1OjG7SCXeg2x/7lYvSA==} + engines: {node: ^20.19.0 || >=22.12.0} + peerDependencies: + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 + tailwindcss: ^4.0.0 + '@mdx-js/react@3.1.0': resolution: {integrity: sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==} peerDependencies: @@ -6010,6 +6063,7 @@ packages: crypto-js@4.2.0: resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==} + deprecated: Active development of CryptoJS has been discontinued. This library is no longer maintained. css-loader@7.1.4: resolution: {integrity: sha512-vv3J9tlOl04WjiMvHQI/9tmIrCxVrj6PFbHemBB1iihpeRbi/I4h033eoFIhwxBBqLhI0KYFS7yvynBFhIZfTw==} @@ -7564,6 +7618,11 @@ packages: peerDependencies: react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 + lucide-react@1.33.0: + resolution: {integrity: sha512-MTRwMy0ZlL8Ur/vOAiJ9XGHE+kFPC7brq6MxAm0GiGXEBj0qy0jA/pG4N675oSzciO/UCdX8T+5yUQdmDeTLxg==} + peerDependencies: + react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 + lz-string@1.5.0: resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==} hasBin: true @@ -8524,6 +8583,16 @@ packages: peerDependencies: react: '*' + react-day-picker@10.0.1: + resolution: {integrity: sha512-eNh6BlwcYInWaJtRv18mXQ06Ys/H6rdTZAnTaSdOYJuTpwP1JMCHNd1FDRadA+gbeinq+psdULN5Xnowy9mV8w==} + engines: {node: '>=18'} + peerDependencies: + '@types/react': '>=16.8.0' + react: '>=16.8.0' + peerDependenciesMeta: + '@types/react': + optional: true + react-day-picker@9.5.0: resolution: {integrity: sha512-WmJnPFVLnKh5Qscm7wavMNg86rqPverSWjx+zgK8/ZmGRSQ8c8OoqW10RI+AzAfT2atIxImpCUU2R9Z7Xb2SUA==} engines: {node: '>=18'} @@ -8794,6 +8863,9 @@ packages: reselect@5.1.1: resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==} + reselect@5.3.0: + resolution: {integrity: sha512-XGoLeRAVzUTcJ1qkxPQhDJyIZ5d6zzZD9nT7AEZOaaU9UbWclhycElmhO+VD5bFeLuzhPBaOV2oXC8uG35ZSpg==} + resolve-from@4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'} @@ -10260,6 +10332,31 @@ snapshots: optionalDependencies: '@types/react': 18.3.11 + '@base-ui/react@1.7.0(@date-fns/tz@1.4.1)(@types/react@18.3.11)(date-fns@4.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.29.7 + '@base-ui/utils': 0.3.2(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@floating-ui/react-dom': 2.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@floating-ui/utils': 0.2.12 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + use-sync-external-store: 1.6.0(react@18.3.1) + optionalDependencies: + '@date-fns/tz': 1.4.1 + '@types/react': 18.3.11 + date-fns: 4.1.0 + + '@base-ui/utils@0.3.2(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.29.7 + '@floating-ui/utils': 0.2.12 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + reselect: 5.3.0 + use-sync-external-store: 1.6.0(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.11 + '@bcoe/v8-coverage@1.0.2': {} '@blueprintjs/colors@4.2.1': @@ -10582,17 +10679,32 @@ snapshots: dependencies: '@floating-ui/utils': 0.2.10 + '@floating-ui/core@1.8.0': + dependencies: + '@floating-ui/utils': 0.2.12 + '@floating-ui/dom@1.7.4': dependencies: '@floating-ui/core': 1.7.3 '@floating-ui/utils': 0.2.10 + '@floating-ui/dom@1.8.0': + dependencies: + '@floating-ui/core': 1.8.0 + '@floating-ui/utils': 0.2.12 + '@floating-ui/react-dom@2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@floating-ui/dom': 1.7.4 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + '@floating-ui/react-dom@2.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@floating-ui/dom': 1.8.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@floating-ui/react@0.26.28(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@floating-ui/react-dom': 2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -10603,6 +10715,8 @@ snapshots: '@floating-ui/utils@0.2.10': {} + '@floating-ui/utils@0.2.12': {} + '@fontsource-variable/inter@5.2.8': {} '@fontsource/ibm-plex-mono@5.2.7': {} @@ -10907,6 +11021,20 @@ snapshots: dependencies: '@types/react': 18.3.11 + '@makeplane/propel@0.2.0(@date-fns/tz@1.4.1)(@types/react@18.3.11)(date-fns@4.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@4.1.17)': + dependencies: + '@base-ui/react': 1.7.0(@date-fns/tz@1.4.1)(@types/react@18.3.11)(date-fns@4.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + class-variance-authority: 0.7.1 + lucide-react: 1.33.0(react@18.3.1) + react: 18.3.1 + react-day-picker: 10.0.1(@types/react@18.3.11)(react@18.3.1) + react-dom: 18.3.1(react@18.3.1) + tailwindcss: 4.1.17 + transitivePeerDependencies: + - '@date-fns/tz' + - '@types/react' + - date-fns + '@mdx-js/react@3.1.0(@types/react@18.3.11)(react@18.3.1)': dependencies: '@types/mdx': 2.0.13 @@ -15293,6 +15421,10 @@ snapshots: dependencies: react: 18.3.1 + lucide-react@1.33.0(react@18.3.1): + dependencies: + react: 18.3.1 + lz-string@1.5.0: {} magic-string@0.30.21: @@ -16614,6 +16746,14 @@ snapshots: reactcss: 1.2.3(react@18.3.1) tinycolor2: 1.6.0 + react-day-picker@10.0.1(@types/react@18.3.11)(react@18.3.1): + dependencies: + '@date-fns/tz': 1.4.1 + date-fns: 4.1.0 + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.11 + react-day-picker@9.5.0(react@18.3.1): dependencies: '@date-fns/tz': 1.4.1 @@ -17012,6 +17152,8 @@ snapshots: reselect@5.1.1: {} + reselect@5.3.0: {} + resolve-from@4.0.0: {} resolve-pkg-maps@1.0.0: {}