[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
|
|
@ -32,10 +32,12 @@ const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: R
|
|||
className={cn(
|
||||
"appearance-none shrink-0 size-4 border rounded-[3px] focus:outline-1 focus:outline-offset-4 focus:outline-custom-primary-50 cursor-pointer",
|
||||
{
|
||||
"border-custom-border-200 bg-custom-background-80 cursor-not-allowed": disabled,
|
||||
"border-custom-border-300 hover:border-custom-border-400 bg-transparent": !disabled,
|
||||
"border-custom-primary-40 hover:border-custom-primary-40 bg-custom-primary-100 hover:bg-custom-primary-200":
|
||||
"border-subtle bg-layer-1 cursor-not-allowed": disabled,
|
||||
"border-strong hover:border-strong-1 bg-transparent": !disabled,
|
||||
"border-accent-strong-40 hover:border-accent-strong-40 bg-accent-primary hover:bg-accent-primary/80":
|
||||
!disabled && (checked || indeterminate),
|
||||
|
||||
"border-none": checked,
|
||||
},
|
||||
className
|
||||
)}
|
||||
|
|
@ -44,10 +46,10 @@ const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: R
|
|||
/>
|
||||
<svg
|
||||
className={cn(
|
||||
"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 p-0.5 pointer-events-none outline-none hidden stroke-white",
|
||||
"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 p-0.5 pointer-events-none outline-none hidden text-on-color",
|
||||
{
|
||||
block: checked,
|
||||
"stroke-custom-text-400 opacity-40": disabled,
|
||||
"text-placeholder opacity-40": disabled,
|
||||
},
|
||||
iconClassName
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -48,66 +48,57 @@ export function InputColorPicker(props: InputColorPickerProps) {
|
|||
onChange={handleInputChange}
|
||||
hasError={hasError}
|
||||
placeholder={placeholder}
|
||||
className={cn("border-[0.5px] border-custom-border-200", className)}
|
||||
className={cn("border-[0.5px] border-subtle", className)}
|
||||
style={style}
|
||||
/>
|
||||
|
||||
<Popover as="div" className="absolute right-1 top-1/2 z-10 -translate-y-1/2">
|
||||
{({ open }) => {
|
||||
if (open) {
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Popover.Button as={React.Fragment}>
|
||||
<Button
|
||||
ref={setReferenceElement}
|
||||
variant="neutral-primary"
|
||||
size="sm"
|
||||
className="border-none !bg-transparent"
|
||||
{() => (
|
||||
<>
|
||||
<Popover.Button as={React.Fragment}>
|
||||
<Button ref={setReferenceElement} variant="neutral-primary" className="border-none !bg-transparent">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="lucide lucide-palette"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="lucide lucide-palette"
|
||||
>
|
||||
<circle cx="13.5" cy="6.5" r=".5" />
|
||||
<circle cx="17.5" cy="10.5" r=".5" />
|
||||
<circle cx="8.5" cy="7.5" r=".5" />
|
||||
<circle cx="6.5" cy="12.5" r=".5" />
|
||||
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
|
||||
</svg>
|
||||
</Button>
|
||||
</Popover.Button>
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel>
|
||||
<div
|
||||
className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
|
||||
ref={setPopperElement}
|
||||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
>
|
||||
<ColorPicker.SketchPicker color={value} onChange={handleColorChange} />
|
||||
</div>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
<circle cx="13.5" cy="6.5" r=".5" />
|
||||
<circle cx="17.5" cy="10.5" r=".5" />
|
||||
<circle cx="8.5" cy="7.5" r=".5" />
|
||||
<circle cx="6.5" cy="12.5" r=".5" />
|
||||
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
|
||||
</svg>
|
||||
</Button>
|
||||
</Popover.Button>
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel>
|
||||
<div
|
||||
className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-custom-shadow-rg"
|
||||
ref={setPopperElement}
|
||||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
>
|
||||
<ColorPicker.SketchPicker color={value} onChange={handleColorChange} />
|
||||
</div>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -30,12 +30,12 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
|
|||
type={type}
|
||||
name={name}
|
||||
className={cn(
|
||||
"block rounded-md bg-transparent text-sm placeholder-custom-text-400 focus:outline-none",
|
||||
"block rounded-md bg-transparent text-13 placeholder-custom-text-400 focus:outline-none",
|
||||
{
|
||||
"rounded-md border-[0.5px] border-custom-border-200": mode === "primary",
|
||||
"rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary":
|
||||
"rounded-md border-[0.5px] border-subtle": mode === "primary",
|
||||
"rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary":
|
||||
mode === "transparent",
|
||||
"rounded border-none bg-transparent ring-0": mode === "true-transparent",
|
||||
"rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
|
||||
"border-red-500": hasError,
|
||||
"px-1.5 py-1": inputSize === "xs",
|
||||
"px-3 py-2": inputSize === "sm",
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export const getStrengthInfo = (strength: E_PASSWORD_STRENGTH): StrengthInfo =>
|
|||
case E_PASSWORD_STRENGTH.EMPTY:
|
||||
return {
|
||||
message: "Please enter your password",
|
||||
textColor: "text-custom-text-100",
|
||||
textColor: "text-primary",
|
||||
activeFragments: 0,
|
||||
};
|
||||
case E_PASSWORD_STRENGTH.LENGTH_NOT_VALID:
|
||||
|
|
@ -38,7 +38,7 @@ export const getStrengthInfo = (strength: E_PASSWORD_STRENGTH): StrengthInfo =>
|
|||
default:
|
||||
return {
|
||||
message: "Please enter your password",
|
||||
textColor: "text-custom-text-100",
|
||||
textColor: "text-primary",
|
||||
activeFragments: 0,
|
||||
};
|
||||
}
|
||||
|
|
@ -49,7 +49,7 @@ export const getStrengthInfo = (strength: E_PASSWORD_STRENGTH): StrengthInfo =>
|
|||
*/
|
||||
export const getFragmentColor = (fragmentIndex: number, activeFragments: number): string => {
|
||||
if (fragmentIndex >= activeFragments) {
|
||||
return "bg-custom-background-80";
|
||||
return "bg-layer-1";
|
||||
}
|
||||
|
||||
switch (activeFragments) {
|
||||
|
|
@ -60,6 +60,6 @@ export const getFragmentColor = (fragmentIndex: number, activeFragments: number)
|
|||
case 3:
|
||||
return "bg-green-500";
|
||||
default:
|
||||
return "bg-custom-background-80";
|
||||
return "bg-layer-1";
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export function PasswordStrengthIndicator({
|
|||
<div
|
||||
key={fragmentIndex}
|
||||
className={cn(
|
||||
"h-1 flex-1 rounded-sm transition-all duration-300 ease-in-out",
|
||||
"h-1 flex-1 rounded-xs transition-all duration-300 ease-in-out",
|
||||
getFragmentColor(fragmentIndex, strengthInfo.activeFragments)
|
||||
)}
|
||||
/>
|
||||
|
|
@ -42,7 +42,7 @@ export function PasswordStrengthIndicator({
|
|||
</div>
|
||||
|
||||
{/* Strength Message */}
|
||||
{password && <p className={cn("text-sm font-medium", strengthInfo.textColor)}>{strengthInfo.message}</p>}
|
||||
{password && <p className={cn("!text-13 font-medium", strengthInfo.textColor)}>{strengthInfo.message}</p>}
|
||||
</div>
|
||||
|
||||
{/* Criteria list */}
|
||||
|
|
@ -54,14 +54,14 @@ export function PasswordStrengthIndicator({
|
|||
<CircleCheck
|
||||
className={cn("h-3 w-3 flex-shrink-0", {
|
||||
"text-green-500": criterion.isValid,
|
||||
"text-custom-text-100": !criterion.isValid,
|
||||
"text-primary": !criterion.isValid,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
className={cn("text-xs", {
|
||||
className={cn("!text-11", {
|
||||
"text-green-500": criterion.isValid,
|
||||
"text-custom-text-100": !criterion.isValid,
|
||||
"text-primary": !criterion.isValid,
|
||||
})}
|
||||
>
|
||||
{criterion.label}
|
||||
|
|
|
|||
|
|
@ -31,9 +31,9 @@ export function PasswordInput({
|
|||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className={cn(
|
||||
"w-full px-3 py-2 pr-10 text-custom-text-200 border rounded-md bg-custom-background-100 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 placeholder:text-custom-text-400 focus:border-transparent transition-all duration-200",
|
||||
"w-full px-3 py-2 pr-10 text-secondary border rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 placeholder:text-placeholder focus:border-transparent transition-all duration-200",
|
||||
{
|
||||
"border-custom-border-300": !error,
|
||||
"border-strong": !error,
|
||||
"border-red-500": error,
|
||||
},
|
||||
className
|
||||
|
|
@ -45,7 +45,7 @@ export function PasswordInput({
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute inset-y-0 right-0 pr-3 flex items-center text-custom-text-200 hover:text-custom-text-100 transition-colors duration-200"
|
||||
className="absolute inset-y-0 right-0 pr-3 flex items-center text-secondary hover:text-primary transition-colors duration-200"
|
||||
>
|
||||
<div className="relative w-4 h-4">
|
||||
<Eye
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ interface LabelProps {
|
|||
|
||||
export function Label({ htmlFor, children, className }: LabelProps) {
|
||||
return (
|
||||
<label htmlFor={htmlFor} className={cn("block text-sm font-medium text-custom-text-100", className)}>
|
||||
<label htmlFor={htmlFor} className={cn("block text-13 font-medium text-primary", className)}>
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
|
|
@ -30,7 +30,7 @@ export function FormField({ label, htmlFor, children, className, optional = fals
|
|||
<div className={cn("flex flex-col gap-1.5", className)}>
|
||||
<Label htmlFor={htmlFor}>
|
||||
{label}
|
||||
{optional && <span className="text-custom-text-400 text-sm"> (optional)</span>}
|
||||
{optional && <span className="text-placeholder text-13"> (optional)</span>}
|
||||
</Label>
|
||||
{children}
|
||||
</div>
|
||||
|
|
@ -48,7 +48,7 @@ export function ValidationMessage({ type, message, className }: ValidationMessag
|
|||
return (
|
||||
<p
|
||||
className={cn(
|
||||
"text-sm",
|
||||
"text-13",
|
||||
{
|
||||
"text-red-500": type === "error",
|
||||
"text-green-500": type === "success",
|
||||
|
|
|
|||
|
|
@ -39,10 +39,10 @@ const TextArea = React.forwardRef(function TextArea(
|
|||
className={cn(
|
||||
"no-scrollbar w-full bg-transparent placeholder-custom-text-400 outline-none",
|
||||
{
|
||||
"rounded-md border-[0.5px] border-custom-border-200": mode === "primary",
|
||||
"focus:ring-theme rounded border-none bg-transparent ring-0 transition-all focus:ring-1":
|
||||
"rounded-md border-[0.5px] border-subtle": mode === "primary",
|
||||
"focus:ring-theme rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1":
|
||||
mode === "transparent",
|
||||
"rounded border-none bg-transparent ring-0": mode === "true-transparent",
|
||||
"rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
|
||||
"px-1.5 py-1": textAreaSize === "xs",
|
||||
"px-3 py-2": textAreaSize === "sm",
|
||||
"p-3": textAreaSize === "md",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue