From ffacd7f4c31294a8e99b92d997f5febe85676c1b Mon Sep 17 00:00:00 2001 From: liannacasper <67953602+liannacasper@users.noreply.github.com> Date: Wed, 15 Apr 2026 18:25:27 +0300 Subject: [PATCH] Align cn1playground light/dark themes with design language --- .../common/src/main/css/theme.css | 250 +++++++++--------- .../src/html/playground-editor/editor.js | 38 ++- .../src/html/playground-editor/index.html | 28 +- 3 files changed, 176 insertions(+), 140 deletions(-) diff --git a/scripts/cn1playground/common/src/main/css/theme.css b/scripts/cn1playground/common/src/main/css/theme.css index 0f52d5107e..53c30f0afc 100644 --- a/scripts/cn1playground/common/src/main/css/theme.css +++ b/scripts/cn1playground/common/src/main/css/theme.css @@ -19,59 +19,59 @@ Title { } TitleArea { - background: #e5e7eb; + background: #F3F4F7; } PlaygroundForm, PlaygroundContent { - background: #f5f7fb; + background: #F7F8FB; } PlaygroundFormDark, PlaygroundContentDark { - background: #111827; + background: #071B4D; } PlaygroundToolbar { - background: #e5e7eb; + background: #F3F4F7; padding: 1mm 2mm 1mm 2mm; } PlaygroundToolbarDark { - background: #111827; + background: #102B66; padding: 1mm 2mm 1mm 2mm; } PlaygroundTitle { - color: #111827; - background: #e5e7eb; + color: #112247; + background: #F3F4F7; font-family: "native:MainLight"; font-size: 6mm; } PlaygroundTitleDark { - color: #f8fafc; - background: #111827; + color: #F5F8FF; + background: #102B66; font-family: "native:MainLight"; font-size: 6mm; } PlaygroundPanel { - background: white; + background: #FFFFFF; margin: 1mm; padding: 1mm; } PlaygroundPanelDark { - background: #1f2937; + background: #102B66; margin: 1mm; padding: 1mm; } PlaygroundPreview { - background: white; + background: #FFFFFF; } PlaygroundPreviewDark { - background: #0f172a; + background: #112F70; } /** Style for Dialog body */ @@ -88,12 +88,12 @@ DialogTitle { /** Style for the side menu */ SideNavigationPanel { - background: white; + background: #FFFFFF; padding: 2mm 1mm 1mm 1mm; } SideNavigationPanelDark { - background: #0f172a; + background: #071B4D; padding: 2mm 1mm 1mm 1mm; } @@ -114,19 +114,19 @@ SideCommand { border: none; text-decoration: none; color: black; - background: white; + background: #FFFFFF; font-family: "native:MainLight"; font-size: 4mm; - border-bottom: 2px solid #cccccc; + border-bottom: 2px solid #D9DEE8; } StatusBarSideMenu { - background: white; + background: #FFFFFF; padding: 0mm; } StatusBarSideMenuDark { - background: #0f172a; + background: #071B4D; padding: 0mm; } @@ -134,34 +134,34 @@ PlaygroundSideCommand { padding: 1mm; border: none; text-decoration: none; - color: #111827; - background: white; + color: #112247; + background: #FFFFFF; font-family: "native:MainLight"; font-size: 4mm; - border-bottom: 2px solid #cccccc; + border-bottom: 2px solid #D9DEE8; } PlaygroundSideCommandDark { - color: #e5e7eb; - background: #0f172a; - border-bottom: 2px solid #1f2937; + color: #F5F8FF; + background: #071B4D; + border-bottom: 2px solid #102B66; } PlaygroundMenuSection { padding: 2mm 1mm 0.5mm 1mm; margin: 1mm 0 0 0; border: none; - border-bottom: 1px solid #d1d5db; - background: white; + border-bottom: 1px solid #D9DEE8; + background: #FFFFFF; } PlaygroundMenuSectionDark { - border-bottom: 1px solid #334155; - background: #0f172a; + border-bottom: 1px solid #4C6EA8; + background: #071B4D; } PlaygroundMenuSectionTitle { - color: #6b7280; + color: #7F8AA3; font-family: "native:MainBold"; font-size: 2.6mm; text-decoration: none; @@ -169,138 +169,138 @@ PlaygroundMenuSectionTitle { } PlaygroundMenuSectionTitleDark { - color: #94a3b8; + color: #A8B8DA; } PlaygroundMenuEmpty { - color: #6b7280; + color: #7F8AA3; font-family: "native:MainLight"; font-size: 3mm; padding: 1mm; } PlaygroundMenuEmptyDark { - color: #94a3b8; - background: #0f172a; + color: #A8B8DA; + background: #071B4D; } PlaygroundMenuContainer { - background: white; + background: #FFFFFF; } PlaygroundMenuContainerDark { - background: #0f172a; + background: #071B4D; } @media (prefers-color-scheme: dark) { SideNavigationPanel { - background: #0f172a; + background: #071B4D; } SideNavigationPanelDark { - background: #0f172a; + background: #071B4D; } SideCommand { - color: #e5e7eb; - background: #0f172a; - border-bottom: 2px solid #1f2937; + color: #F5F8FF; + background: #071B4D; + border-bottom: 2px solid #102B66; } StatusBarSideMenu { - background: #0f172a; + background: #071B4D; } StatusBarSideMenuDark { - background: #0f172a; + background: #071B4D; } PlaygroundSideCommand { - color: #e5e7eb; - background: #0f172a; - border-bottom: 2px solid #1f2937; + color: #F5F8FF; + background: #071B4D; + border-bottom: 2px solid #102B66; } PlaygroundSideCommandDark { - color: #e5e7eb; - background: #0f172a; - border-bottom: 2px solid #1f2937; + color: #F5F8FF; + background: #071B4D; + border-bottom: 2px solid #102B66; } PlaygroundSideCommandLine1 { - color: #f8fafc; + color: #F5F8FF; } PlaygroundSideCommandLine2 { - color: #94a3b8; + color: #A8B8DA; } PlaygroundMenuSection { - border-bottom: 1px solid #334155; - background: #0f172a; + border-bottom: 1px solid #4C6EA8; + background: #071B4D; } PlaygroundMenuSectionDark { - border-bottom: 1px solid #334155; - background: #0f172a; + border-bottom: 1px solid #4C6EA8; + background: #071B4D; } PlaygroundMenuSectionTitle { - color: #94a3b8; + color: #A8B8DA; } PlaygroundMenuSectionTitleDark { - color: #94a3b8; + color: #A8B8DA; } PlaygroundMenuEmpty { - color: #94a3b8; - background: #0f172a; + color: #A8B8DA; + background: #071B4D; } PlaygroundMenuEmptyDark { - color: #94a3b8; - background: #0f172a; + color: #A8B8DA; + background: #071B4D; } PlaygroundMenuContainer { - background: #0f172a; + background: #071B4D; } PlaygroundMenuContainerDark { - background: #0f172a; + background: #071B4D; } } PlaygroundEmbeddedForm { - background: #f5f7fb; + background: #F7F8FB; } PlaygroundEmbeddedFormDark { - background: #111827; + background: #112247; } PlaygroundEmbeddedTitleArea { - background: #e5e7eb; + background: #F3F4F7; } PlaygroundEmbeddedTitleAreaDark { - background: #1f2937; + background: #163575; } PlaygroundInspectorRoot { - background: white; + background: #FFFFFF; padding: 1mm; } PlaygroundInspectorRootDark { - background: #1f2937; + background: #102B66; padding: 1mm; } PlaygroundInspectorTree { - background: white; - color: #111827; + background: #FFFFFF; + color: #112247; margin: 0; padding: 0; } PlaygroundInspectorTreeDark { - background: #1f2937; - color: #e5e7eb; + background: #102B66; + color: #F5F8FF; margin: 0; padding: 0; } @@ -312,19 +312,19 @@ PlaygroundPropRow { } PlaygroundPropUnit { - color: #111827; - background: white; - border: 1px solid #d1d5db; + color: #112247; + background: #FFFFFF; + border: 1px solid #D9DEE8; } PlaygroundPropUnitDark { - color: #e5e7eb; - background: #111827; - border: 1px solid #334155; + color: #F5F8FF; + background: #0E2A61; + border: 1px solid #4C6EA8; } PlaygroundPropEmpty { - color: #6b7280; + color: #7F8AA3; background: transparent; font-family: "native:MainLight"; font-size: 3mm; @@ -332,7 +332,7 @@ PlaygroundPropEmpty { } PlaygroundPropEmptyDark { - color: #94a3b8; + color: #A8B8DA; background: transparent; font-family: "native:MainLight"; font-size: 3mm; @@ -340,20 +340,20 @@ PlaygroundPropEmptyDark { } PlaygroundColorPreview { - background: #ffffff; - border: 1px solid #d1d5db; + background: #FFFFFF; + border: 1px solid #D9DEE8; padding: 0.5mm 1mm 0.5mm 1mm; } PlaygroundColorPreviewDark { - background: #111827; - border: 1px solid #334155; + background: #0E2A61; + border: 1px solid #4C6EA8; padding: 0.5mm 1mm 0.5mm 1mm; } PlaygroundInspectorTreeNode { - color: #111827; - background: white; + color: #112247; + background: #FFFFFF; border: none; text-decoration: none; font-family: "native:MainLight"; @@ -363,8 +363,8 @@ PlaygroundInspectorTreeNode { } PlaygroundInspectorTreeNodeDark { - color: #e5e7eb; - background: #1f2937; + color: #F5F8FF; + background: #102B66; border: none; text-decoration: none; font-family: "native:MainLight"; @@ -374,92 +374,92 @@ PlaygroundInspectorTreeNodeDark { } Tab { - background: #e5e7eb; - color: #111827; - border: 1px solid #d1d5db; + background: #F3F4F7; + color: #112247; + border: 1px solid #D9DEE8; font-family: "native:MainLight"; font-size: 3mm; text-align: center; } PlaygroundEditorTabs { - background: #e5e7eb; + background: #F3F4F7; } PlaygroundEditorTabsDark { - background: #111827; + background: #112247; } TabDark { - background: #111827; - color: #e5e7eb; - border: 1px solid #334155; + background: #102B66; + color: #F5F8FF; + border: 1px solid #4C6EA8; font-family: "native:MainLight"; font-size: 3mm; text-align: center; } TabSelected { - background: #ffffff; - color: #111827; - border: 1px solid #94a3b8; + background: #FFFFFF; + color: #112247; + border: 2px solid #2F6BFF; } TabSelectedDark { - background: #1f2937; - color: #f8fafc; - border: 1px solid #64748b; + background: #163575; + color: #F5F8FF; + border: 2px solid #4D86FF; } TabsContainer { - background: #e5e7eb; + background: #F3F4F7; } TabsContainerDark { - background: #111827; + background: #112247; } PlaygroundSideCommandLine1 { - color: #111827; + color: #112247; background: transparent; font-family: "native:MainLight"; font-size: 4mm; } PlaygroundSideCommandLine1Dark { - color: #e5e7eb; + color: #F5F8FF; background: transparent; font-family: "native:MainLight"; font-size: 4mm; } PlaygroundSideCommandLine2 { - color: #6b7280; + color: #7F8AA3; background: transparent; font-family: "native:MainLight"; font-size: 2.6mm; } PlaygroundSideCommandLine2Dark { - color: #94a3b8; + color: #A8B8DA; background: transparent; font-family: "native:MainLight"; font-size: 2.6mm; } PlaygroundInspectorProps { - background: white; + background: #FFFFFF; padding: 1mm; margin: 0; } PlaygroundInspectorPropsDark { - background: #1f2937; + background: #102B66; padding: 1mm; margin: 0; } PlaygroundPropName { - color: #6b7280; + color: #7F8AA3; font-family: "native:MainBold"; font-size: 2.6mm; padding: 0.5mm 0mm 0.5mm 1.5mm; @@ -467,7 +467,7 @@ PlaygroundPropName { } PlaygroundPropNameDark { - color: #94a3b8; + color: #A8B8DA; font-family: "native:MainBold"; font-size: 2.6mm; padding: 0.5mm 0mm 0.5mm 1.5mm; @@ -475,9 +475,9 @@ PlaygroundPropNameDark { } PlaygroundPropValue { - color: #111827; - background: white; - border: 1px solid #d1d5db; + color: #112247; + background: #FFFFFF; + border: 1px solid #D9DEE8; font-family: "native:MainLight"; font-size: 2.8mm; padding: 0.5mm 1mm 0.5mm 1mm; @@ -485,9 +485,9 @@ PlaygroundPropValue { } PlaygroundPropValueDark { - color: #e5e7eb; - background: #111827; - border: 1px solid #334155; + color: #F5F8FF; + background: #0E2A61; + border: 1px solid #4C6EA8; font-family: "native:MainLight"; font-size: 2.8mm; padding: 0.5mm 1mm 0.5mm 1mm; @@ -495,9 +495,9 @@ PlaygroundPropValueDark { } PlaygroundPropSmall { - color: #111827; - background: white; - border: 1px solid #d1d5db; + color: #112247; + background: #FFFFFF; + border: 1px solid #D9DEE8; font-family: "native:MainLight"; font-size: 2.6mm; padding: 0.5mm; @@ -505,9 +505,9 @@ PlaygroundPropSmall { } PlaygroundPropSmallDark { - color: #e5e7eb; - background: #111827; - border: 1px solid #334155; + color: #F5F8FF; + background: #0E2A61; + border: 1px solid #4C6EA8; font-family: "native:MainLight"; font-size: 2.6mm; padding: 0.5mm; diff --git a/scripts/cn1playground/src/html/playground-editor/editor.js b/scripts/cn1playground/src/html/playground-editor/editor.js index 934a4dabf3..09036446f4 100644 --- a/scripts/cn1playground/src/html/playground-editor/editor.js +++ b/scripts/cn1playground/src/html/playground-editor/editor.js @@ -68,6 +68,7 @@ } function createEditor() { + registerMonacoThemes(); state.model = monaco.editor.createModel("", state.language || "java"); state.editor = monaco.editor.create(document.getElementById("editor"), { model: state.model, @@ -97,6 +98,41 @@ }); } + function registerMonacoThemes() { + monaco.editor.defineTheme("cn1-playground-light", { + base: "vs", + inherit: true, + rules: [], + colors: { + "editor.background": "#FAFAFC", + "editor.foreground": "#112247", + "editorLineNumber.foreground": "#7F8AA3", + "editorLineNumber.activeForeground": "#112247", + "editorCursor.foreground": "#2F6BFF", + "editor.selectionBackground": "#E8F0FF", + "editor.inactiveSelectionBackground": "#E8F0FFAA", + "editorIndentGuide.background1": "#D9DEE8", + "editorIndentGuide.activeBackground1": "#BFC7D6" + } + }); + monaco.editor.defineTheme("cn1-playground-dark", { + base: "vs-dark", + inherit: true, + rules: [], + colors: { + "editor.background": "#112F70", + "editor.foreground": "#F5F8FF", + "editorLineNumber.foreground": "#A8B8DA", + "editorLineNumber.activeForeground": "#F5F8FF", + "editorCursor.foreground": "#4D86FF", + "editor.selectionBackground": "#4D86FF33", + "editor.inactiveSelectionBackground": "#4D86FF22", + "editorIndentGuide.background1": "#4C6EA8", + "editorIndentGuide.activeBackground1": "#7390C0" + } + }); + } + function registerCompletionProviders() { monaco.languages.registerCompletionItemProvider("java", { triggerCharacters: [".", "(", ",", " "], @@ -791,7 +827,7 @@ if (!state.monacoReady) { return; } - monaco.editor.setTheme(state.dark ? "vs-dark" : "vs"); + monaco.editor.setTheme(state.dark ? "cn1-playground-dark" : "cn1-playground-light"); renderInlineMessages(); } diff --git a/scripts/cn1playground/src/html/playground-editor/index.html b/scripts/cn1playground/src/html/playground-editor/index.html index dcfd120888..74b8accb37 100644 --- a/scripts/cn1playground/src/html/playground-editor/index.html +++ b/scripts/cn1playground/src/html/playground-editor/index.html @@ -11,23 +11,23 @@ width: 100%; height: 100%; overflow: hidden; - background: #ffffff; + background: #F7F8FB; } body { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", monospace; + font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .playground-zone { box-sizing: border-box; padding: 8px 12px 10px; - border-top: 1px solid rgba(148, 163, 184, 0.25); - background: rgba(241, 245, 249, 0.95); + border-top: 1px solid #D9DEE8; + background: #FAFAFC; font: 12px/1.45 Menlo, Monaco, Consolas, "Liberation Mono", monospace; - color: #0f172a; + color: #112247; } .playground-zone.dark { - background: rgba(15, 23, 42, 0.92); - color: #e2e8f0; - border-top-color: rgba(148, 163, 184, 0.2); + background: #112F70; + color: #F5F8FF; + border-top-color: #4C6EA8; } .playground-zone-row { margin-top: 4px; @@ -35,12 +35,12 @@ .playground-zone-row:first-child { margin-top: 0; } - .playground-zone-row.kind-error { color: #b91c1c; } - .playground-zone-row.kind-warning { color: #b45309; } - .playground-zone-row.kind-success { color: #047857; } - .playground-zone.dark .playground-zone-row.kind-error { color: #fca5a5; } - .playground-zone.dark .playground-zone-row.kind-warning { color: #fcd34d; } - .playground-zone.dark .playground-zone-row.kind-success { color: #6ee7b7; } + .playground-zone-row.kind-error { color: #B42318; } + .playground-zone-row.kind-warning { color: #B54708; } + .playground-zone-row.kind-success { color: #2F6BFF; } + .playground-zone.dark .playground-zone-row.kind-error { color: #FDB0AC; } + .playground-zone.dark .playground-zone-row.kind-warning { color: #F7B27A; } + .playground-zone.dark .playground-zone-row.kind-success { color: #4D86FF; }