From e80c90b50bc2c676e850d3df18f1ff09d0a2049c Mon Sep 17 00:00:00 2001 From: Bikash Date: Mon, 27 May 2024 18:59:54 +0530 Subject: [PATCH 01/19] updated for darkmode --- src/design-system/components/atoms/input.tsx | 71 ++++++++++--------- .../components/atoms/option-list.tsx | 2 +- src/design-system/components/css/index.scss | 31 +++++++- src/design-system/tailwind-base.js | 6 +- 4 files changed, 73 insertions(+), 37 deletions(-) diff --git a/src/design-system/components/atoms/input.tsx b/src/design-system/components/atoms/input.tsx index fdff96139..ed4c59dfc 100644 --- a/src/design-system/components/atoms/input.tsx +++ b/src/design-system/components/atoms/input.tsx @@ -72,6 +72,7 @@ interface ITextArea extends IInputRow { prefix?: ReactNode; prefixIcon?: JSX.Element; resize?: boolean; + cols?: string; } export interface ITextInputBase extends IInputRow { @@ -154,11 +155,11 @@ export const TextInputBase = forwardRef( className={cn( 'transition-all rounded border flex flex-row items-center relative ring-offset-1 dark:ring-offset-0 pulsable ring-border-focus dark:ring-border-darktheme-focus', { - 'text-text-critical bg-surface-critical-subdued border-border-critical': + 'text-text-critical bg-surface-critical-subdued border-border-critical dark:bg-surface-darktheme-critical-subdued dark:border-border-darktheme-critical': error, 'text-text-default dark:text-text-darktheme-default border-border-default dark:border-border-darktheme-default bg-surface-basic-input dark:bg-surface-darktheme-basic-input': !error, - 'text-text-disabled border-border-disabled bg-surface-basic-input': + 'text-text-disabled border-border-disabled bg-surface-basic-input dark:text-text-darktheme-disabled dark:border-border-darktheme-disabled dark:bg-surface-darktheme-basic-input': disabled, 'pr-0': component !== 'input', }, @@ -244,9 +245,11 @@ export const TextInputBase = forwardRef( {!!suffixIcon && (
{cloneElement(suffixIcon, { @@ -301,8 +304,8 @@ export const TextInputBase = forwardRef( className={cn( 'bodySm pulsable', { - 'text-text-critical': error, - 'text-text-default': !error, + 'text-text-critical dark:text-text-darktheme-critical': error, + 'text-text-default dark:text-text-darktheme-default': !error, }, 'pt-md' )} @@ -409,31 +412,35 @@ export const TextInput = forwardRef( } ); -export const TextArea = ({ - autoComplete = 'off', - onChange = (_) => {}, - resize = false, - rows = '3', - ...etc -}: ITextArea) => { - const ref = useRef(null); - const id = useId(); - return ( - - ); -}; +export const TextArea = forwardRef( + ( + { + autoComplete = 'off', + onChange = (_) => {}, + resize = false, + rows = '3', + ...etc + }, + ref + ) => { + const id = useId(); + return ( + + ); + } +); export const PasswordInput = (props: IInputRow) => { const ref = useRef(null); diff --git a/src/design-system/components/atoms/option-list.tsx b/src/design-system/components/atoms/option-list.tsx index 47336b7d9..c655e3af9 100644 --- a/src/design-system/components/atoms/option-list.tsx +++ b/src/design-system/components/atoms/option-list.tsx @@ -151,7 +151,7 @@ const OptionMenuContent = forwardRef< exit={{ opacity: 0, scale: 0.85 }} transition={{ duration: 0.3, ease: 'anticipate' }} className={cn( - 'z-50 border border-border-default dark:border-border-darktheme-default shadow-popover bg-surface-basic-default dark:bg-surface-darktheme-basic-default rounded min-w-[160px] overflow-hidden origin-top py-lg', + 'z-50 border border-border-default dark:border-border-darktheme-default shadow-popover dark:shadow-darktheme-popover bg-surface-basic-default dark:bg-surface-darktheme-basic-default rounded min-w-[160px] overflow-hidden origin-top py-lg', className )} > diff --git a/src/design-system/components/css/index.scss b/src/design-system/components/css/index.scss index eb2f76233..b3c9b666d 100644 --- a/src/design-system/components/css/index.scss +++ b/src/design-system/components/css/index.scss @@ -1202,6 +1202,10 @@ video { min-width: 3px; } +.max-w-8xl{ + max-width: 90rem; +} + .max-w-\[200px\]{ max-width: 200px; } @@ -1523,6 +1527,11 @@ video { border-color: rgb(220 38 38 / var(--tw-border-opacity)); } +.border-border-darktheme-critical{ + --tw-border-opacity: 1; + border-color: rgb(153 27 27 / var(--tw-border-opacity)); +} + .border-border-darktheme-default{ --tw-border-opacity: 1; border-color: rgb(39 39 42 / var(--tw-border-opacity)); @@ -2132,6 +2141,11 @@ video { color: rgb(161 161 170 / var(--tw-text-opacity)); } +.text-text-darktheme-strong{ + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + .text-text-darktheme-success{ --tw-text-opacity: 1; color: rgb(34 197 94 / var(--tw-text-opacity)); @@ -2297,6 +2311,10 @@ video { transition-duration: 200ms; } +.\[pointer-events\:all\]{ + pointer-events: all; +} + input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, @@ -2488,7 +2506,7 @@ select{ } .focus-visible\:shadow-focus:focus-visible{ - --tw-shadow: 0px 0px 0px 2px #60A5FA;; + --tw-shadow: 0px 0px 0px 2px #60A5FA; --tw-shadow-colored: 0px 0px 0px 2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @@ -2901,6 +2919,11 @@ select{ color: rgb(161 161 170 / var(--tw-text-opacity)); } +:is(:where(.dark) .dark\:text-text-darktheme-strong){ + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + :is(:where(.dark) .dark\:text-text-darktheme-success){ --tw-text-opacity: 1; color: rgb(34 197 94 / var(--tw-text-opacity)); @@ -2911,6 +2934,12 @@ select{ color: rgb(245 158 11 / var(--tw-text-opacity)); } +:is(:where(.dark) .dark\:shadow-darktheme-popover){ + --tw-shadow: 0px 0px 2px 0px rgba(250, 250, 250, 0.20), 0px 2px 10px 0px rgba(250, 250, 250, 0.10); + --tw-shadow-colored: 0px 0px 2px 0px var(--tw-shadow-color), 0px 2px 10px 0px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + :is(:where(.dark) .dark\:ring-border-darktheme-focus){ --tw-ring-opacity: 1; --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); diff --git a/src/design-system/tailwind-base.js b/src/design-system/tailwind-base.js index 825598da0..2634f80ec 100644 --- a/src/design-system/tailwind-base.js +++ b/src/design-system/tailwind-base.js @@ -262,7 +262,7 @@ const config = { ], deep: [ '0px 0px 0px 1px rgba(6, 44, 82, 0.1)', - '0px 2px 16px rgba(33, 43, 54, 0.08);', + '0px 2px 16px rgba(33, 43, 54, 0.08)', ], modal: [ '0px 0px 1px rgba(0, 0, 0, 0.2)', @@ -272,10 +272,10 @@ const config = { '0px 1px 3px rgba(63, 63, 68, 0.15)', '0px 0px 0px 1px rgba(63, 63, 68, 0.05)', ], - focus: '0px 0px 0px 2px #60A5FA;', + focus: '0px 0px 0px 2px #60A5FA', 'darktheme-popover': [ '0px 0px 2px 0px rgba(250, 250, 250, 0.20)', - '0px 2px 10px 0px rgba(250, 250, 250, 0.10);', + '0px 2px 10px 0px rgba(250, 250, 250, 0.10)', ], }, maxWidth: { ...width }, From 9204109accd22d41ab5571d18812dfdd81948070 Mon Sep 17 00:00:00 2001 From: Bikash Date: Mon, 27 May 2024 19:01:56 +0530 Subject: [PATCH 02/19] updated new design and added some docs --- src/apps/auth/components/container.tsx | 2 +- src/apps/auth/routes/_providers+/signup.tsx | 77 ++++++++++++--------- 2 files changed, 47 insertions(+), 32 deletions(-) diff --git a/src/apps/auth/components/container.tsx b/src/apps/auth/components/container.tsx index 3b8df3191..a887fa316 100644 --- a/src/apps/auth/components/container.tsx +++ b/src/apps/auth/components/container.tsx @@ -23,7 +23,7 @@ const Container = ({ children, footer }: ContainerProps) => { {children}
{footer && ( -
+
{footer?.message}