Feature/colors

apps/docs/src/utils/Summary.tsx

@@ -5,10 +5,10 @@ type Props = {
 export default function Summary({ title, children }: React.PropsWithChildren<Props>) {
   return (
     <details className='group'>
-      <summary className='text-white p-4 group-open:bg-third rounded-md group-open:rounded-b-none'>
+      <summary className='text-white p-2 group-open:bg-second rounded-md group-open:rounded-b-none'>
         <strong>{title}</strong>
       </summary>
-      <div className='bg-third p-4 rounded-b-md'>{children}</div>
+      <div className='bg-second p-2 rounded-b-md'>{children}</div>
     </details>
   )
 }

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turistikrota/ui",
-  "version": "1.0.0",
+  "version": "1.0.5",
   "description": "the turistikrota ui library for React",
   "main": "./index.js",
   "module": "./index.js",

packages/ui/src/alert/index.tsx

@@ -56,10 +56,10 @@ const Alert: Alert = ({
     <>
       {show && (
         <div
-          className={`relative flex items-center rounded border-l-4 p-4 ${Styles[type]} ${className ? className : ''}`}
+          className={`relative flex items-center rounded border-l-4 p-2 ${Styles[type]} ${className ? className : ''}`}
           role='alert'
         >
-          {showIcon && <i className='bx bx-info-circle mr-4 text-2xl'></i>}
+          {showIcon && <i className='bx bx-info-circle mr-2 text-2xl'></i>}
           <div className={`w-full ${innerClassName ? innerClassName : ''}`}>{children}</div>
           {closable && (
             <button

packages/ui/src/assets/config.css

@@ -3,15 +3,12 @@
 
 :root {
   --foreground-rgb: 0, 0, 0;
-  --background-color-start: rgb(239, 244, 245);
-  --background-color-end: rgb(255, 255, 255);
   --popup-background-color: #fff;
   --header-background-color: #fff;
-  --default-background: rgb(239, 244, 245);
+  --default-background: #fff;
   --loading-backdrop: brightness(0.9) blur(1px);
 
-  --second-background-color: #fff;
-  --third-background-color: #e7edef;
+  --second-background-color: #f8f9fa;
   --border-color: #f2f0f0;
 
   --shadow-color-start: rgba(0, 0, 0, 0.1);
@@ -126,13 +123,11 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --foreground-rgb: 255, 255, 255;
-    --background-color-start: #141414;
-    --background-color-end: #121212;
-    --popup-background-color: #121212;
-    --header-background-color: #050505;
-    --default-background: #0f0e0e;
+    --popup-background-color: #090909;
+    --header-background-color: #090909;
+    --default-background: #090909;
     --second-background-color: #121212;
-    --third-background-color: #191919;
+    --border-color: #2a2a2a;
 
     --skeleton-default-color: 43, 42, 42;
     --skeleton-color-50: 33, 33, 33;
@@ -160,8 +155,6 @@
     --shadow-color-end: rgba(255, 255, 255, 0.6);
     --preview-border-color: rgba(255, 255, 255, 0.25);
 
-    --border-color: #353535;
-
     --autofill-background-color: rgb(var(--primary-color-1000));
     --autofill-color: rgb(var(--primary-color-50));
   }
@@ -242,4 +235,4 @@ select:-webkit-autofill:focus {
 }
 .CircularProgressbar-text {
   fill: rgb(var(--secondary-color)) !important;
-}
+}

packages/ui/src/assets/default.css

@@ -1,6 +1,6 @@
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(90deg, var(--default-background), var(--header-background-color));
+  background: var(--default-background);
   height: 100%;
   min-height: 100vh;
 }

packages/ui/src/assets/scrollbar.css

@@ -1,13 +1,13 @@
 ::-webkit-scrollbar,
 .scrollbar::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
+  width: 3px;
+  height: 3px;
 }
 
 ::-webkit-scrollbar-thumb,
 .scrollbar::-webkit-scrollbar-thumb {
   background-color: var(--scroll-bar-bg);
-  border-radius: 20px;
+  border-radius: 5px;
   transition: background-color 0.2s ease-in-out;
 }
 

packages/ui/src/assets/tailwind.config.ts

@@ -169,9 +169,7 @@ export const TailwindConfiguration: Config = {
         popup: 'var(--popup-background-color)',
         header: 'var(--header-background-color)',
         second: 'var(--second-background-color)',
-        third: 'var(--third-background-color)',
         input: 'var(--default-background)',
-        default: 'var(--default-background)',
       },
       transitionDuration: {
         DEFAULT: '200ms',
@@ -219,11 +217,6 @@ export const TailwindConfiguration: Config = {
         'fade-out-to-right': 'fadeOut 0.2s ease-out, outToRight 0.2s ease-out',
         'slide-down': 'inFromTop 0.2s ease-out, fadeIn 0.2s ease-out',
         'slide-up': 'outToTop 0.2s ease-out, fadeOut 0.2s ease-out',
-        'cube-effect-top-left': 'cubeEffectTopLeft alternate ease-in-out infinite 6s',
-        'cube-effect-top-right': 'cubeEffectTopRight alternate ease-in-out infinite 6s',
-        'cube-effect-bottom-left': 'CubeEffectBottomLeft alternate ease-in-out infinite 6s',
-        'cube-effect-bottom-right': 'CubeEffectBottomRight alternate ease-in-out infinite 6s',
-        'cube-effect-center': 'cubeEffectCenter alternate ease-in-out infinite 6s',
       },
       blur: {
         '3xs': '1px',
@@ -251,66 +244,6 @@ export const TailwindConfiguration: Config = {
         95: '0.95',
       },
       keyframes: {
-        cubeEffectTopLeft: {
-          '0%': {
-            transform: 'rotate(0deg)',
-            top: '10%',
-            left: '5%',
-          },
-          to: {
-            transform: 'rotate(360deg)',
-            top: '60%',
-            left: '15%',
-          },
-        },
-        cubeEffectTopRight: {
-          '0%': {
-            transform: 'rotate(0deg)',
-            top: '10%',
-            right: '5%',
-          },
-          to: {
-            transform: 'rotate(360deg)',
-            top: '60%',
-            right: '15%',
-          },
-        },
-        CubeEffectBottomLeft: {
-          '0%': {
-            transform: 'rotate(0deg)',
-            bottom: '10%',
-            left: '5%',
-          },
-          to: {
-            transform: 'rotate(360deg)',
-            bottom: '70%',
-            left: '15%',
-          },
-        },
-        CubeEffectBottomRight: {
-          '0%': {
-            transform: 'rotate(0deg)',
-            bottom: '10%',
-            right: '5%',
-          },
-          to: {
-            transform: 'rotate(360deg)',
-            bottom: '68%',
-            right: '15%',
-          },
-        },
-        cubeEffectCenter: {
-          '0%': {
-            transform: 'rotate(0deg)',
-            top: '10%',
-            right: '10%',
-          },
-          to: {
-            transform: 'rotate(360deg)',
-            top: '80%',
-            right: '30%',
-          },
-        },
         inFromTop: {
           '0%': {
             transform: 'translateY(-100%)',

packages/ui/src/button/index.tsx

@@ -40,8 +40,8 @@ const sizes: Record<Size, string> = {
   normal: 'text-base',
   xs: 'py-0.5 px-1 text-xs',
   sm: 'py-1 px-2 text-sm',
-  md: 'py-2 px-4 text-base',
-  lg: 'py-3 px-6 text-lg',
+  md: 'py-1.5 px-2.5 text-base',
+  lg: 'py-2 px-4 text-lg',
 }
 
 const DefaultTextVariants: ButtonVariant[] = ['gray-text', 'transparent', 'opacity', 'glass']

packages/ui/src/cards/default.tsx

@@ -12,11 +12,7 @@ const DefaultCard: React.FC<React.PropsWithChildren<Props>> = ({
   noRound = false,
 }) => {
   return (
-    <div
-      className={`bg-gray-400/5 dark:bg-white/5 ${!noPadding ? 'p-4' : ''} ${!noRound ? 'rounded-md' : ''} ${
-        className ? className : ''
-      }`}
-    >
+    <div className={`border ${!noPadding ? 'p-2' : ''} ${!noRound ? 'rounded-md' : ''} ${className ? className : ''}`}>
       {children}
     </div>
   )

packages/ui/src/carousel/index.tsx

@@ -34,7 +34,7 @@ const CarouselButton: React.FC<ButtonProps> = ({ position, onClick }) => {
     <button
       className={`${
         !isMobile ? 'flex' : 'hidden'
-      } invisible absolute top-1/2 opacity-0 transition-all duration-200 group-hover:visible group-hover:opacity-90 group-hover:hover:opacity-100 ${left} shadow-xs bg-third h-8 w-8 -translate-y-1/2 transform items-center justify-center rounded-full border bg-opacity-95 text-gray-600 dark:bg-opacity-10 dark:text-white`}
+      } invisible absolute top-1/2 opacity-0 transition-all duration-200 group-hover:visible group-hover:opacity-90 group-hover:hover:opacity-100 ${left} shadow-xs bg-second h-8 w-8 -translate-y-1/2 transform items-center justify-center rounded-full border bg-opacity-95 text-gray-600 dark:bg-opacity-10 dark:text-white`}
       onClick={onClick}
     >
       <i className={`bx bx-sm ${icon}`} />