Verso/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss

// Verso Lumière — editor chrome overrides.
// Scoped to body[data-lumiere='true'] — zero impact on Classic themes.

$lum-teal:   #2a9d8f;
$lum-blue:   #3d7ebf;
$lum-border: #daeae7;

// Same noise as the dashboard
$lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");

// ── CSS variable overrides ─────────────────────────────────────────────────

[data-lumiere='true'] {
  // Toolbar
  --redesign-toolbar-background:                   #f4fbf9;
  --redesign-toolbar-border-divider:               #{$lum-border};
  --redesign-toolbar-home-button-hover-background: rgba(42, 157, 143, 0.12);
  --redesign-subdued-button-hover-background:      rgba(42, 157, 143, 0.12);
  --redesign-subdued-button-color:                 #1a2e3b;

  // Rail icon strip
  --ide-rail-background:              #e8f5f2;
  --ide-rail-border-colour:           #{$lum-border};
  --ide-rail-color:                   #2d5a52;
  --ide-rail-link-background:         transparent;
  --ide-rail-link-hover-background:   rgba(42, 157, 143, 0.15);
  --ide-rail-link-hover-color:        #{$lum-teal};
  --ide-rail-link-active-color:       #ffffff;
  --ide-rail-link-active-background:  #{$lum-teal};
  --ide-rail-header-subdued-button-color: #2d5a52;
  --ide-rail-header-subdued-button-hover-background: rgba(42, 157, 143, 0.15);

  // File tree
  --file-tree-bg:                      #f4fbf9;
  --file-tree-item-color:              #1a2e3b;
  --file-tree-icon-colour:             #2a9d8f;
  --file-tree-expand-button-color:     #1a2e3b;
  --file-tree-item-hover-bg:           rgba(42, 157, 143, 0.10);
  --file-tree-item-selected-bg:        rgba(42, 157, 143, 0.20);
  --file-tree-item-selected-color:     #1a5c52;

  // Compile/recompile button: teal instead of blue
  --bg-accent-01: #{$lum-teal};
  --bg-accent-02: #{$lum-teal};
  --bg-accent-03: rgba(42, 157, 143, 0.15);
}

// ── Toolbar — gradient background + accent stripe ──────────────────────────

[data-lumiere='true'] .ide-redesign-toolbar {
  position: relative;
  // Subtle teal wash that fades to near-white — visible but not loud
  background: linear-gradient(180deg, #d8f0eb 0%, #f4fbf9 100%) !important;
  border-bottom: 1px solid $lum-border;
  box-shadow: 0 2px 10px rgba(42, 157, 143, 0.10);

  // 4px teal→blue gradient stripe at the very top
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, $lum-teal 0%, $lum-blue 100%);
    pointer-events: none;
  }
}

// ── Rail icon strip — grainy teal-tinted background ────────────────────────

[data-lumiere='true'] .ide-rail {
  background: linear-gradient(180deg, #cceee8 0%, #daf2ee 100%);
  border-right-color: $lum-border;
}

// Active tab bottom indicator: white dot on teal background
[data-lumiere='true'] .ide-rail-tab-link.open-rail::after {
  background-color: rgba(255, 255, 255, 0.8);
}

// ── Rail panel (file tree / outline / search) — grainy gradient ───────────

[data-lumiere='true'] .file-tree-outline-panel-group {
  background-image:
    #{$lum-noise},
    radial-gradient(ellipse 100% 60% at 100% 0%, rgba($lum-teal, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at   0% 95%, rgba($lum-blue, 0.18) 0%, transparent 55%);
  background-size:  200px 200px, cover, cover;
  background-repeat: repeat, no-repeat, no-repeat;
  background-color: #f4fbf9;
}

// Panel header bar inside rail panels
[data-lumiere='true'] .rail-panel-header {
  background: linear-gradient(90deg, rgba($lum-teal, 0.12) 0%, transparent 80%);
  border-bottom: 1px solid $lum-border;
}

[data-lumiere='true'] .rail-panel-title {
  color: #1a5c52;
}

// File tree toolbar row
[data-lumiere='true'] .file-tree-toolbar {
  border-bottom: 1px solid rgba($lum-teal, 0.15);
}

// ── CodeMirror toolbar buttons — rounded square style ─────────────────────

[data-lumiere='true'] .ol-cm-toolbar {
  // Source editor formatting buttons (Bold, Italic, Link, etc.)
  .ol-cm-toolbar-button {
    border-radius: 7px !important;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;

    &:hover:not(:disabled) {
      background-color: rgba(42, 157, 143, 0.10) !important;
      color: $lum-teal !important;
    }

    &.active,
    &[aria-pressed='true'] {
      background-color: rgba(42, 157, 143, 0.18) !important;
      color: $lum-teal !important;
    }
  }

  // Toolbar group dividers
  .ol-cm-toolbar-button-group {
    gap: 2px;
  }
}

// ── Compile button — teal gradient ────────────────────────────────────────
// .compile-button-group wraps the Recompile button in the toolbar actions

[data-lumiere='true'] .compile-button-group {
  .btn-primary {
    background: linear-gradient(135deg, $lum-teal 0%, darken($lum-teal, 8%) 100%) !important;
    border-color: darken($lum-teal, 10%) !important;
    box-shadow: 0 2px 8px rgba($lum-teal, 0.35) !important;

    &:hover,
    &:focus {
      background: linear-gradient(135deg, lighten($lum-teal, 4%) 0%, $lum-teal 100%) !important;
      box-shadow: 0 4px 14px rgba($lum-teal, 0.45) !important;
    }
  }
}