From 0ca740ed0bc34ae7cc9b9bbba95a32bb25792a5e Mon Sep 17 00:00:00 2001
From: MaxtuneLee <max@xox.im>
Date: Thu, 1 Feb 2024 16:25:03 +0800
Subject: [PATCH] feat: combine shadow into one variable

---
 packages/ui/lib/Button/Button.module.scss | 20 ++++++------
 packages/ui/lib/Button/Button.stories.ts  |  7 ++--
 packages/ui/lib/Button/Button.tsx         | 16 ++++------
 packages/ui/lib/Card/Card.module.scss     |  4 +--
 packages/ui/lib/Card/Card.stories.tsx     |  5 +++
 packages/ui/lib/Card/Card.tsx             |  7 +++-
 packages/ui/lib/_variables.scss           | 39 +++++++++++++++++++++++
 packages/ui/tsconfig.json                 |  3 ++
 8 files changed, 76 insertions(+), 25 deletions(-)
 create mode 100644 packages/ui/lib/_variables.scss

diff --git a/packages/ui/lib/Button/Button.module.scss b/packages/ui/lib/Button/Button.module.scss
index dd7a6b3..893c098 100644
--- a/packages/ui/lib/Button/Button.module.scss
+++ b/packages/ui/lib/Button/Button.module.scss
@@ -1,3 +1,4 @@
+@use '../variables' as *;
 .base {
   background-color: var(--primary-color);
   color: white;
@@ -8,15 +9,7 @@
   font-size: 16px;
   font-weight: 400;
   transition: all 0.15s ease-in-out;
-  &.shadow {
-    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
-    &:hover {
-      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
-    }
-    &:active {
-      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-    }
-  }
+  @include shadow;
   &:hover {
     backdrop-filter: brightness(0.85);
   }
@@ -31,8 +24,13 @@
     color: var(--primary-color);
     border: 1px solid var(--primary-color);
   }
-  &.tertiary {
-    background-color: #f6f6f6;
+  &.ghost {
+    &:hover {
+      // background-color: #ffffffc4;
+      filter: brightness(1);
+      backdrop-filter: brightness(0.97);
+    }
+    background-color: transparent;
     color: var(--primary-color);
     font-weight: 600;
   }
diff --git a/packages/ui/lib/Button/Button.stories.ts b/packages/ui/lib/Button/Button.stories.ts
index b244fe7..97550c5 100644
--- a/packages/ui/lib/Button/Button.stories.ts
+++ b/packages/ui/lib/Button/Button.stories.ts
@@ -12,13 +12,17 @@ const meta = {
   tags: ['autodocs'],
   argTypes: {
     color: {
-      options: ['primary', 'secondary', 'tertiary', 'danger'],
+      options: ['primary', 'secondary', 'ghost', 'danger'],
       control: { type: 'select' },
     },
     size: {
       options: ['small', 'medium', 'large'],
       control: { type: 'select' },
     },
+    shadow: {
+      options: ['regular', 'small', 'medium', 'large', 'extraLarge', 'inner', 'none'],
+      control: { type: 'select' },
+    },
   },
 } satisfies Meta<typeof Button>;
 
@@ -29,7 +33,6 @@ type Story = StoryObj<typeof meta>;
 const defaultProps: ButtonProps = {
   color: 'primary',
   size: 'medium',
-  isShadow: false,
 };
 
 export const DefaultButton: Story = {
diff --git a/packages/ui/lib/Button/Button.tsx b/packages/ui/lib/Button/Button.tsx
index bac347f..b54a2d8 100644
--- a/packages/ui/lib/Button/Button.tsx
+++ b/packages/ui/lib/Button/Button.tsx
@@ -6,31 +6,29 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   /**
    * The color of the button.
    */
-  color?: 'primary' | 'secondary' | 'tertiary' | 'danger';
-
+  color?: 'primary' | 'secondary' | 'ghost' | 'danger';
   /**
    * The size of the button.
    */
   size?: 'small' | 'medium' | 'large';
-
   /**
-   * If `true`, the button will be disabled.
+   * The shadow of the button.
    */
-  disabled?: boolean;
+  shadow?: 'regular' | 'small' | 'medium' | 'large' | 'extraLarge' | 'inner' | 'none';
   /**
-   * If `true`, the shadow will be appear
+   * If `true`, the button will be disabled.
    */
-  isShadow?: boolean;
+  disabled?: boolean;
 }
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ color = 'primary', size = 'medium', disabled = false, isShadow = false, ...rest }, ref) => {
+  ({ color = 'primary', shadow = 'none', size = 'medium', disabled = false, ...rest }, ref) => {
     const btnClass = classnames(
       styles['base'],
       styles[color],
       styles[size],
       styles[disabled ? 'disabled' : ''],
-      styles[isShadow ? 'shadow' : ''],
+      styles[`shadow-${shadow}`],
     );
     return (
       <button
diff --git a/packages/ui/lib/Card/Card.module.scss b/packages/ui/lib/Card/Card.module.scss
index c8d7ce4..da5c432 100644
--- a/packages/ui/lib/Card/Card.module.scss
+++ b/packages/ui/lib/Card/Card.module.scss
@@ -1,3 +1,4 @@
+@use '../variables' as *;
 .base {
   height: fit-content;
   border-radius: 6px;
@@ -46,15 +47,14 @@
     width: 100%;
     display: flex;
   }
+  @include shadow;
   &.light {
     background-color: var(--white-color);
     color: var(--black-color);
-    box-shadow: 1px 1px 4px 0px var(--shadow-color);
   }
   &.dark {
     background-color: var(--dark-color);
     color: var(--white-color);
-    box-shadow: 1px 1px 4px 0px var(--dark-color);
   }
   &.small {
     width: 300px;
diff --git a/packages/ui/lib/Card/Card.stories.tsx b/packages/ui/lib/Card/Card.stories.tsx
index 266cf8b..9157f73 100644
--- a/packages/ui/lib/Card/Card.stories.tsx
+++ b/packages/ui/lib/Card/Card.stories.tsx
@@ -21,6 +21,10 @@ const meta = {
       options: ['small', 'medium', 'large'],
       control: { type: 'select' },
     },
+    shadow: {
+      options: ['regular', 'small', 'medium', 'large', 'extraLarge', 'inner'],
+      control: { type: 'select' },
+    },
   },
 } satisfies Meta<typeof Card>;
 
@@ -32,6 +36,7 @@ const defaultProps: CardProps = {
   titleImage: undefined,
   theme: 'light',
   size: 'medium',
+  shadow: 'medium',
   header: <span>header</span>,
   content: <span>content</span>,
   footer: <span>footer</span>,
diff --git a/packages/ui/lib/Card/Card.tsx b/packages/ui/lib/Card/Card.tsx
index 7e6cce5..3ebdadb 100644
--- a/packages/ui/lib/Card/Card.tsx
+++ b/packages/ui/lib/Card/Card.tsx
@@ -15,6 +15,10 @@ export interface CardProps {
    * The size of the Card.
    */
   size?: 'small' | 'medium' | 'large';
+  /**
+   * The shadow of the Card.
+   */
+  shadow?: 'regular' | 'small' | 'medium' | 'large' | 'extraLarge' | 'inner';
   /**
    * The Header of the Card.
    */
@@ -34,6 +38,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
     {
       theme = 'light',
       size = 'medium',
+      shadow = 'medium',
       header = <span>header</span>,
       content = <span>content</span>,
       footer = <span>footer</span>,
@@ -42,7 +47,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
     },
     ref,
   ) => {
-    const cardClass = classnames(styles['base'], styles[theme], styles[size]);
+    const cardClass = classnames(styles['base'], styles[theme], styles[size], styles[`shadow-${shadow}`]);
 
     return (
       <div
diff --git a/packages/ui/lib/_variables.scss b/packages/ui/lib/_variables.scss
new file mode 100644
index 0000000..3507ef2
--- /dev/null
+++ b/packages/ui/lib/_variables.scss
@@ -0,0 +1,39 @@
+// box-shadow variables
+$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+$shadow:
+  0 1px 3px 0 rgba(0, 0, 0, 0.1),
+  0 1px 2px -1px rgba(0, 0, 0, 0.1);
+$shadow-md:
+  0 4px 6px -1px rgb(0 0 0 / 0.1),
+  0 2px 4px -2px rgb(0 0 0 / 0.1);
+$shadow-lg:
+  0 10px 15px -3px rgb(0 0 0 / 0.1),
+  0 4px 6px -4px rgb(0 0 0 / 0.1);
+$shadow-xl:
+  0 20px 25px -5px rgb(0 0 0 / 0.1),
+  0 8px 10px -6px rgb(0 0 0 / 0.1);
+$shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+$shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+
+@mixin shadow {
+  &.shadow-regular {
+    box-shadow: $shadow;
+  }
+  &.shadow-small {
+    box-shadow: $shadow-sm;
+  }
+  &.shadow-medium {
+    box-shadow: $shadow-md;
+  }
+  &.shadow-large {
+    box-shadow: $shadow-lg;
+  }
+  &.shadow-extraLarge {
+    box-shadow: $shadow-xl;
+  }
+  &.shadow-inner {
+    box-shadow: $shadow-inner;
+  }
+}
+
+// border variables
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 1eb7bbf..c0fce97 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -67,6 +67,9 @@
     "noUnusedLocals": false,
     "noUnusedParameters": true
   },
+  "paths": {
+    "@/*": ["./lib/*"]
+  },
   "include": ["./lib/**/*.ts", "./lib/**/*.tsx", "lib/Toast/showToast.js"],
   "exclude": ["./lib/**/*.stories.*"]
 }