[WEB-5602] feat: new design system (#8220)
* chore: init tailwind v4 * chore: update all configs * chore: add source to parse monorepo packages * chore: combine all css files * feat: added extended colors * chore: update typography * chore: update extended color var names * refactor: remove initial spacing variable and update dark mode selector * chore: update css files * chore: update animations * chore: remove spacing tokens * fix: external css files * chore: update tailwind-merge version * chore: update font family * chore: added brief agents.md and story for new design system * chore: enhance design system documentation with rare exceptions for visual separation * chore: add fontsource package for typography * chore: material symbols font added * chore: update shadow default * chore: add stroke and outline theme vars * chore: update ring and fill colors * chore: overwrite tailwind typography tokens * chore: add high contrast mode tokens * chore: update scrollbar colors * chore: backward compatibility for buttons and placeholders * chore: add priority colors * chore: update urgent priority color * chore: update plan colors * chore: add missing utility class * chore: update height and padding classes * chore: update label colors * chore: add missing utlity * chore: add typography plugin to space app * chore: replace existing classNames with new design system tokens #8244 (#8278) * chore: update border colors * chore: update all borders * chore: update text colors * chore: update css variables * chore: update font sizes and weights * chore: update bg colors * chore: sync changes * fix: uncomment spacing-1200 variable in variables.css * chore: update primary colors * refactor: updated border to border-subtle * refactor: update various components and improve UI consistency across the application * updated classnames * updated classnames * refactor: update color-related class names to use new design system variables for consistency * chore: default automations * chore: update text sizes * chore: home and power k * chore: home and power k * chore: replace ui package button components * chore: update text sizes * chore: updated issue identifier (#8275) * refactor: top navigation and sidebar design token (#8276) * chore: update all button components (#8277) * chore: new button component * chore: update existing buttons * chore: overwrite tailwind typography tokens * fix: twMerge config + fixed cn instances * refactor: toast design token updated (#8279) * chore: update existing buttons * chore: tooltip design token updatged (#8280) * chore: moved cn utility to propel (#8281) * chore: update space app UI (#8285) * chore; update space app filters component * fix: button whitespace wrap * chore: space app votes * chore: update dropdown components * refactor: auth, onboarding, sidebar, and common component design token migration (#8291) * chore: checkbox component design token updated * chore: indicator and oauth component design token updated * chore: sidebar design token updated * chore: auth and onboarding design token updated * chore: update divider color * style: update background colors and hover effects across list components * fix: tailwind merge * refactor: toggle switch design token migration and header utility classname added (#8295) * chore: toggle component design token updated * chore: h-header utility class added * chore: updated color tokens for work item detail page (#8296) * chore: update react-day-picker UI * refactor: update button sizes and styles in filters components * refactor: breadcrumbs design token updated (#8297) * chore: update priority icon colors * refactor: updated layout variables * chore: update plan card primary CTA * Chore update editor design system (#8299) * refactor: update styles for callout, color selector, logo selector, and image uploader * refactor:fix image * chore: update settings UI * chore: updated notifications color and size tokens (#8302) * chore: update sm button border radius * fix: logo renderer * chore: icon button component * chore: remove deprecated classes * chore: remove deprecated classes * chore: update editor list spacing * fix: icon button size * chore: improvements (#8309) * chore: update cycles and modules pages * refactor: update background styles across various components to use new design system colors * fix: button type errors * chore: update modals design system (#8310) * refactor: callout bg * refactor: code bg * refactor: modal size and variant --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com> * chore: update next-themes * design: update billing and plans component styles and remove unused utility functions (#8313) * refactor: empty state design token migration and improvements (#8315) * fix: profile page * refactor: tabs design token updated (#8316) * chore: updated buttons and tokens for work items (#8317) * fix: adjust trial button spacing in checkout modal * chore: update add button hover state * fix: type error (#8318) * fix: type error * chore: code refactor * refactor: update button sizes and background styles in rich filters components * refactor: update editor bg * refactor: enhance Gantt chart sidebar functionality and styling - Removed unused prop from . - Updated to include new props for better block management and scrolling behavior. - Improved auto-scroll functionality for Gantt chart items. - Adjusted styles in component for consistent design. * regression: gantt design * chore: new badge component * fix: favorite star * chore: update backgroung, typography and button sizes across workspace settings general and members pages * fix: header button sizes * fix: emoji icon logo (#8323) * more fixes * chore: update settings sidebar * refactor: avatar component * chore: updated work item detail sidebar (#8327) * refactor: update link preview * fix: work item property dropdowns * fix: dropdown buttons border radius * chore: update power k translation * chore: updated profile activity design (#8328) * chore: update settings pages * chore: update work item sidebar alignments (#8330) * refactor: admin design system * chore: update page header --------- Co-authored-by: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Co-authored-by: VipinDevelops <vipinchaudhary1809@gmail.com> Co-authored-by: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com> Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Co-authored-by: gakshita <akshitagoyal1516@gmail.com> Co-authored-by: Palanikannan M <akashmalinimurugu@gmail.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: b-saikrishnakanth <bsaikrishnakanth97@gmail.com> Co-authored-by: M. Palanikannan <73993394+Palanikannan1437@users.noreply.github.com> * fix: formatting * reexport types * fix: lint error --------- Co-authored-by: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Co-authored-by: VipinDevelops <vipinchaudhary1809@gmail.com> Co-authored-by: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com> Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Co-authored-by: gakshita <akshitagoyal1516@gmail.com> Co-authored-by: Palanikannan M <akashmalinimurugu@gmail.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: b-saikrishnakanth <bsaikrishnakanth97@gmail.com> Co-authored-by: M. Palanikannan <73993394+Palanikannan1437@users.noreply.github.com>
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
d86418aad8
commit
22339b9786
1342 changed files with 14227 additions and 15119 deletions
|
|
@ -28,7 +28,7 @@ export const Default: Story = {
|
|||
return (
|
||||
<ScrollArea {...args} className="h-64 w-80 border rounded-lg">
|
||||
<div className="p-4 space-y-4">
|
||||
<h3 className="text-lg font-semibold">Long Text Content</h3>
|
||||
<h3 className="text-16 font-semibold">Long Text Content</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
|
||||
|
|
@ -66,19 +66,19 @@ export const Sizes: Story = {
|
|||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm font-medium">Small</div>
|
||||
<div className="text-13 font-medium">Small</div>
|
||||
<ScrollArea className="h-48 w-80 border rounded-lg" size="sm">
|
||||
{content}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm font-medium">Medium</div>
|
||||
<div className="text-13 font-medium">Medium</div>
|
||||
<ScrollArea className="h-48 w-80 border rounded-lg" size="md">
|
||||
{content}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm font-medium">Large</div>
|
||||
<div className="text-13 font-medium">Large</div>
|
||||
<ScrollArea className="h-48 w-80 border rounded-lg" size="lg">
|
||||
{content}
|
||||
</ScrollArea>
|
||||
|
|
@ -93,7 +93,7 @@ export const ScrollTypeAlways: Story = {
|
|||
return (
|
||||
<ScrollArea className="h-64 w-80 border rounded-lg" scrollType="always">
|
||||
<div className="p-4 space-y-2">
|
||||
<h3 className="text-lg font-semibold">Always Visible Scrollbar</h3>
|
||||
<h3 className="text-16 font-semibold">Always Visible Scrollbar</h3>
|
||||
{[...Array(15)].map((_, i) => (
|
||||
<p key={i}>Line {i + 1}: The scrollbar is always visible.</p>
|
||||
))}
|
||||
|
|
@ -108,8 +108,8 @@ export const ScrollTypeScroll: Story = {
|
|||
return (
|
||||
<ScrollArea className="h-64 w-80 border rounded-lg" scrollType="scroll">
|
||||
<div className="p-4 space-y-2">
|
||||
<h3 className="text-lg font-semibold">Scroll to Show</h3>
|
||||
<p className="text-sm text-custom-text-400">Scrollbar appears when scrolling</p>
|
||||
<h3 className="text-16 font-semibold">Scroll to Show</h3>
|
||||
<p className="text-13 text-placeholder">Scrollbar appears when scrolling</p>
|
||||
{[...Array(15)].map((_, i) => (
|
||||
<p key={i}>Line {i + 1}: Try scrolling to see the scrollbar appear.</p>
|
||||
))}
|
||||
|
|
@ -124,8 +124,8 @@ export const ScrollTypeHover: Story = {
|
|||
return (
|
||||
<ScrollArea className="h-64 w-80 border rounded-lg" scrollType="hover">
|
||||
<div className="p-4 space-y-2">
|
||||
<h3 className="text-lg font-semibold">Hover to Show</h3>
|
||||
<p className="text-sm text-custom-text-400">Scrollbar appears on hover</p>
|
||||
<h3 className="text-16 font-semibold">Hover to Show</h3>
|
||||
<p className="text-13 text-placeholder">Scrollbar appears on hover</p>
|
||||
{[...Array(15)].map((_, i) => (
|
||||
<p key={i}>Line {i + 1}: Hover over the area to see the scrollbar.</p>
|
||||
))}
|
||||
|
|
@ -141,10 +141,7 @@ export const HorizontalScroll: Story = {
|
|||
<ScrollArea className="h-32 w-96 border rounded-lg" orientation="horizontal">
|
||||
<div className="flex gap-4 p-4 w-[1200px]">
|
||||
{[...Array(12)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex-shrink-0 w-32 h-20 bg-custom-background-80 rounded flex items-center justify-center"
|
||||
>
|
||||
<div key={i} className="flex-shrink-0 w-32 h-20 bg-layer-1 rounded-sm flex items-center justify-center">
|
||||
Item {i + 1}
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -159,8 +156,8 @@ export const BothDirections: Story = {
|
|||
return (
|
||||
<ScrollArea className="h-64 w-96 border rounded-lg">
|
||||
<div className="w-[800px] p-4 space-y-2">
|
||||
<h3 className="text-lg font-semibold">Both Directions</h3>
|
||||
<p className="text-sm text-custom-text-400">Content scrolls both vertically and horizontally</p>
|
||||
<h3 className="text-16 font-semibold">Both Directions</h3>
|
||||
<p className="text-13 text-placeholder">Content scrolls both vertically and horizontally</p>
|
||||
{[...Array(20)].map((_, i) => (
|
||||
<p key={i}>
|
||||
Line {i + 1}: This line is very long and extends beyond the container width to demonstrate horizontal
|
||||
|
|
@ -178,19 +175,19 @@ export const ListExample: Story = {
|
|||
return (
|
||||
<ScrollArea className="h-80 w-96 border rounded-lg">
|
||||
<div className="p-4">
|
||||
<h3 className="text-lg font-semibold mb-4">User List</h3>
|
||||
<h3 className="text-16 font-semibold mb-4">User List</h3>
|
||||
<div className="space-y-2">
|
||||
{[...Array(25)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center gap-3 p-3 bg-custom-background-80 rounded hover:bg-custom-background-90 cursor-pointer"
|
||||
className="flex items-center gap-3 p-3 bg-layer-1 rounded-sm hover:bg-surface-2 cursor-pointer"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-custom-primary-100 flex items-center justify-center text-white font-medium">
|
||||
<div className="w-10 h-10 rounded-full bg-accent-primary flex items-center justify-center text-on-color font-medium">
|
||||
{String.fromCharCode(65 + (i % 26))}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium">User {i + 1}</div>
|
||||
<div className="text-sm text-custom-text-400">user{i + 1}@example.com</div>
|
||||
<div className="text-13 text-placeholder">user{i + 1}@example.com</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -235,8 +232,8 @@ async function fetchData() {
|
|||
}`;
|
||||
|
||||
return (
|
||||
<ScrollArea className="h-96 w-full max-w-2xl border rounded-lg bg-custom-background-100">
|
||||
<pre className="p-4 text-sm">
|
||||
<ScrollArea className="h-96 w-full max-w-2xl border rounded-lg bg-surface-1">
|
||||
<pre className="p-4 text-13">
|
||||
<code>{code}</code>
|
||||
</pre>
|
||||
</ScrollArea>
|
||||
|
|
@ -252,11 +249,9 @@ export const ChatMessages: Story = {
|
|||
{[...Array(20)].map((_, i) => (
|
||||
<div key={i} className={`flex ${i % 3 === 0 ? "justify-end" : "justify-start"}`}>
|
||||
<div
|
||||
className={`max-w-[70%] p-3 rounded-lg ${
|
||||
i % 3 === 0 ? "bg-custom-primary-100 text-white" : "bg-custom-background-80"
|
||||
}`}
|
||||
className={`max-w-[70%] p-3 rounded-lg ${i % 3 === 0 ? "bg-accent-primary text-on-color" : "bg-layer-1"}`}
|
||||
>
|
||||
<div className="text-sm">{i % 3 === 0 ? "You" : `User ${i + 1}`}</div>
|
||||
<div className="text-13">{i % 3 === 0 ? "You" : `User ${i + 1}`}</div>
|
||||
<div className="mt-1">Message content for message number {i + 1}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -272,7 +267,7 @@ export const DataTable: Story = {
|
|||
return (
|
||||
<ScrollArea className="h-96 w-full max-w-3xl border rounded-lg">
|
||||
<table className="w-full">
|
||||
<thead className="bg-custom-background-80 sticky top-0">
|
||||
<thead className="bg-layer-1 sticky top-0">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left">ID</th>
|
||||
<th className="px-4 py-2 text-left">Name</th>
|
||||
|
|
@ -282,13 +277,13 @@ export const DataTable: Story = {
|
|||
</thead>
|
||||
<tbody>
|
||||
{[...Array(50)].map((_, i) => (
|
||||
<tr key={i} className="border-t border-custom-border-200 hover:bg-custom-background-80">
|
||||
<tr key={i} className="border-t border-subtle hover:bg-layer-1">
|
||||
<td className="px-4 py-2">#{i + 1}</td>
|
||||
<td className="px-4 py-2">User {i + 1}</td>
|
||||
<td className="px-4 py-2">user{i + 1}@example.com</td>
|
||||
<td className="px-4 py-2">
|
||||
<span
|
||||
className={`px-2 py-1 rounded text-xs ${i % 3 === 0 ? "bg-green-500/20 text-green-500" : "bg-gray-500/20 text-gray-500"}`}
|
||||
className={`px-2 py-1 rounded-sm text-11 ${i % 3 === 0 ? "bg-green-500/20 text-green-500" : "bg-gray-500/20 text-gray-500"}`}
|
||||
>
|
||||
{i % 3 === 0 ? "Active" : "Inactive"}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ const ScrollBar = React.memo(function ScrollBar({
|
|||
data-slot="scroll-area-scrollbar"
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"group/track mr-1 flex justify-center rounded bg-transparent opacity-0 transition-opacity delay-300 ",
|
||||
"group/track mr-1 flex justify-center rounded-sm bg-transparent opacity-0 transition-opacity delay-300 ",
|
||||
orientation === "vertical" && verticalSizeStyles[size],
|
||||
orientation === "horizontal" && horizontalSizeStyles[size],
|
||||
scrollType === "always" && "opacity-100",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue