Merge pull request #67 from SySagar/dev

Dev

.changeset/grumpy-trees-sort.md

@@ -0,0 +1,5 @@
+---
+'@groovy-box/ui': patch
+---
+
+color revamp with theming for light adn dark mode

apps/docs/app/ui/ComponenentWrapper.tsx

@@ -1,18 +1,21 @@
 'use client';
 import React from 'react';
+import { cn } from '../utils/utils';
+
+interface ComponentWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  height?: string;
+}
 
 export default function ComponenentWrapper({
   children,
   height = '300px',
-}: {
-  children: React.ReactNode;
-  height?: string;
-}) {
-  return (
-    <div
-      className={`ui flex flex-row items-center justify-center h-[${height}] gap-20`}
-    >
-      {children}
-    </div>
+  ...props
+}: ComponentWrapperProps) {
+  console.log('hetight', height);
+  const mergedClassNames = cn(
+    `ui flex flex-row items-center justify-center h-[${height}] gap-20`,
+    props.className,
   );
+  return <div className={mergedClassNames}>{children}</div>;
 }

apps/docs/app/utils/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

apps/docs/content/docs/(components)/accordion.mdx

@@ -16,7 +16,7 @@ import ComponenentWrapper from '@/app/ui/ComponenentWrapper';
 
 <Tabs items={['Preview', 'Code']}>
   <Tab value='Preview'>
-  <ComponenentWrapper>
+  <ComponenentWrapper className="h-[300px]">
      <div className="w-56">
    <Accordion type="single" defaultValue="item-1" collapsible>
       <AccordionItem value="item-1">

apps/docs/package.json

@@ -13,6 +13,7 @@
     "@groovy-box/ui": "*",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-select": "^2.1.1",
+    "clsx": "^2.1.1",
     "framer-motion": "^11.5.6",
     "fumadocs-core": "13.4.10",
     "fumadocs-mdx": "10.0.2",
@@ -24,6 +25,7 @@
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "react-syntax-highlighter": "^15.5.0",
+    "tailwind-merge": "^2.5.3",
     "tailwindcss-scoped-preflight": "^3.4.4"
   },
   "devDependencies": {

apps/ui/.storybook/decorator.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useEffect } from 'react';
+
+export function withGlobalStyles(Story, context) {
+  let { scheme } = context.globals;
+
+  useEffect(() => {
+    if (scheme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [scheme]);
+
+  function Flex({ children, ...props }) {
+    return (
+      <div
+        {...props}
+        style={{
+          display: 'flex',
+          padding: '3rem',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  if (scheme === 'light') {
+    return (
+      <Flex className="color-scheme--light">
+        <Story />
+      </Flex>
+    );
+  }
+
+  if (scheme === 'dark') {
+    return (
+      <Flex className="color-scheme--dark">
+        <Story />
+      </Flex>
+    );
+  }
+
+  return (
+    <div>
+      <Flex className="color-scheme--dark">
+        <Story />
+      </Flex>
+      <Flex className="color-scheme--light">
+        <Story />
+      </Flex>
+    </div>
+  );
+}

apps/ui/.storybook/preview.tsx

@@ -1,5 +1,7 @@
 // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
 import '../lib/tailwind.css';
+import '../lib/color-scheme.css';
+import { withGlobalStyles } from './decorator';
 
 const customViewports = {
   xs: {
@@ -52,3 +54,16 @@ export const parameters = {
     customViewports,
   },
 };
+
+export const globalTypes = {
+  scheme: {
+    name: 'Scheme',
+    description: 'Select light or dark',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'mirror',
+      items: ['light', 'dark'],
+      dynamicTitle: true,
+    },
+  },
+};

apps/ui/lib/color-scheme.css

@@ -0,0 +1,9 @@
+.color-scheme--dark {
+  background-color: #0a0a0a;
+  --text-color: #ffffff;
+}
+
+.color-scheme--light {
+  background-color: #ffffff;
+  --text-color: #000000;
+}

apps/ui/lib/color-scheme.css.d.ts

@@ -0,0 +1,6 @@
+declare const styles: {
+  readonly "color-scheme--dark": string;
+  readonly "color-scheme--light": string;
+};
+export = styles;
+

apps/ui/lib/components/Accordion/Accordion.tsx

@@ -23,7 +23,7 @@ const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="grv-flex grv-text-primary-500 typo-body-1">
+  <AccordionPrimitive.Header className="grv-flex grv-text-primary-100 typo-body-1">
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
@@ -53,7 +53,9 @@ const AccordionContent = React.forwardRef<
     className={accordionContentStyles()}
     {...props}
   >
-    <div className={cn('grv-pb-4 grv-pt-0', className)}>{children}</div>
+    <div className={cn('grv-pb-4 grv-pt-0 grv-text-accent', className)}>
+      {children}
+    </div>
   </AccordionPrimitive.Content>
 ));
 

apps/ui/lib/components/Button/index.tsx

@@ -10,14 +10,14 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          'grv-bg-primary-700 grv-text-primaryText hover:grv-bg-primary-700/90 grv-border-none',
+          'grv-bg-primary-700 grv-text-text-primary hover:grv-bg-primary-500 grv-border-none',
         destructive:
-          'grv-bg-error-900 grv-text-primaryText hover:grv-bg-error-900/90 grv-border-none grv-outline-0 grv-shadow-none',
+          'grv-bg-error-900 grv-text-text-primary hover:grv-bg-error-700 grv-border-none grv-outline-0 grv-shadow-none',
         outline:
-          ' grv-border-none grv-bg-primary-100/0 hover:grv-bg-primary-700/20 hover:grv-text-accent-foreground grv-outline grv-font-medium grv-outline-1 grv-shadow-none',
+          ' grv-border-none hover:grv-bg-bgopacity grv-text-accent [data-mode="dark"]:grv-text-text-primary  grv-bg-primary-100/0 grv-outline grv-font-medium grv-outline-2 grv-outline-primary-500 grv-shadow-none',
         secondary:
-          'grv-bg-secondary-700 grv-text-primaryText hover:grv-bg-secondary-700/80  grv-border-none grv-outline-0 grv-shadow-none',
-        link: 'grv-text-primary-500 grv-underline-offset-4 hover:grv-underline grv-bg-primary-100/0 grv-font-medium grv-border-none hover:grv-cursor-pointer',
+          'grv-bg-secondary-700 grv-text-text-primary hover:grv-bg-secondary-500  grv-border-none grv-outline-0 grv-shadow-none',
+        link: 'grv-text-primary-300 grv-underline-offset-4 hover:grv-underline grv-bg-primary-100/0 grv-font-medium grv-border-none hover:grv-cursor-pointer',
       },
       size: {
         default: 'grv-h-10 grv-px-4 grv-py-2',

apps/ui/lib/components/Label/Label.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@utils/utils';
 
 const labelVariants = cva(
-  'grv-text-sm grv-font-medium ui grv-leading-none peer-disabled:grv-cursor-not-allowed peer-disabled:grv-opacity-70'
+  'grv-text-sm grv-text-accent grv-font-medium ui grv-leading-none peer-disabled:grv-cursor-not-allowed peer-disabled:grv-opacity-70'
 );
 
 const Label = React.forwardRef<

apps/ui/lib/components/Progress/Progress.tsx

@@ -10,7 +10,7 @@ const Progress = React.forwardRef<
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
-      'grv-relative grv-h-4 grv-w-full grv-overflow-hidden grv-rounded-full grv-bg-primary-100 grv-bg-opacity-50',
+      'grv-relative grv-h-4 grv-w-full grv-overflow-hidden grv-rounded-full grv-bg-primary-100',
       className
     )}
     {...props}

apps/ui/lib/components/Toast/Toast.tsx

@@ -28,7 +28,7 @@ const toastVariants = cva(
   {
     variants: {
       variant: {
-        default: 'grv-bg-background grv-text-foreground',
+        default: 'grv-bg-backgroundPaper grv-accent',
         destructive:
           'grv-destructive grv-group grv-border-destructive grv-bg-error-900 grv-text-primaryText',
       },
@@ -83,7 +83,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      'grv-absolute grv-right-2 grv-top-2 grv-rounded-md grv-p-1 grv-text-foreground/50 grv-opacity-0 grv-transition-opacity hover:grv-text-foreground focus:grv-opacity-100 focus:grv-outline-none focus:grv-ring-2  group-[.destructive]:focus:grv-ring-error-300 group-hover:grv-opacity-100',
+      'grv-absolute grv-right-2 grv-top-2 grv-rounded-md grv-p-1 grv-text-accent grv-opacity-0 grv-transition-opacity hover:grv-text-foreground focus:grv-opacity-100 focus:grv-outline-none focus:grv-ring-2  group-[.destructive]:focus:grv-ring-error-300 group-hover:grv-opacity-100',
       className
     )}
     toast-close=""

apps/ui/lib/components/Typography/Text.tsx

@@ -42,7 +42,7 @@ export const Text: React.FC<TextProps> = ({
   return (
     <Comp
       {...props}
-      className={cn(mergedClasses, 'ui')}
+      className={cn('grv-text-accent', mergedClasses, 'ui')}
       style={textStyle}
       children={children}
     />

apps/ui/lib/tailwind.css

@@ -2,6 +2,89 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  /* Global Colors - light theme */
+  :root {
+    --primary-100: 101, 106, 128;
+    --primary-300: 79, 83, 100;
+    --primary-500: 56, 59, 71;
+    --primary-700: 42, 44, 53;
+    --primary-900: 35, 37, 45;
+
+    --secondary-100: 211, 222, 241;
+    --secondary-300: 99, 133, 196;
+    --secondary-500: 63, 114, 175;
+    --secondary-700: 55, 100, 153;
+    --secondary-900: 49, 88, 134;
+
+    --success-100: 155, 228, 180;
+    --success-300: 115, 217, 149;
+    --success-500: 105, 214, 142;
+    --success-700: 75, 206, 119;
+    --success-900: 49, 180, 94;
+
+    --error-100: 255, 142, 140;
+    --error-300: 253, 108, 120;
+    --error-500: 245, 62, 77;
+    --error-700: 227, 38, 54;
+    --error-900: 198, 0, 34;
+
+    --warning-100: 255, 239, 195;
+    --warning-300: 255, 229, 156;
+    --warning-500: 255, 226, 143;
+    --warning-700: 255, 222, 128;
+    --warning-900: 222, 193, 110;
+
+    --text-primary: 235, 235, 235;
+    --text-secondary: 30, 30, 30;
+
+    --accent: 0, 0, 0;
+    --background-paper: white;
+    --background-opacity: 0, 0, 0, 0.05;
+  }
+
+  /* Dark Mode Colors */
+  .dark {
+    --primary-100: 101, 106, 128;
+    --primary-300: 79, 83, 100;
+    --primary-500: 56, 59, 71;
+    --primary-700: 42, 44, 53;
+    --primary-900: 35, 37, 45;
+
+    --secondary-100: 186, 205, 233;
+    --secondary-300: 74, 122, 176;
+    --secondary-500: 52, 97, 149;
+    --secondary-700: 46, 84, 130;
+    --secondary-900: 40, 73, 112;
+
+    --success-100: 142, 220, 177;
+    --success-300: 99, 198, 140;
+    --success-500: 88, 195, 131;
+    --success-700: 63, 182, 108;
+    --success-900: 42, 155, 84;
+
+    --error-100: 255, 115, 112;
+    --error-300: 240, 87, 92;
+    --error-500: 217, 55, 60;
+    --error-700: 192, 26, 48;
+    --error-900: 172, 0, 31;
+
+    --warning-100: 240, 230, 167;
+    --warning-300: 228, 208, 138;
+    --warning-500: 224, 192, 127;
+    --warning-700: 208, 192, 112;
+    --warning-900: 187, 167, 81;
+
+    --text-primary: 245, 245, 245;
+    --text-secondary: 23, 23, 23;
+
+    --accent: 255, 245, 245;
+    --background-paper: 253, 253, 253;
+
+    --background-opacity: 253, 253, 253, 0.1;
+  }
+}
+
 .ui blockquote,
 .ui dl,
 .ui dd,
@@ -17,7 +100,7 @@
 .ui span,
 .ui p,
 .ui pre {
-  all: unset; /* Unsets all the properties */
-  margin: 0; /* Remove default margins */
-  padding: 0; /* Remove default paddings */
+  all: unset;
+  margin: 0;
+  padding: 0;
 }

apps/ui/lib/tailwind.css.d.ts

@@ -1,4 +1,5 @@
 declare const styles: {
+  readonly "dark": string;
   readonly "ui": string;
 };
 export = styles;

apps/ui/package.json

@@ -68,13 +68,16 @@
     "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-links": "^7.5.3",
     "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/addon-styling": "^1.3.7",
     "@storybook/addon-themes": "^8.3.0",
     "@storybook/addons": "^7.5.3",
     "@storybook/builder-vite": "^8.2.1",
+    "@storybook/manager-api": "^8.3.5",
     "@storybook/react": "^7.6.17",
     "@storybook/react-vite": "^8.2.1",
     "@storybook/react-webpack5": "7.5.3",
     "@storybook/testing-react": "^2.0.1",
+    "@storybook/theming": "^8.3.5",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@types/node": "^20.11.19",