create-brainerce-store 1.51.0 → 1.52.1

package/templates/nextjs/themes/playful/globals.css

@@ -1,400 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 99%;
-    --foreground: 260 25% 16%;
-    --primary: 330 75% 56%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 260 50% 94%;
-    --secondary-foreground: 260 25% 16%;
-    --muted: 270 30% 95%;
-    --muted-foreground: 260 10% 45%;
-    --accent: 280 60% 60%;
-    --accent-foreground: 0 0% 100%;
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 270 20% 88%;
-    --radius: 1rem;
-
-    /* Playful-specific tokens */
-    --pink: 330 75% 56%;
-    --purple: 280 60% 60%;
-    --lavender: 260 50% 94%;
-    --peach: 20 80% 88%;
-    --mint: 160 50% 88%;
-  }
-
-  * {
-    @apply border-border;
-  }
-
-  body {
-    @apply bg-background text-foreground antialiased;
-    line-height: 1.65;
-  }
-
-  /* Playful typography — friendly, bold, tight */
-  h1,
-  h2,
-  h3,
-  h4 {
-    font-weight: 700;
-    letter-spacing: -0.02em;
-    line-height: 1.2;
-  }
-
-  h1 {
-    font-weight: 800;
-    letter-spacing: -0.03em;
-  }
-
-  /* Fun colorful selection */
-  ::selection {
-    background: hsl(var(--pink) / 0.25);
-    color: hsl(260 25% 16%);
-  }
-
-  /* Colorful focus rings */
-  :focus-visible {
-    outline: 2.5px solid hsl(var(--purple));
-    outline-offset: 3px;
-    border-radius: var(--radius);
-  }
-
-  /* Playful scrollbar */
-  ::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background: hsl(var(--lavender));
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: linear-gradient(
-      180deg,
-      hsl(var(--pink)),
-      hsl(var(--purple))
-    );
-    border-radius: 999px;
-  }
-}
-
-@layer components {
-  /* ─── Buttons ─── */
-
-  /* Primary CTA — gradient with bounce and glow */
-  button[class*="bg-primary"],
-  a[class*="bg-primary"] {
-    font-weight: 700;
-    letter-spacing: 0.01em;
-    background: linear-gradient(
-      135deg,
-      hsl(var(--pink)),
-      hsl(330 80% 52%),
-      hsl(var(--purple))
-    ) !important;
-    background-size: 200% 200%;
-    box-shadow:
-      0 4px 14px hsl(var(--pink) / 0.3),
-      0 2px 6px hsl(var(--purple) / 0.15);
-    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-    border: none;
-  }
-
-  button[class*="bg-primary"]:hover,
-  a[class*="bg-primary"]:hover {
-    transform: translateY(-3px) scale(1.03);
-    box-shadow:
-      0 8px 28px hsl(var(--pink) / 0.4),
-      0 4px 12px hsl(var(--purple) / 0.2);
-    background-position: 100% 0;
-    opacity: 1 !important;
-  }
-
-  button[class*="bg-primary"]:active,
-  a[class*="bg-primary"]:active {
-    transform: translateY(0) scale(0.97);
-    box-shadow: 0 2px 8px hsl(var(--pink) / 0.2);
-  }
-
-  /* Secondary buttons — soft pill with hover pop */
-  [class*="bg-secondary"] {
-    border-radius: 999px !important;
-    font-weight: 600;
-    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-
-  [class*="bg-secondary"]:hover {
-    background: hsl(var(--lavender)) !important;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 16px hsl(var(--purple) / 0.12);
-  }
-
-  /* ─── Product Cards ─── */
-
-  [class*="group"][class*="border"] {
-    border-radius: var(--radius);
-    overflow: hidden;
-    border: 2px solid hsl(var(--border));
-    background: white;
-    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-
-  [class*="group"][class*="border"]:hover {
-    transform: translateY(-6px) rotate(-0.5deg);
-    border-color: hsl(var(--pink) / 0.3);
-    box-shadow:
-      0 16px 40px hsl(var(--purple) / 0.12),
-      0 6px 16px hsl(var(--pink) / 0.1);
-  }
-
-  /* Product image hover — fun overshoot zoom */
-  [class*="group-hover\\:scale-105"] {
-    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
-  }
-
-  [class*="group"]:hover [class*="group-hover\\:scale-105"] {
-    transform: scale(1.08) !important;
-  }
-
-  /* ─── Form Elements ─── */
-
-  input[class*="border-border"],
-  select[class*="border-border"],
-  textarea[class*="border-border"] {
-    border-radius: var(--radius);
-    border-width: 2px;
-    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-
-  input[class*="border-border"]:focus,
-  select[class*="border-border"]:focus,
-  textarea[class*="border-border"]:focus {
-    border-color: hsl(var(--purple)) !important;
-    box-shadow: 0 0 0 4px hsl(var(--purple) / 0.1);
-    transform: scale(1.01);
-  }
-
-  input::placeholder,
-  textarea::placeholder {
-    color: hsl(var(--muted-foreground) / 0.6);
-  }
-
-  /* ─── Navigation & Header ─── */
-
-  header[class*="sticky"] {
-    border-bottom: none !important;
-    box-shadow: 0 4px 20px hsl(var(--purple) / 0.06);
-    background: hsl(0 0% 99% / 0.9) !important;
-    backdrop-filter: blur(10px);
-  }
-
-  /* Nav link hover — colorful underline */
-  nav a {
-    position: relative;
-    font-weight: 600;
-    transition: color 0.2s ease;
-  }
-
-  nav a::after {
-    content: '';
-    position: absolute;
-    bottom: -2px;
-    left: 50%;
-    width: 0;
-    height: 3px;
-    background: linear-gradient(90deg, hsl(var(--pink)), hsl(var(--purple)));
-    border-radius: 999px;
-    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-    transform: translateX(-50%);
-  }
-
-  nav a:hover::after {
-    width: 100%;
-  }
-
-  nav a:hover {
-    color: hsl(var(--pink));
-  }
-
-  /* ─── Badges & Tags ─── */
-
-  /* Category/filter pills */
-  [class*="bg-muted"][class*="text-xs"] {
-    border-radius: 999px;
-    font-weight: 700;
-    padding-left: 0.85rem;
-    padding-right: 0.85rem;
-    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-
-  [class*="bg-muted"][class*="text-xs"]:hover {
-    background: hsl(var(--lavender)) !important;
-    transform: scale(1.05);
-  }
-
-  /* Sale/discount badges — fun wiggle + pill */
-  [class*="bg-destructive"] {
-    border-radius: 999px;
-    font-weight: 800;
-    box-shadow: 0 2px 8px hsl(0 84% 60% / 0.3);
-    animation: playful-wiggle 3s ease-in-out infinite;
-  }
-
-  /* ─── Price Display ─── */
-
-  [class*="font-bold"][class*="text-lg"],
-  [class*="font-bold"][class*="text-xl"],
-  [class*="font-bold"][class*="text-2xl"] {
-    color: hsl(var(--pink));
-  }
-
-  /* Strikethrough — more playful */
-  [class*="line-through"] {
-    opacity: 0.4;
-    text-decoration-color: hsl(var(--purple) / 0.4);
-    text-decoration-thickness: 2px;
-  }
-
-  /* ─── Dividers ─── */
-
-  hr {
-    border: none;
-    height: 3px;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      hsl(var(--lavender)),
-      hsl(var(--pink) / 0.2),
-      hsl(var(--lavender)),
-      transparent
-    );
-    border-radius: 999px;
-  }
-
-  /* ─── Cart & Checkout ─── */
-
-  /* Sticky summary — playful card */
-  [class*="sticky"][class*="top-"] {
-    border-radius: var(--radius);
-    border: 2px solid hsl(var(--border));
-    box-shadow: 0 4px 20px hsl(var(--purple) / 0.06);
-  }
-
-  /* Quantity buttons */
-  button[class*="h-8"][class*="w-8"],
-  button[class*="h-10"][class*="w-10"] {
-    border-radius: 999px !important;
-    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-
-  button[class*="h-8"][class*="w-8"]:hover,
-  button[class*="h-10"][class*="w-10"]:hover {
-    transform: scale(1.1);
-    background: hsl(var(--lavender)) !important;
-  }
-
-  /* ─── Images ─── */
-
-  /* Product images — rounded */
-  [class*="aspect-square"] {
-    border-radius: calc(var(--radius) - 2px);
-    overflow: hidden;
-  }
-}
-
-/* ─── Animations ─── */
-
-/* Bouncy slide-up entrance */
-@keyframes playful-slide-up {
-  from {
-    opacity: 0;
-    transform: translateY(24px) scale(0.96);
-  }
-  50% {
-    transform: translateY(-6px) scale(1.01);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-/* Wiggle for discount badges */
-@keyframes playful-wiggle {
-  0%,
-  85%,
-  100% {
-    transform: rotate(0deg);
-  }
-  90% {
-    transform: rotate(-3deg);
-  }
-  95% {
-    transform: rotate(3deg);
-  }
-}
-
-/* Pop-in for grid items */
-@keyframes playful-pop-in {
-  from {
-    opacity: 0;
-    transform: scale(0.9) translateY(16px);
-  }
-  60% {
-    transform: scale(1.02) translateY(-2px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-main > * {
-  animation: playful-slide-up 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
-}
-
-main > *:nth-child(2) {
-  animation-delay: 0.06s;
-}
-
-main > *:nth-child(3) {
-  animation-delay: 0.12s;
-}
-
-/* Staggered grid items — playful pop */
-[class*="grid"] > [class*="group"] {
-  animation: playful-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(2) {
-  animation-delay: 0.06s;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(3) {
-  animation-delay: 0.12s;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(4) {
-  animation-delay: 0.18s;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(5) {
-  animation-delay: 0.24s;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(6) {
-  animation-delay: 0.3s;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(7) {
-  animation-delay: 0.36s;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(8) {
-  animation-delay: 0.42s;
-}

package/templates/nextjs/themes/playful/theme.json

@@ -1,23 +0,0 @@
-{
-  "name": "Playful",
-  "description": "Warm, vibrant design with Nunito rounded font and energetic pink-purple palette",
-  "font": {
-    "family": "Nunito",
-    "import": "next/font/google"
-  },
-  "colors": {
-    "background": "0 0% 99%",
-    "foreground": "260 25% 16%",
-    "primary": "330 75% 56%",
-    "primary-foreground": "0 0% 100%",
-    "secondary": "260 50% 94%",
-    "secondary-foreground": "260 25% 16%",
-    "muted": "270 30% 95%",
-    "muted-foreground": "260 10% 45%",
-    "accent": "280 60% 60%",
-    "accent-foreground": "0 0% 100%",
-    "destructive": "0 84% 60%",
-    "border": "270 20% 88%"
-  },
-  "radius": "1rem"
-}