fix: minor improvements and UI bug fixes

Author: lorant-one

src/once-ui/components/Checkbox.module.scss

@@ -20,7 +20,7 @@
     height: var(--static-space-20);
     min-width: var(--static-space-20);
     min-height: var(--static-space-20);
-    transition: border-color 0.3s;
+    transition: var(--transition-property) var(--transition-duration-micro-medium) var(--transition-timing-function);
     outline: none;
 
     &.checked {

src/once-ui/components/InlineCode.module.scss

@@ -2,8 +2,8 @@
     display: inline;
     padding: var(--static-space-1) var(--static-space-4);
     border-radius: var(--radius-s);
-    background: var(--neutral-background-strong);
-    border: 1px solid var(--neutral-border-strong);
+    background: var(--neutral-alpha-weak);
+    border: 1px solid var(--neutral-alpha-medium);
     font-family: var(--font-family-code);
     font-size: 80%;
     margin: 0 var(--static-space-2);

src/once-ui/components/InteractiveDetails.tsx

@@ -4,7 +4,7 @@ import React, { forwardRef } from 'react';
 import { Text, Flex, IconButton, IconButtonProps } from '.';
 
 interface InteractiveDetailsProps {
-    label: string;
+    label?: string;
     description?: string;
     iconButtonProps?: IconButtonProps;
     onClick: () => void;

src/once-ui/components/Scroller.module.scss

@@ -28,7 +28,7 @@
     bottom: 0;
     width: var(--static-space-64);
 	height: 100%;
-    z-index: 0;
+    z-index: 1;
 }
 
 .scrollMaskPrev {

src/once-ui/components/Scroller.tsx

@@ -11,6 +11,7 @@ interface ScrollerProps {
     contained?: boolean;
     className?: string;
     style?: React.CSSProperties;
+    [key: string]: any;
 }
 
 const Scroller: React.FC<ScrollerProps> = ({
@@ -75,8 +76,7 @@ const Scroller: React.FC<ScrollerProps> = ({
                 overflowX: "hidden",
                 overflowY: "hidden",
             })}
-            style={style}
-            {...props}>
+            style={style}>
             {showPrevButton && (
                 <div className={classNames(styles.scrollMaskContainer, styles.scrollMaskPrev)}>
                     <div className={styles.scrollMask}></div>
@@ -95,7 +95,8 @@ const Scroller: React.FC<ScrollerProps> = ({
                 className={classNames(styles.scroller, {
                     [styles.row]: direction === 'row',
                     [styles.column]: direction === 'column',
-                })}>
+                })}
+                {...props}>
                 {children}
             </Flex>
             {showNextButton && (

src/once-ui/components/Switch.tsx

@@ -55,9 +55,11 @@ const Switch = forwardRef<HTMLDivElement, SwitchProps>(({
                         [styles.checked]: isChecked,
                     })}/>
             </div>
+            { interactiveDetailsProps.label && (
             <InteractiveDetails
                 {...interactiveDetailsProps}
                 onClick={() => {}}/>
+            )}
         </Flex>
     );
 });

src/once-ui/components/Tag.tsx

@@ -37,7 +37,7 @@ const Tag = forwardRef<HTMLDivElement, TagProps>(({
             className={classNames(styles.tag, styles[variant], styles[size], className)}
             {...props}>
             {prefixIcon && <Icon name={prefixIcon} size="xs" />}
-            <Flex
+            <Flex style={{userSelect: 'none'}}
                 paddingX={paddingSize}
                 alignItems="center">
                 <Text

src/once-ui/components/Tooltip.tsx

@@ -24,7 +24,7 @@ const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(({
             style={{ whiteSpace: 'nowrap', userSelect: 'none' }}
             gap="4"
             zIndex={1}
-            background="neutral-medium"
+            background="surface"
             paddingY="4"
             paddingX="8"
             radius="s"