/amvicioushecs/Hold-em-or-Fold-em-Poker

Wiki directory

Browse AI-generated documentation for any repository.

Theming and Styling

Relevant source files

The following files were used as context for generating this wiki page:

The application employs a modern and flexible styling architecture built upon Tailwind CSS, complemented by a robust CSS variable system to support light and dark themes. This system is managed by next-themes and configured through global CSS files. The component library is based on shadcn/ui, which leverages these core technologies to create a consistent and customizable user interface.

The styling is primarily defined in app/globals.css and styles/globals.css, which declare CSS variables for colors, spacing, and other properties. These variables are then consumed by Tailwind CSS, allowing for dynamic theme changes across the entire application.

Core Technologies

The styling system is powered by several key libraries defined in package.json.

Dependency	Version	Purpose	Source
`tailwindcss`	`^4.1.9`	A utility-first CSS framework for rapid UI development.	`[package.json:80](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/package.json#L80)`
`next-themes`	`^0.4.6`	Manages theme switching (e.g., light/dark mode) in Next.js applications.	`[package.json:48](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/package.json#L48)`
`class-variance-authority`	`^0.7.1`	Creates variants for components, allowing for different styles based on props.	`[package.json:34](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/package.json#L34)`
`tailwind-merge`	`^2.5.5`	Merges Tailwind CSS classes without style conflicts.	`[package.json:54](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/package.json#L54)`
`tailwindcss-animate`	`^1.0.7`	Adds enter/exit animations for Tailwind CSS.	`[package.json:55](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/package.json#L55)`
`autoprefixer`	`^10.4.20`	Parses CSS and adds vendor prefixes to rules.	`[package.json:33](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/package.json#L33)`

Sources: [package.json:33-81](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/package.json#L33-L81)

Architecture Overview

The styling architecture follows a clear hierarchy. The next-themes library toggles a .dark class on the <html> element. This class switch activates a different set of CSS variables defined in app/globals.css, which in turn updates the theme values used by Tailwind CSS.

This diagram illustrates the flow from theme selection to component rendering.

Generating architecture diagram...

Sources: [package.json:48](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/package.json#L48), [app/globals.css:4-150](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/app/globals.css#L4-L150), [styles/globals.css:88-124](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/styles/globals.css#L88-L124)

CSS Variable System

The core of the theming system is a comprehensive set of CSS variables defined in app/globals.css and styles/globals.css. These variables are defined within the :root selector for the light theme and overridden within the .dark selector for the dark theme. The oklch() color function is used for more perceptually uniform colors.

Sources: [app/globals.css:4-81](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/app/globals.css#L4-L81), [styles/globals.css:6-78](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/styles/globals.css#L6-L78)

Color Variables

A set of semantic color variables are defined for consistent theming of UI elements.

Variable	Light Theme Value (`:root`)	Dark Theme Value (`.dark`)	Description
`--background`	`oklch(1 0 0)`	`oklch(0.145 0 0)`	Default background color for `body`.
`--foreground`	`oklch(0.145 0 0)`	`oklch(0.985 0 0)`	Default text color.
`--card`	`oklch(1 0 0)`	`oklch(0.145 0 0)`	Background color for card components.
`--card-foreground`	`oklch(0.145 0 0)`	`oklch(0.985 0 0)`	Text color for card components.
`--primary`	`rgb(88, 88, 109)`	`oklch(0.985 0 0)`	Primary interactive element color.
`--primary-foreground`	`rgb(255, 185, 0)`	`oklch(0.205 0 0)`	Text color on primary elements.
`--secondary`	`rgb(221, 213, 221)`	`oklch(0.269 0 0)`	Secondary interactive element color.
`--secondary-foreground`	`rgb(12, 86, 242)`	`oklch(0.985 0 0)`	Text color on secondary elements.
`--destructive`	`oklch(0.577 0.245 27.325)`	`oklch(0.396 0.141 25.723)`	Color for destructive actions (e.g., delete).
`--border`	`oklch(0.922 0 0)`	`oklch(0.269 0 0)`	Default border color.
`--input`	`oklch(0.922 0 0)`	`oklch(0.269 0 0)`	Default input field border color.
`--ring`	`oklch(0.708 0 0)`	`oklch(0.439 0 0)`	Color for focus rings.

Sources: [app/globals.css:9-31](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/app/globals.css#L9-L31), [app/globals.css:48-70](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/app/globals.css#L48-L70)

Chart & Sidebar Colors

The application defines specific color variables for charts and sidebar elements, ensuring they also adapt to the current theme.

Variable	Description
`--chart-1`	Color for the first series in a chart.
`--chart-2`	Color for the second series in a chart.
`--chart-3`	Color for the third series in a chart.
`--chart-4`	Color for the fourth series in a chart.
`--chart-5`	Color for the fifth series in a chart.
`--sidebar`	Background color for the sidebar.
`--sidebar-primary`	Primary color for elements in the sidebar.

These variables are used in components like StatsDashboard to color data visualizations. For example, text-chart-2 is used for displaying positive statistics.

Sources: [app/globals.css:32-45](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/app/globals.css#L32-L45), [components/stats-dashboard.tsx:112](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/components/stats-dashboard.tsx#L112)

Sizing and Radius

A global radius variable is defined to maintain consistent border-radius across components.

:root {
  /* ... */
  --radius: 0.625rem;
  /* ... */
}

This is then used to create size variants for Tailwind.

@theme inline {
  /* ... */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  /* ... */
}

Sources: [app/globals.css:40](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/app/globals.css#L40), [app/globals.css:117-120](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/app/globals.css#L117-L120)

Tailwind CSS Integration

The CSS variables are integrated into Tailwind CSS via the @theme inline directive in app/globals.css. This maps the CSS variables to Tailwind's theme configuration, allowing utility classes like bg-background and text-primary to work seamlessly with the theme system.

@theme inline {
  /* ... */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-primary: var(--primary);
  /* ... */
}

This configuration is specified in components.json, which points to app/globals.css as the source for CSS variables.

Sources: [app/globals.css:83-137](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/app/globals.css#L83-L137), [components.json:7](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/components.json#L7)

Component Styling with CVA

The project uses class-variance-authority (CVA) to create style variants for UI components, a core pattern in shadcn/ui. The Sheet component is a clear example of this. The sheetVariants function defines different styles based on the side prop (top, bottom, left, right).

This diagram shows how cva generates class names for a component variant.

Generating architecture diagram...

The sheetVariants are defined as follows:

// components/ui/sheet.tsx:32-48
const sheetVariants = cva(
  "fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
  {
    variants: {
      side: {
        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
        bottom:
          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
        right:
          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
      },
    },
    defaultVariants: {
      side: "right",
    },
  },
)

Sources: [components/ui/sheet.tsx:32-55](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/components/ui/sheet.tsx#L32-L55), [package.json:34](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/package.json#L34)

Global Styles and Animations

In addition to the theming system, app/globals.css defines several global styles, custom animations, and mobile-specific optimizations.

Base Styles: A base layer sets border-border on all elements and applies bg-background and text-foreground to the body.
Custom Animations: Keyframe animations like cardFlip and pulse are defined for game-specific UI effects.
Custom Scrollbar: A custom, minimal scrollbar is styled for WebKit browsers.
Mobile Optimizations: Media queries are used to ensure minimum touch target sizes (44px) for buttons and other interactive elements on smaller screens.

Sources: [app/globals.css:140-230](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/app/globals.css#L140-L230)

Conclusion

The "Hold-em-or-Fold-em-Poker" project utilizes a sophisticated and maintainable styling system. By combining the power of Tailwind CSS with a well-structured CSS variable system and next-themes, it achieves a fully themeable UI that is both consistent and easy to extend. The use of shadcn/ui patterns, such as CVA for component variants, further enhances the reusability and modularity of the codebase's styling. This architecture provides a solid foundation for building a visually appealing and responsive user experience.

Theming and Styling

Relevant source files

The following files were used as context for generating this wiki page:

Core Technologies

The styling system is powered by several key libraries defined in package.json.

Dependency	Version	Purpose	Source
`tailwindcss`	`^4.1.9`	A utility-first CSS framework for rapid UI development.	`[package.json:80](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/package.json#L80)`
`next-themes`	`^0.4.6`	Manages theme switching (e.g., light/dark mode) in Next.js applications.	`[package.json:48](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/package.json#L48)`
`class-variance-authority`	`^0.7.1`	Creates variants for components, allowing for different styles based on props.	`[package.json:34](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/package.json#L34)`
`tailwind-merge`	`^2.5.5`	Merges Tailwind CSS classes without style conflicts.	`[package.json:54](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/package.json#L54)`
`tailwindcss-animate`	`^1.0.7`	Adds enter/exit animations for Tailwind CSS.	`[package.json:55](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/package.json#L55)`
`autoprefixer`	`^10.4.20`	Parses CSS and adds vendor prefixes to rules.	`[package.json:33](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/package.json#L33)`

Sources: [package.json:33-81](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/package.json#L33-L81)

Architecture Overview

This diagram illustrates the flow from theme selection to component rendering.

Generating architecture diagram...

CSS Variable System

Color Variables

A set of semantic color variables are defined for consistent theming of UI elements.

Variable	Light Theme Value (`:root`)	Dark Theme Value (`.dark`)	Description
`--background`	`oklch(1 0 0)`	`oklch(0.145 0 0)`	Default background color for `body`.
`--foreground`	`oklch(0.145 0 0)`	`oklch(0.985 0 0)`	Default text color.
`--card`	`oklch(1 0 0)`	`oklch(0.145 0 0)`	Background color for card components.
`--card-foreground`	`oklch(0.145 0 0)`	`oklch(0.985 0 0)`	Text color for card components.
`--primary`	`rgb(88, 88, 109)`	`oklch(0.985 0 0)`	Primary interactive element color.
`--primary-foreground`	`rgb(255, 185, 0)`	`oklch(0.205 0 0)`	Text color on primary elements.
`--secondary`	`rgb(221, 213, 221)`	`oklch(0.269 0 0)`	Secondary interactive element color.
`--secondary-foreground`	`rgb(12, 86, 242)`	`oklch(0.985 0 0)`	Text color on secondary elements.
`--destructive`	`oklch(0.577 0.245 27.325)`	`oklch(0.396 0.141 25.723)`	Color for destructive actions (e.g., delete).
`--border`	`oklch(0.922 0 0)`	`oklch(0.269 0 0)`	Default border color.
`--input`	`oklch(0.922 0 0)`	`oklch(0.269 0 0)`	Default input field border color.
`--ring`	`oklch(0.708 0 0)`	`oklch(0.439 0 0)`	Color for focus rings.

Chart & Sidebar Colors

The application defines specific color variables for charts and sidebar elements, ensuring they also adapt to the current theme.

Variable	Description
`--chart-1`	Color for the first series in a chart.
`--chart-2`	Color for the second series in a chart.
`--chart-3`	Color for the third series in a chart.
`--chart-4`	Color for the fourth series in a chart.
`--chart-5`	Color for the fifth series in a chart.
`--sidebar`	Background color for the sidebar.
`--sidebar-primary`	Primary color for elements in the sidebar.

These variables are used in components like StatsDashboard to color data visualizations. For example, text-chart-2 is used for displaying positive statistics.

Sizing and Radius

A global radius variable is defined to maintain consistent border-radius across components.

:root {
  /* ... */
  --radius: 0.625rem;
  /* ... */
}

This is then used to create size variants for Tailwind.

@theme inline {
  /* ... */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  /* ... */
}

Tailwind CSS Integration

@theme inline {
  /* ... */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-primary: var(--primary);
  /* ... */
}

This configuration is specified in components.json, which points to app/globals.css as the source for CSS variables.

Component Styling with CVA

This diagram shows how cva generates class names for a component variant.

Generating architecture diagram...

The sheetVariants are defined as follows:

// components/ui/sheet.tsx:32-48
const sheetVariants = cva(
  "fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
  {
    variants: {
      side: {
        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
        bottom:
          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
        right:
          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
      },
    },
    defaultVariants: {
      side: "right",
    },
  },
)

Global Styles and Animations

In addition to the theming system, app/globals.css defines several global styles, custom animations, and mobile-specific optimizations.

Base Styles: A base layer sets border-border on all elements and applies bg-background and text-foreground to the body.
Custom Animations: Keyframe animations like cardFlip and pulse are defined for game-specific UI effects.
Custom Scrollbar: A custom, minimal scrollbar is styled for WebKit browsers.
Mobile Optimizations: Media queries are used to ensure minimum touch target sizes (44px) for buttons and other interactive elements on smaller screens.

Sources: [app/globals.css:140-230](https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker/blob/HEAD/app/globals.css#L140-L230)