react95-io · tegaki-tegaki · Dec 14, 2025
diff --git a/src/Anchor/Anchor.tsx b/src/Anchor/Anchor.tsx
@@ -9,10 +9,10 @@ type AnchorProps = {
 } & React.AnchorHTMLAttributes<HTMLAnchorElement> &
   CommonStyledProps;
 
-const StyledAnchor = styled.a<{ underline: boolean }>`
+const StyledAnchor = styled.a<{ $underline: boolean }>`
   color: ${({ theme }) => theme.anchor};
   font-size: inherit;
-  text-decoration: ${({ underline }) => (underline ? 'underline' : 'none')};
+  text-decoration: ${({ $underline }) => ($underline ? 'underline' : 'none')};
   &:visited {
     color: ${({ theme }) => theme.anchorVisited};
   }
@@ -21,7 +21,7 @@ const StyledAnchor = styled.a<{ underline: boolean }>`
 const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(
   ({ children, underline = true, ...otherProps }: AnchorProps, ref) => {
     return (
-      <StyledAnchor ref={ref} underline={underline} {...otherProps}>
+      <StyledAnchor ref={ref} $underline={underline} {...otherProps}>
         {children}
       </StyledAnchor>
     );

diff --git a/src/AppBar/AppBar.tsx b/src/AppBar/AppBar.tsx
@@ -12,11 +12,17 @@ type AppBarProps = {
 } & React.HTMLAttributes<HTMLElement> &
   CommonStyledProps;
 
-const StyledAppBar = styled.header<AppBarProps>`
+type StyledAppBarProps = {
+  $fixed?: boolean;
+  $position?: CSSProperties['position'];
+} & CommonStyledProps;
+
+const StyledAppBar = styled.header<StyledAppBarProps>`
   ${createBorderStyles()};
   ${createBoxStyles()};
 
-  position: ${props => props.position ?? (props.fixed ? 'fixed' : 'absolute')};
+  position: ${props =>
+    props.$position ?? (props.$fixed ? 'fixed' : 'absolute')};
   top: 0;
   right: 0;
   left: auto;
@@ -29,8 +35,8 @@ const AppBar = forwardRef<HTMLElement, AppBarProps>(
   ({ children, fixed = true, position = 'fixed', ...otherProps }, ref) => {
     return (
       <StyledAppBar
-        fixed={fixed}
-        position={fixed !== false ? position : undefined}
+        $fixed={fixed}
+        $position={fixed !== false ? position : undefined}
         ref={ref}
         {...otherProps}
       >

diff --git a/src/Avatar/Avatar.tsx b/src/Avatar/Avatar.tsx
@@ -13,30 +13,35 @@ type AvatarProps = {
 } & React.HTMLAttributes<HTMLDivElement> &
   CommonStyledProps;
 
-const StyledAvatar = styled.div<
-  Pick<AvatarProps, 'noBorder' | 'square' | 'src'> & { size?: string }
->`
+type StyledAvatarProps = {
+  $noBorder?: boolean;
+  $square?: boolean;
+  $src?: string;
+  $size?: string;
+};
+
+const StyledAvatar = styled.div<StyledAvatarProps>`
   display: inline-block;
   box-sizing: border-box;
   object-fit: contain;
-  ${({ size }) =>
+  ${({ $size }) =>
     `
-    height: ${size};
-    width: ${size};
+    height: ${$size};
+    width: ${$size};
     `}
-  border-radius: ${({ square }) => (square ? 0 : '50%')};
+  border-radius: ${({ $square }) => ($square ? 0 : '50%')};
   overflow: hidden;
-  ${({ noBorder, theme }) =>
-    !noBorder &&
+  ${({ $noBorder, theme }) =>
+    !$noBorder &&
     `
     border-top: 2px solid ${theme.borderDark};
     border-left: 2px solid ${theme.borderDark};
     border-bottom: 2px solid ${theme.borderLightest};
     border-right: 2px solid ${theme.borderLightest};
     background: ${theme.material};
   `}
-  ${({ src }) =>
-    !src &&
+  ${({ $src }) =>
+    !$src &&
     `
     display: flex;
     align-items: center;
@@ -68,11 +73,11 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
   ) => {
     return (
       <StyledAvatar
-        noBorder={noBorder}
+        $noBorder={noBorder}
         ref={ref}
-        size={getSize(size)}
-        square={square}
-        src={src}
+        $size={getSize(size)}
+        $square={square}
+        $src={src}
         {...otherProps}
       >
         {src ? <StyledAvatarImg src={src} alt={alt} /> : children}

diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
@@ -38,32 +38,31 @@ type ButtonProps = {
   > &
   CommonStyledProps;
 
-type StyledButtonProps = Pick<
-  ButtonProps,
-  | 'active'
-  | 'disabled'
-  | 'fullWidth'
-  | 'primary'
-  | 'size'
-  | 'square'
-  | 'variant'
->;
+type StyledButtonProps = {
+  $active?: boolean;
+  $disabled?: boolean;
+  $fullWidth?: boolean;
+  $primary?: boolean;
+  $size?: Sizes;
+  $square?: boolean;
+  $variant?: 'default' | 'raised' | 'flat' | 'thin' | 'menu';
+};
 
 const commonButtonStyles = css<StyledButtonProps>`
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: ${({ size = 'md' }) => blockSizes[size]};
-  width: ${({ fullWidth, size = 'md', square }) =>
-    fullWidth ? '100%' : square ? blockSizes[size] : 'auto'};
-  padding: ${({ square }) => (square ? 0 : `0 10px`)};
+  height: ${({ $size = 'md' }) => blockSizes[$size]};
+  width: ${({ $fullWidth, $size = 'md', $square }) =>
+    $fullWidth ? '100%' : $square ? blockSizes[$size] : 'auto'};
+  padding: ${({ $square }) => ($square ? 0 : `0 10px`)};
   font-size: 1rem;
   user-select: none;
   &:active {
-    padding-top: ${({ disabled }) => !disabled && '2px'};
+    padding-top: ${({ $disabled }) => !$disabled && '2px'};
   }
-  padding-top: ${({ active, disabled }) => active && !disabled && '2px'};
+  padding-top: ${({ $active, $disabled }) => $active && !$disabled && '2px'};
   &:after {
     content: '';
     position: absolute;
@@ -80,11 +79,11 @@ const commonButtonStyles = css<StyledButtonProps>`
 `;
 
 export const StyledButton = styled.button<StyledButtonProps>`
-  ${({ active, disabled, primary, theme, variant }) =>
-    variant === 'flat'
+  ${({ $active, $disabled, $primary, theme, $variant }) =>
+    $variant === 'flat'
       ? css`
           ${createFlatBoxStyles()}
-          ${primary
+          ${$primary
             ? `
           border: 2px solid ${theme.checkmark};
             outline: 2px solid ${theme.flatDark};
@@ -96,82 +95,83 @@ export const StyledButton = styled.button<StyledButtonProps>`
             outline-offset: -4px;
           `}
           &:focus:after, &:active:after {
-            ${!active && !disabled && focusOutline}
+            ${!$active && !$disabled && focusOutline}
             outline-offset: -4px;
           }
         `
-      : variant === 'menu' || variant === 'thin'
-      ? css`
-          ${createBoxStyles()};
-          border: 2px solid transparent;
-          &:hover,
-          &:focus {
-            ${!disabled &&
-            !active &&
-            createBorderStyles({ style: 'buttonThin' })}
-          }
-          &:active {
-            ${!disabled && createBorderStyles({ style: 'buttonThinPressed' })}
-          }
-          ${active && createBorderStyles({ style: 'buttonThinPressed' })}
-          ${disabled && createDisabledTextStyles()}
-        `
-      : css`
-          ${createBoxStyles()};
-          border: none;
-          ${disabled && createDisabledTextStyles()}
-          ${active
-            ? createHatchedBackground({
-                mainColor: theme.material,
-                secondaryColor: theme.borderLightest
-              })
-            : ''}
+      : $variant === 'menu' || $variant === 'thin'
+        ? css`
+            ${createBoxStyles()};
+            border: 2px solid transparent;
+            &:hover,
+            &:focus {
+              ${!$disabled &&
+              !$active &&
+              createBorderStyles({ style: 'buttonThin' })}
+            }
+            &:active {
+              ${!$disabled &&
+              createBorderStyles({ style: 'buttonThinPressed' })}
+            }
+            ${$active && createBorderStyles({ style: 'buttonThinPressed' })}
+            ${$disabled && createDisabledTextStyles()}
+          `
+        : css`
+            ${createBoxStyles()};
+            border: none;
+            ${$disabled && createDisabledTextStyles()}
+            ${$active
+              ? createHatchedBackground({
+                  mainColor: theme.material,
+                  secondaryColor: theme.borderLightest
+                })
+              : ''}
           &:before {
-            box-sizing: border-box;
-            content: '';
-            position: absolute;
-            ${primary
-              ? css`
-                  left: 2px;
-                  top: 2px;
-                  width: calc(100% - 4px);
-                  height: calc(100% - 4px);
-                  outline: 2px solid ${theme.borderDarkest};
-                `
-              : css`
-                  left: 0;
-                  top: 0;
-                  width: 100%;
-                  height: 100%;
-                `}
+              box-sizing: border-box;
+              content: '';
+              position: absolute;
+              ${$primary
+                ? css`
+                    left: 2px;
+                    top: 2px;
+                    width: calc(100% - 4px);
+                    height: calc(100% - 4px);
+                    outline: 2px solid ${theme.borderDarkest};
+                  `
+                : css`
+                    left: 0;
+                    top: 0;
+                    width: 100%;
+                    height: 100%;
+                  `}
 
-            ${active
-              ? createBorderStyles({
-                  style: variant === 'raised' ? 'window' : 'button',
-                  invert: true
-                })
-              : createBorderStyles({
-                  style: variant === 'raised' ? 'window' : 'button',
-                  invert: false
-                })}
-          }
-          &:active:before {
-            ${!disabled &&
-            createBorderStyles({
-              style: variant === 'raised' ? 'window' : 'button',
-              invert: true
-            })}
-          }
-          &:focus:after,
-          &:active:after {
-            ${!disabled && focusOutline}
-            outline-offset: -8px;
-          }
-          &:active:focus:after,
-          &:active:after {
-            top: ${active ? '0' : '1px'};
-          }
-        `}
+              ${$active
+                ? createBorderStyles({
+                    style: $variant === 'raised' ? 'window' : 'button',
+                    invert: true
+                  })
+                : createBorderStyles({
+                    style: $variant === 'raised' ? 'window' : 'button',
+                    invert: false
+                  })}
+            }
+            &:active:before {
+              ${!$disabled &&
+              createBorderStyles({
+                style: $variant === 'raised' ? 'window' : 'button',
+                invert: true
+              })}
+            }
+            &:focus:after,
+            &:active:after {
+              ${!$disabled && focusOutline}
+              outline-offset: -8px;
+            }
+            &:active:focus:after,
+            &:active:after {
+              top: ${$active ? '0' : '1px'};
+            }
+          `}
   ${commonButtonStyles}
 `;
 
@@ -195,18 +195,18 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ) => {
     return (
       <StyledButton
-        active={active}
+        $active={active}
         disabled={disabled}
         $disabled={disabled}
-        fullWidth={fullWidth}
+        $fullWidth={fullWidth}
         onClick={disabled ? undefined : onClick}
         onTouchStart={onTouchStart}
-        primary={primary}
+        $primary={primary}
         ref={ref}
-        size={size}
-        square={square}
+        $size={size}
+        $square={square}
         type={type}
-        variant={variant}
+        $variant={variant}
         {...otherProps}
       >
         {children}

diff --git a/src/ColorInput/ColorInput.tsx b/src/ColorInput/ColorInput.tsx
@@ -143,7 +143,7 @@ const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
     return (
       //  we only need button styles, so we display
       // it as a div and reset type attribute
-      <Trigger disabled={disabled} as='div' variant={variant} size='md'>
+      <Trigger $disabled={disabled} as='div' $variant={variant} $size='md'>
         <StyledColorInput
           onChange={handleChange}
           readOnly={disabled}