CSS Variables

/**
 * Create CSS custom property with reference
 * @param name - Variable name
 * @param options - Options for fallback and prefix
 * @returns Object with variable name and reference
 */
function cssVar(name: string, options?: CSSVarOptions): CSSVar;

interface CSSVar {
  /** CSS variable name (e.g., "--my-color") */
  variable: string;
  /** CSS var() reference (e.g., "var(--my-color, fallback)") */
  reference: string;
}

interface CSSVarOptions {
  /** Fallback value when variable is not defined */
  fallback?: string | CSSVar;
  /** Prefix for variable name */
  prefix?: string;
}

import { cssVar } from "@chakra-ui/theme-tools/css-var";

// Basic CSS variable
const colorVar = cssVar("primary-color");
// Returns: { variable: "--primary-color", reference: "var(--primary-color)" }

// With fallback
const bgVar = cssVar("background", { fallback: "#ffffff" });
// Returns: { variable: "--background", reference: "var(--background, #ffffff)" }

// With prefix
const themeVar = cssVar("color", { prefix: "chakra" });  
// Returns: { variable: "--chakra-color", reference: "var(--chakra-color)" }

// With both prefix and fallback
const spacingVar = cssVar("spacing", { 
  prefix: "theme", 
  fallback: "1rem" 
});
// Returns: { variable: "--theme-spacing", reference: "var(--theme-spacing, 1rem)" }

// Use in CSS-in-JS
const styles = {
  [colorVar.variable]: "#3182ce",
  backgroundColor: colorVar.reference,
  padding: spacingVar.reference
};

/**
 * Convert value to CSS variable name
 * @param value - Base value for variable name
 * @param prefix - Optional prefix
 * @returns CSS variable name with -- prefix
 */
function toVar(value: string, prefix?: string): string;

/**
 * Add prefix to CSS variable name
 * @param value - Variable name
 * @param prefix - Prefix to add
 * @returns Prefixed variable name
 */
function addPrefix(value: string, prefix?: string): string;

/**
 * Check if value is decimal number
 * @param value - Value to check
 * @returns True if value is decimal
 */
function isDecimal(value: any): boolean;

import { toVar, addPrefix, isDecimal } from "@chakra-ui/theme-tools/css-var";

// Generate variable names
const varName = toVar("primary-color"); // "--primary-color"
const prefixedVar = toVar("color", "theme"); // "--theme-color"

// Add prefixes  
const withPrefix = addPrefix("spacing", "chakra"); // "chakra-spacing"

// Check for decimals (used internally for escaping)
const isDecimalValue = isDecimal(3.14); // true
const isIntegerValue = isDecimal(10); // false

/**
 * Create CSS var() reference
 * @param name - Variable name (with or without -- prefix)
 * @param fallback - Optional fallback value
 * @returns CSS var() function string
 */
function toVarRef(name: string, fallback?: string): string;

import { toVarRef } from "@chakra-ui/theme-tools/css-var";

// Basic var reference
const basicRef = toVarRef("--primary-color"); 
// Returns: "var(--primary-color)"

// With fallback
const withFallback = toVarRef("--text-color", "#000000");
// Returns: "var(--text-color, #000000)"

// Handles names without -- prefix
const autoPrefix = toVarRef("background-color", "white");
// Returns: "var(--background-color, white)"

// Use in style objects
const buttonStyles = {
  backgroundColor: toVarRef("--button-bg", "#3182ce"),
  color: toVarRef("--button-text", "white"),
  borderColor: toVarRef("--button-border", "transparent")
};

import { cssVar } from "@chakra-ui/theme-tools/css-var";

// Create a theme variable system
const themeVars = {
  colors: {
    primary: cssVar("primary", { prefix: "theme" }),
    secondary: cssVar("secondary", { prefix: "theme" }),
    background: cssVar("bg", { prefix: "theme", fallback: "#ffffff" })
  },
  spacing: {
    small: cssVar("spacing-sm", { prefix: "theme", fallback: "0.5rem" }),
    medium: cssVar("spacing-md", { prefix: "theme", fallback: "1rem" }),
    large: cssVar("spacing-lg", { prefix: "theme", fallback: "2rem" })
  }
};

// Generate CSS custom properties object
const cssVariables = {
  [themeVars.colors.primary.variable]: "#3182ce",
  [themeVars.colors.secondary.variable]: "#805ad5",
  [themeVars.spacing.small.variable]: "8px",
  [themeVars.spacing.medium.variable]: "16px",
  [themeVars.spacing.large.variable]: "32px"
};

// Use in component styles
const cardStyles = {
  backgroundColor: themeVars.colors.background.reference,
  borderColor: themeVars.colors.primary.reference, 
  padding: themeVars.spacing.medium.reference,
  margin: themeVars.spacing.small.reference
};

import { cssVar } from "@chakra-ui/theme-tools/css-var";

// Color scheme variables
const createColorScheme = (name: string) => ({
  bg: cssVar(`${name}-bg`, { prefix: "color-scheme" }),
  text: cssVar(`${name}-text`, { prefix: "color-scheme" }),
  border: cssVar(`${name}-border`, { prefix: "color-scheme" })
});

const lightScheme = createColorScheme("light");
const darkScheme = createColorScheme("dark");

// Apply based on current scheme
const applyColorScheme = (scheme: "light" | "dark") => {
  const vars = scheme === "light" ? lightScheme : darkScheme;
  
  return {
    [vars.bg.variable]: scheme === "light" ? "#ffffff" : "#1a202c",
    [vars.text.variable]: scheme === "light" ? "#2d3748" : "#e2e8f0",
    [vars.border.variable]: scheme === "light" ? "#e2e8f0" : "#4a5568"
  };
};

import { cssVar } from "@chakra-ui/theme-tools/css-var";

// Button component variables
const buttonVars = {
  bg: cssVar("button-bg"),
  color: cssVar("button-color"), 
  borderColor: cssVar("button-border-color"),
  hoverBg: cssVar("button-hover-bg")
};

// Button theme with CSS variables
const buttonTheme = {
  baseStyle: {
    backgroundColor: buttonVars.bg.reference,
    color: buttonVars.color.reference,
    borderColor: buttonVars.borderColor.reference,
    _hover: {
      backgroundColor: buttonVars.hoverBg.reference
    }
  },
  variants: {
    solid: {
      [buttonVars.bg.variable]: "blue.500",
      [buttonVars.color.variable]: "white",
      [buttonVars.hoverBg.variable]: "blue.600"
    },
    outline: {
      [buttonVars.bg.variable]: "transparent", 
      [buttonVars.color.variable]: "blue.500",
      [buttonVars.borderColor.variable]: "blue.500",
      [buttonVars.hoverBg.variable]: "blue.50"
    }
  }
};