Customizing Theme

// Instead of: 'rgb(23, 23, 23)'
// Use: '23 23 23'

import { vars } from 'nativewind';

export const config = {
  light: vars({
    // Base colors
    '--background': '255 255 255',     // White background
    '--foreground': '10 10 10',        // Almost black text

    // Primary brand color
    '--primary': '59 130 246',         // Blue-500
    '--primary-foreground': '255 255 255', // White text on primary

    // Secondary color
    '--secondary': '245 245 245',      // Gray-100
    '--secondary-foreground': '23 23 23', // Dark text on secondary

    // Accent color
    '--accent': '251 146 60',          // Orange-400
    '--accent-foreground': '255 255 255', // White text on accent

    // Muted elements
    '--muted': '245 245 245',          // Gray-100
    '--muted-foreground': '115 115 115', // Gray-500

    // Destructive/error color
    '--destructive': '239 68 68',      // Red-500

    // Component backgrounds
    '--card': '255 255 255',           // White cards
    '--popover': '255 255 255',        // White popovers
    '--popover-foreground': '10 10 10', // Dark text in popovers

    // Borders and inputs
    '--border': '229 229 229',         // Gray-200
    '--input': '229 229 229',          // Gray-200
    '--ring': '59 130 246',            // Blue-500 focus ring
  }),

  dark: vars({
    // Base colors
    '--background': '10 10 10',        // Almost black background
    '--foreground': '250 250 250',     // Almost white text

    // Primary brand color (inverted for dark mode)
    '--primary': '147 197 253',        // Blue-300
    '--primary-foreground': '23 23 23', // Dark text on primary

    // Secondary color
    '--secondary': '38 38 38',         // Gray-800
    '--secondary-foreground': '250 250 250', // Light text on secondary

    // Accent color
    '--accent': '251 146 60',          // Orange-400
    '--accent-foreground': '255 255 255', // White text on accent

    // Muted elements
    '--muted': '38 38 38',             // Gray-800
    '--muted-foreground': '161 161 161', // Gray-400

    // Destructive/error color
    '--destructive': '252 165 165',    // Red-300

    // Component backgrounds
    '--card': '23 23 23',              // Dark cards
    '--popover': '23 23 23',           // Dark popovers
    '--popover-foreground': '250 250 250', // Light text in popovers

    // Borders and inputs
    '--border': '46 46 46',            // Gray-700
    '--input': '46 46 46',             // Gray-700
    '--ring': '147 197 253',           // Blue-300 focus ring
  }),
};

module.exports = {
  theme: {
    extend: {
      colors: {
        border: 'rgb(var(--border))',
        input: 'rgb(var(--input))',
        ring: 'rgb(var(--ring))',
        background: 'rgb(var(--background))',
        foreground: 'rgb(var(--foreground))',
        primary: {
          DEFAULT: 'rgb(var(--primary))',
          foreground: 'rgb(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'rgb(var(--secondary))',
          foreground: 'rgb(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'rgb(var(--destructive))',
        },
        muted: {
          DEFAULT: 'rgb(var(--muted))',
          foreground: 'rgb(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'rgb(var(--accent))',
          foreground: 'rgb(var(--accent-foreground))',
        },
        popover: {
          DEFAULT: 'rgb(var(--popover))',
          foreground: 'rgb(var(--popover-foreground))',
        },
        card: {
          DEFAULT: 'rgb(var(--card))',
        },
      },
    },
  },
};

// Primary button
<Button className="bg-primary text-primary-foreground">
  <ButtonText>Primary Action</ButtonText>
</Button>

// Secondary button
<Button className="bg-secondary text-secondary-foreground">
  <ButtonText>Secondary Action</ButtonText>
</Button>

// Card with proper contrast
<Box className="bg-card border border-border p-4">
  <Text className="text-foreground">Card content</Text>
  <Text className="text-muted-foreground">Muted description</Text>
</Box>

// Destructive action
<Button className="bg-destructive text-primary-foreground">
  <ButtonText>Delete</ButtonText>
</Button>

// With opacity
<Box className="bg-primary/10">
  <Text className="text-primary">Subtle primary background</Text>
</Box>

export const config = {
  light: vars({
    // ... existing tokens
    '--success': '34 197 94',          // Green-500
    '--success-foreground': '255 255 255',
    '--warning': '251 146 60',         // Orange-400
    '--warning-foreground': '255 255 255',
  }),
  dark: vars({
    // ... existing tokens
    '--success': '134 239 172',        // Green-300
    '--success-foreground': '23 23 23',
    '--warning': '253 186 116',        // Orange-300
    '--warning-foreground': '23 23 23',
  }),
};

colors: {
  // ... existing colors
  success: {
    DEFAULT: 'rgb(var(--success))',
    foreground: 'rgb(var(--success-foreground))',
  },
  warning: {
    DEFAULT: 'rgb(var(--warning))',
    foreground: 'rgb(var(--warning-foreground))',
  },
}

export const config = {
  light: vars({
    // ... existing tokens
    '--font-size-custom': '80',        // 80px
  }),
  dark: vars({
    // ... existing tokens
    '--font-size-custom': '80',
  }),
};

fontSize: {
  'custom-heading-xl': 'var(--font-size-custom)',
}

import { tva } from '@gluestack-ui/utils/nativewind-utils';

const config = {
  twMerge: true,
  twMergeConfig: {
    classGroups: {
      'font-size': [
        {
          text: ['custom-heading-xl'],
        },
      ],
    },
  },
};

export const textStyle = tva({
  base: 'text-foreground',
  variants: {
    size: {
      'custom-heading-xl': 'text-custom-heading-xl',
    },
  },
}, config);