@shopify/shop-minis-react/src/styles/theme.css

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

/* Design tokens and theme configuration */

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

:root {
  /* 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;
}

@theme {
  /* Core theme colors */
  --color-background: var(--grayscale-l0);
  --color-foreground: var(--grayscale-d100);
  --color-card: var(--grayscale-l0);
  --color-card-foreground: var(--grayscale-d100);
  --color-popover: var(--grayscale-l0);
  --color-popover-foreground: var(--grayscale-d100);
  --color-primary: var(--purple-p40);
  --color-primary-foreground: var(--grayscale-l0);
  --color-secondary: var(--grayscale-d100);
  --color-secondary-foreground: var(--grayscale-l0);
  --color-tertiary: var(--grayscale-l5);
  --color-tertiary-foreground: var(--grayscale-d100);
  --color-muted: var(--grayscale-l5);
  --color-muted-foreground: var(--grayscale-d50);
  --color-accent: var(--grayscale-l5);
  --color-accent-foreground: var(--grayscale-d70);
  --color-destructive: var(--poppy-d50);
  --color-border: rgba(0, 0, 0, 0.1);
  --color-input: var(--grayscale-l20);
  --color-ring: var(--purple-p40);
  --color-disabled: var(--grayscale-l6);
  --color-disabled-foreground: var(--grayscale-l40);

  /* Button theme colors */
  --color-button-overlay: var(--grayscale-d70);

  /* Default fonts */
  --font-sans: 'Suisse Intl', ui-sans-serif, system-ui, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;

  /* Default Tailwind spacing scale (0.25rem = 4px base) */
  --spacing: 0.25rem;

  /* Semantic spacing aliases */
  --spacing-shop-screen-margin: 20px;
  --spacing--shop-screen-margin: -20px;
  --spacing-shop-section-gap: 36px;
  --spacing--shop-section-gap: -36px;
  --spacing-shop-card-row-gutter: 8px;
  --spacing--shop-card-row-gutter: -8px;
  --spacing-shop-card-padding: 16px;
  --spacing--shop-card-padding: -16px;

  /* Shop shadow values */
  --shadow-shop-xs: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
  --shadow-shop-xs-surface: 0px -1px 4px 0px rgba(0, 0, 0, 0.06);
  --shadow-shop-s: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
  --shadow-shop-m: 0px 4px 12px 0px rgba(0, 0, 0, 0.16);
  --shadow-shop-l: 0px 8px 24px 0px rgba(0, 0, 0, 0.24);
}

/* Dark mode overrides - only the palette colors that change */
@theme dark {
  /* TBD */
}