alois/Verso
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(lumiere): bold background + creative editor theme
Build and Deploy Verso / deploy (push) Successful in 14m43s
Details

Browse Source 
Dashboard:
- Grain opacity 0.12→0.28, teal orb 0.22→0.45, blue orb 0.16→0.32
- Added soft centre glow for depth; tinted base colour #f0f7f5

Editor:
- Toolbar: visible teal-wash gradient (dark→light) + 4px accent stripe
  + teal box-shadow
- Rail icon strip: teal-tinted gradient (#cceee8→#daf2ee)
- File tree / outline panel: full grainy gradient (matching dashboard)
  with teal/blue orbs + panel header with teal left-glow
- Compile button: teal gradient replacing the default blue

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
claude
2026-06-11 13:40:40 +00:00
parent a0d1829c1b
commit 074ff2791d
2 changed files with 91 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
+80 -34
View File
@@ -1,78 +1,124 @@
// Verso Lumière — editor chrome overrides.
// Scoped to body[data-lumiere='true'] so zero impact on Classic themes.
// Sets CSS variable overrides and adds the signature teal/blue accent stripe.
// Scoped to body[data-lumiere='true'] — zero impact on Classic themes.
$lum-teal: #2a9d8f;
$lum-blue: #3d7ebf;
$lum-border: #e2eaf2;
$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: #ffffff;
--redesign-toolbar-border-divider: #{$lum-border};
--redesign-toolbar-home-button-hover-background: rgba(#{$lum-teal}, 0.08);
--redesign-subdued-button-hover-background: rgba(42, 157, 143, 0.08);
--redesign-subdued-button-color: #1a2e3b;
--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
--ide-rail-background: #ffffff;
// Rail icon strip
--ide-rail-background: #e8f5f2;
--ide-rail-border-colour: #{$lum-border};
--ide-rail-color: #1a2e3b;
--ide-rail-link-background: #ffffff;
--ide-rail-link-hover-background: rgba(42, 157, 143, 0.08);
--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: #1a2e3b;
--ide-rail-header-subdued-button-hover-background: rgba(42, 157, 143, 0.08);
--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: #ffffff;
--file-tree-bg: #f4fbf9;
--file-tree-item-color: #1a2e3b;
--file-tree-icon-colour: #64748b;
--file-tree-item-hover-bg: rgba(42, 157, 143, 0.07);
--file-tree-item-selected-bg: rgba(42, 157, 143, 0.14);
--file-tree-item-selected-color: #{$lum-teal};
--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 accent stripe ──────────────────────────────────────
// ── Toolbar — gradient background + accent stripe ──────────────────────────
[data-lumiere='true'] .ide-redesign-toolbar {
position: relative;
border-bottom-color: $lum-border;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
// 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);
// 3px teal→blue stripe at the very top (same motif as the dashboard navbar)
// 4px teal→blue gradient stripe at the very top
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
height: 4px;
background: linear-gradient(90deg, $lum-teal 0%, $lum-blue 100%);
z-index: 1;
pointer-events: none;
}
}
// ── Rail — active tab indicator uses teal ─────────────────────────────────
// ── Rail icon strip — grainy teal-tinted background ────────────────────────
[data-lumiere='true'] .ide-rail-tab-link.open-rail::after {
background-color: #ffffff;
[data-lumiere='true'] .ide-rail {
background: linear-gradient(180deg, #cceee8 0%, #daf2ee 100%);
border-right-color: $lum-border;
}
// ── Rail panel headers ─────────────────────────────────────────────────────
// 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: #1a2e3b;
color: #1a5c52;
}
// ── File tree toolbar ──────────────────────────────────────────────────────
// File tree toolbar row
[data-lumiere='true'] .file-tree-toolbar {
border-bottom-color: $lum-border;
border-bottom: 1px solid rgba($lum-teal, 0.15);
}
// ── 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;
}
}
}
services/web/frontend/stylesheets/pages/project-list-lumiere.scss
+11 -8
View File
@@ -14,8 +14,7 @@ $lum-text-muted: #94a3b8;
$lum-border: #e2eaf2;
// Grainy SVG noise tile (fractalNoise, greyscale, stitched for seamless tiling).
// The rect opacity (0.12) controls grain intensity — lower for subtlety.
$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.12'/%3E%3C/svg%3E");
$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.28'/%3E%3C/svg%3E");
.project-list-lumiere {
@@ -225,21 +224,25 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
.project-ds-nav-content {
background-image:
#{$lum-noise},
radial-gradient(ellipse 80% 60% at 88% 0%, rgba($lum-teal, 0.22) 0%, transparent 60%),
radial-gradient(ellipse 70% 55% at 4% 98%, rgba($lum-blue, 0.16) 0%, transparent 55%);
radial-gradient(ellipse 90% 70% at 95% -5%, rgba($lum-teal, 0.45) 0%, transparent 55%),
radial-gradient(ellipse 80% 60% at -5% 105%, rgba($lum-blue, 0.32) 0%, transparent 55%),
radial-gradient(ellipse 60% 50% at 50% 50%, rgba($lum-teal, 0.06) 0%, transparent 70%);
background-size:
200px 200px,
cover,
cover,
cover;
background-repeat:
repeat,
no-repeat,
no-repeat,
no-repeat;
background-attachment:
scroll, // grain tiles with scroll — seamless
fixed, // teal orb stays pinned to viewport corner
fixed; // blue orb stays pinned to viewport corner
background-color: #fafbff;
scroll,
fixed,
fixed,
fixed;
background-color: #f0f7f5;
}
// ── Page header ────────────────────────────────────────────────────────────