@shopify/shop-minis-react/src/base.css

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  /* Palette colors for Tailwind */
  --color-purple-d80: var(--purple-d80);
  --color-purple-d60: var(--purple-d60);
  --color-purple-d50: var(--purple-d50);
  --color-purple-p40: var(--purple-p40);
  --color-purple-l30: var(--purple-l30);
  --color-purple-l20: var(--purple-l20);
  --color-purple-l10: var(--purple-l10);
  --color-purple-l5: var(--purple-l5);
  --color-purple-l2: var(--purple-l2);

  --color-grayscale-d100: var(--grayscale-d100);
  --color-grayscale-d93: var(--grayscale-d93);
  --color-grayscale-d90: var(--grayscale-d90);
  --color-grayscale-d80: var(--grayscale-d80);
  --color-grayscale-d70: var(--grayscale-d70);
  --color-grayscale-d60: var(--grayscale-d60);
  --color-grayscale-d50: var(--grayscale-d50);
  --color-grayscale-l40: var(--grayscale-l40);
  --color-grayscale-l20: var(--grayscale-l20);
  --color-grayscale-l10: var(--grayscale-l10);
  --color-grayscale-l6: var(--grayscale-l6);
  --color-grayscale-l5: var(--grayscale-l5);
  --color-grayscale-l0: var(--grayscale-l0);

  --color-green-d90: var(--green-d90);
  --color-green-d80: var(--green-d80);
  --color-green-d70: var(--green-d70);
  --color-green-l30: var(--green-l30);
  --color-green-l20: var(--green-l20);
  --color-green-l10: var(--green-l10);
  --color-green-l5: var(--green-l5);

  --color-poppy-d80: var(--poppy-d80);
  --color-poppy-d70: var(--poppy-d70);
  --color-poppy-d50: var(--poppy-d50);
  --color-poppy-l40: var(--poppy-l40);
  --color-poppy-l20: var(--poppy-l20);
  --color-poppy-l10: var(--poppy-l10);
  --color-poppy-l4: var(--poppy-l4);

  --color-ochre-d90: var(--ochre-d90);
  --color-ochre-d70: var(--ochre-d70);
  --color-ochre-d60: var(--ochre-d60);
  --color-ochre-l50: var(--ochre-l50);
  --color-ochre-l30: var(--ochre-l30);
  --color-ochre-l20: var(--ochre-l20);
  --color-ochre-l10: var(--ochre-l10);
  --color-ochre-l6: var(--ochre-l6);

  --color-brand-aqua: var(--brand-aqua);
  --color-brand-violet: var(--brand-violet);
  --color-brand-magenta: var(--brand-magenta);
  --color-brand-olive: var(--brand-olive);
  --color-brand-lime: var(--brand-lime);
  --color-brand-sage: var(--brand-sage);
  --color-brand-sand: var(--brand-sand);
}

:root {
  --radius: 0.65rem;

  /* Palette Colors - Purple */
  --purple-d80: #1b163b;
  --purple-d60: #322c7d;
  --purple-d50: #4524db;
  --purple-p40: #5433eb;
  --purple-l30: #6445ed;
  --purple-l20: #9c83f8;
  --purple-l10: #dbd1ff;
  --purple-l5: #eeeaff;
  --purple-l2: #f7f5ff;

  /* Palette Colors - Grayscale */
  --grayscale-d100: #000000;
  --grayscale-d93: #121212;
  --grayscale-d90: #1a1a1a;
  --grayscale-d80: #2a2a2a;
  --grayscale-d70: #404040;
  --grayscale-d60: #656667;
  --grayscale-d50: #6f7071;
  --grayscale-l40: #a6a8a9;
  --grayscale-l20: #c9cbcc;
  --grayscale-l10: #e1e4e5;
  --grayscale-l6: #eef0f1;
  --grayscale-l5: #f2f4f5;
  --grayscale-l0: #ffffff;

  /* Palette Colors - Green */
  --green-d90: #002e24;
  --green-d80: #004839;
  --green-d70: #008552;
  --green-l30: #92d08d;
  --green-l20: #baebcb;
  --green-l10: #d2f2de;
  --green-l5: #e4f6eb;

  /* Palette Colors - Poppy */
  --poppy-d80: #481609;
  --poppy-d70: #832711;
  --poppy-d50: #d92a0f;
  --poppy-l40: #f05d38;
  --poppy-l20: #ff967d;
  --poppy-l10: #ffd2c2;
  --poppy-l4: #ffece9;

  /* Palette Colors - Ochre */
  --ochre-d90: #443600;
  --ochre-d70: #8c6e01;
  --ochre-d60: #c29d05;
  --ochre-l50: #e3be2b;
  --ochre-l30: #f8db67;
  --ochre-l20: #ffec9f;
  --ochre-l10: #fff4cb;
  --ochre-l6: #fff9e2;

  /* Palette Colors - Brand */
  --brand-aqua: #8dc0c6;
  --brand-violet: #a327c2;
  --brand-magenta: #d354ff;
  --brand-olive: #8b8f01;
  --brand-lime: #c7de00;
  --brand-sage: #d8e59d;
  --brand-sand: #f4f4ed;

  /* Semantic Colors */
  --background: var(--grayscale-l0);
  --foreground: var(--grayscale-d100);
  --card: var(--grayscale-l0);
  --card-foreground: var(--grayscale-d100);
  --popover: var(--grayscale-l0);
  --popover-foreground: var(--grayscale-d100);
  --primary: var(--purple-p40);
  --primary-foreground: var(--grayscale-l0);
  --secondary: var(--grayscale-l5);
  --secondary-foreground: var(--grayscale-d70);
  --muted: var(--grayscale-l5);
  --muted-foreground: var(--grayscale-d70);
  --accent: var(--grayscale-l5);
  --accent-foreground: var(--grayscale-d70);
  --destructive: var(--poppy-d50);
  --border: rgba(0, 0, 0, 0.1);
  --input: var(--grayscale-l20);
  --ring: var(--purple-p40);
  --chart-1: var(--ochre-d90);
  --chart-2: var(--green-d70);
  --chart-3: var(--green-l30);
  --chart-4: var(--grayscale-d50);
  --chart-5: var(--green-l20);
  --sidebar: var(--grayscale-l5);
  --sidebar-foreground: var(--grayscale-d100);
  --sidebar-primary: var(--purple-p40);
  --sidebar-primary-foreground: var(--purple-l20);
  --sidebar-accent: var(--grayscale-l5);
  --sidebar-accent-foreground: var(--grayscale-d70);
  --sidebar-border: rgba(0, 0, 0, 0.1);
  --sidebar-ring: var(--purple-p40);
}

.dark {
  /* Dark mode semantic colors */
  --background: var(--grayscale-d93);
  --foreground: var(--grayscale-l0);
  --card: var(--grayscale-d93);
  --card-foreground: var(--grayscale-l0);
  --popover: var(--grayscale-d93);
  --popover-foreground: var(--grayscale-l0);
  --primary: var(--purple-l20);
  --primary-foreground: var(--grayscale-d100);
  --secondary: var(--grayscale-d80);
  --secondary-foreground: var(--grayscale-l0);
  --muted: var(--grayscale-d80);
  --muted-foreground: var(--grayscale-l20);
  --accent: var(--grayscale-d80);
  --accent-foreground: var(--grayscale-l0);
  --destructive: var(--poppy-l40);
  --border: rgba(255, 255, 255, 0.2);
  --input: var(--grayscale-l40);
  --ring: var(--purple-l20);
  --chart-1: var(--green-l30);
  --chart-2: var(--grayscale-d60);
  --chart-3: var(--green-l20);
  --chart-4: var(--grayscale-d60);
  --chart-5: var(--ochre-l30);
  --sidebar: var(--grayscale-d80);
  --sidebar-foreground: var(--grayscale-l0);
  --sidebar-primary: var(--purple-l20);
  --sidebar-primary-foreground: var(--purple-l10);
  --sidebar-accent: var(--grayscale-d80);
  --sidebar-accent-foreground: var(--grayscale-l0);
  --sidebar-border: rgba(255, 255, 255, 0.2);
  --sidebar-ring: var(--purple-l20);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

html,
body {
  touch-action: manipulation;
}

/* Disable text selection */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Re-enable text selection for input fields */
input,
textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Disable image drag */
img,
.no-drag {
  -webkit-user-drag: none;
  user-drag: none;
}