From d408fc1185c0c05269f60dace169a35e96292013 Mon Sep 17 00:00:00 2001 From: gourav Date: Mon, 12 May 2025 14:55:03 +0530 Subject: [PATCH 1/2] feat: Button --- platforms/metagram/src/app.css | 11 +++++++++++ .../metagram/src/lib/ui/Button/Button.stories.ts | 11 +++++++++++ platforms/metagram/src/lib/ui/Button/Button.svelte | 10 ++++++++-- 3 files changed, 30 insertions(+), 2 deletions(-) diff --git a/platforms/metagram/src/app.css b/platforms/metagram/src/app.css index aabaf06f..63152bdb 100644 --- a/platforms/metagram/src/app.css +++ b/platforms/metagram/src/app.css @@ -41,8 +41,19 @@ --color-black-200: #d2d2d2; --color-grey: #f5f5f5; + --color-gray-500: #C0C0C0; --color-brand-burnt-orange: #da4a11; + --color-brand-burnt-orange-100 #F8DBCF; + --color-brand-burnt-orange-200: #F3C3B0; + --color-brand-burnt-orange-300: #ECA488; + --color-brand-burnt-orange-400: #E68660; + --color-brand-burnt-orange-500: #E06839; + --color-brand-burnt-orange-600: #91310B; + --color-brand-burnt-orange-700: #6D2509; + --color-brand-burnt-orange-800: #491906; + --color-brand-burnt-orange-900: #2C0F03; + --color-brand-gradient: linear-gradient( 91.82deg, #4d44ef -36.17%, diff --git a/platforms/metagram/src/lib/ui/Button/Button.stories.ts b/platforms/metagram/src/lib/ui/Button/Button.stories.ts index 7f711f04..3bb0b5c6 100644 --- a/platforms/metagram/src/lib/ui/Button/Button.stories.ts +++ b/platforms/metagram/src/lib/ui/Button/Button.stories.ts @@ -16,6 +16,17 @@ export const Primary = { args: { variant: 'primary', children: ButtonText } }; +export const Secondary = { + args: { + variant: 'secondary', + blockingClick: true, + children: ButtonText, + callback: async () => { + await new Promise((resolve) => setTimeout(resolve, 2000)); + } + } +}; + export const Danger = { args: { variant: 'danger', children: ButtonText } }; diff --git a/platforms/metagram/src/lib/ui/Button/Button.svelte b/platforms/metagram/src/lib/ui/Button/Button.svelte index 9493bfb1..f67a1e3f 100644 --- a/platforms/metagram/src/lib/ui/Button/Button.svelte +++ b/platforms/metagram/src/lib/ui/Button/Button.svelte @@ -3,7 +3,7 @@ import type { HTMLButtonAttributes } from 'svelte/elements'; interface IButtonProps extends HTMLButtonAttributes { - variant?: 'primary' | 'danger'; + variant?: 'primary' |'secondary' | 'danger'; isLoading?: boolean; callback?: () => Promise | void; blockingClick?: boolean; @@ -39,12 +39,14 @@ }; const variantClasses = { - primary: { background: 'bg-grey', text: 'text-black-800' }, + primary: { background: 'bg-grey', text: 'text-black-800', border: "border border-grey-500" }, + secondary: { background: 'bg-brand-burnt-orange', text: 'text-white'}, danger: { background: 'bg-red-500', text: 'text-white' } }; const disabledVariantClasses = { primary: { background: 'bg-grey/50', text: 'text-black-800/50' }, + secondary: { background: 'bg-brand-burnt-orange/50', text: 'text-white/50'}, danger: { background: 'bg-red-500/50', text: 'text-white/50' } }; @@ -64,6 +66,9 @@ text: disabled ? disabledVariantClasses[variant].text || variantClasses[variant].text : variantClasses[variant].text, + border: disabled + ? disabledVariantClasses[variant].border || variantClasses[variant].border + : variantClasses[variant].border, disabled: 'cursor-not-allowed' }); @@ -75,6 +80,7 @@ classes.common, classes.background, classes.text, + classes.border, disabled && classes.disabled, restProps.class ].join(' ') From 2ccd984b7579ebc73ad1e3f36a3cafa23b66f8dc Mon Sep 17 00:00:00 2001 From: gourav Date: Mon, 12 May 2025 15:14:38 +0530 Subject: [PATCH 2/2] fix: colors of variants --- platforms/metagram/src/app.css | 19 ++++++------- .../src/lib/ui/Button/Button.stories.ts | 4 --- .../metagram/src/lib/ui/Button/Button.svelte | 28 ++++++++++++++----- 3 files changed, 30 insertions(+), 21 deletions(-) diff --git a/platforms/metagram/src/app.css b/platforms/metagram/src/app.css index 63152bdb..9a89a250 100644 --- a/platforms/metagram/src/app.css +++ b/platforms/metagram/src/app.css @@ -37,22 +37,21 @@ --color-black: #1f1f1f; --color-black-800: #4c4c4c; --color-black-600: #797979; - --color-black-400: #a9a9a9; + --color-black-400: #a5a5a5; --color-black-200: #d2d2d2; --color-grey: #f5f5f5; - --color-gray-500: #C0C0C0; --color-brand-burnt-orange: #da4a11; - --color-brand-burnt-orange-100 #F8DBCF; - --color-brand-burnt-orange-200: #F3C3B0; - --color-brand-burnt-orange-300: #ECA488; - --color-brand-burnt-orange-400: #E68660; - --color-brand-burnt-orange-500: #E06839; - --color-brand-burnt-orange-600: #91310B; - --color-brand-burnt-orange-700: #6D2509; + --color-brand-burnt-orange-100: #f8dbcf; + --color-brand-burnt-orange-200: #f3c3b0; + --color-brand-burnt-orange-300: #eca488; + --color-brand-burnt-orange-400: #e68660; + --color-brand-burnt-orange-500: #e06839; + --color-brand-burnt-orange-600: #91310b; + --color-brand-burnt-orange-700: #6d2509; --color-brand-burnt-orange-800: #491906; - --color-brand-burnt-orange-900: #2C0F03; + --color-brand-burnt-orange-900: #2c0f03; --color-brand-gradient: linear-gradient( 91.82deg, diff --git a/platforms/metagram/src/lib/ui/Button/Button.stories.ts b/platforms/metagram/src/lib/ui/Button/Button.stories.ts index 3bb0b5c6..c55b3cdb 100644 --- a/platforms/metagram/src/lib/ui/Button/Button.stories.ts +++ b/platforms/metagram/src/lib/ui/Button/Button.stories.ts @@ -27,10 +27,6 @@ export const Secondary = { } }; -export const Danger = { - args: { variant: 'danger', children: ButtonText } -}; - export const Loading = { args: { isLoading: true, children: ButtonText } }; diff --git a/platforms/metagram/src/lib/ui/Button/Button.svelte b/platforms/metagram/src/lib/ui/Button/Button.svelte index f67a1e3f..16af6025 100644 --- a/platforms/metagram/src/lib/ui/Button/Button.svelte +++ b/platforms/metagram/src/lib/ui/Button/Button.svelte @@ -3,7 +3,7 @@ import type { HTMLButtonAttributes } from 'svelte/elements'; interface IButtonProps extends HTMLButtonAttributes { - variant?: 'primary' |'secondary' | 'danger'; + variant?: 'primary' | 'secondary'; isLoading?: boolean; callback?: () => Promise | void; blockingClick?: boolean; @@ -39,15 +39,29 @@ }; const variantClasses = { - primary: { background: 'bg-grey', text: 'text-black-800', border: "border border-grey-500" }, - secondary: { background: 'bg-brand-burnt-orange', text: 'text-white'}, - danger: { background: 'bg-red-500', text: 'text-white' } + primary: { + background: 'bg-grey', + text: 'text-black-800', + border: 'border border-black-400' + }, + secondary: { + background: 'bg-brand-burnt-orange', + text: 'text-white', + border: 'border border-brand-burnt-orange-600' + } }; const disabledVariantClasses = { - primary: { background: 'bg-grey/50', text: 'text-black-800/50' }, - secondary: { background: 'bg-brand-burnt-orange/50', text: 'text-white/50'}, - danger: { background: 'bg-red-500/50', text: 'text-white/50' } + primary: { + background: 'bg-grey/50', + text: 'text-black-800/50', + border: 'border border-black-400/50' + }, + secondary: { + background: 'bg-brand-burnt-orange/50', + text: 'text-white/50', + border: 'border border-brand-burnt-orange-600/50' + } }; const sizeVariant = {