rnr-starter/global.css

A comprehensive React Native Expo boilerplate with 50+ modern UI components, dark/light themes, i18n, state management, and production-ready architecture

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 220 44% 100%;
    --foreground: 220 67% 0%;
    --muted: 220 39% 92%;
    --muted-foreground: 220 13% 27%;
    --popover: 220 44% 100%;
    --popover-foreground: 220 67% 0%;
    --card: 0 0% 99%;
    --card-foreground: 0 0% 0%;
    --border: 220 2% 93%;
    --input: 220 2% 93%;
    --primary: 220 66% 58%;
    --primary-foreground: 0 0% 100%;
    --secondary: 220 7% 91%;
    --secondary-foreground: 220 7% 31%;
    --accent: 220 13% 82%;
    --accent-foreground: 220 13% 22%;
    --destructive: 0 86% 45%;
    --destructive-foreground: 0 0% 100%;
    --ring: 220 66% 58%;
  }

  .dark:root {
    --background: 220 43% 4%;
    --foreground: 220 16% 99%;
    --muted: 220 39% 8%;
    --muted-foreground: 220 13% 73%;
    --popover: 220 43% 4%;
    --popover-foreground: 220 16% 99%;
    --card: 220 43% 5%;
    --card-foreground: 0 0% 100%;
    --border: 220 2% 13%;
    --input: 220 2% 13%;
    --primary: 220 66% 58%;
    --primary-foreground: 0 0% 100%;
    --secondary: 220 7% 9%;
    --secondary-foreground: 220 7% 69%;
    --accent: 220 13% 16%;
    --accent-foreground: 220 13% 76%;
    --destructive: 0 86% 49%;
    --destructive-foreground: 0 0% 100%;
    --ring: 220 66% 58%;
  }
}

@layer utilities {

  /* Button async running light animations */
  @keyframes slideRight {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      transform: translateX(100%);
      opacity: 0;
    }
  }

  @keyframes slideDown {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      transform: translateY(100%);
      opacity: 0;
    }
  }

  @keyframes slideLeft {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      transform: translateX(-100%);
      opacity: 0;
    }
  }

  @keyframes slideUp {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      transform: translateY(-100%);
      opacity: 0;
    }
  }

  /* New easing animations for ButtonAsync */
  @keyframes slideRightBounce {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }

    50% {
      opacity: 1;
      transform: translateX(110%);
    }

    70% {
      transform: translateX(95%);
    }

    100% {
      transform: translateX(100%);
      opacity: 0;
    }
  }

  @keyframes slideDownBounce {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }

    50% {
      opacity: 1;
      transform: translateY(110%);
    }

    70% {
      transform: translateY(95%);
    }

    100% {
      transform: translateY(100%);
      opacity: 0;
    }
  }

  @keyframes slideLeftBounce {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }

    50% {
      opacity: 1;
      transform: translateX(-110%);
    }

    70% {
      transform: translateX(-95%);
    }

    100% {
      transform: translateX(-100%);
      opacity: 0;
    }
  }

  @keyframes slideUpBounce {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }

    50% {
      opacity: 1;
      transform: translateY(-110%);
    }

    70% {
      transform: translateY(-95%);
    }

    100% {
      transform: translateY(-100%);
      opacity: 0;
    }
  }

  @keyframes slideRightElastic {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }

    30% {
      opacity: 1;
      transform: translateX(120%);
    }

    45% {
      transform: translateX(90%);
    }

    60% {
      transform: translateX(105%);
    }

    100% {
      transform: translateX(100%);
      opacity: 0;
    }
  }

  @keyframes slideDownElastic {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }

    30% {
      opacity: 1;
      transform: translateY(120%);
    }

    45% {
      transform: translateY(90%);
    }

    60% {
      transform: translateY(105%);
    }

    100% {
      transform: translateY(100%);
      opacity: 0;
    }
  }

  @keyframes slideLeftElastic {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }

    30% {
      opacity: 1;
      transform: translateX(-120%);
    }

    45% {
      transform: translateX(-90%);
    }

    60% {
      transform: translateX(-105%);
    }

    100% {
      transform: translateX(-100%);
      opacity: 0;
    }
  }

  @keyframes slideUpElastic {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }

    30% {
      opacity: 1;
      transform: translateY(-120%);
    }

    45% {
      transform: translateY(-90%);
    }

    60% {
      transform: translateY(-105%);
    }

    100% {
      transform: translateY(-100%);
      opacity: 0;
    }
  }

  /* Counterclockwise animations */
  @keyframes slideRightCounterClockwise {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      transform: translateX(100%);
      opacity: 0;
    }
  }

  @keyframes slideUpCounterClockwise {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      transform: translateY(100%);
      opacity: 0;
    }
  }

  @keyframes slideLeftCounterClockwise {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      transform: translateX(-100%);
      opacity: 0;
    }
  }

  @keyframes slideDownCounterClockwise {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      transform: translateY(-100%);
      opacity: 0;
    }
  }

}