wip: update

cdsctf · Nov 4, 2024 · d2c7bc0 · d2c7bc0
1 parent daf46ad
commit d2c7bc0
Show file tree

Hide file tree

Showing 31 changed files with 337 additions and 337 deletions.
diff --git a/src/components/core/Avatar/Avatar.module.scss b/src/components/core/Avatar/Avatar.module.scss
@@ -1,5 +1,5 @@
-$size: var(--size);
-$border-color: var(--border-color);
+$size: var(--avatar-size);
+$border-color: var(--avatar-border-color);
 
 .root {
     display: flex;

diff --git a/src/components/core/Avatar/Avatar.tsx b/src/components/core/Avatar/Avatar.tsx
@@ -27,8 +27,8 @@ export function Avatar(props: AvatarProps) {
     const [imgErr, setImgErr] = useState<boolean>(false);
 
     const variables = {
-        "--size": size,
-        "--border-color": baseColor,
+        "--avatar-size": size,
+        "--avatar-border-color": baseColor,
     } as React.CSSProperties;
 
     return (

diff --git a/src/components/core/Badge/Badge.module.scss b/src/components/core/Badge/Badge.module.scss
@@ -1,6 +1,6 @@
-$bg-color: var(--bg-color);
-$border-color: var(--border-color);
-$text-color: var(--text-color);
+$bg-color: var(--badge-bg-color);
+$border-color: var(--badge-border-color);
+$text-color: var(--badge-text-color);
 
 .root {
     width: fit-content;

diff --git a/src/components/core/Badge/Badge.tsx b/src/components/core/Badge/Badge.tsx
@@ -42,9 +42,9 @@ export function Badge(props: BadgeProps) {
     };
 
     const variables = {
-        "--bg-color": bgColor(),
-        "--border-color": borderColor(),
-        "--text-color": "#FFFFFF",
+        "--badge-bg-color": bgColor(),
+        "--badge-border-color": borderColor(),
+        "--badge-text-color": "#FFFFFF",
     } as CSSProperties;
 
     return (

diff --git a/src/components/core/Button/Button.module.scss b/src/components/core/Button/Button.module.scss
@@ -1,10 +1,9 @@
 @use "@/styles/mixins";
 
-$width: var(--width);
-$height: var(--height);
-$bg-color: var(--bg-color);
-$bg-secondary-color: var(--bg-secondary-color);
-$text-color: var(--text-color);
+$width: var(--button-width);
+$height: var(--button-height);
+$bg-color: var(--button-bg-color);
+$text-color: var(--button-text-color);
 
 .root {
     width: $width;
@@ -31,12 +30,8 @@ $text-color: var(--text-color);
     }
 
     &[data-variant="outlined"] {
-        background-color: var(--color-light);
+        background-color: var(--bg-2-color);
         border-color: $bg-color;
-
-        @include mixins.dark {
-            background-color: var(--color-dark);
-        }
     }
 
     &[data-variant="ghost"] {
@@ -74,8 +69,16 @@ $text-color: var(--text-color);
     font-weight: 600;
     line-height: 21.6px;
     letter-spacing: 0.8px;
+
+    @include mixins.dark {
+        color: #ffffff;
+    }
 }
 
 .icon {
     color: $text-color;
+
+    @include mixins.dark {
+        color: #ffffff;
+    }
 }
diff --git a/src/components/core/Button/Button.tsx b/src/components/core/Button/Button.tsx
@@ -41,11 +41,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         const baseColor = useThemeColor(color);
 
         const variables = {
-            "--width": width,
-            "--height": height,
-            "--bg-color": baseColor,
-            "--bg-secondary-color": `${chroma.valid(baseColor) ? chroma(baseColor).darken(0.5) : baseColor}`,
-            "--text-color": variant === "solid" ? "#fff" : baseColor,
+            "--button-width": width,
+            "--button-height": height,
+            "--button-bg-color": baseColor,
+            "--button-text-color": variant === "solid" ? "#fff" : baseColor,
         } as React.CSSProperties;
 
         return (

diff --git a/src/components/core/Checkbox/Checkbox.module.scss b/src/components/core/Checkbox/Checkbox.module.scss
@@ -1,6 +1,6 @@
 @use "@/styles/mixins";
 
-$bg-color: var(--bg-color);
+$bg-color: var(--checkbox-bg-color);
 
 .root {
     display: flex;
@@ -31,7 +31,7 @@ $bg-color: var(--bg-color);
     position: relative;
     height: 24px;
     width: 24px;
-    background-color: #ffffff0d;
+    background-color: var(--bg-2-color);
     border: 2px solid $bg-color;
     border-radius: 8px;
     transition: all 200ms ease-in-out;

diff --git a/src/components/core/Checkbox/Checkbox.tsx b/src/components/core/Checkbox/Checkbox.tsx
@@ -23,7 +23,7 @@ export function Checkbox(props: CheckboxProps) {
     const baseColor = useThemeColor(color);
 
     const variables = {
-        "--bg-color": baseColor,
+        "--checkbox-bg-color": baseColor,
     } as CSSProperties;
 
     return (

diff --git a/src/components/core/DatetimeInput/DatetimeInput.module.scss b/src/components/core/DatetimeInput/DatetimeInput.module.scss
@@ -1,5 +1,4 @@
-$bg-color: var(--bg-color);
-$border-color: var(--border-color);
+@use "@/styles/mixins";
 
 .root {
     display: flex;
@@ -13,7 +12,11 @@ $border-color: var(--border-color);
 
     &[data-variant="outlined"] {
         .icon {
-            color: $border-color;
+            color: var(--input-border-color);
+
+            @include mixins.dark {
+                color: #ffffff;
+            }
         }
     }
 }

diff --git a/src/components/core/DatetimePicker/DatetimePicker.module.scss b/src/components/core/DatetimePicker/DatetimePicker.module.scss
@@ -1,7 +1,6 @@
 @use "@/styles/mixins";
 
-$bg-color: var(--bg-color);
-$border-color: var(--border-color);
+$border-color: var(--dtp-border-color);
 
 @keyframes scale-up {
     0% {
@@ -46,7 +45,7 @@ $border-color: var(--border-color);
 }
 
 .wrapper {
-    background-color: $bg-color;
+    background-color: var(--bg-2-color);
     border: 2.75px solid $border-color;
     border-radius: 12px;
     padding: 16px;

diff --git a/src/components/core/DatetimePicker/DatetimePicker.tsx b/src/components/core/DatetimePicker/DatetimePicker.tsx
@@ -48,7 +48,7 @@ export function DatetimePicker(props: DatetimePickerProps) {
     }, [selectedDateTime]);
 
     const variables = {
-        "--border-color": useThemeColor("primary"),
+        "--dtp-border-color": useThemeColor("primary"),
     } as CSSProperties;
 
     const daysInMonth = selectedDateTime.daysInMonth || 31;

diff --git a/src/components/core/InputBase/InputBase.module.scss b/src/components/core/InputBase/InputBase.module.scss
@@ -1,8 +1,8 @@
 @use "@/styles/mixins";
 
-$width: var(--width);
-$bg-color: var(--bg-color);
-$border-color: var(--border-color);
+$width: var(--input-width);
+$bg-color: var(--input-bg-color);
+$border-color: var(--input-border-color);
 
 .root {
     width: $width;
@@ -60,7 +60,7 @@ $border-color: var(--border-color);
     }
 
     &[data-variant="outlined"] {
-        background-color: #ffffff0d;
+        background-color: var(--bg-2-color);
     }
 
     &:focus,

diff --git a/src/components/core/InputBase/InputBase.tsx b/src/components/core/InputBase/InputBase.tsx
@@ -34,9 +34,9 @@ export const InputBase = forwardRef<HTMLDivElement, InputBaseProps>(
         const baseColor = useThemeColor(color);
 
         const variables = {
-            "--width": width,
-            "--bg-color": baseColor,
-            "--border-color": baseColor,
+            "--input-width": width,
+            "--input-bg-color": baseColor,
+            "--input-border-color": baseColor,
         } as React.CSSProperties;
 
         return (

diff --git a/src/components/core/Switch/Switch.module.scss b/src/components/core/Switch/Switch.module.scss
@@ -1,6 +1,6 @@
 @use "@/styles/mixins";
 
-$bg-color: var(--bg-color);
+$bg-color: var(--switch-bg-color);
 
 .root {
     display: flex;

diff --git a/src/components/core/Switch/Switch.tsx b/src/components/core/Switch/Switch.tsx
@@ -15,7 +15,7 @@ export function Switch(props: SwitchProps) {
     const baseColor = useThemeColor(color);
 
     const variables = {
-        "--bg-color": baseColor,
+        "--switch-bg-color": baseColor,
     } as CSSProperties;
 
     return (

diff --git a/src/components/core/TextInput/TextInput.module.scss b/src/components/core/TextInput/TextInput.module.scss
@@ -1,19 +1,16 @@
 @use "@/styles/mixins";
 
-$bg-color: var(--bg-color);
-$border-color: var(--border-color);
-
 .root {
     gap: 8px;
 
     &[data-variant="solid"] {
-        background-color: $bg-color;
+        background-color: var(--input-bg-color);
 
         .icon {
             color: #ffffff;
         }
 
-        input {
+        .input {
             color: #ffffff;
             caret-color: #ffffff;
 
@@ -33,7 +30,23 @@ $border-color: var(--border-color);
 
     &[data-variant="outlined"] {
         .icon {
-            color: $border-color;
+            color: var(--input-border-color);
+
+            @include mixins.dark {
+                color: #ffffff;
+            }
+        }
+
+        .toggle-button {
+            @include mixins.dark {
+                color: #ffffff;
+            }
+        }
+
+        .clear-button {
+            @include mixins.dark {
+                color: #ffffff;
+            }
         }
     }
 
@@ -59,7 +72,7 @@ $border-color: var(--border-color);
     background: transparent;
     border: none;
     outline: none;
-    caret-color: $border-color;
+    caret-color: var(--input-border-color);
     font-size: 16px;
     line-height: 1.5;
 
@@ -85,7 +98,7 @@ $border-color: var(--border-color);
     background: transparent;
     border: none;
     cursor: pointer;
-    color: $border-color;
+    color: var(--input-border-color);
     transition: all 150ms ease-in-out;
 
     &:hover {
@@ -106,7 +119,7 @@ $border-color: var(--border-color);
     background: transparent;
     border: none;
     cursor: pointer;
-    color: $border-color;
+    color: var(--input-border-color);
     transition: all 150ms ease-in-out;
 
     &:hover {

diff --git a/src/components/core/TextInput/TextInput.tsx b/src/components/core/TextInput/TextInput.tsx
@@ -50,13 +50,6 @@ export function TextInput(props: TextInputProps) {
         setIsPasswordVisible(!isPasswordVisible);
     };
 
-    const baseColor = useThemeColor(color);
-
-    const variables = {
-        "--bg-color": baseColor,
-        "--border-color": baseColor,
-    } as React.CSSProperties;
-
     return (
         <InputBase
             width={width}

diff --git a/src/components/core/Textarea/Textarea.module.scss b/src/components/core/Textarea/Textarea.module.scss
@@ -1,9 +1,4 @@
-$width: var(--width);
-$border-color: var(--border-color);
-
 .root {
-    width: $width;
-
     &[data-variant="solid"] {
         .icon {
             color: #ffffff;
@@ -20,10 +15,10 @@ $border-color: var(--border-color);
     }
 
     &[data-variant="outlined"] {
-        background-color: #ffffff0d;
+        background-color: var(--bg-2-color);
 
         .icon {
-            color: $border-color;
+            color: var(--input-border-color);
         }
     }
 
@@ -49,7 +44,7 @@ $border-color: var(--border-color);
     background: transparent;
     border: none;
     outline: none;
-    caret-color: $border-color;
+    caret-color: var(--input-border-color);
     font-size: 16px;
     line-height: 1.5;
 

diff --git a/src/components/core/Textarea/Textarea.tsx b/src/components/core/Textarea/Textarea.tsx
@@ -11,12 +11,8 @@ export interface TextareaProps extends Omit<InputBaseProps, "onChange"> {
 export function Textarea(props: TextareaProps) {
     const { width = "fit-content", value, onChange, icon, ...rest } = props;
 
-    const variables = {
-        "--width": width,
-    } as React.CSSProperties;
-
     return (
-        <InputBase className={styles["root"]} style={variables}>
+        <InputBase className={styles["root"]} width={width}>
             {icon && <div className={styles["icon"]}>{icon}</div>}
             <textarea
                 className={styles["textarea"]}

diff --git a/src/components/core/Toast/Toast.module.scss b/src/components/core/Toast/Toast.module.scss
@@ -1,7 +1,7 @@
 @use "@/styles/mixins";
 
-$bg-color: var(--bg-color);
-$border-color: var(--border-color);
+$bg-color: var(--toast-bg-color);
+$border-color: var(--toast-border-color);
 
 .root {
     display: flex;

diff --git a/src/components/core/Toast/Toast.tsx b/src/components/core/Toast/Toast.tsx
@@ -30,10 +30,10 @@ export function Toast(props: ToastProps) {
     const baseColor = useThemeColor(color);
 
     const variables = {
-        "--bg-color": chroma(baseColor).hex(),
-        "--grid-color": chroma(baseColor).darken(1).alpha(0.1).hex(),
-        "--text-color": chroma(baseColor).darken(1.75).hex(),
-        "--border-color": baseColor,
+        "--toast-bg-color": chroma(baseColor).hex(),
+        "--toast-grid-color": chroma(baseColor).darken(1).alpha(0.1).hex(),
+        "--toast-text-color": chroma(baseColor).darken(1.75).hex(),
+        "--toast-border-color": baseColor,
     } as CSSProperties;
 
     return (
@@ -43,7 +43,6 @@ export function Toast(props: ToastProps) {
                 <h2 className={styles["title"]}>{title}</h2>
                 <p className={styles["description"]}>{description}</p>
             </div>
-            {/* <div ref={progressBarRef} className={styles["progress-bar"]}></div> */}
         </div>
     );
 }