mirror/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2025-12-19 12:20:11 -06:00
Code Issues Packages Projects Releases Wiki Activity

regression: replace old css vars with the new design system tokens (#8354)

Browse Source 
* chore: replace old css vars

* fix: replace shadow and primary colors

* chore: remove hardcoded colors
This commit is contained in:
Aaryan Khandelwal
2025-12-17 16:28:22 +05:30
committed by GitHub
parent 1338e9d2a4
commit 1f06b67c66
111 changed files with 180 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
View File

@@ -98,7 +98,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
<div
className={`absolute bottom-2 min-w-[10rem] z-[15] ${
isSidebarCollapsed ? "left-full" : "-left-[75px]"
} divide-y divide-subtle-1 whitespace-nowrap rounded-sm bg-surface-1 p-1 shadow-custom-shadow-xs`}
} divide-y divide-subtle-1 whitespace-nowrap rounded-sm bg-surface-1 p-1 shadow-raised-100`}
ref={helpOptionsRef}
>
<div className="space-y-1 pb-2">

12
apps/admin/styles/globals.css
View File

@@ -11,12 +11,12 @@
/* progress bar */
.progress-bar {
fill: currentColor;
color: rgba(var(--color-sidebar-background-100));
color: var(--background-color-surface-1);
}
/* Progress Bar Styles */
:root {
--bprogress-color: rgb(var(--color-primary-100)) !important;
--bprogress-color: var(--background-color-accent-primary);
--bprogress-height: 2.5px !important;
}
@@ -27,8 +27,8 @@
.bprogress .bar {
background: linear-gradient(
90deg,
rgba(var(--color-primary-100), 0.8) 0%,
rgba(var(--color-primary-100), 1) 100%
--alpha(var(--background-color-accent-primary) / 80%) 0%,
--alpha(var(--background-color-accent-primary) / 100%) 100%
) !important;
will-change: width, opacity;
}
@@ -36,7 +36,7 @@
.bprogress .peg {
display: block;
box-shadow:
0 0 8px rgba(var(--color-primary-100), 0.6),
0 0 4px rgba(var(--color-primary-100), 0.4) !important;
0 0 8px --alpha(var(--background-color-accent-primary) / 60%),
0 0 4px --alpha(var(--background-color-accent-primary) / 40%) !important;
will-change: transform, opacity;
}

2
apps/space/core/components/account/auth-forms/email.tsx
View File

@@ -83,7 +83,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
}}
tabIndex={-1}
>
<XCircle className="h-10 w-11 px-3 stroke-custom-text-400 hover:cursor-pointer text-11" />
<XCircle className="h-10 w-11 px-3 stroke-placeholder hover:cursor-pointer text-11" />
</button>
)}
</div>

10
apps/space/core/components/account/auth-forms/password.tsx
View File

@@ -132,7 +132,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
/>
{passwordFormData.email.length > 0 && (
<XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={handleEmailClear}
/>
)}
@@ -158,12 +158,12 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
/>
{showPassword?.password ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
)}
@@ -189,12 +189,12 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
/>
{showPassword?.retypePassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
)}

2
apps/space/core/components/account/auth-forms/unique-code.tsx
View File

@@ -96,7 +96,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
/>
{uniqueCodeFormData.email.length > 0 && (
<XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={handleEmailClear}
/>
)}

2
apps/space/core/components/common/powered-by.tsx
View File

@@ -15,7 +15,7 @@ export function PoweredBy(props: TPoweredBy) {
return (
<a
href={WEBSITE_URL}
className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded-sm border border-subtle bg-surface-1 px-2 py-1 shadow-custom-shadow-2xs"
className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded-sm border border-subtle bg-surface-1 px-2 py-1 shadow-raised-100"
target="_blank"
rel="noreferrer noopener"
>

2
apps/space/core/components/issues/filters/helpers/dropdown.tsx
View File

@@ -46,7 +46,7 @@ export function FiltersDropdown(props: Props) {
>
<Popover.Panel>
<div
className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-custom-shadow-rg"
className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-raised-200"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

2
apps/space/core/components/issues/navbar/user-avatar.tsx
View File

@@ -87,7 +87,7 @@ export const UserAvatar = observer(function UserAvatar() {
>
<Popover.Panel>
<div
className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-custom-shadow-rg p-1"
className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-raised-200 p-1"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

10
apps/space/styles/globals.css
View File

@@ -52,7 +52,7 @@
/* Progress Bar Styles */
:root {
--bprogress-color: rgb(var(--color-primary-100)) !important;
--bprogress-color: var(--background-color-accent-primary);
--bprogress-height: 2.5px !important;
}
@@ -63,8 +63,8 @@
.bprogress .bar {
background: linear-gradient(
90deg,
rgba(var(--color-primary-100), 0.8) 0%,
rgba(var(--color-primary-100), 1) 100%
--alpha(var(--background-color-accent-primary) / 80%) 0%,
--alpha(var(--background-color-accent-primary) / 100%) 100%
) !important;
will-change: width, opacity;
}
@@ -72,7 +72,7 @@
.bprogress .peg {
display: block;
box-shadow:
0 0 8px rgba(var(--color-primary-100), 0.6),
0 0 4px rgba(var(--color-primary-100), 0.4) !important;
0 0 8px --alpha(var(--background-color-accent-primary) / 60%),
0 0 4px --alpha(var(--background-color-accent-primary) / 40%) !important;
will-change: transform, opacity;
}

12
apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx
View File

@@ -149,12 +149,12 @@ function SecurityPage() {
/>
{showPassword?.oldPassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("oldPassword")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("oldPassword")}
/>
)}
@@ -187,12 +187,12 @@ function SecurityPage() {
/>
{showPassword?.password ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
)}
@@ -227,12 +227,12 @@ function SecurityPage() {
/>
{showPassword?.confirmPassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("confirmPassword")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("confirmPassword")}
/>
)}

12
apps/web/app/(all)/profile/security/page.tsx
View File

@@ -147,12 +147,12 @@ function SecurityPage() {
/>
{showPassword?.oldPassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("oldPassword")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("oldPassword")}
/>
)}
@@ -185,12 +185,12 @@ function SecurityPage() {
/>
{showPassword?.password ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
)}
@@ -225,12 +225,12 @@ function SecurityPage() {
/>
{showPassword?.confirmPassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("confirmPassword")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("confirmPassword")}
/>
)}

2
apps/web/ce/components/issues/header.tsx
View File

@@ -93,7 +93,7 @@ export const IssuesHeader = observer(function IssuesHeader() {
target="_blank"
rel="noopener noreferrer"
>
<Circle className="h-1.5 w-1.5 fill-custom-primary-100" strokeWidth={2} />
<Circle className="h-1.5 w-1.5 fill-accent-primary" strokeWidth={2} />
{t("workspace_projects.network.public.title")}
<ExternalLink className="hidden h-3 w-3 group-hover:block" strokeWidth={2} />
</a>

2
apps/web/ce/components/onboarding/tour/root.tsx
View File

@@ -117,7 +117,7 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
</Button>
<button
type="button"
className="bg-transparent text-11 font-medium text-accent-primary outline-custom-text-100"
className="bg-transparent text-11 font-medium text-accent-primary outline-subtle-1"
onClick={() => {
captureClick({
elementName: PRODUCT_TOUR_TRACKER_ELEMENTS.SKIP_BUTTON,

2
apps/web/ce/components/pages/editor/ai/menu.tsx
View File

@@ -138,7 +138,7 @@ export function EditorAIMenu(props: Props) {
return (
<div
className={cn(
"w-[210px] flex flex-col rounded-md border-[0.5px] border-strong bg-surface-1 shadow-custom-shadow-rg transition-all",
"w-[210px] flex flex-col rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 transition-all",
{
"w-[700px]": activeTask,
}

2
apps/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
View File

@@ -8,7 +8,7 @@ export function IssueEmbedUpgradeCard(props: any) {
return (
<div
className={cn(
"w-full bg-layer-1 rounded-md border-[0.5px] border-subtle shadow-custom-shadow-2xs flex items-center justify-between gap-5 px-5 py-2 max-md:flex-wrap",
"w-full bg-layer-1 rounded-md border-[0.5px] border-subtle shadow-raised-100 flex items-center justify-between gap-5 px-5 py-2 max-md:flex-wrap",
{
"border-2": props.selected,
}

2
apps/web/core/components/account/auth-forms/email.tsx
View File

@@ -83,7 +83,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
aria-label={t("aria_labels.auth_forms.clear_email")}
tabIndex={-1}
>
<XCircle className="size-5 stroke-custom-text-400" />
<XCircle className="size-5 stroke-placeholder" />
</button>
)}
</div>

10
apps/web/core/components/account/auth-forms/password.tsx
View File

@@ -203,7 +203,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
onClick={handleEmailClear}
aria-label={t("aria_labels.auth_forms.clear_email")}
>
<XCircle className="size-5 stroke-custom-text-400" />
<XCircle className="size-5 stroke-placeholder" />
</button>
)}
</div>
@@ -236,9 +236,9 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
)}
>
{showPassword?.password ? (
<EyeOff className="size-5 stroke-custom-text-400" />
<EyeOff className="size-5 stroke-placeholder" />
) : (
<Eye className="size-5 stroke-custom-text-400" />
<Eye className="size-5 stroke-placeholder" />
)}
</button>
</div>
@@ -273,9 +273,9 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
onClick={() => handleShowPassword("retypePassword")}
>
{showPassword?.retypePassword ? (
<EyeOff className="size-5 stroke-custom-text-400" />
<EyeOff className="size-5 stroke-placeholder" />
) : (
<Eye className="size-5 stroke-custom-text-400" />
<Eye className="size-5 stroke-placeholder" />
)}
</button>
</div>

8
apps/web/core/components/account/auth-forms/reset-password.tsx
View File

@@ -143,12 +143,12 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
/>
{showPassword.password ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
)}
@@ -172,12 +172,12 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
/>
{showPassword.retypePassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
)}

8
apps/web/core/components/account/auth-forms/set-password.tsx
View File

@@ -160,12 +160,12 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
/>
{showPassword.password ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
)}
@@ -189,12 +189,12 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
/>
{showPassword.retypePassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
)}

2
apps/web/core/components/account/auth-forms/unique-code.tsx
View File

@@ -137,7 +137,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
aria-label={t("aria_labels.auth_forms.clear_email")}
onClick={handleEmailClear}
>
<XCircle className="size-5 stroke-custom-text-400" />
<XCircle className="size-5 stroke-placeholder" />
</button>
)}
</div>

2
apps/web/core/components/base-layouts/layout-switcher.tsx
View File

@@ -29,7 +29,7 @@ export function LayoutSwitcher(props: Props) {
<button
type="button"
className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded-sm transition-all hover:bg-surface-1 ${
selectedLayout === layout.key ? "bg-surface-1 shadow-custom-shadow-2xs" : ""
selectedLayout === layout.key ? "bg-surface-1 shadow-raised-100" : ""
}`}
onClick={() => handleOnChange(layout.key)}
>

2
apps/web/core/components/core/content-overflow-HOC.tsx
View File

@@ -128,7 +128,7 @@ export const ContentOverflowWrapper = observer(function ContentOverflowWrapper(p
<div
className={cn(
"bottom-0 left-0 w-full transition-all duration-300 ease-in-out",
`bg-gradient-to-t from-custom-background-100 to-transparent flex flex-col items-center justify-end`,
`bg-gradient-to-t from-surface-1 to-transparent flex flex-col items-center justify-end`,
"text-center",
{
"absolute h-[100px] opacity-100": !showAll,

2
apps/web/core/components/core/image-picker-popover.tsx
View File

@@ -190,7 +190,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
{isOpen && (
<Popover.Panel
className="absolute right-0 z-20 mt-2 rounded-md border border-subtle bg-surface-1 shadow-custom-shadow-sm"
className="absolute right-0 z-20 mt-2 rounded-md border border-subtle bg-surface-1 shadow-raised-200"
static
>
<div

2
apps/web/core/components/cycles/list/cycle-list-item-action.tsx
View File

@@ -228,7 +228,7 @@ export const CycleListItemAction = observer(function CycleListItemAction(props:
setTransferIssuesModal(true);
}}
>
<TransferIcon className="fill-custom-primary-200 w-4" />
<TransferIcon className="fill-accent-primary w-4" />
<span>{t("project_cycles.transfer_work_items", { count: transferableIssuesCount })}</span>
</div>
)}

2
apps/web/core/components/cycles/transfer-issues-modal.tsx
View File

@@ -110,7 +110,7 @@ export const TransferIssuesModal = observer(function TransferIssuesModal(props:
<div className="flex flex-col gap-4">
<div className="flex items-center justify-between px-5">
<div className="flex items-center gap-1">
<TransferIcon className="w-5 fill-custom-text-100" />
<TransferIcon className="w-5 fill-primary" />
<h4 className="text-18 font-medium text-primary">Transfer work items</h4>
</div>
<button onClick={handleClose}>

2
apps/web/core/components/dropdowns/cycle/cycle-options.tsx
View File

@@ -122,7 +122,7 @@ export const CycleOptions = observer(function CycleOptions(props: CycleOptionsPr
return (
<Combobox.Options className="fixed z-10" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

2
apps/web/core/components/dropdowns/date.tsx
View File

@@ -174,7 +174,7 @@ export const DateDropdown = observer(function DateDropdown(props: Props) {
<Combobox.Options data-prevent-outside-click static>
<div
className={cn(
"my-1 bg-surface-1 shadow-custom-shadow-rg border-[0.5px] border-strong rounded-md overflow-hidden z-30",
"my-1 bg-surface-1 shadow-raised-200 border-[0.5px] border-strong rounded-md overflow-hidden z-30",
optionsClassName
)}
ref={setPopperElement}

2
apps/web/core/components/dropdowns/estimate.tsx
View File

@@ -225,7 +225,7 @@ export const EstimateDropdown = observer(function EstimateDropdown(props: Props)
{isOpen && (
<Combobox.Options className="fixed z-10" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

2
apps/web/core/components/dropdowns/intake-state/base.tsx
View File

@@ -211,7 +211,7 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
{isOpen && (
<Combobox.Options className="fixed z-10" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

2
apps/web/core/components/dropdowns/member/member-options.tsx
View File

@@ -119,7 +119,7 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
<Combobox.Options data-prevent-outside-click static>
<div
className={cn(
"my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none z-30",
"my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none z-30",
optionsClassName
)}
ref={setPopperElement}

2
apps/web/core/components/dropdowns/module/module-options.tsx
View File

@@ -107,7 +107,7 @@ export const ModuleOptions = observer(function ModuleOptions(props: Props) {
return (
<Combobox.Options className="fixed z-10" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

2
apps/web/core/components/dropdowns/priority.tsx
View File

@@ -447,7 +447,7 @@ export function PriorityDropdown(props: Props) {
{isOpen && (
<Combobox.Options className="fixed z-10" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

2
apps/web/core/components/dropdowns/project/base.tsx
View File

@@ -232,7 +232,7 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
{isOpen && (
<Combobox.Options className="fixed z-10" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

2
apps/web/core/components/dropdowns/state/base.tsx
View File

@@ -213,7 +213,7 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
{isOpen && (
<Combobox.Options className="fixed z-10" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

2
apps/web/core/components/editor/embeds/mentions/user.tsx
View File

@@ -50,7 +50,7 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
<Link to={profileLink}>@{userDetails?.display_name}</Link>
</Popover.Button>
<Popover.Panel side="bottom" align="start">
<div className="w-60 bg-surface-1 shadow-custom-shadow-rg rounded-lg p-3 border-[0.5px] border-strong">
<div className="w-60 bg-surface-1 shadow-raised-200 rounded-lg p-3 border-[0.5px] border-strong">
<div className="flex items-center gap-3">
<div className="flex-shrink-0 size-10 grid place-items-center">
<Avatar

2
apps/web/core/components/editor/sticky-editor/color-palette.tsx
View File

@@ -8,7 +8,7 @@ export const STICKY_COLORS_LIST: {
{
key: "gray",
label: "Gray",
backgroundColor: "rgba(var(--color-background-90))",
backgroundColor: "var(--background-color-layer-2)",
},
{
key: "peach",

2
apps/web/core/components/icons/attachment/setting-icon.tsx
View File

@@ -2,7 +2,7 @@ import React from "react";
import type { Props } from "../types";
export function SettingIcon({ width = "24", height = "24", color = "rgb(var(--color-text-200))", className }: Props) {
export function SettingIcon({ width = "24", height = "24", color = "var(--text-color-secondary)", className }: Props) {
return (
<svg
width={width}

2
apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
View File

@@ -142,7 +142,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
<Combobox.Options className="fixed z-10">
<div
className={`z-10 my-1 w-48 whitespace-nowrap rounded-sm border border-strong bg-surface-1 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none`}
className={`z-10 my-1 w-48 whitespace-nowrap rounded-sm border border-strong bg-surface-1 py-2.5 text-11 shadow-raised-200 focus:outline-none`}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

2
apps/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
View File

@@ -102,7 +102,7 @@ export const CalendarMonthsDropdown = observer(function CalendarMonthsDropdown(p
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
className="w-56 divide-y divide-subtle-1 rounded-sm border border-subtle bg-surface-1 p-3 shadow-custom-shadow-rg"
className="w-56 divide-y divide-subtle-1 rounded-sm border border-subtle bg-surface-1 p-3 shadow-raised-200"
>
<div className="flex items-center justify-between gap-2 pb-3">
<button

2
apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
View File

@@ -129,7 +129,7 @@ export const CalendarOptionsDropdown = observer(function CalendarOptionsDropdown
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
className="absolute right-0 z-10 mt-1 min-w-[12rem] overflow-hidden rounded-sm border border-subtle bg-surface-1 p-1 shadow-custom-shadow-sm"
className="absolute right-0 z-10 mt-1 min-w-[12rem] overflow-hidden rounded-sm border border-subtle bg-surface-1 p-1 shadow-raised-200"
>
<div>
{Object.entries(CALENDAR_LAYOUTS).map(([layout, layoutDetails]) => (

2
apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
View File

@@ -106,7 +106,7 @@ export const CalendarIssueBlock = observer(
className={cn(
"group/calendar-block flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded-sm md:px-1 px-4 py-1.5 ",
{
"bg-surface-2 shadow-custom-shadow-rg border-accent-strong": isDragging,
"bg-surface-2 shadow-raised-200 border-accent-strong": isDragging,
"bg-surface-1 hover:bg-surface-2": !isDragging,
"border border-accent-strong hover:border-accent-strong": getIsIssuePeeked(issue.id),
}

2
apps/web/core/components/issues/issue-layouts/list/list-group.tsx
View File

@@ -252,7 +252,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
ref={groupRef}
className={cn(`relative flex flex-shrink-0 flex-col`, {
"border-accent-strong": isDraggingOverColumn,
"border-custom-error-200": isDraggingOverColumn && isDropDisabled,
"border-danger-subtle": isDraggingOverColumn && isDropDisabled,
})}
>
<Row

2
apps/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
View File

@@ -14,7 +14,7 @@ export const CalendarQuickAddIssueForm = observer(function CalendarQuickAddIssue
<form
ref={ref}
onSubmit={onSubmit}
className="z-50 flex w-full items-center gap-x-2 rounded-sm md:border-[0.5px] border-subtle bg-surface-1 px-2 md:shadow-custom-shadow-2xs transition-opacity"
className="z-50 flex w-full items-center gap-x-2 rounded-sm md:border-[0.5px] border-subtle bg-surface-1 px-2 md:shadow-raised-100 transition-opacity"
>
<h4 className="text-13 md:text-11 leading-5 text-placeholder">{projectDetail?.identifier ?? "..."}</h4>
<input

2
apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
View File

@@ -8,7 +8,7 @@ export const GanttQuickAddIssueForm = observer(function GanttQuickAddIssueForm(p
const { ref, projectDetail, hasError, register, onSubmit, isEpic } = props;
const { t } = useTranslation();
return (
<div className={cn("shadow-custom-shadow-sm", hasError && "border border-red-500/20 bg-red-500/10")}>
<div className={cn("shadow-raised-200", hasError && "border border-red-500/20 bg-red-500/10")}>
<form
ref={ref}
onSubmit={onSubmit}

2
apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
View File

@@ -7,7 +7,7 @@ export const KanbanQuickAddIssueForm = observer(function KanbanQuickAddIssueForm
const { ref, projectDetail, register, onSubmit, isEpic } = props;
const { t } = useTranslation();
return (
<div className="m-1 overflow-hidden rounded-sm shadow-custom-shadow-sm">
<div className="m-1 overflow-hidden rounded-sm shadow-raised-200">
<form ref={ref} onSubmit={onSubmit} className="flex w-full items-center gap-x-3 bg-surface-1 p-3">
<div className="w-full">
<h4 className="text-11 font-medium leading-5 text-tertiary">{projectDetail?.identifier ?? "..."}</h4>

2
apps/web/core/components/issues/issue-layouts/quick-add/form/list.tsx
View File

@@ -7,7 +7,7 @@ export const ListQuickAddIssueForm = observer(function ListQuickAddIssueForm(pro
const { ref, projectDetail, register, onSubmit, isEpic } = props;
const { t } = useTranslation();
return (
<div className="shadow-custom-shadow-sm">
<div className="shadow-raised-200">
<form
ref={ref}
onSubmit={onSubmit}

2
apps/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
View File

@@ -11,7 +11,7 @@ export const SpreadsheetQuickAddIssueForm = observer(function SpreadsheetQuickAd
<form
ref={ref}
onSubmit={onSubmit}
className="z-10 flex items-center gap-x-5 border-[0.5px] border-t-0 border-subtle bg-surface-1 px-4 shadow-custom-shadow-sm"
className="z-10 flex items-center gap-x-5 border-[0.5px] border-t-0 border-subtle bg-surface-1 px-4 shadow-raised-200"
>
<h4 className="w-20 text-11 leading-5 text-placeholder">{projectDetail?.identifier ?? "..."}</h4>
<input

2
apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
View File

@@ -277,7 +277,7 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
{/* Identifier section - conditionally rendered */}
{displayProperties?.key && (
<div className="flex-shrink-0 flex items-center h-full min-w-24">
<div className="relative flex cursor-pointer items-center text-11 hover:text-custom-text-100">
<div className="relative flex cursor-pointer items-center text-11 hover:text-primary">
{issueDetail.project_id && (
<IssueIdentifier
issueId={issueDetail.id}

2
apps/web/core/components/issues/issue-modal/form.tsx
View File

@@ -485,7 +485,7 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
<div
className={cn(
"px-4 py-3 border-t-[0.5px] border-subtle rounded-b-lg bg-surface-1",
activeAdditionalPropertiesLength > 0 && "shadow-custom-shadow-xs"
activeAdditionalPropertiesLength > 0 && "shadow-raised-100"
)}
>
<div className="pb-3">

2
apps/web/core/components/issues/issue-update-status.tsx
View File

@@ -19,7 +19,7 @@ export const NameDescriptionUpdateStatus = observer(function NameDescriptionUpda
}`}
>
{isSubmitting !== "submitted" && isSubmitting !== "saved" && (
<RefreshCw className="animate-spin size-3.5 stroke-custom-text-300" />
<RefreshCw className="animate-spin size-3.5 stroke-tertiary" />
)}
<span className="text-13 text-tertiary">{isSubmitting === "submitting" ? "Saving..." : "Saved"}</span>
</div>

4
apps/web/core/components/issues/layout-quick-actions.tsx
View File

@@ -48,7 +48,7 @@ export const LayoutQuickActions: React.FC<Props> = observer((props) => {
placement="bottom-end"
closeOnSelect
maxHeight="lg"
className="flex-shrink-0 flex items-center justify-center size-[26px] bg-custom-background-80/70 rounded"
className="flex-shrink-0 flex items-center justify-center size-[26px] rounded"
>
{MENU_ITEMS.map((item) => {
if (item.shouldRender === false) return null;
@@ -57,7 +57,7 @@ export const LayoutQuickActions: React.FC<Props> = observer((props) => {
key={item.key}
onClick={item.action}
className={cn("flex items-center gap-2", {
"text-custom-text-400": item.disabled,
"text-placeholder": item.disabled,
})}
disabled={item.disabled}
>

2
apps/web/core/components/issues/preview-card/root.tsx
View File

@@ -32,7 +32,7 @@ export const WorkItemPreviewCard = observer(function WorkItemPreviewCard(props:
const stateName = stateDetails?.name ?? fallbackStateDetails?.name;
return (
<div className="p-3 space-y-2 w-72 rounded-lg shadow-custom-shadow-rg bg-surface-1 border-[0.5px] border-strong">
<div className="p-3 space-y-2 w-72 rounded-lg shadow-raised-200 bg-surface-1 border-[0.5px] border-strong">
<div className="flex items-center justify-between gap-3 text-secondary">
<IssueIdentifier
size="xs"

2
apps/web/core/components/issues/select/base.tsx
View File

@@ -188,7 +188,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
{isDropdownOpen && (
<Combobox.Options className="fixed z-10" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

2
apps/web/core/components/labels/create-update-label-inline.tsx
View File

@@ -34,7 +34,7 @@ type TCreateUpdateLabelInlineProps = {
const defaultValues: Partial<IIssueLabel> = {
name: "",
color: "rgb(var(--color-text-200))",
color: "var(--text-color-secondary)",
};
export const CreateUpdateLabelInline = observer(

6
apps/web/core/components/onboarding/invite-members.tsx
View File

@@ -197,9 +197,7 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
<ChevronDownIcon
className={`size-3 ${
!getValues(`emails.${index}.role_active`)
? "stroke-onboarding-text-400"
: "stroke-onboarding-text-100"
!getValues(`emails.${index}.role_active`) ? "stroke-placeholder" : "stroke-primary"
}`}
/>
</Listbox.Button>
@@ -387,7 +385,7 @@ export function InviteMembers(props: Props) {
</div>
<button
type="button"
className="flex items-center mx-8 gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-custom-primary-100"
className="flex items-center mx-8 gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-accent-strong"
onClick={appendField}
>
<Plus className="h-4 w-4" strokeWidth={2} />

10
apps/web/core/components/onboarding/profile-setup.tsx
View File

@@ -315,7 +315,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
{!userAvatar || userAvatar === "" ? (
<div className="flex flex-col items-center justify-between">
<div className="relative h-14 w-14 overflow-hidden">
<div className="absolute left-0 top-0 flex items-center justify-center h-full w-full rounded-full text-on-color text-24 font-medium bg-[#9747FF] uppercase">
<div className="absolute left-0 top-0 flex items-center justify-center h-full w-full rounded-full text-on-color text-24 font-medium bg-accent-primary uppercase">
{watch("first_name")[0] ?? "R"}
</div>
</div>
@@ -437,12 +437,12 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
/>
{showPassword.password ? (
<EyeOff
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-4 w-4 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
) : (
<Eye
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-4 w-4 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
)}
@@ -477,12 +477,12 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
/>
{showPassword.retypePassword ? (
<EyeOff
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-4 w-4 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
) : (
<Eye
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-4 w-4 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
)}

2
apps/web/core/components/onboarding/steps/profile/root.tsx
View File

@@ -172,7 +172,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
/>
<div className="flex items-center gap-4">
<button
className="size-12 rounded-full bg-[#028375] flex items-center justify-center text-on-color font-semibold text-18"
className="size-12 rounded-full bg-accent-primary flex items-center justify-center text-on-color font-semibold text-18"
type="button"
onClick={() => setIsImageUploadModalOpen(true)}
>

6
apps/web/core/components/onboarding/steps/team/root.tsx
View File

@@ -198,9 +198,7 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
<ChevronDownIcon
className={`size-3 ${
!getValues(`emails.${index}.role_active`)
? "stroke-onboarding-text-400"
: "stroke-onboarding-text-100"
!getValues(`emails.${index}.role_active`) ? "stroke-placeholder" : "stroke-primary"
}`}
/>
</Listbox.Button>
@@ -387,7 +385,7 @@ export const InviteTeamStep = observer(function InviteTeamStep(props: Props) {
</div>
<button
type="button"
className="flex items-center mx-8 gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-custom-primary-100"
className="flex items-center mx-8 gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-accent-strong"
onClick={appendField}
>
<Plus className="h-4 w-4" strokeWidth={2} />

2
apps/web/core/components/onboarding/switch-account-dropdown.tsx
View File

@@ -55,7 +55,7 @@ export const SwitchAccountDropdown = observer(function SwitchAccountDropdown(pro
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Menu.Items className="absolute z-10 right-0 rounded-md border-[0.5px] border-strong mt-2 bg-surface-1 px-2 py-2.5 text-13 min-w-[12rem] shadow-custom-shadow-rg">
<Menu.Items className="absolute z-10 right-0 rounded-md border-[0.5px] border-strong mt-2 bg-surface-1 px-2 py-2.5 text-13 min-w-[12rem] shadow-raised-200">
<Menu.Item
as="button"
type="button"

11
apps/web/core/components/pages/editor/content-limit-banner.tsx
View File

@@ -8,13 +8,8 @@ type Props = {
export function ContentLimitBanner({ className, onDismiss }: Props) {
return (
<div
className={cn(
"flex items-center gap-2 bg-custom-background-80 border-b border-custom-border-200 px-4 py-2.5 text-sm",
className
)}
>
<div className="flex items-center gap-2 text-custom-text-200 mx-auto">
<div className={cn("flex items-center gap-2 bg-layer-2 border-b border-subtle-1 px-4 py-2.5 text-sm", className)}>
<div className="flex items-center gap-2 text-secondary mx-auto">
<span className="text-amber-500">
<TriangleAlert />
</span>
@@ -26,7 +21,7 @@ export function ContentLimitBanner({ className, onDismiss }: Props) {
<button
type="button"
onClick={onDismiss}
className="ml-auto text-custom-text-300 hover:text-custom-text-200"
className="ml-auto text-placeholder hover:text-secondary"
aria-label="Dismiss content limit warning"
>
✕

2
apps/web/core/components/pages/editor/summary/content-browser.tsx
View File

@@ -63,7 +63,7 @@ export function PageContentBrowser(props: Props) {
return (
<div
key={`${marking.level}-${marking.sequence}`}
className="flex-shrink-0 h-0.5 bg-custom-border-400 self-end rounded-xs"
className="flex-shrink-0 h-0.5 bg-layer-3 self-end rounded-xs"
style={{
width: marking.level === 1 ? "20px" : marking.level === 2 ? "18px" : "14px",
}}

2
apps/web/core/components/pages/editor/toolbar/color-dropdown.tsx
View File

@@ -59,7 +59,7 @@ export const ColorDropdown = memo(function ColorDropdown(props: Props) {
</Popover.Button>
<Popover.Panel
as="div"
className="fixed z-20 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 shadow-custom-shadow-rg p-2 space-y-2"
className="fixed z-20 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 p-2 space-y-2"
>
<div className="space-y-1.5">
<p className="text-11 text-tertiary font-semibold">Text colors</p>

2
apps/web/core/components/power-k/ui/modal/header.tsx
View File

@@ -41,7 +41,7 @@ export function PowerKModalHeader(props: Props) {
value={searchTerm}
onValueChange={onSearchChange}
placeholder={placeholder}
className="flex-1 bg-transparent text-13 text-primary placeholder-custom-text-400 outline-none"
className="flex-1 bg-transparent text-13 text-primary placeholder-(--text-color-placeholder) outline-none"
autoFocus
/>
{searchTerm && (

3
apps/web/core/components/profile/overview/state-distribution.tsx
View File

@@ -59,7 +59,8 @@ export function ProfileStateDistribution({ stateDistribution, userProfile }: Pro
<div
className="h-2.5 w-2.5 rounded-xs"
style={{
backgroundColor: STATE_GROUPS[group.state_group]?.color ?? "rgb(var(--color-primary-100))",
backgroundColor:
STATE_GROUPS[group.state_group]?.color ?? "var(--background-color-accent-primary)",
}}
/>
<div className="whitespace-nowrap">{STATE_GROUPS[group.state_group].label}</div>

2
apps/web/core/components/profile/sidebar.tsx
View File

@@ -117,7 +117,7 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
className="h-full w-full rounded-sm object-cover"
/>
) : (
<div className="flex h-[52px] w-[52px] items-center justify-center rounded-sm bg-[#028375] capitalize text-on-color">
<div className="flex h-[52px] w-[52px] items-center justify-center rounded-sm bg-accent-primary capitalize text-on-color">
{userData?.first_name?.[0]}
</div>
)}

2
apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
View File

@@ -141,7 +141,7 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
<Menu.Items as={Fragment}>
<div
className={cn(
"fixed z-21 mt-1 flex w-[19rem] origin-top-left flex-col divide-y divide-subtle rounded-md border-[0.5px] border-strong bg-surface-1 shadow-custom-shadow-rg outline-none",
"fixed z-21 mt-1 flex w-[19rem] origin-top-left flex-col divide-y divide-subtle rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 outline-none",
{
"top-11 left-14": variant === "sidebar",
"top-10 left-4": variant === "top-navigation",

11
apps/web/styles/emoji.css
View File

@@ -6,7 +6,7 @@
--epr-picker-border-radius: 0.25rem !important;
--epr-horizontal-padding: 0.5rem !important;
--epr-emoji-padding: 0.5rem !important;
background-color: rgba(var(--color-background-100)) !important;
@apply bg-surface-1!;
}
.epr-main {
@@ -16,8 +16,7 @@
.epr-emoji-category-label {
font-size: 0.7875rem !important;
background-color: rgba(var(--color-background-100), 0.8) !important;
@apply text-tertiary!;
@apply bg-surface-1/80! text-tertiary!;
}
.epr-category-nav,
@@ -27,7 +26,7 @@
button.epr-emoji:hover > *,
button.epr-emoji:focus > * {
background-color: rgba(var(--color-background-80)) !important;
@apply bg-layer-2!;
}
input.epr-search {
@@ -43,12 +42,12 @@
}
button.epr-btn-clear-search:hover {
background-color: rgba(var(--color-background-80)) !important;
@apply bg-layer-2!;
@apply text-tertiary!;
}
.epr-emoji-variation-picker {
background-color: rgba(var(--color-background-100)) !important;
@apply bg-surface-1!;
@apply border-subtle-1!;
}
}

68
apps/web/styles/globals.css
View File

@@ -5,62 +5,6 @@
@import "./emoji.css";
@plugin "@tailwindcss/typography";
:root {
/* Plane subscriptions */
--color-subscription-free-200: 69, 80, 104;
--color-subscription-free-400: 51, 59, 77;
--color-subscription-one-200: 101, 42, 14;
--color-subscription-one-400: 90, 37, 12;
--color-subscription-pro-200: 32, 128, 138;
--color-subscription-pro-400: 24, 96, 104;
--color-subscription-business-200: 142, 33, 87;
--color-subscription-business-400: 103, 24, 63;
--color-subscription-enterprise-200: 86, 5, 145;
--color-subscription-enterprise-400: 73, 4, 123;
}
[data-theme="light"],
[data-theme="light-contrast"] {
/* Plane subscriptions */
--color-subscription-free-200: 69, 80, 104;
--color-subscription-free-400: 51, 59, 77;
--color-subscription-one-200: 101, 42, 14;
--color-subscription-one-400: 90, 37, 12;
--color-subscription-pro-200: 32, 128, 138;
--color-subscription-pro-400: 24, 96, 104;
--color-subscription-business-200: 142, 33, 87;
--color-subscription-business-400: 103, 24, 63;
--color-subscription-enterprise-200: 86, 5, 145;
--color-subscription-enterprise-400: 73, 4, 123;
}
[data-theme="dark"],
[data-theme="dark-contrast"] {
/* Plane subscriptions */
--color-subscription-free-200: 206, 213, 232;
--color-subscription-free-400: 152, 166, 206;
--color-subscription-one-200: 255, 148, 153;
--color-subscription-one-400: 200, 118, 121;
--color-subscription-pro-200: 12, 170, 192;
--color-subscription-pro-400: 9, 130, 154;
--color-subscription-business-200: 206, 34, 119;
--color-subscription-business-400: 140, 23, 81;
--color-subscription-enterprise-200: 182, 71, 255;
--color-subscription-enterprise-400: 134, 11, 203;
}
/* stickies and editor colors */
:root {
/* text colors */
@@ -219,7 +163,7 @@
@keyframes highlight {
0% {
background-color: rgba(var(--color-background-90), 1);
background-color: var(--background-color-layer-2);
border-radius: 4px;
}
100% {
@@ -230,7 +174,7 @@
/* Progress Bar Styles */
:root {
--bprogress-color: rgb(var(--color-primary-100)) !important;
--bprogress-color: var(--background-color-accent-primary);
--bprogress-height: 2.5px !important;
}
@@ -241,8 +185,8 @@
.bprogress .bar {
background: linear-gradient(
90deg,
rgba(var(--color-primary-100), 0.8) 0%,
rgba(var(--color-primary-100), 1) 100%
--alpha(var(--background-color-accent-primary) / 80%) 0%,
--alpha(var(--background-color-accent-primary) / 100%) 100%
) !important;
will-change: width, opacity;
}
@@ -250,7 +194,7 @@
.bprogress .peg {
display: block;
box-shadow:
0 0 8px rgba(var(--color-primary-100), 0.6),
0 0 4px rgba(var(--color-primary-100), 0.4) !important;
0 0 8px --alpha(var(--background-color-accent-primary) / 60%),
0 0 4px --alpha(var(--background-color-accent-primary) / 40%) !important;
will-change: transform, opacity;
}

4
packages/constants/src/graph.ts
View File

@@ -6,14 +6,14 @@ export const CHARTS_THEME = {
axis: {
domain: {
line: {
stroke: "rgb(var(--color-background-80))",
stroke: "var(--background-color-layer-2)",
strokeWidth: 0.5,
},
},
},
tooltip: {
container: {
background: "rgb(var(--color-background-80))",
background: "var(--background-color-layer-2)",
color: "var(--text-color-secondary)",
fontSize: "0.8rem",
border: "1px solid var(--border-color-strong)",

2
packages/editor/src/core/components/editors/document/page-renderer.tsx
View File

@@ -76,7 +76,7 @@ export function PageRenderer(props: Props) {
editor={titleEditor}
id={id + "-title"}
tabIndex={tabIndex}
className="no-scrollbar placeholder-custom-text-400 bg-transparent tracking-[-2%] font-bold text-[2rem] leading-[2.375rem] w-full outline-none p-0 border-none resize-none rounded-none"
className="no-scrollbar placeholder-placeholder bg-transparent tracking-[-2%] font-bold text-[2rem] leading-[2.375rem] w-full outline-none p-0 border-none resize-none rounded-none"
/>
</EditorContainer>
</div>

2
packages/editor/src/core/components/menus/block-menu.tsx
View File

@@ -216,7 +216,7 @@ export function BlockMenu(props: Props) {
zIndex: 100,
}}
className={cn(
"max-h-60 min-w-[7rem] overflow-y-scroll rounded-lg border border-subtle bg-surface-1 p-1.5 shadow-custom-shadow-rg",
"max-h-60 min-w-[7rem] overflow-y-scroll rounded-lg border border-subtle bg-surface-1 p-1.5 shadow-raised-200",
"transition-all duration-300 transform origin-top-right",
isAnimatedIn ? "opacity-100 scale-100" : "opacity-0 scale-75"
)}

2
packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx
View File

@@ -58,7 +58,7 @@ export function BubbleMenuColorSelector(props: Props) {
getFloatingProps={getFloatingProps}
getReferenceProps={getReferenceProps}
>
<section className="mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 space-y-2 shadow-custom-shadow-rg">
<section className="mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 space-y-2 shadow-raised-200">
<div className="space-y-1.5">
<p className="text-11 text-tertiary font-semibold">Text colors</p>
<div className="flex items-center gap-2">

2
packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
View File

@@ -63,7 +63,7 @@ export function BubbleMenuLinkSelector(props: Props) {
}
options={options}
>
<div className="w-60 mt-1 rounded-md bg-surface-1 shadow-custom-shadow-rg">
<div className="w-60 mt-1 rounded-md bg-surface-1 shadow-raised-200">
<div
className={cn("flex rounded-sm border-[0.5px] border-strong transition-colors", {
"border-red-500": error,

2
packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
View File

@@ -75,7 +75,7 @@ export function BubbleMenuNodeSelector(props: Props) {
getFloatingProps={getFloatingProps}
getReferenceProps={getReferenceProps}
>
<section className="w-48 max-h-[90vh] mt-1 flex flex-col overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-custom-shadow-rg">
<section className="w-48 max-h-[90vh] mt-1 flex flex-col overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200">
{items.map((item) => (
<button
key={item.name}

2
packages/editor/src/core/components/menus/bubble-menu/root.tsx
View File

@@ -186,7 +186,7 @@ export function EditorBubbleMenu(props: Props) {
{!isSelecting && (
<div
ref={menuRef}
className="flex py-2 divide-x divide-subtle-1 rounded-lg border border-subtle bg-surface-1 shadow-custom-shadow-rg overflow-x-scroll horizontal-scrollbar scrollbar-xs"
className="flex py-2 divide-x divide-subtle-1 rounded-lg border border-subtle bg-surface-1 shadow-raised-200 overflow-x-scroll horizontal-scrollbar scrollbar-xs"
>
<div className="px-2">
<BubbleMenuNodeSelector editor={editor} />

2
packages/editor/src/core/extensions/callout/color-selector.tsx
View File

@@ -47,7 +47,7 @@ export function CalloutBlockColorSelector(props: Props) {
<ChevronDownIcon className="flex-shrink-0 size-3" />
</button>
{isOpen && (
<section className="absolute top-full right-0 z-10 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-custom-shadow-rg animate-in fade-in slide-in-from-top-1">
<section className="absolute top-full right-0 z-10 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-raised-200 animate-in fade-in slide-in-from-top-1">
<div className="flex items-center gap-2">
{COLORS_LIST.map((color) => (
<button

2
packages/editor/src/core/extensions/emoji/components/emojis-list.tsx
View File

@@ -124,7 +124,7 @@ export const EmojisListDropdown = forwardRef(function EmojisListDropdown(
<div
ref={dropdownContainerRef}
className={cn(
"relative max-h-80 w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-custom-shadow-rg space-y-2 opacity-0 invisible transition-opacity",
"relative max-h-80 w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200 space-y-2 opacity-0 invisible transition-opacity",
{
"opacity-100 visible": isVisible,
}

2
packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
View File

@@ -124,7 +124,7 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
/>
<div
ref={dropdownContainer}
className="relative max-h-80 w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-custom-shadow-rg space-y-2"
className="relative max-h-80 w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200 space-y-2"
style={{
zIndex: 100,
}}

2
packages/editor/src/core/extensions/slash-commands/command-items-list.tsx
View File

@@ -254,7 +254,7 @@ export const getSlashCommandFilteredSections =
icon: <ALargeSmall className="size-3.5" />,
iconContainerStyle: {
borderRadius: "4px",
backgroundColor: "rgba(var(--color-background-100))",
backgroundColor: "var(--background-color-surface-1)",
border: "1px solid var(--border-color-strong)",
},
command: ({ editor, range }) => toggleTextColor(undefined, editor, range),

2
packages/editor/src/core/extensions/slash-commands/command-menu.tsx
View File

@@ -131,7 +131,7 @@ export const SlashCommandsMenu = forwardRef(function SlashCommandsMenu(props: Sl
<div
id="slash-command"
ref={commandListContainer}
className="relative max-h-80 min-w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-custom-shadow-rg space-y-2"
className="relative max-h-80 min-w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200 space-y-2"
style={{
zIndex: 100,
}}

2
packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
View File

@@ -205,7 +205,7 @@ export function ColumnDragHandle(props: ColumnDragHandleProps) {
lockScroll
/>
<div
className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-custom-shadow-rg"
className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200"
ref={refs.setFloating}
{...getFloatingProps()}
style={{

2
packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
View File

@@ -204,7 +204,7 @@ export function RowDragHandle(props: RowDragHandleProps) {
lockScroll
/>
<div
className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-custom-shadow-rg"
className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200"
ref={refs.setFloating}
{...getFloatingProps()}
style={{

14
packages/editor/src/core/extensions/table/table/icons.ts
View File

@@ -1,5 +1,5 @@
export const icons = {
colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" length="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="rgb(var(--color-text-300))" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" length="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="var(--text-color-tertiary)" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
deleteColumn: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
deleteRow: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
insertLeftTableIcon: `<svg
@@ -9,7 +9,7 @@ export const icons = {
>
<path
d="M224.617-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm147.691-607.69q0-4.616-3.846-8.463-3.846-3.846-8.462-3.846H600q-4.616 0-8.462 3.846-3.847 3.847-3.847 8.463v535.382q0 4.616 3.847 8.463Q595.384-200 600-200h135.383q4.616 0 8.462-3.846 3.846-3.847 3.846-8.463v-535.382ZM587.691-200h160-160Z"
fill="rgb(var(--color-text-300))"
fill="var(--text-color-tertiary)"
/>
</svg>
`,
@@ -20,7 +20,7 @@ export const icons = {
>
<path
d="M600-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm-375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm-12.308-607.69v535.382q0 4.616 3.846 8.463 3.846 3.846 8.462 3.846H360q4.616 0 8.462-3.846 3.847-3.847 3.847-8.463v-535.382q0-4.616-3.847-8.463Q364.616-760 360-760H224.617q-4.616 0-8.462 3.846-3.846 3.847-3.846 8.463Zm160 547.691h-160 160Z"
fill="rgb(var(--color-text-300))"
fill="var(--text-color-tertiary)"
/>
</svg>
`,
@@ -31,12 +31,12 @@ export const icons = {
>
<path
d="M212.309-527.693q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0 375.383q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-59.999h535.382q4.616 0 8.463-3.846 3.846-3.846 3.846-8.462V-360q0-4.616-3.846-8.462-3.847-3.847-8.463-3.847H212.309q-4.616 0-8.463 3.847Q200-364.616 200-360v135.383q0 4.616 3.846 8.462 3.847 3.846 8.463 3.846Zm-12.309-160v160-160Z"
fill="rgb(var(--color-text-300))"
fill="var(--text-color-tertiary)"
/>
</svg>
`,
toggleColumnHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgb(var(--color-text-300))" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
toggleRowHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgb(var(--color-text-300))" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
toggleColumnHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--text-color-tertiary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
toggleRowHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--text-color-tertiary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
insertBottomTableIcon: `<svg
xmlns="http://www.w3.org/2000/svg"
length={24}
@@ -44,7 +44,7 @@ export const icons = {
>
<path
d="M212.309-152.31q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-375.383q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm535.382-219.998H212.309q-4.616 0-8.463 3.846-3.846 3.846-3.846 8.462V-600q0 4.616 3.846 8.462 3.847 3.847 8.463 3.847h535.382q4.616 0 8.463-3.847Q760-595.384 760-600v-135.383q0-4.616-3.846-8.462-3.847-3.846-8.463-3.846ZM200-587.691v-160 160Z"
fill="rgb(var(--color-text-300))"
fill="var(--text-color-tertiary)"
/>
</svg>
`,

2
packages/editor/src/core/plugins/highlight.ts
View File

@@ -18,7 +18,7 @@ const buildDecorations = (doc: Parameters<typeof DecorationSet.create>[0], highl
}
const decorations: Decoration[] = [];
const highlightClassNames = ["bg-custom-primary-100/20", "transition-all", "duration-300", "rounded"];
const highlightClassNames = ["bg-accent-primary/20", "transition-all", "duration-300", "rounded"];
doc.descendants((node, pos) => {
// Check if this node has the id we're looking for

4
packages/editor/src/styles/drag-drop.css
View File

@@ -55,7 +55,7 @@
left: calc(-1 * var(--horizontal-offset));
height: 100%;
width: calc(100% + (var(--horizontal-offset) * 2));
background-color: rgba(var(--color-primary-100), 0.2);
background-color: --alpha(var(--background-color-accent-primary) / 20%);
border-radius: 4px;
pointer-events: none;
}
@@ -66,7 +66,7 @@
--horizontal-offset: 0px;
&::after {
background-color: rgba(var(--color-background-100), 0.2);
background-color: --alpha(var(--background-color-surface-1) / 20%);
}
}
}

2
packages/editor/src/styles/editor.css
View File

@@ -76,7 +76,7 @@
}
&.ProseMirror-selectednode {
outline: 3px solid rgba(var(--color-primary-100));
outline: 3px solid var(--border-color-accent-strong);
filter: brightness(90%);
}
}

2
packages/propel/src/card/helper.tsx
View File

@@ -21,7 +21,7 @@ export interface ICardProperties {
const DEFAULT_STYLE = "bg-surface-1 rounded-lg border-[0.5px] border-subtle w-full flex flex-col";
export const containerStyle: ICardProperties = {
[ECardVariant.WITHOUT_SHADOW]: "",
[ECardVariant.WITH_SHADOW]: "hover:shadow-custom-shadow-4xl duration-300",
[ECardVariant.WITH_SHADOW]: "hover:shadow-raised-200 duration-300",
};
export const spacings = {
[ECardSpacing.SM]: "p-4",

2
packages/propel/src/charts/bar-chart/root.tsx
View File

@@ -127,7 +127,7 @@ export const BarChart = React.memo(function BarChart<K extends string, T extends
barSize={barSize}
className="recharts-wrapper"
>
<CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
<CartesianGrid stroke="--alpha(var(--border-color-subtle) / 80%)" vertical={false} />
<XAxis
dataKey={xAxis.key}
tick={(props) => {

2
packages/propel/src/charts/pie-chart/root.tsx
View File

@@ -84,7 +84,7 @@ export const PieChart = React.memo(function PieChart<K extends string, T extends
y={props.y}
textAnchor={props.textAnchor}
dominantBaseline={props.dominantBaseline}
fill="rgba(var(--color-text-200))"
fill="var(--text-color-secondary)"
opacity={!!activeLegend && activeLegend !== payload.key ? 0.1 : 1}
>
{customLabel?.(payload.count) ?? payload.count}

2
packages/propel/src/design-system/design-system-philosophy.stories.tsx
View File

@@ -305,7 +305,7 @@ export const TextColorHierarchy: Story = {
<p className="text-secondary mb-3">Secondary text for descriptions and supporting content</p>
<p className="text-tertiary mb-3 text-13">Tertiary text for labels and metadata</p>
<input
className="placeholder-placeholder border-subtle rounded border px-3 py-2"
className="placeholder-(--text-color-placeholder) border-subtle rounded border px-3 py-2"
placeholder="Placeholder text for inputs"
/>
</div>

2
packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
View File

@@ -36,7 +36,7 @@ export function EmojiRoot(props: EmojiRootProps) {
<EmojiPicker.Search
placeholder={searchPlaceholder}
disabled={searchDisabled}
className="block rounded-md bg-transparent placeholder-custom-text-400 focus:outline-none px-3 py-2 border-[0.5px] border-subtle text-16 p-0 h-full w-full flex-grow-0 focus:border-accent-strong"
className="block rounded-md bg-transparent placeholder-(--text-color-placeholder) focus:outline-none px-3 py-2 border-[0.5px] border-subtle text-16 p-0 h-full w-full flex-grow-0 focus:border-accent-strong"
/>
</div>
<EmojiPicker.SkinToneSelector

4
packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
View File

@@ -48,7 +48,7 @@ export function IconRoot(props: IconRootProps) {
placeholder="Search"
value={query}
onChange={(e) => setQuery(e.target.value)}
className="block rounded-md bg-transparent placeholder-custom-text-400 focus:outline-none px-3 py-2 border-[0.5px] border-subtle text-16 border-none p-0 h-full w-full"
className="block rounded-md bg-transparent placeholder-(--text-color-placeholder) focus:outline-none px-3 py-2 border-[0.5px] border-subtle text-16 border-none p-0 h-full w-full"
/>
</div>
</div>
@@ -72,7 +72,7 @@ export function IconRoot(props: IconRootProps) {
setHexValue(value);
if (/^[0-9A-Fa-f]{6}$/.test(value)) setActiveColor(adjustColorForContrast(`#${value}`));
}}
className="block placeholder-custom-text-400 focus:outline-none px-3 py-2 border-[0.5px] border-subtle flex-grow pl-0 text-11 text-secondary rounded-sm border-none bg-transparent ring-0"
className="block placeholder-(--text-color-placeholder) focus:outline-none px-3 py-2 border-[0.5px] border-subtle flex-grow pl-0 text-11 text-secondary rounded-sm border-none bg-transparent ring-0"
autoFocus
/>
</div>

2
packages/propel/src/icons/calendar-after-icon.tsx
View File

@@ -8,7 +8,7 @@ export function CalendarAfterIcon({ className = "fill-current", ...rest }: ISvgI
<g clipPath="url(#clip0_3309_70901)">
<path
d="M10.6125 17V15.875H14.625V7.8125H3.375V11.9375H2.25V4.25C2.25 3.95 2.3625 3.6875 2.5875 3.4625C2.8125 3.2375 3.075 3.125 3.375 3.125H4.59375V2H5.8125V3.125H12.1875V2H13.4063V3.125H14.625C14.925 3.125 15.1875 3.2375 15.4125 3.4625C15.6375 3.6875 15.75 3.95 15.75 4.25V15.875C15.75 16.175 15.6375 16.4375 15.4125 16.6625C15.1875 16.8875 14.925 17 14.625 17H10.6125ZM6 18.2375L5.2125 17.45L7.33125 15.3125H0.9375V14.1875H7.33125L5.2125 12.05L6 11.2625L9.4875 14.75L6 18.2375ZM3.375 6.6875H14.625V4.25H3.375V6.6875Z"
fill="rgb(var(--color-text-200))"
fill="var(--text-color-secondary)"
/>
</g>
<defs>

6
packages/propel/src/icons/calendar-before-icon.tsx
View File

@@ -8,13 +8,13 @@ export function CalendarBeforeIcon({ className = "fill-current", ...rest }: ISvg
<g clipPath="url(#clip0_3309_70907)">
<path
d="M10.6125 16.5V15.375H14.625V7.3125H3.375V11.4375H2.25V3.75C2.25 3.45 2.3625 3.1875 2.5875 2.9625C2.8125 2.7375 3.075 2.625 3.375 2.625H4.59375V1.5H5.8125V2.625H12.1875V1.5H13.4062V2.625H14.625C14.925 2.625 15.1875 2.7375 15.4125 2.9625C15.6375 3.1875 15.75 3.45 15.75 3.75V15.375C15.75 15.675 15.6375 15.9375 15.4125 16.1625C15.1875 16.3875 14.925 16.5 14.625 16.5H10.6125ZM3.375 6.1875H14.625V3.75H3.375V6.1875Z"
fill="rgb(var(--color-text-200))"
fill="var(--text-color-secondary)"
/>
<g clipPath="url(#clip1_3309_70907)">
<path
d="M3.99967 17.1667L1.33301 14.5L3.99967 11.8334L4.34967 12.1834L2.28301 14.25H8V14.75H2.28301L4.34967 16.8167L3.99967 17.1667Z"
fill="rgb(var(--color-text-200))"
stroke="rgb(var(--color-text-200))"
fill="var(--text-color-secondary)"
stroke="var(--text-color-secondary)"
strokeWidth="0.5"
/>
</g>

2
packages/propel/src/icons/github-icon.tsx
View File

@@ -17,7 +17,7 @@ export function GithubIcon({ width = "24", height = "24", className, color }: IS
fillRule="evenodd"
clipRule="evenodd"
d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
fill={color ? color : "rgb(var(--color-text-200))"}
fill={color ? color : "var(--text-color-secondary)"}
/>
</g>
<defs>

2
packages/propel/src/icons/gitlab-icon.tsx
View File

@@ -17,7 +17,7 @@ export function GitlabIcon({ width = "24", height = "24", className, color }: IS
fillRule="evenodd"
clipRule="evenodd"
d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
fill={color ? color : "rgb(var(--color-text-200))"}
fill={color ? color : "var(--text-color-secondary)"}
/>
</g>
<defs>

4
packages/propel/src/menu/menu.stories.tsx
View File

@@ -161,7 +161,7 @@ export const WithSubmenu: Story = {
<Menu.MenuItem onClick={() => alert("Open")}>Open</Menu.MenuItem>
<Menu.SubMenu
trigger="Export"
className="min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg"
className="min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200"
>
<Menu.MenuItem onClick={() => alert("Export as PDF")}>Export as PDF</Menu.MenuItem>
<Menu.MenuItem onClick={() => alert("Export as CSV")}>Export as CSV</Menu.MenuItem>
@@ -220,7 +220,7 @@ export const ComplexMenu: Story = {
</Menu.MenuItem>
<Menu.SubMenu
trigger="Settings"
className="min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg"
className="min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200"
>
<Menu.MenuItem onClick={() => alert("General Settings")}>General</Menu.MenuItem>
<Menu.MenuItem onClick={() => alert("Privacy Settings")}>Privacy</Menu.MenuItem>

2
packages/propel/src/menu/menu.tsx
View File

@@ -180,7 +180,7 @@ function Menu(props: TMenuProps) {
<BaseMenu.Popup
tabIndex={tabIndex}
className={cn(
"my-1 overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
"my-1 overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none min-w-[12rem] whitespace-nowrap",
{
"max-h-60": maxHeight === "lg",
"max-h-48": maxHeight === "md",

2
packages/propel/src/spinners/circular-spinner.tsx
View File

@@ -25,7 +25,7 @@ export function Spinner({ height = "32px", width = "32px", className = "" }: ISp
fill="currentColor"
/>
<path
className="fill-custom-primary-100"
className="fill-accent-primary"
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
/>
</svg>

2
packages/tailwind-config/AGENTS.md
View File

@@ -478,7 +478,7 @@ Use semantic text colors that match the hierarchy:
<h2 className="text-primary font-semibold">Title</h2>
<p className="text-secondary">Description text</p>
<span className="text-tertiary text-13">Metadata</span>
<input className="placeholder-placeholder" placeholder="Enter text..." />
<input className="placeholder-(--text-color-placeholder)" placeholder="Enter text..." />
</div>
```

Some files were not shown because too many files have changed in this diff Show More