Merge pull request #59 from inkonchain/feat/shadows

feat: shadows

src/components/Button/Button.tsx

@@ -64,8 +64,18 @@ export const Button: React.FC<ButtonProps> = ({
           wallet: classNames(
             "ink:bg-background-light-transparent ink:text-body-2-bold ink:text-text-default ink:hover:bg-background-light ink:disabled:bg-background-light-transparent-disabled ink:disabled:text-muted ink:active:bg-background-light",
             "ink:border-background-container ink:border",
-            iconLeft && "ink:pl-0.5",
-            iconRight && "ink:pr-0.5"
+            iconLeft &&
+              variantClassNames(size, {
+                sm: "ink:pl-0.5",
+                md: "ink:pl-0.5",
+                lg: "ink:pl-1",
+              }),
+            iconRight &&
+              variantClassNames(size, {
+                sm: "ink:pr-0.5",
+                md: "ink:pr-0.5",
+                lg: "ink:pr-1",
+              })
           ),
         }),
         className

src/components/Modal/Modal.tsx

@@ -72,7 +72,7 @@ export const Modal = <TOnCloseProps,>({
           )}
         >
           <DialogPanel transition>
-            <InkPanel size={size} centered>
+            <InkPanel size={size} centered shadow>
               <DialogTitle
                 as={InkHeader}
                 title={title}

src/components/Panel/Panel.tsx

@@ -6,7 +6,7 @@ export const Panel: React.FC<PropsWithChildren> = ({ children }) => {
     <div
       className={classNames(
         "ink:min-w-[240px] ink:mt-1 ink:p-1",
-        "ink:rounded-lg ink:bg-background-light ink:shadow-menu",
+        "ink:rounded-lg ink:bg-background-light",
         "ink:flex ink:flex-col ink:gap-1.5",
         "ink:transition-opacity ink:transition-default-animation ink:opacity-100 ink:starting:opacity-0"
       )}

src/layout/InkParts/InkPageLayout.tsx

@@ -18,7 +18,7 @@ export const InkPageLayout: React.FC<InkPageLayoutProps> = ({
           2: "ink:grid-cols-[minmax(260px,1fr)_400px]",
           3: "ink:grid-cols-[260px_minmax(260px,1fr)_400px]",
         }),
-        "ink:*:bg-background-light ink:*:rounded-lg ink:*:shadow-layout"
+        "ink:*:bg-background-light ink:*:rounded-lg"
       )}
     >
       {children}

src/layout/InkParts/InkPanel.tsx

@@ -6,19 +6,24 @@ export interface InkPanelProps extends PropsWithChildren {
   className?: string;
   size?: "auto" | "lg" | "md";
   centered?: boolean;
+  shadow?: boolean;
 }
 
 export const InkPanel = forwardRef<HTMLDivElement, InkPanelProps>(
-  ({ className, size = "auto", centered = false, children }, ref) => {
+  (
+    { className, size = "auto", centered = false, shadow = false, children },
+    ref
+  ) => {
     return (
       <div
         ref={ref}
         className={classNames(
           "ink:flex ink:flex-col ink:justify-between ink:gap-3 ink:p-3 ink:box-border",
           "ink:*:nth-2:flex-1 ink:*:nth-2:flex ink:*:nth-2:items-start ink:*:nth-2:justify-start",
-          "ink:bg-background-light ink:shadow-modal ink:rounded-lg",
+          "ink:bg-background-light ink:rounded-lg",
           "ink:font-default ink:text-text-default",
           "ink:transition-default-animation ink:in-data-closed:scale-95 ink:in-data-closed:opacity-0",
+          shadow && "ink:shadow-md",
           variantClassNames(size, {
             auto: "",
             lg: "ink:min-w-[320px] ink:sm:min-w-[640px] ink:min-h-[480px] ink:max-w-4xl",

src/styles/Shadows.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { classNames } from "../util/classes";
+
+function Shadows() {
+  const shadows = ["ink:shadow-xs", "ink:shadow-md", "ink:shadow-lg"];
+  return (
+    <div className="ink:flex ink:gap-8 ink:flex-wrap ink:font-default">
+      {shadows.map((sh) => (
+        <div
+          key={sh}
+          className={classNames(
+            "ink:size-[200px] ink:flex ink:items-center ink:justify-center ink:rounded-lg ink:bg-background-light ink:text-[#999]",
+            sh
+          )}
+        >
+          {sh}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta = {
+  title: "Design/Shadows",
+  component: Shadows,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+  args: {},
+};

src/styles/theme/colors.base.css

@@ -89,9 +89,27 @@
     transparent
   );
 
+  /* Radius */
   --ink-base-radius-full: 9999px;
   --ink-base-radius-lg: 24px;
   --ink-base-radius-md: 16px;
   --ink-base-radius-sm: 12px;
   --ink-base-radius-xs: 8px;
+
+  /* Shadows */
+  --ink-base-shadow-xs-color: color-mix(
+    in srgb,
+    var(--ink-background-shadow) 6%,
+    transparent
+  );
+  --ink-base-shadow-md-color: color-mix(
+    in srgb,
+    var(--ink-background-shadow) 8%,
+    transparent
+  );
+  --ink-base-shadow-lg-color: color-mix(
+    in srgb,
+    var(--ink-background-shadow) 10%,
+    transparent
+  );
 }

src/styles/theme/colors.contrast.css

@@ -4,6 +4,7 @@
   --ink-background-dark: rgba(221, 221, 221, 1);
   --ink-background-light: rgba(255, 255, 255, 1);
   --ink-background-container: rgba(0, 0, 0, 0.1);
+  --ink-background-shadow: rgba(0, 0, 0, 1);
 
   /* Button */
   --ink-button-primary: rgba(0, 0, 0, 1);

src/styles/theme/colors.light.css

@@ -3,6 +3,7 @@
   /* Background */
   --ink-background-dark: rgb(240, 239, 255);
   --ink-background-light: rgb(255, 255, 255);
+  --ink-background-shadow: rgba(22, 15, 31, 1);
 
   /* Button */
   --ink-button-primary: rgb(113, 50, 245);

src/styles/theme/colors.morpheus.css

@@ -4,6 +4,7 @@
   --ink-background-dark: rgba(15, 13, 35, 1);
   --ink-background-light: rgba(27, 23, 73, 1);
   --ink-background-container: rgba(45, 39, 104, 1);
+  --ink-background-shadow: rgba(15, 13, 35, 1);
 
   /* Button */
   --ink-button-primary: rgba(205, 54, 96, 1);

src/styles/theme/colors.neo.css

@@ -6,6 +6,7 @@
   --ink-background-dark: rgb(7, 9, 8);
   --ink-background-light: rgb(19, 28, 23);
   --ink-background-container: rgb(30, 46, 37);
+  --ink-background-shadow: rgba(7, 9, 8, 1);
 
   /* Button */
   --ink-button-primary: rgba(6, 254, 110);

src/tailwind.css

@@ -86,6 +86,7 @@
   --color-background-light: var(--ink-background-light);
   --color-background-light-transparent: var(--ink-background-light-transparent);
   --color-background-light-invisible: var(--ink-background-light-invisible);
+  --color-background-shadow: var(--ink-background-shadow);
 
   --color-button-primary: var(--ink-button-primary);
   --color-button-primary-hover: var(--ink-button-primary-hover);
@@ -177,10 +178,9 @@
 
   /* Shadows */
   --shadow-*: initial;
-  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);
-  --shadow-menu: 0px 8px 24px -8px #160f1f1a;
-  --shadow-modal: 0px 16px 64px -32px #160f1f1a;
-  --shadow-layout: 0px 16px 64px -32px #160f1f0d;
+  --shadow-xs: 0px 4px 8px -2px var(--ink-base-shadow-xs-color);
+  --shadow-md: 0px 12px 16px -4px var(--ink-base-shadow-md-color);
+  --shadow-lg: 0px 32px 64px -12px var(--ink-base-shadow-lg-color);
 }
 
 @utility transition-default-animation {