Merge pull request #3 from nashtech-garage/feat/variable-global

Feat: variable global styling

apps/base-ui-toolkit-react/.eslintrc.js

@@ -26,7 +26,7 @@ module.exports = {
         'vite.config.ts',
         'typings.d.ts',
         'tailwind.config.js',
-        'theme.ts',
+        'themes/*',
         '*.stories.mdx',
         '.eslintrc.js',
     ],

apps/base-ui-toolkit-react/.storybook/main.ts

@@ -2,40 +2,39 @@ import type { StorybookConfig } from '@storybook/react-vite'
 import path from 'path'
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+    stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
 
-  viteFinal: async (config: any) => {
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      '@': path.resolve(__dirname, '../src'),
-    }
-    return config
-  },
+    viteFinal: async (config: any) => {
+        config.resolve.alias = {
+            ...config.resolve.alias,
+            '@': path.resolve(__dirname, '../src'),
+        }
+        return config
+    },
 
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-styling',
-    '@storybook/addon-mdx-gfm',
-    '@chromatic-com/storybook',
-  ],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
+        '@storybook/addon-mdx-gfm',
+        '@chromatic-com/storybook',
+    ],
 
-  framework: {
-    name: '@storybook/react-vite',
-    options: {
-      builder: {
-        viteConfigPath: '.storybook/vite.config.ts',
-      },
+    framework: {
+        name: '@storybook/react-vite',
+        options: {
+            builder: {
+                viteConfigPath: '.storybook/vite.config.ts',
+            },
+        },
     },
-  },
 
-  docs: {},
+    docs: {},
 
-  staticDirs: ['../public'],
+    staticDirs: ['../public'],
 
-  typescript: {
-    reactDocgen: 'react-docgen-typescript',
-  },
+    typescript: {
+        reactDocgen: 'react-docgen-typescript',
+    },
 }
 export default config

apps/base-ui-toolkit-react/package.json

@@ -104,7 +104,6 @@
         "postcss-nesting": "^12.1.5",
         "prettier": "3.0.1",
         "prop-types": "15.8.1",
-        "sass-embedded": "^1.80.4",
         "storybook": "^8.3.6",
         "tailwind-merge": "^1.14.0",
         "tailwindcss": "3.4.0",

apps/base-ui-toolkit-react/src/components/atoms/badge/index.tsx

@@ -21,7 +21,7 @@ export const Badge = (props: BadgeProps) => {
         }
 
         if (variant === 'green') {
-            return 'bg-green-default ring-green-500/10'
+            return 'bg-success ring-green-500/10'
         }
 
         if (variant === 'yellow') {

apps/base-ui-toolkit-react/src/components/atoms/button/index.tsx

@@ -25,9 +25,9 @@ export const Button = (props: ButtonProps) => {
 
     const bgTheme = useMemo(() => {
         if (isPrimaryTheme(theme)) {
-            return 'bg-crimson-default hover:bg-crimson-hover'
+            return 'bg-primary hover:bg-primary-hover'
         }
-        return 'bg-green-default hover:bg-green-hover'
+        return 'bg-success hover:bg-green-hover'
     }, [theme])
 
     return (

apps/base-ui-toolkit-react/src/components/atoms/inputs/select/index.tsx

@@ -57,14 +57,14 @@ export const Select = (props: SelectProps) => {
         if (ThemeUtils.isPrimaryTheme(themeProvide)) {
             return style['select-theme--active']
         }
-        return 'bg-green-default '
+        return 'bg-success '
     }, [])
 
     const hoverWithTheme = useMemo(() => {
         if (ThemeUtils.isPrimaryTheme(themeProvide)) {
             return style['select-theme--hover']
         }
-        return 'hover:bg-green-default hover:text-white'
+        return 'hover:bg-success hover:text-white'
     }, [])
 
     return (

apps/base-ui-toolkit-react/src/components/atoms/inputs/select/select.module.scss

@@ -1,35 +1,35 @@
 .select {
-  &-theme {
+    &-theme {
+        &__scroll::-webkit-scrollbar {
+            width: 4px;
+        }
+        &__scroll::-webkit-scrollbar-track {
+            background: white;
+        }
+        &__scroll::-webkit-scrollbar-thumb {
+            @apply rounded-sm bg-primary;
+        }
+
+        &--active {
+            @apply bg-transparent text-primary border-b-2 border-primary;
+        }
+
+        &--hover {
+            @apply hover:text-primary hover:bg-white bg-white;
+        }
+
+        &__option {
+            @apply py-5 border-b border-gray-300;
+        }
+    }
+
     &__scroll::-webkit-scrollbar {
-      width: 4px;
+        width: 4px;
     }
     &__scroll::-webkit-scrollbar-track {
-      background: white;
+        background: white;
     }
     &__scroll::-webkit-scrollbar-thumb {
-      @apply rounded-sm bg-crimson-default;
-    }
-
-    &--active {
-      @apply bg-transparent text-crimson-default border-b-2 border-crimson-default;
-    }
-
-    &--hover {
-      @apply hover:text-crimson-default hover:bg-white bg-white;
+        @apply rounded-sm bg-success;
     }
-
-    &__option {
-      @apply py-5 border-b border-gray-300;
-    }
-  }
-
-  &__scroll::-webkit-scrollbar {
-    width: 4px;
-  }
-  &__scroll::-webkit-scrollbar-track {
-    background: white;
-  }
-  &__scroll::-webkit-scrollbar-thumb {
-    @apply rounded-sm bg-green-default;
-  }
 }

apps/base-ui-toolkit-react/src/components/molecules/tabs/tab-horizontal/index.tsx

@@ -35,7 +35,7 @@ const TabHorizontal = (props: TabHorizontalProps) => {
                             width: `calc(100% / ${items.length})`,
                         }}
                         className={combineClasses({
-                            'border-b border-b-green-default':
+                            'border-b border-b-success':
                                 activeKey === item.key,
                         })}
                     >
@@ -44,7 +44,7 @@ const TabHorizontal = (props: TabHorizontalProps) => {
                                 'tabs-label inline-block text-gray-500 rounded-sm p-3 text-sm font-medium text-center cursor-pointer',
                                 'hover:bg-gray-100',
                                 {
-                                    'active text-green-default ':
+                                    'active text-success ':
                                         activeKey === item.key,
                                     'cursor-not-allowed text-gray-300 hover:bg-transparent':
                                         item.disabled,

apps/base-ui-toolkit-react/src/components/molecules/tabs/tab.module.scss

@@ -1,24 +1,24 @@
 .tab-theme {
-  @apply w-full;
-  @apply overflow-x-auto md:overflow-hidden;
+    @apply w-full;
+    @apply overflow-x-auto md:overflow-hidden;
 
-  ul {
-    @apply w-full xl:w-1/2;
+    ul {
+        @apply w-full xl:w-1/2;
 
-    li {
-      margin-right: 0;
-      @apply border-0;
+        li {
+            margin-right: 0;
+            @apply border-0;
+        }
     }
-  }
 
-  &__item {
-    @apply text-center block  text-crimson-default rounded-none;
-    @apply hover:bg-transparent hover:border-b-2 hover:border-crimson-default;
-    @apply text-sm md:text-xl uppercase italic;
+    &__item {
+        @apply text-center block  text-primary rounded-none;
+        @apply hover:bg-transparent hover:border-b-2 hover:border-primary;
+        @apply text-sm md:text-xl uppercase italic;
 
-    &--active {
-      @apply border-crimson-default border-b-2;
-      @apply bg-transparent;
+        &--active {
+            @apply border-primary border-b-2;
+            @apply bg-transparent;
+        }
     }
-  }
 }

apps/base-ui-toolkit-react/src/components/molecules/toast/index.tsx

@@ -30,7 +30,7 @@ export const Toast = (props: ToastProps) => {
     const typeValues = useMemo(() => {
         if (type === 'success') {
             return {
-                classResult: 'text-green-default',
+                classResult: 'text-success',
                 icon: <HiCheck data-testid="success-icon" />,
             }
         }