Color

import { Color } from '@adoptaunabuelo/react-components';

// Background colors
const primaryBg = Color.background.primary;
const softBg = Color.background.soft;

// Text colors
const primaryText = Color.text.primary;
const highText = Color.text.high;

// Line/border colors
const primaryLine = Color.line.primary;
const softLine = Color.line.soft;

// Status colors
const hoverState = Color.status.primary.hover;
const successColor = Color.status.color.success;

import { Color } from '@adoptaunabuelo/react-components';

const StyledButton = styled.button`
  background-color: ${Color.background.primary};
  color: ${Color.text.white};
  border: 1px solid ${Color.line.primary};
  
  &:hover {
    background-color: ${Color.status.primary.hover};
  }
  
  &:active {
    background-color: ${Color.status.primary.pressed};
  }
`;

import { Color } from '@adoptaunabuelo/react-components';

const Card = styled.div`
  background-color: ${Color.background.neutral};
  border: 1px solid ${Color.line.soft};
  padding: 16px;
  border-radius: 8px;
`;

const Title = styled.h3`
  color: ${Color.text.full};
  margin-bottom: 8px;
`;

const Description = styled.p`
  color: ${Color.text.high};
`;

import { Color } from '@adoptaunabuelo/react-components';

const SuccessAlert = styled.div`
  background-color: ${Color.status.color.successDefault};
  color: ${Color.text.green};
  border-left: 4px solid ${Color.status.color.success};
  padding: 12px;
`;

const ErrorAlert = styled.div`
  background-color: ${Color.status.color.errorDefault};
  color: ${Color.text.red};
  border-left: 4px solid ${Color.status.color.error};
  padding: 12px;
`;