@squaredr/fieldcraft-pro 1.7.0 → 1.8.0

package/theme-editor/styles.css

@@ -1,466 +1,468 @@
-/* FieldCraft Pro Theme Editor
-   Chrome theming uses shadcn variable names (--background, --foreground, etc.)
-   matching FormBuilder and ResponseViewer for consistent host page inheritance.
-
-   1. ThemeEditorThemeProvider wraps children in <div data-fcte-root="" style={cssVars}>
-   2. --fcte-* variables reference shadcn vars via var(--shadcn-var, fallback)
-   3. Host page :root variables naturally cascade through
-   4. Provider inline styles override everything when a theme prop is passed
-   5. All editor chrome references var(--fcte-*) — fully themeable
-*/
-
-/* ─── Provider root ─────────────────────────────────────────────── */
-.fcte-provider-root {
-  width: 100%;
-  height: 100%;
-}
-
-/* ─── Default theme variables ──────────────────────────────────── */
-/* References shadcn variable names so the chrome inherits from any
-   host page that defines --background, --foreground, --card, etc.
-   Fallback values are Drafting Teal light defaults. */
-[data-fcte-root] {
-  --fcte-bg: var(--background, #F4F7F8);
-  --fcte-surface: var(--card, #FFFFFF);
-  --fcte-surface-hover: var(--accent, #EDF3F2);
-  --fcte-text: var(--foreground, #12222A);
-  --fcte-text-muted: var(--muted-foreground, #6A7B85);
-  --fcte-text-dim: var(--muted-foreground, #96A5AD);
-  --fcte-border: var(--border, #DCE4E8);
-  --fcte-border-strong: var(--border, #B9D1CF);
-  --fcte-input-bg: var(--card, #FAFCFC);
-  --fcte-accent: var(--primary, #1F6B6E);
-  --fcte-accent-text: var(--primary-foreground, #FFFFFF);
-}
-
-/* ─── Root element ──────────────────────────────────────────────── */
-.fcte-root {
-  display: flex;
-  flex-direction: column;
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 13px;
-  color: var(--fcte-text);
-  background: var(--fcte-bg);
-  overflow: hidden;
-}
-
-/* ─── Toolbar ───────────────────────────────────────────────────── */
-.fcte-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--fcte-border);
-  background: var(--fcte-surface);
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-.fcte-toolbar__left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.fcte-toolbar__right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.fcte-toolbar__title {
-  font-weight: 600;
-  font-size: 14px;
-  white-space: nowrap;
-}
-
-.fcte-toolbar__preset {
-  padding: 4px 8px;
-  border-radius: 0;
-  border: 1px solid var(--fcte-border-strong);
-  background: var(--fcte-input-bg);
-  color: var(--fcte-text);
-  font-size: 12px;
-  cursor: pointer;
-}
-
-/* ─── Buttons ───────────────────────────────────────────────────── */
-.fcte-btn {
-  padding: 5px 12px;
-  border-radius: 0;
-  border: none;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.fcte-btn--primary {
-  background: var(--fcte-accent);
-  color: var(--fcte-accent-text);
-}
-
-.fcte-btn--primary:hover {
-  opacity: 0.9;
-}
-
-.fcte-btn--secondary {
-  background: var(--fcte-input-bg);
-  color: var(--fcte-text);
-  border: 1px solid var(--fcte-border-strong);
-}
-
-.fcte-btn--secondary:hover {
-  background: var(--fcte-surface-hover);
-}
-
-.fcte-btn--sm {
-  padding: 3px 8px;
-  font-size: 11px;
-}
-
-/* ─── Body split ────────────────────────────────────────────────── */
-.fcte-body {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-/* ─── Editor panel ──────────────────────────────────────────────── */
-.fcte-editor {
-  width: 320px;
-  min-width: 280px;
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--fcte-border);
-  background: var(--fcte-surface);
-}
-
-/* ─── Section selector dropdown ─────────────────────────────────── */
-.fcte-section-select {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--fcte-border);
-  flex-shrink: 0;
-}
-
-.fcte-section-select .fcte-field__select {
-  font-weight: 600;
-  font-size: 13px;
-}
-
-/* ─── Fields area ───────────────────────────────────────────────── */
-.fcte-fields {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-/* ─── Individual field ──────────────────────────────────────────── */
-.fcte-field {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.fcte-field__label {
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--fcte-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-
-.fcte-field__color-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.fcte-field__swatch {
-  width: 28px;
-  height: 28px;
-  border: 1px solid var(--fcte-border-strong);
-  border-radius: 0;
-  padding: 0;
-  cursor: pointer;
-  background: none;
-  flex-shrink: 0;
-}
-
-.fcte-field__swatch::-webkit-color-swatch-wrapper {
-  padding: 2px;
-}
-
-.fcte-field__swatch::-webkit-color-swatch {
-  border: none;
-  border-radius: 0;
-}
-
-.fcte-field__text,
-.fcte-field__select,
-.fcte-field__number {
-  padding: 5px 8px;
-  border-radius: 0;
-  border: 1px solid var(--fcte-border-strong);
-  background: var(--fcte-input-bg);
-  color: var(--fcte-text);
-  font-size: 12px;
-  font-family: inherit;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.fcte-field__text:focus,
-.fcte-field__select:focus,
-.fcte-field__number:focus {
-  outline: none;
-  border-color: var(--fcte-accent);
-}
-
-.fcte-field__number-row {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.fcte-field__number-row .fcte-field__number {
-  width: 80px;
-  flex-shrink: 0;
-}
-
-.fcte-field__suffix {
-  font-size: 11px;
-  color: var(--fcte-text-dim);
-}
-
-/* ─── Preview panel ─────────────────────────────────────────────── */
-.fcte-preview {
-  flex: 1;
-  overflow: auto;
-  background: var(--fcte-bg);
-}
-
-.fcte-preview__inner {
-  padding: 24px;
-  min-height: 100%;
-}
-
-/* ─── Palette Generator ─────────────────────────────────────────── */
-.fcte-palette {
-  border-bottom: 1px solid var(--fcte-border);
-  background: var(--fcte-surface);
-}
-
-.fcte-palette__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--fcte-border);
-}
-
-.fcte-palette__title {
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.fcte-palette__body {
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.fcte-palette__picker {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.fcte-palette__label {
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--fcte-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-
-.fcte-palette__input-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.fcte-palette__input-row .fcte-field__text {
-  width: 120px;
-}
-
-.fcte-palette__swatches {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.fcte-palette__swatch {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 3px;
-  width: 56px;
-}
-
-.fcte-palette__swatch-color {
-  width: 40px;
-  height: 28px;
-  border-radius: 0;
-  border: 1px solid var(--fcte-border-strong);
-}
-
-.fcte-palette__swatch-label {
-  font-size: 10px;
-  color: var(--fcte-text-muted);
-  text-align: center;
-}
-
-.fcte-palette__swatch-hex {
-  font-size: 9px;
-  color: var(--fcte-text-dim);
-  font-family: monospace;
-}
-
-/* ─── Theme Comparison ──────────────────────────────────────────── */
-.fcte-compare {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.fcte-compare__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--fcte-border);
-  background: var(--fcte-surface);
-  flex-shrink: 0;
-}
-
-.fcte-compare__title {
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.fcte-compare__controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.fcte-compare__label {
-  font-size: 11px;
-  color: var(--fcte-text-muted);
-}
-
-.fcte-compare__diffs {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--fcte-border);
-  background: var(--fcte-surface);
-  flex-shrink: 0;
-}
-
-.fcte-compare__diff-count {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--fcte-text-muted);
-  display: block;
-  margin-bottom: 6px;
-}
-
-.fcte-compare__diff-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.fcte-compare__diff-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 6px;
-  border-radius: 0;
-  background: var(--fcte-input-bg);
-  border: 1px solid var(--fcte-border);
-  font-size: 10px;
-}
-
-.fcte-compare__diff-label {
-  color: var(--fcte-text-muted);
-  font-size: 10px;
-}
-
-.fcte-compare__diff-swatches {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.fcte-compare__diff-swatch {
-  width: 14px;
-  height: 14px;
-  border-radius: 0;
-  border: 1px solid var(--fcte-border-strong);
-}
-
-.fcte-compare__diff-arrow {
-  font-size: 9px;
-  color: var(--fcte-text-dim);
-}
-
-.fcte-compare__diff-more {
-  font-size: 10px;
-  color: var(--fcte-text-dim);
-  align-self: center;
-}
-
-.fcte-compare__panels {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.fcte-compare__panel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.fcte-compare__panel + .fcte-compare__panel {
-  border-left: 1px solid var(--fcte-border);
-}
-
-.fcte-compare__panel-label {
-  padding: 6px 12px;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--fcte-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  border-bottom: 1px solid var(--fcte-border);
-  background: var(--fcte-surface);
-  flex-shrink: 0;
-}
-
-.fcte-compare__panel-preview {
-  flex: 1;
-  overflow: auto;
-  padding: 16px;
-}
+/* FieldCraft Pro Theme Editor
+   Chrome theming uses shadcn variable names (--background, --foreground, etc.)
+   matching FormBuilder and ResponseViewer for consistent host page inheritance.
+
+   1. ThemeEditorThemeProvider wraps children in <div data-fcte-root="" style={cssVars}>
+   2. --fcte-* variables reference shadcn vars via var(--shadcn-var, fallback)
+   3. Host page :root variables naturally cascade through
+   4. Provider inline styles override everything when a theme prop is passed
+   5. All editor chrome references var(--fcte-*) — fully themeable
+*/
+
+/* ─── Provider root ─────────────────────────────────────────────── */
+.fcte-provider-root {
+  width: 100%;
+  height: 100%;
+}
+
+/* ─── Default theme variables ──────────────────────────────────── */
+/* References shadcn variable names so the chrome inherits from any
+   host page that defines --background, --foreground, --card, etc.
+   Fallback values are Drafting Teal light defaults. */
+[data-fcte-root] {
+  --fcte-bg: var(--background, #F4F7F8);
+  --fcte-surface: var(--card, #FFFFFF);
+  --fcte-surface-hover: var(--accent, #EDF3F2);
+  --fcte-text: var(--foreground, #12222A);
+  --fcte-text-muted: var(--muted-foreground, #6A7B85);
+  --fcte-text-dim: var(--muted-foreground, #96A5AD);
+  --fcte-border: var(--border, #DCE4E8);
+  --fcte-border-strong: var(--border, #B9D1CF);
+  --fcte-input-bg: var(--card, #FAFCFC);
+  --fcte-accent: var(--primary, #1F6B6E);
+  --fcte-accent-text: var(--primary-foreground, #FFFFFF);
+}
+
+/* ─── Root element ──────────────────────────────────────────────── */
+.fcte-root {
+  display: flex;
+  flex-direction: column;
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 13px;
+  color: var(--fcte-text);
+  background: var(--fcte-bg);
+  overflow: hidden;
+}
+
+/* ─── Toolbar ───────────────────────────────────────────────────── */
+.fcte-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--fcte-border);
+  background: var(--fcte-surface);
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.fcte-toolbar__left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.fcte-toolbar__right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.fcte-toolbar__title {
+  font-weight: 600;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.fcte-toolbar__preset {
+  padding: 4px 8px;
+  border-radius: 0;
+  border: 1px solid var(--fcte-border-strong);
+  background: var(--fcte-input-bg);
+  color: var(--fcte-text);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+/* ─── Buttons ───────────────────────────────────────────────────── */
+.fcte-btn {
+  padding: 5px 12px;
+  border-radius: 0;
+  border: none;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.fcte-btn--primary {
+  background: var(--fcte-accent);
+  color: var(--fcte-accent-text);
+}
+
+.fcte-btn--primary:hover {
+  opacity: 0.9;
+}
+
+.fcte-btn--secondary {
+  background: var(--fcte-input-bg);
+  color: var(--fcte-text);
+  border: 1px solid var(--fcte-border-strong);
+}
+
+.fcte-btn--secondary:hover {
+  background: var(--fcte-surface-hover);
+}
+
+.fcte-btn--sm {
+  padding: 3px 8px;
+  font-size: 11px;
+}
+
+/* ─── Body split ────────────────────────────────────────────────── */
+.fcte-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* ─── Editor panel ──────────────────────────────────────────────── */
+.fcte-editor {
+  width: 320px;
+  min-width: 280px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--fcte-border);
+  background: var(--fcte-surface);
+  overflow: hidden;
+}
+
+/* ─── Section selector dropdown ─────────────────────────────────── */
+.fcte-section-select {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--fcte-border);
+  flex-shrink: 0;
+}
+
+.fcte-section-select .fcte-field__select {
+  font-weight: 600;
+  font-size: 13px;
+}
+
+/* ─── Fields area ───────────────────────────────────────────────── */
+.fcte-fields {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* ─── Individual field ──────────────────────────────────────────── */
+.fcte-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.fcte-field__label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--fcte-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.fcte-field__color-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.fcte-field__swatch {
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--fcte-border-strong);
+  border-radius: 0;
+  padding: 0;
+  cursor: pointer;
+  background: none;
+  flex-shrink: 0;
+}
+
+.fcte-field__swatch::-webkit-color-swatch-wrapper {
+  padding: 2px;
+}
+
+.fcte-field__swatch::-webkit-color-swatch {
+  border: none;
+  border-radius: 0;
+}
+
+.fcte-field__text,
+.fcte-field__select,
+.fcte-field__number {
+  padding: 5px 8px;
+  border-radius: 0;
+  border: 1px solid var(--fcte-border-strong);
+  background: var(--fcte-input-bg);
+  color: var(--fcte-text);
+  font-size: 12px;
+  font-family: inherit;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.fcte-field__text:focus,
+.fcte-field__select:focus,
+.fcte-field__number:focus {
+  outline: none;
+  border-color: var(--fcte-accent);
+}
+
+.fcte-field__number-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.fcte-field__number-row .fcte-field__number {
+  width: 80px;
+  flex-shrink: 0;
+}
+
+.fcte-field__suffix {
+  font-size: 11px;
+  color: var(--fcte-text-dim);
+}
+
+/* ─── Preview panel ─────────────────────────────────────────────── */
+.fcte-preview {
+  flex: 1;
+  overflow: auto;
+  background: var(--fcte-bg);
+}
+
+.fcte-preview__inner {
+  padding: 24px;
+  min-height: 100%;
+}
+
+/* ─── Palette Generator ─────────────────────────────────────────── */
+.fcte-palette {
+  border-bottom: 1px solid var(--fcte-border);
+  background: var(--fcte-surface);
+}
+
+.fcte-palette__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--fcte-border);
+}
+
+.fcte-palette__title {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.fcte-palette__body {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.fcte-palette__picker {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.fcte-palette__label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--fcte-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.fcte-palette__input-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.fcte-palette__input-row .fcte-field__text {
+  width: 120px;
+}
+
+.fcte-palette__swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.fcte-palette__swatch {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  width: 56px;
+}
+
+.fcte-palette__swatch-color {
+  width: 40px;
+  height: 28px;
+  border-radius: 0;
+  border: 1px solid var(--fcte-border-strong);
+}
+
+.fcte-palette__swatch-label {
+  font-size: 10px;
+  color: var(--fcte-text-muted);
+  text-align: center;
+}
+
+.fcte-palette__swatch-hex {
+  font-size: 9px;
+  color: var(--fcte-text-dim);
+  font-family: monospace;
+}
+
+/* ─── Theme Comparison ──────────────────────────────────────────── */
+.fcte-compare {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.fcte-compare__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--fcte-border);
+  background: var(--fcte-surface);
+  flex-shrink: 0;
+}
+
+.fcte-compare__title {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.fcte-compare__controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.fcte-compare__label {
+  font-size: 11px;
+  color: var(--fcte-text-muted);
+}
+
+.fcte-compare__diffs {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--fcte-border);
+  background: var(--fcte-surface);
+  flex-shrink: 0;
+}
+
+.fcte-compare__diff-count {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--fcte-text-muted);
+  display: block;
+  margin-bottom: 6px;
+}
+
+.fcte-compare__diff-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.fcte-compare__diff-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  border-radius: 0;
+  background: var(--fcte-input-bg);
+  border: 1px solid var(--fcte-border);
+  font-size: 10px;
+}
+
+.fcte-compare__diff-label {
+  color: var(--fcte-text-muted);
+  font-size: 10px;
+}
+
+.fcte-compare__diff-swatches {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.fcte-compare__diff-swatch {
+  width: 14px;
+  height: 14px;
+  border-radius: 0;
+  border: 1px solid var(--fcte-border-strong);
+}
+
+.fcte-compare__diff-arrow {
+  font-size: 9px;
+  color: var(--fcte-text-dim);
+}
+
+.fcte-compare__diff-more {
+  font-size: 10px;
+  color: var(--fcte-text-dim);
+  align-self: center;
+}
+
+.fcte-compare__panels {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.fcte-compare__panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.fcte-compare__panel + .fcte-compare__panel {
+  border-left: 1px solid var(--fcte-border);
+}
+
+.fcte-compare__panel-label {
+  padding: 6px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--fcte-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  border-bottom: 1px solid var(--fcte-border);
+  background: var(--fcte-surface);
+  flex-shrink: 0;
+}
+
+.fcte-compare__panel-preview {
+  flex: 1;
+  overflow: auto;
+  padding: 16px;
+}