@case-framework/survey-ui

React UI components for CASE surveys, including the SurveyEditor.

SurveyEditor styling in a host project

Import the package stylesheet once in your app entry point:

import "@case-framework/survey-ui/css";

If you only want the editor's default variable values as a tiny standalone asset, import:

import "@case-framework/survey-ui/editor-defaults.css";

@case-framework/survey-ui/css already includes these defaults, so the standalone file is only needed when the host wants a separate variables-only layer.

If the host app uses Tailwind CSS v4, add the package as a source in the host global CSS file so Tailwind also scans the editor package:

@import "tailwindcss";
@source "../node_modules/@case-framework/survey-ui/dist";

Override the editor-specific CSS variables on the .survey-editor scope in the host stylesheet:

.survey-editor {
  --main-bg-color: oklch(98.5% 0 0);
  --main-bg-dot-color: oklch(85% 0 0);
  --main-bg-dot-grid-size: calc(var(--spacing, 0.25rem) * 5);

  --footer-bg-color: oklch(37.3% 0.034 259.733);
  --footer-text-color: oklch(98.5% 0 0);
  --footer-height: calc(var(--spacing, 0.25rem) * 6);
}

Available editor-scoped variables:

• --main-bg-color
• --main-bg-dot-color
• --main-bg-dot-grid-size
• --footer-bg-color
• --footer-text-color
• --footer-height

The editor also uses the shared UI theme tokens from the package stylesheet, so you can override variables such as --background, --foreground, --card, --primary, --muted, --accent, --border, --input, and --ring if you want the rest of the editor chrome to match your host theme.