feat(ui,docs): theming

SySagar · Oct 5, 2024 · ce42ddf · ce42ddf
1 parent 553f97d
commit ce42ddf
Show file tree

Hide file tree

Showing 20 changed files with 606 additions and 39 deletions.
diff --git a/.changeset/grumpy-trees-sort.md b/.changeset/grumpy-trees-sort.md
@@ -0,0 +1,5 @@
+---
+'@groovy-box/ui': patch
+---
+
+color revamp with theming for light adn dark mode
diff --git a/apps/ui/.storybook/decorator.tsx b/apps/ui/.storybook/decorator.tsx
@@ -1,8 +1,17 @@
 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

diff --git a/apps/ui/.storybook/preview.tsx b/apps/ui/.storybook/preview.tsx
@@ -1,6 +1,8 @@
 // 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: {
  name: 'XS',
@@ -57,10 +59,10 @@ export const globalTypes = {
  scheme: {
  name: 'Scheme',
  description: 'Select light or dark',
- defaultValue: 'both',
+ defaultValue: 'light',
  toolbar: {
  icon: 'mirror',
- items: ['light', 'dark', 'both'],
+ items: ['light', 'dark'],
  dynamicTitle: true,
  },
  },

diff --git a/apps/ui/lib/components/Accordion/Accordion.tsx b/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>
 ));
 

diff --git a/apps/ui/lib/components/Button/index.tsx b/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',

diff --git a/apps/ui/lib/components/Label/Label.tsx b/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<

diff --git a/apps/ui/lib/components/Progress/Progress.tsx b/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}

diff --git a/apps/ui/lib/components/Toast/Toast.tsx b/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=""

diff --git a/apps/ui/lib/components/Typography/Text.tsx b/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}
  />

diff --git a/apps/ui/lib/tailwind.css b/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,17 +100,7 @@
 .ui span,
 .ui p,
 .ui pre {
- all: unset; /* Unsets all the properties */
- margin: 0; /* Remove default margins */
- padding: 0; /* Remove default paddings */
-}
-
-.color-scheme--light {
- --background-color: #ffffff;
- --text-color: #000000;
-}
-
-.color-scheme--dark {
- --background-color: #333333;
- --text-color: #ffffff;
+ all: unset;
+ margin: 0;
+ padding: 0;
 }
diff --git a/apps/ui/lib/tailwind.css.d.ts b/apps/ui/lib/tailwind.css.d.ts
@@ -1,6 +1,5 @@
 declare const styles: {
- readonly "color-scheme--dark": string;
- readonly "color-scheme--light": string;
+ readonly "dark": string;
  readonly "ui": string;
 };
 export = styles;

diff --git a/apps/ui/package.json b/apps/ui/package.json
@@ -68,6 +68,7 @@
  "@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",

diff --git a/apps/ui/stories/Accordion.stories.tsx b/apps/ui/stories/Accordion.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import { withGlobalStyles } from '../.storybook/decorator';
 
 import {
  Accordion,
@@ -9,7 +10,7 @@ import {
 } from '../lib';
 
 const Test = () => (
- <div className="w-80">
+ <div className="grv-w-80">
  <Accordion type="single" defaultValue="item-1" collapsible>
  <AccordionItem value="item-1">
  <AccordionTrigger>Accordion 1</AccordionTrigger>
@@ -30,6 +31,7 @@ const Test = () => (
 export default {
  title: 'components/Accordion',
  component: Test,
+ decorators: [withGlobalStyles],
 } as Meta;
 
 export const Default = () => <Test />;
diff --git a/apps/ui/stories/Button.stories.tsx b/apps/ui/stories/Button.stories.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import { Meta } from '@storybook/react';
 import { Button } from '../lib';
+import { withGlobalStyles } from '../.storybook/decorator';
 
 export default {
  title: 'Components/Button',
  component: Button,
+ decorators: [withGlobalStyles],
 } as Meta;
 
 export const Variants = () => (

diff --git a/apps/ui/stories/Label.stories.tsx b/apps/ui/stories/Label.stories.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { Label } from '../lib';
+import { withGlobalStyles } from '../.storybook/decorator';
 
 type LabelComponentStory = StoryObj<typeof Label>;
 
 export default {
  title: 'Components/Label',
  component: Label,
  tags: ['autodocs'],
+ decorators: [withGlobalStyles],
  argTypes: {
  htmlFor: { control: 'text' },
  children: { control: 'text' },

diff --git a/apps/ui/stories/Switch.stories.tsx b/apps/ui/stories/Switch.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-
+import { withGlobalStyles } from '../.storybook/decorator';
 import { Label, Switch } from '../lib';
 
 const DefaultTemplate = () => {
@@ -21,6 +21,7 @@ const DefaultTemplate = () => {
 export default {
  title: 'components/Switch',
  component: DefaultTemplate,
+ decorators: [withGlobalStyles],
 } as Meta;
 
 export const Default = () => {

diff --git a/apps/ui/stories/Toast.stories.tsx b/apps/ui/stories/Toast.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-
+import { withGlobalStyles } from '../.storybook/decorator';
 import { useToast, Button, Toaster, ToastAction } from '../lib';
 
 const DefaultTemplate = () => {
@@ -32,6 +32,7 @@ const DefaultTemplate = () => {
 export default {
  title: 'components/Toast',
  component: DefaultTemplate,
+ decorators: [withGlobalStyles],
 } as Meta;
 
 export const Default = () => {