From 8fee98648f5f154e771cb7b1e692f9d0fdf55341 Mon Sep 17 00:00:00 2001 From: fran-ink <171171801+fran-ink@users.noreply.github.com> Date: Thu, 13 Feb 2025 10:25:28 -0500 Subject: [PATCH 1/2] fix: checkbox icons and sticky nav --- package.json | 2 +- src/icons/Check.svg | 2 +- src/icons/Minus.svg | 2 +- src/layout/InkLayout/InkLayout.tsx | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index a9174ba..1ec8b16 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@inkonchain/ink-kit", - "version": "0.7.0", + "version": "0.7.1", "description": "", "main": "dist/index.cjs.js", "module": "dist/index.es.js", diff --git a/src/icons/Check.svg b/src/icons/Check.svg index 362eaf5..b102fe1 100644 --- a/src/icons/Check.svg +++ b/src/icons/Check.svg @@ -1,3 +1,3 @@ - + diff --git a/src/icons/Minus.svg b/src/icons/Minus.svg index 2f8308c..af43dcb 100644 --- a/src/icons/Minus.svg +++ b/src/icons/Minus.svg @@ -1,3 +1,3 @@ - + diff --git a/src/layout/InkLayout/InkLayout.tsx b/src/layout/InkLayout/InkLayout.tsx index 6b8d4b5..60f109b 100644 --- a/src/layout/InkLayout/InkLayout.tsx +++ b/src/layout/InkLayout/InkLayout.tsx @@ -102,9 +102,9 @@ export const InkLayout: React.FC = ({
Date: Thu, 13 Feb 2025 13:36:13 -0500 Subject: [PATCH 2/2] feat: couple of fixes * Add new rounded values * Make card text color adapt to card variant * Update theme colors (sleek) --- package.json | 2 +- src/components/Card/Card.stories.tsx | 10 ++++++++-- src/components/Card/Card.tsx | 14 +++++++++++++- src/components/Card/Content/CallToAction.tsx | 12 +----------- src/components/Card/Content/Image.tsx | 2 +- src/components/Card/Content/LargeLink.tsx | 2 +- src/components/Card/Content/Link.tsx | 12 ++++++++++-- src/components/Card/Content/Tagline.tsx | 2 +- .../Card/Content/TitleAndDescription.tsx | 4 ++-- src/layout/InkLayout/InkLayoutSideNav.tsx | 2 +- src/styles/theme/colors.base.css | 2 ++ src/styles/theme/colors.dark.css | 12 ++++++------ src/styles/theme/colors.light.css | 2 +- src/styles/theme/colors.neo.css | 2 ++ src/tailwind.css | 2 ++ 15 files changed, 52 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index 1ec8b16..ce87c5a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@inkonchain/ink-kit", - "version": "0.7.1", + "version": "0.7.3", "description": "", "main": "dist/index.cjs.js", "module": "dist/index.es.js", diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx index d646dc0..5bace93 100644 --- a/src/components/Card/Card.stories.tsx +++ b/src/components/Card/Card.stories.tsx @@ -20,7 +20,6 @@ const meta: Meta = { Button } - variant="default" /> ), image: ( @@ -109,6 +108,13 @@ export const ImageWithMainAndSecondaryLabels: Story = { }, }; +/** This variant has a color independent of the theme. */ +export const PurpleLightVariant: Story = { + args: { + variant: "light-purple", + }, +}; + /** For a Tagline card, use `CardContent.Tagline` and no image. */ export const WithTagline: Story = { args: { @@ -142,7 +148,7 @@ export const Link: Story = { children: ( } + icon={} title="Join the Ink Revolution!" description="Did you know that Ink's design system is like a chameleon for your UI? Just like these color-changing lizards adapt to their environment, Ink components seamlessly blend into any design while maintaining their unique personality. Just fabulous, adaptable UI!" /> diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 4574719..5fa9630 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -13,7 +13,7 @@ export interface CardProps extends VariantProps { const cardVariants = cva( ` -ink:rounded-md lg:ink:rounded-lg +ink:rounded-xl ink:grid ink:grid-cols-1 ink:p-2 ink:pb-3 ink:sm:p-3 ink:gap-3 ink:relative @@ -69,6 +69,18 @@ export const Card: React.FC = ({ }), className )} + style={ + { + "--ink-card-default-color": + variant === "light-purple" + ? "var(--ink-background-light)" + : "var(--ink-text-default)", + "--ink-card-muted-color": + variant === "light-purple" + ? "var(--ink-background-light)" + : "var(--ink-text-muted)", + } as React.CSSProperties + } > {(child) => ( diff --git a/src/components/Card/Content/CallToAction.tsx b/src/components/Card/Content/CallToAction.tsx index a41e730..7ab7a0c 100644 --- a/src/components/Card/Content/CallToAction.tsx +++ b/src/components/Card/Content/CallToAction.tsx @@ -5,7 +5,6 @@ interface CallToActionProps { title: React.ReactNode; description: React.ReactNode; button: React.ReactNode; - variant: "default" | "light"; className?: string; } @@ -13,19 +12,10 @@ export const CallToAction: React.FC = ({ title, description, button, - variant, className, }) => { return ( -
+
{button}
diff --git a/src/components/Card/Content/Image.tsx b/src/components/Card/Content/Image.tsx index 5cefd56..9adb6bf 100644 --- a/src/components/Card/Content/Image.tsx +++ b/src/components/Card/Content/Image.tsx @@ -17,7 +17,7 @@ export const Image: React.FC = ({ return (
diff --git a/src/components/Card/Content/LargeLink.tsx b/src/components/Card/Content/LargeLink.tsx index e72b546..8e67213 100644 --- a/src/components/Card/Content/LargeLink.tsx +++ b/src/components/Card/Content/LargeLink.tsx @@ -27,7 +27,7 @@ export const LargeLink = ({ href={href} target={target} className={classNames( - "ink:p-3 ink:bg-button-secondary ink:text-text-default ink:text-h5 ink:rounded-lg ink:box-border", + "ink:p-3 ink:bg-button-secondary ink:text-(--ink-card-default-color) ink:text-h5 ink:rounded-lg ink:box-border", "ink:flex ink:justify-between ink:items-center ink:gap-0.5", "ink:min-w-[200px]", href && "ink:cursor-pointer ink:hover:bg-button-secondary-hover", diff --git a/src/components/Card/Content/Link.tsx b/src/components/Card/Content/Link.tsx index 4cf7242..cbfd150 100644 --- a/src/components/Card/Content/Link.tsx +++ b/src/components/Card/Content/Link.tsx @@ -19,12 +19,20 @@ export const Link = ({ return ( {icon}
: undefined} + icon={ + icon ? ( +
+ {icon} +
+ ) : undefined + } title={title} description={description} > {linkIcon && ( -
{linkIcon}
+
+ {linkIcon} +
)} ); diff --git a/src/components/Card/Content/Tagline.tsx b/src/components/Card/Content/Tagline.tsx index 14259f6..c736ec7 100644 --- a/src/components/Card/Content/Tagline.tsx +++ b/src/components/Card/Content/Tagline.tsx @@ -14,7 +14,7 @@ export const Tagline: React.FC = ({ return (
diff --git a/src/components/Card/Content/TitleAndDescription.tsx b/src/components/Card/Content/TitleAndDescription.tsx index 956f136..6a2bf51 100644 --- a/src/components/Card/Content/TitleAndDescription.tsx +++ b/src/components/Card/Content/TitleAndDescription.tsx @@ -15,7 +15,7 @@ export const TitleAndDescription = ({

= ({ links, }) => { return ( -