@baseplate-dev/ui-components/dist/theme.css

Shared UI component library

/**
 * UI components theme configuration
 *
 * This file is used to configure the theme for packages that use
 * ui-components with Tailwind CSS, such as plugins.
 */

@import 'tw-animate-css';

/**
 * Colors configuration
 */

@custom-variant dark (.dark, .dark *, &:where([data-theme=dark], [data-theme=dark] *));

@theme inline {
  --color-*: initial;

  --color-background: var(--background);
  --color-foreground: var(--foreground);

  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);

  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);

  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);

  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);

  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);

  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);

  --color-error: var(--error);
  --color-error-foreground: var(--error-foreground);

  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary-hover: var(--primary-hover);

  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary-hover: var(--secondary-hover);

  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-destructive-hover: var(--destructive-hover);

  --color-link: var(--link);
  --color-link-visited: var(--link-visited);

  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --color-surface: var(--surface);
  --color-surface-foreground: var(--surface-foreground);
  --color-surface-border: var(--surface-border);
  --color-surface-muted: var(--surface-muted);
  --color-surface-muted-foreground: var(--surface-muted-foreground);

  --color-white: #fff;
  --color-black: #000;
}

/**
 * Font configuration
 */

@theme {
  --font-body: 'Geist Variable', 'Arial Fallback', 'Trebuchet MS', sans-serif;
  --font-mono:
    'Geist Mono Variable', 'Adjusted Courier New Fallback', 'Courier New',
    'monospace';
}