oneslash-design-system 1.1.19 → 1.1.21

package/components/button.tsx

@@ -93,7 +93,7 @@ export default function Button({
 
   // Build the button classes dynamically
   const buttonClasses = `
-    flex flex-row space-x-2 items-center rounded-[8px]
+    flex flex-row space-x-2 items-center rounded-[8px] transition-colors duration-200 ease-in-out
     ${sizeClasses}
     ${state === 'enabled' ? baseTypeClasses : ''}
     ${state === 'focused' ? stateClasses.focused : ''}
@@ -103,7 +103,7 @@ export default function Button({
 
   return (
     <button
-      className={buttonClasses}
+      className={buttonClasses} 
       onMouseEnter={() => { if (state !== 'disabled') setIsHovered(true); }}
       onMouseLeave={() => { if (state !== 'disabled') setIsHovered(false); }}
       onClick={onClickButton} // Button click action

package/components/checkBox.tsx

@@ -26,11 +26,11 @@ export default function Checkbox({
     <label className="flex items-center cursor-pointer">
       <div
         onClick={handleToggle}
-        className="relative flex items-center justify-center w-6 h-6 group"
+        className="relative flex items-center justify-center w-6 h-6 group transition-colors duration-200 ease-in-out"
       >
         {/* Circle behind the checkbox */}
         <div
-          className="absolute w-6 h-6 rounded-full group-hover:bg-light-action-selected dark:group-hover:bg-dark-action-selected transition-all"
+          className="absolute w-6 h-6 rounded-full group-hover:bg-light-action-selected dark:group-hover:bg-dark-action-selected"
         ></div>
         
         {/* Checkbox */}
@@ -39,7 +39,7 @@ export default function Checkbox({
             isChecked
               ? 'bg-light-text-primary dark:bg-dark-text-primary border-none'
               : 'border-light-text-secondary dark:border-dark-text-secondary'
-          } flex items-center justify-center transition-colors`}
+          } flex items-center justify-center`}
         >
           {isChecked && (
             <svg

package/components/iconButton.tsx

@@ -81,7 +81,7 @@ export default function IconButton({
 
   return (
     <button
-      className={`${baseClasses} ${bgColor} ${iconColor} ${bgColorHover} ${stateClasses}`}
+      className={`${baseClasses} ${bgColor} ${iconColor} ${bgColorHover} ${stateClasses} transition-colors duration-200 ease-in-out`}
       disabled={state === 'disabled'}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}

package/components/menuItem.tsx

@@ -51,7 +51,7 @@ export default function MenuItem({
     <NextLink href={href}>
       <div
         className={`
-          flex items-center space-x-2 p-2 rounded-[8px] cursor-pointer justify-start
+          flex items-center space-x-2 p-2 rounded-[8px] cursor-pointer justify-start transition-colors duration-200 ease-in-out
           ${isSelected
             ? 'bg-light-background-accent200 dark:bg-dark-background-accent200 hover:bg-light-background-accent300 dark:hover:bg-dark-background-accent300'
             : 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100'}

package/components/tab.tsx

@@ -64,7 +64,7 @@ export default function Tab({
   return (
     <div
       className={`
-        flex items-center space-x-1 py-1 px-[6px] rounded-[8px] cursor-pointer justify-start transition-all duration-300 ease-in-out
+        flex items-center space-x-1 py-1 px-[6px] rounded-[8px] cursor-pointer justify-start transition-colors duration-200 ease-in-out
         ${isSelected 
           ? 'bg-light-primary-dark dark:bg-dark-primary-dark text-light-text-contrast dark:text-dark-text-contrast' 
           : 'hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200'}

package/components/tag.tsx

@@ -68,7 +68,7 @@ export default function Tag({
       className={`
         flex items-center space-x-1 rounded-full 
         ${sizeClasses} ${bgClasses} ${fontClasses} ${borderClasses} ${stateClasses} ${hoverClasses}
-        transition-colors duration-300 ease-in-out
+        transition-colors duration-200 ease-in-out
       `}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}

package/components/textField.tsx

@@ -37,7 +37,7 @@ export default function TextField({
   const [isFocused, setIsFocused] = useState(false);
 
   const baseClasses = 'w-full border rounded-[8px] p-2';
-  const bgColor = 'bg-light-background-default dark:bg-dark-background-default transition-colors duration-300 ease-in-out';
+  const bgColor = 'bg-light-background-default dark:bg-dark-background-default transition-colors duration-200 ease-in-out';
   const borderColor = 'border-light-outlinedBorder-active dark:border-dark-outlinedBorder-active';
   const containerClasses = `
     ${bgColor}

package/designTokens.js

@@ -78,7 +78,7 @@ module.exports = {
     // dark
     dark:{
       text:{
-        primary: '#FFFFFF',
+        primary: '#eeeeee',
         secondary: '#B0B0B0',
         disabled: '#6D6D6D',
         contrast: '#000000',

package/dist/components/checkBox.jsx

@@ -18,7 +18,7 @@ export default function Checkbox(_a) {
         {/* Checkbox */}
         <div className={"relative z-10 w-4 h-4 border-2 rounded ".concat(isChecked
             ? 'bg-light-text-primary dark:bg-dark-text-primary border-none'
-            : 'border-light-text-secondary dark:border-dark-text-secondary', " flex items-center justify-center transition-colors")}>
+            : 'border-light-text-secondary dark:border-dark-text-secondary', " flex items-center justify-center transition-colors duration-200 ease-in-out")}>
           {isChecked && (<svg className="w-3 h-3 text-light-text-contrast dark:text-dark-text-contrast" fill="none" stroke="currentColor" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
               <path strokeWidth="2" d="M1 6l4 3 6-7"/>
             </svg>)}

package/dist/components/tab.jsx

@@ -99,7 +99,7 @@ export default function Tab(_a) {
             router.push(href);
         }
     };
-    return (<div className={"\n        flex items-center space-x-1 py-1 px-[6px] rounded-[8px] cursor-pointer justify-start transition-all duration-300 ease-in-out\n        ".concat(isSelected
+    return (<div className={"\n        flex items-center space-x-1 py-1 px-[6px] rounded-[8px] cursor-pointer justify-start transition-colors duration-200 ease-in-outh\n        ".concat(isSelected
             ? 'bg-light-primary-dark dark:bg-dark-primary-dark text-light-text-contrast dark:text-dark-text-contrast'
             : 'hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200', "\n      ")} onClick={handleClick}>
       {IconLeft && <IconLeft className="w-6 h-6"/>}

package/dist/components/tag.jsx

@@ -36,7 +36,7 @@ export default function Tag(_a) {
     var hoverClasses = variant === 'contained' && isHovered
         ? 'bg-light-background-accent200 dark:bg-dark-background-accent200'
         : '';
-    return (<div className={"\n        flex items-center space-x-1 rounded-full \n        ".concat(sizeClasses, " ").concat(bgClasses, " ").concat(fontClasses, " ").concat(borderClasses, " ").concat(stateClasses, " ").concat(hoverClasses, "\n        transition-colors duration-300 ease-in-out\n      ")} onMouseEnter={function () { return setIsHovered(true); }} onMouseLeave={function () { return setIsHovered(false); }} onClick={onClick}>
+    return (<div className={"\n        flex items-center space-x-1 rounded-full \n        ".concat(sizeClasses, " ").concat(bgClasses, " ").concat(fontClasses, " ").concat(borderClasses, " ").concat(stateClasses, " ").concat(hoverClasses, "\n        transition-colors duration-200 ease-in-out\n      ")} onMouseEnter={function () { return setIsHovered(true); }} onMouseLeave={function () { return setIsHovered(false); }} onClick={onClick}>
       {Icon && <Icon className="w-4 h-4"/>}
       <span>{label}</span>
     </div>);

package/dist/components/textField.jsx

@@ -5,7 +5,7 @@ export default function TextField(_a) {
     iconLeft = _a.iconLeft, iconRight = _a.iconRight, _c = _a.multiline, multiline = _c === void 0 ? false : _c, _d = _a.maxRows, maxRows = _d === void 0 ? 6 : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.error, error = _f === void 0 ? false : _f;
     var _g = useState(false), isFocused = _g[0], setIsFocused = _g[1];
     var baseClasses = 'w-full border rounded-[8px] p-2';
-    var bgColor = 'bg-light-background-default dark:bg-dark-background-default transition-colors duration-300 ease-in-out';
+    var bgColor = 'bg-light-background-default dark:bg-dark-background-default transition-colors duration-200 ease-in-out';
     var borderColor = 'border-light-outlinedBorder-active dark:border-dark-outlinedBorder-active';
     var containerClasses = "\n    ".concat(bgColor, "\n    ").concat(borderColor, "\n    ").concat(baseClasses, "\n    ").concat(disabled ? 'bg-gray-200 cursor-not-allowed' : '', "\n    ").concat(error ? 'border-red-500 focus:ring-red-500' : '', "\n    ").concat(isFocused ? 'focus:border-light-accent-main focus:dark:border-dark-accent-main outline-none' : '', "\n    ").concat(!disabled && !error ? 'hover:border-light-outlinedBorder-hover' : '', "\n    border-gray-300\n  ");
     var renderIconRight = function () {

package/dist/designTokens.js

@@ -78,7 +78,7 @@ module.exports = {
         // dark
         dark: {
             text: {
-                primary: '#FFFFFF',
+                primary: '#ebebeb',
                 secondary: '#B0B0B0',
                 disabled: '#6D6D6D',
                 contrast: '#000000',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",