@gingersnap/toolbox/src/tokens/design-tokens.css

A comprehensive Vue 3 component library with Tailwind CSS integration, built with JavaScript

@import 'inter-ui/inter.css';
@import 'tailwindcss';
@plugin '@tailwindcss/typography';

@theme {
  /* Fonts */
  --font-inter: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  
  /* Semantic color tokens */
  --color-primary: var(--color-sky-600);
  --color-primary-hover: var(--color-sky-700);
  --color-primary-focus: var(--color-sky-500);
  --color-primary-light: var(--color-sky-50);
  --color-primary-muted: var(--color-sky-300);
  
  --color-secondary: var(--color-gray-600);
  --color-secondary-hover: var(--color-gray-700);
  --color-secondary-focus: var(--color-gray-500);
  --color-secondary-light: var(--color-gray-50);
  --color-secondary-muted: var(--color-gray-300);
  
  --color-success: var(--color-emerald-600);
  --color-success-hover: var(--color-emerald-700);
  --color-success-focus: var(--color-emerald-500);
  --color-success-light: var(--color-emerald-50);
  --color-success-muted: var(--color-emerald-300);
  
  --color-danger: var(--color-red-600);
  --color-danger-hover: var(--color-red-700);
  --color-danger-focus: var(--color-red-500);
  --color-danger-light: var(--color-red-50);
  --color-danger-muted: var(--color-red-300);
  
  /* Custom radius */
  --radius-base: var(--radius-lg);
  
  /* Custom shadows */
  --shadow-base: var(--shadow-md);
}

@layer base {
  button,
  a {
    cursor: pointer;
  }
}

@layer components {
  /* Modal positioning - bulletproof centering that doesn't rely on consumer's Tailwind setup */
  .tb-modal-content {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
  }
}