initial ux ui improvements and revised dashboard

2026-01-12 07:12:54 +01:00 · 2025-12-31 09:34:27 +01:00
parent ae7d3b8a8b
commit 73b5a42122
109 changed files with 13583 additions and 1111 deletions
--- a/packages/noodl-editor/src/editor/index.ts
+++ b/packages/noodl-editor/src/editor/index.ts
@@ -16,6 +16,7 @@ import { ProjectModel } from './src/models/projectmodel';
 import '../editor/src/styles/custom-properties/animations.css';
 import '../editor/src/styles/custom-properties/fonts.css';
 import '../editor/src/styles/custom-properties/colors.css';
+import '../editor/src/styles/custom-properties/spacing.css';

 import Router from './src/router';

--- a/packages/noodl-editor/src/editor/src/models/BackendServices/BackendServices.ts
+++ b/packages/noodl-editor/src/editor/src/models/BackendServices/BackendServices.ts
@@ -489,9 +489,15 @@ export class BackendServices extends Model<BackendServicesEvent, BackendServices
      field: string;
      type: string;
      schema?: { is_nullable?: boolean; is_primary_key?: boolean; is_unique?: boolean; default_value?: unknown };
-      meta?: { options?: { choices?: Array<{ value: string }> }; special?: string[] };
+      meta?: {
+        options?: { choices?: Array<{ value: string }> };
+        special?: string[];
+        interface?: string;
+        hidden?: boolean;
+      };
    }>) {
-      if (!field.collection || field.collection.startsWith('directus_')) continue;
+      // Only skip if collection name is missing - include system tables (directus_*)
+      if (!field.collection) continue;

      if (!collectionMap.has(field.collection)) {
        collectionMap.set(field.collection, {
--- a/packages/noodl-editor/src/editor/src/pages/ProjectsPage/ProjectsPage.tsx
+++ b/packages/noodl-editor/src/editor/src/pages/ProjectsPage/ProjectsPage.tsx
@@ -1,116 +1,206 @@
-import { ipcRenderer } from 'electron';
-import React, { useEffect, useState } from 'react';
-import { platform } from '@noodl/platform';
+/**
+ * ProjectsPage - Entry point for the launcher dashboard
+ *
+ * This page displays the new React-based Launcher component
+ * with horizontal tab navigation.
+ */

-import { ProjectModel } from '@noodl-models/projectmodel';
-import getDocsEndpoint from '@noodl-utils/getDocsEndpoint';
-import { LocalProjectsModel } from '@noodl-utils/LocalProjectsModel';
+import { ipcRenderer, shell } from 'electron';
+import React, { useCallback, useEffect } from 'react';
+import { filesystem } from '@noodl/platform';

-import { Logo, LogoSize } from '@noodl-core-ui/components/common/Logo';
-import { TextButton } from '@noodl-core-ui/components/inputs/TextButton';
-import { HStack } from '@noodl-core-ui/components/layout/Stack';
+import { Launcher } from '@noodl-core-ui/preview/launcher/Launcher/Launcher';

-import { EventDispatcher } from '../../../../shared/utils/EventDispatcher';
 import { IRouteProps } from '../../pages/AppRoute';
-import { Frame } from '../../views/common/Frame';
-import { ProjectsView } from '../../views/projectsview';
-import { BaseWindow } from '../../views/windows/BaseWindow';
+import { LocalProjectsModel } from '../../utils/LocalProjectsModel';
+import { ToastLayer } from '../../views/ToastLayer/ToastLayer';

 export interface ProjectsPageProps extends IRouteProps {
  from: TSFixme;
 }

-export function ProjectsPage({ route, from }: ProjectsPageProps) {
-  const [view, setView] = useState<ProjectsView>(null);
-  const [showSpinner, setShowSpinner] = useState(false);
-
+export function ProjectsPage(props: ProjectsPageProps) {
  useEffect(() => {
-    const eventGroup = {};
-
-    // Switch main window size
+    // Switch main window size to editor size
    ipcRenderer.send('main-window-resize', { size: 'editor', center: true });
+  }, []);

-    const instance = new ProjectsView({ from });
-    instance.render();
+  const handleCreateProject = useCallback(async () => {
+    try {
+      const direntry = await filesystem.openDialog({
+        allowCreateDirectory: true
+      });
+      if (!direntry) return;

-    setView(instance);
+      // For now, use a simple prompt for project name
+      // TODO: Replace with a proper React dialog in future
+      const name = prompt('Project name:');
+      if (!name) return;

-    instance.on(
-      'projectLoaded',
-      (project: ProjectModel) => {
-        LocalProjectsModel.instance.setCurrentGlobalGitAuth(project.id);
-        route.router.route({ to: 'editor', project });
-      },
-      eventGroup
-    );
+      const path = filesystem.makeUniquePath(filesystem.join(direntry, name));

-    EventDispatcher.instance.on(
-      'importFromUrl',
-      (url: string) => {
-        instance.importFromUrl(url);
-      },
-      eventGroup
-    );
+      const activityId = 'creating-project';
+      ToastLayer.showActivity('Creating new project', activityId);

-    return function () {
-      EventDispatcher.instance.off(eventGroup);
-      instance?.off(eventGroup);
-      instance?.dispose();
-    };
+      LocalProjectsModel.instance.newProject(
+        (project) => {
+          ToastLayer.hideActivity(activityId);
+          if (!project) {
+            ToastLayer.showError('Could not create project');
+            return;
+          }
+          // Navigate to editor with the newly created project
+          props.route.router.route({ to: 'editor', project });
+        },
+        { name, path, projectTemplate: '' }
+      );
+    } catch (error) {
+      console.error('Failed to create project:', error);
+      ToastLayer.showError('Failed to create project');
+    }
+  }, [props.route]);
+
+  const handleOpenProject = useCallback(async () => {
+    console.log('🔵 [handleOpenProject] Starting...');
+    try {
+      console.log('🔵 [handleOpenProject] Opening file dialog...');
+      const direntry = await filesystem.openDialog({
+        allowCreateDirectory: false
+      });
+      console.log('🔵 [handleOpenProject] Selected folder:', direntry);
+
+      if (!direntry) {
+        console.log('🔵 [handleOpenProject] User cancelled');
+        return;
+      }
+
+      const activityId = 'opening-project';
+      console.log('🔵 [handleOpenProject] Showing activity toast');
+      ToastLayer.showActivity('Opening project', activityId);
+
+      console.log('🔵 [handleOpenProject] Calling openProjectFromFolder...');
+      // openProjectFromFolder adds the project to recent list and returns ProjectModel
+      const project = await LocalProjectsModel.instance.openProjectFromFolder(direntry);
+      console.log('🔵 [handleOpenProject] Got project:', project);
+
+      if (!project) {
+        console.log('🔴 [handleOpenProject] Project is null/undefined');
+        ToastLayer.hideActivity(activityId);
+        ToastLayer.showError('Could not open project');
+        return;
+      }
+
+      if (!project.name) {
+        console.log('🔵 [handleOpenProject] Setting project name from folder');
+        project.name = filesystem.basename(direntry);
+      }
+
+      console.log('🔵 [handleOpenProject] Getting projects list...');
+      // Now we need to find the project entry that was just added and load it
+      const projects = LocalProjectsModel.instance.getProjects();
+      console.log('🔵 [handleOpenProject] Projects in list:', projects.length);
+
+      const projectEntry = projects.find((p) => p.id === project.id);
+      console.log('🔵 [handleOpenProject] Found project entry:', projectEntry);
+
+      if (!projectEntry) {
+        console.log('🔴 [handleOpenProject] Project entry not found in list');
+        ToastLayer.hideActivity(activityId);
+        ToastLayer.showError('Could not find project in recent list');
+        console.error('Project was added but not found in list:', project.id);
+        return;
+      }
+
+      console.log('🔵 [handleOpenProject] Loading project...');
+      // Actually load/open the project
+      const loaded = await LocalProjectsModel.instance.loadProject(projectEntry);
+      console.log('🔵 [handleOpenProject] Project loaded:', loaded);
+
+      ToastLayer.hideActivity(activityId);
+
+      if (!loaded) {
+        console.log('🔴 [handleOpenProject] Load result is falsy');
+        ToastLayer.showError('Could not load project');
+      } else {
+        console.log('✅ [handleOpenProject] Success! Navigating to editor...');
+        // Navigate to editor with the loaded project
+        props.route.router.route({ to: 'editor', project: loaded });
+      }
+    } catch (error) {
+      console.error('🔴 [handleOpenProject] EXCEPTION:', error);
+      ToastLayer.hideActivity('opening-project');
+      console.error('Failed to open project:', error);
+      ToastLayer.showError('Could not open project');
+    }
+  }, [props.route]);
+
+  const handleLaunchProject = useCallback(
+    async (projectId: string) => {
+      const projects = LocalProjectsModel.instance.getProjects();
+      const project = projects.find((p) => p.id === projectId);
+      if (!project) return;
+
+      const activityId = 'launching-project';
+      ToastLayer.showActivity('Opening project', activityId);
+
+      try {
+        const loaded = await LocalProjectsModel.instance.loadProject(project);
+        ToastLayer.hideActivity(activityId);
+
+        if (!loaded) {
+          ToastLayer.showError('Could not load project');
+        } else {
+          // Navigate to editor with the loaded project
+          props.route.router.route({ to: 'editor', project: loaded });
+        }
+      } catch (error) {
+        ToastLayer.hideActivity(activityId);
+        console.error('Failed to launch project:', error);
+        ToastLayer.showError('Could not load project');
+      }
+    },
+    [props.route]
+  );
+
+  const handleOpenProjectFolder = useCallback(async (projectId: string) => {
+    const projects = LocalProjectsModel.instance.getProjects();
+    const project = projects.find((p) => p.id === projectId);
+    if (!project || !project.retainedProjectDirectory) {
+      ToastLayer.showError('Project folder not found');
+      return;
+    }
+
+    try {
+      shell.showItemInFolder(project.retainedProjectDirectory);
+    } catch (error) {
+      console.error('Failed to open project folder:', error);
+      ToastLayer.showError('Could not open project folder');
+    }
+  }, []);
+
+  const handleDeleteProject = useCallback((projectId: string) => {
+    const projects = LocalProjectsModel.instance.getProjects();
+    const project = projects.find((p) => p.id === projectId);
+    if (!project) return;
+
+    // Confirm deletion
+    if (
+      confirm(
+        `Remove project "${project.name}" from the list?\n\nNote: The project folder will remain on disk and can be opened again later.`
+      )
+    ) {
+      LocalProjectsModel.instance.removeProject(projectId);
+      ToastLayer.showSuccess('Project removed from list');
+    }
  }, []);

  return (
-    <BaseWindow title="">
-      <TopBar showSpinner={showSpinner} setShowSpinner={setShowSpinner} />
-      <div style={{ position: 'relative', flex: 1 }}>
-        <Frame instance={view} isAbsolute />
-        {showSpinner && (
-          <div
-            className="spinner page-spinner"
-            style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
-          >
-            <div className="bounce1"></div>
-            <div className="bounce2"></div>
-            <div className="bounce3"></div>
-          </div>
-        )}
-      </div>
-    </BaseWindow>
-  );
-}
-
-interface TopBarProps {
-  showSpinner: boolean;
-  setShowSpinner: (value: boolean) => void;
-}
-
-function TopBar({ showSpinner, setShowSpinner }: TopBarProps) {
-  return (
-    <div
-      style={{
-        height: '52px',
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        backgroundColor: 'var(--theme-color-bg-2)'
-      }}
-    >
-      <HStack
-        UNSAFE_style={{
-          alignItems: 'center',
-          height: '100%'
-        }}
-        hasSpacing={6}
-      >
-        <Logo
-          size={LogoSize.Small}
-          UNSAFE_style={{
-            marginLeft: '24px'
-          }}
-        />
-        <TextButton label="Docs" onClick={() => platform.openExternal(getDocsEndpoint())} />
-        <TextButton label="Community" onClick={() => platform.openExternal('https://www.noodl.net/community')} />
-      </HStack>
-    </div>
+    <Launcher
+      onCreateProject={handleCreateProject}
+      onOpenProject={handleOpenProject}
+      onLaunchProject={handleLaunchProject}
+      onOpenProjectFolder={handleOpenProjectFolder}
+      onDeleteProject={handleDeleteProject}
+    />
  );
 }
--- a/packages/noodl-editor/src/editor/src/styles/cloudservicespopup.css
+++ b/packages/noodl-editor/src/editor/src/styles/cloudservicespopup.css
@@ -2,44 +2,44 @@
  Cloud services popup
   ------------------------------------------------------------------- */
 .csp-header {
-    padding: 3px;
-    padding-left: 10px;
-    background-color: #373737;
-    color: #ccc;
+  padding: 3px;
+  padding-left: 10px;
+  background-color: var(--theme-color-bg-5);
+  color: var(--theme-color-fg-default);
 }

 .csp-title {
-  color: #ccc;
+  color: var(--theme-color-fg-default);
  font-size: 14px;
 }

 .csp-sub-title {
-  color: #999;
+  color: var(--theme-color-fg-default-shy);
  font-size: 12px;
 }

 .csp-desc {
-  color: #aaa;
+  color: var(--theme-color-fg-default-shy);
 }

 .csp-button {
-  background-color: #D3942B;
-  color:#000;
-  height:30px;
-  line-height:30px;
+  background-color: var(--theme-color-notice);
+  color: var(--theme-color-bg-0);
+  height: 30px;
+  line-height: 30px;
  text-align: center;
  font-family: var(--font-family-bold);
-  padding-left:20px;
-  padding-right:20px;
+  padding-left: 20px;
+  padding-right: 20px;
 }

 .csp-button:hover {
-  background-color: #e4b057;
+  background-color: var(--theme-color-notice-hover);
 }

 .csp-button.disabled {
-  background-color: #37383A;
-  color: #999;
+  background-color: var(--theme-color-bg-5);
+  color: var(--theme-color-fg-default-shy);
 }

 .csp-input {
@@ -47,8 +47,8 @@
  outline: none;
  width: 100%;
  height: 100%;
-  background-color: #1f1f1f;
+  background-color: var(--theme-color-bg-2);
  height: 30px;
-  color: #ccc;
+  color: var(--theme-color-fg-default);
  font-family: var(--font-family-regular);
-}
+}
--- a/packages/noodl-editor/src/editor/src/styles/componentspanel.css
+++ b/packages/noodl-editor/src/editor/src/styles/componentspanel.css
@@ -71,7 +71,7 @@
  left: 20px;
  font: 12px var(--font-family-regular);
  line-height: 36px;
-  color: #aaa;
+  color: var(--theme-color-fg-default-shy);
  white-space: nowrap;
 }

@@ -93,7 +93,7 @@
 }

 .components-panel-isroot {
-  color: #ffa300;
+  color: var(--theme-color-notice);
 }

 .components-panel-icon {
@@ -103,7 +103,7 @@
 .components-panel-folder-menu,
 .components-panel-item-menu {
  background-color: transparent;
-  color: #cecece;
+  color: var(--theme-color-fg-default);
  font-size: 18px;
 }

--- a/packages/noodl-editor/src/editor/src/styles/createnewnodepanel.css
+++ b/packages/noodl-editor/src/editor/src/styles/createnewnodepanel.css
@@ -2,31 +2,31 @@
   Create new node panel
   ------------------------------------------------------------------- */
 .create-node-popup {
-  background-color: #222222;
+  background-color: var(--theme-color-bg-2);
 }

 .create-node-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  cursor: pointer;
-  background-color: #222222;
+  background-color: var(--theme-color-bg-2);
 }

 .create-node-scrollbar::-webkit-scrollbar-thumb {
-  background-color: #575757;
+  background-color: var(--theme-color-border-strong);
 }

 .create-node-search-bg {
-  background-color: #2e2e2e;
+  background-color: var(--theme-color-bg-3);
 }

 .create-node-light-bg {
-  background-color: #383838;
+  background-color: var(--theme-color-bg-4);
 }

 .create-node-dark-input {
-  background-color: #2e2e2e;
-  color: #dddddd;
+  background-color: var(--theme-color-bg-3);
+  color: var(--theme-color-fg-default-contrast);
  border: none;
  display: block;
  padding: 0 0 0 10px;
@@ -37,15 +37,15 @@
 .create-node-item.disabled {
  background: none;
  border: none;
-  color: #888888;
+  color: var(--theme-color-fg-muted);
 }

 .create-node-list-item {
-  background-color: #383838;
+  background-color: var(--theme-color-bg-4);
  padding-left: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
-  color: #f8f8f8;
+  color: var(--theme-color-fg-highlight);
  cursor: default;
 }

@@ -54,36 +54,36 @@
  }*/

 .create-node-list-item.highlighted {
-  background-color: #14606e;
+  background-color: var(--theme-color-primary);
 }

 .create-node-search-icon {
-  color: #aaaaaa;
+  color: var(--theme-color-fg-default-shy);
  margin-left: 5px;
 }

 .create-node-path-item {
-  color: white;
+  color: var(--theme-color-fg-highlight);
  padding-left: 3px;
  line-height: 35px;
 }

 .create-node-library-empty {
-  color: #dddddd;
+  color: var(--theme-color-fg-default-contrast);
  padding: 15px;
 }

 .create-node-quickbar-icon {
  font-size: 20px;
  padding: 5px;
-  color: #ddd;
+  color: var(--theme-color-fg-default-contrast);
  width: 20px;
  height: 20px;
  object-fit: cover;
 }

 .create-node-quickbar-icon:hover {
-  background-color: #444;
+  background-color: var(--theme-color-bg-5);
 }

 .create-node-quickbar-icon.text {
@@ -112,7 +112,7 @@

 /** docs formatting */
 .create-node-docs * {
-  color: #aaa;
+  color: var(--theme-color-fg-default-shy);
 }

 .create-node-docs img {
@@ -120,28 +120,28 @@
 }

 .create-node-docs h1 {
-  color: #ddd;
+  color: var(--theme-color-fg-default-contrast);
 }

 .create-node-docs h2 {
-  color: #ccc;
+  color: var(--theme-color-fg-default);
 }

 .create-node-docs strong {
-  color: #ccc;
+  color: var(--theme-color-fg-default);
 }

 .create-node-docs a {
-  color: #d49517;
+  color: var(--theme-color-notice);
 }

 .create-node-docs a:hover {
-  color: #fdb314;
+  color: var(--theme-color-notice-hover);
 }

 .create-node-docs .language-javascript {
-  color: #eee;
-  background-color: #444;
+  color: var(--theme-color-fg-highlight);
+  background-color: var(--theme-color-bg-5);
  display: block;
  padding: 5px;
  overflow: overlay;
--- a/packages/noodl-editor/src/editor/src/styles/custom-properties/spacing.css
+++ b/packages/noodl-editor/src/editor/src/styles/custom-properties/spacing.css
@@ -0,0 +1,113 @@
+/* =============================================================================
+   NOODL DESIGN SYSTEM - SPACING
+   ============================================================================= */
+
+:root {
+  /* ---------------------------------------------------------------------------
+     SPACING SCALE
+     4px base unit system
+     --------------------------------------------------------------------------- */
+  --spacing-0: 0;
+  --spacing-px: 1px;
+  --spacing-0-5: 2px;
+  --spacing-1: 4px;
+  --spacing-1-5: 6px;
+  --spacing-2: 8px;
+  --spacing-2-5: 10px;
+  --spacing-3: 12px;
+  --spacing-3-5: 14px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-9: 36px;
+  --spacing-10: 40px;
+  --spacing-11: 44px;
+  --spacing-12: 48px;
+  --spacing-14: 56px;
+  --spacing-16: 64px;
+  --spacing-20: 80px;
+  --spacing-24: 96px;
+
+  /* ---------------------------------------------------------------------------
+     SEMANTIC SPACING
+     Component-specific spacing aliases
+     --------------------------------------------------------------------------- */
+
+  /* Panel spacing */
+  --spacing-panel-padding: var(--spacing-4);
+  --spacing-panel-gap: var(--spacing-3);
+
+  /* Card spacing */
+  --spacing-card-padding: var(--spacing-3);
+  --spacing-card-gap: var(--spacing-2);
+
+  /* Section spacing */
+  --spacing-section-gap: var(--spacing-6);
+  --spacing-section-padding: var(--spacing-4);
+
+  /* Input spacing */
+  --spacing-input-padding-x: var(--spacing-2);
+  --spacing-input-padding-y: var(--spacing-1-5);
+  --spacing-input-gap: var(--spacing-2);
+
+  /* Button spacing */
+  --spacing-button-padding-x: var(--spacing-3);
+  --spacing-button-padding-y: var(--spacing-2);
+  --spacing-button-gap: var(--spacing-2);
+
+  /* Icon spacing */
+  --spacing-icon-gap: var(--spacing-2);
+
+  /* ---------------------------------------------------------------------------
+     BORDER RADIUS
+     --------------------------------------------------------------------------- */
+  --radius-none: 0;
+  --radius-sm: 2px;
+  --radius-default: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+  --radius-full: 9999px;
+
+  /* ---------------------------------------------------------------------------
+     SHADOWS
+     --------------------------------------------------------------------------- */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+
+  /* Dialog/popup shadow */
+  --shadow-popup: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.2),
+    0 20px 25px -5px rgba(0, 0, 0, 0.15);
+
+  /* ---------------------------------------------------------------------------
+     TRANSITIONS
+     --------------------------------------------------------------------------- */
+  --transition-fast: 100ms;
+  --transition-default: 150ms;
+  --transition-slow: 300ms;
+  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --transition-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ---------------------------------------------------------------------------
+     Z-INDEX SCALE
+     --------------------------------------------------------------------------- */
+  --z-base: 0;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-fixed: 300;
+  --z-modal-backdrop: 400;
+  --z-modal: 500;
+  --z-popover: 600;
+  --z-tooltip: 700;
+}
--- a/packages/noodl-editor/src/editor/src/styles/layoutpanel.css
+++ b/packages/noodl-editor/src/editor/src/styles/layoutpanel.css
@@ -2,116 +2,115 @@
   Layout panel
   ------------------------------------------------------------------- */
 .layout-panel-item {
-/* background-color: #282828;*/
-    width: 100%;
-    cursor: default;
-    color: #cfcfcf;
-    position: relative;
-   /* border-bottom: 1px solid #222222;*/
+  /* background-color: #282828;*/
+  width: 100%;
+  cursor: default;
+  color: var(--theme-color-fg-default);
+  position: relative;
+  /* border-bottom: 1px solid #222222;*/
 }

 .layout-panel-item-hover-indicator {
-    background-color: #1f1f1f;
+  background-color: var(--theme-color-bg-2);
 }

 .layout-panel-header {
-    color: white;
-    padding-left: 10px;
-    font: 12px var(--font-family-bold);
-    line-height: 35px; 
+  color: var(--theme-color-fg-highlight);
+  padding-left: 10px;
+  font: 12px var(--font-family-bold);
+  line-height: 35px;
 }

 .layout-panel-divider {
-    border-bottom: 1px solid #222222;
+  border-bottom: 1px solid var(--theme-color-border-default);
 }

 .layout-panel-item-label {
-    font: 12px var(--font-family-regular);
-    line-height: 30px;
+  font: 12px var(--font-family-regular);
+  line-height: 30px;
 }

 .layout-panel-item-selected {
-    background-color: #14606e;
-    position:absolute;
-    width:100%;
-    height:30px;
-  }
+  background-color: var(--theme-color-primary);
+  position: absolute;
+  width: 100%;
+  height: 30px;
+}

 .layout-panel-sheet-label {
-    color: white;
-    font: 12px var(--font-family-regular);
-    line-height: 35px; 
-    color: #aaa;
+  color: var(--theme-color-fg-highlight);
+  font: 12px var(--font-family-regular);
+  line-height: 35px;
+  color: var(--theme-color-fg-default-shy);
 }

 .layout-panel-sheet-selector:hover .layout-panel-sheet-label {
-    color: white;
+  color: var(--theme-color-fg-highlight);
 }

 .layout-panel-expand-more-icon {
-    content:url("../assets/icons/expand_more.svg");  
-    width:20px;
-    height:20px;
-    opacity: 0.6
+  content: url('../assets/icons/expand_more.svg');
+  width: 20px;
+  height: 20px;
+  opacity: 0.6;
 }

 .layout-panel-sheet-selector:hover .layout-panel-expand-more-icon {
-    opacity: 1;
+  opacity: 1;
 }

 .layout-panel-expand-less-icon {
-    content:url("../assets/icons/expand_less.svg");  
-    width:20px;
-    height:20px;
-    opacity: 0.6
+  content: url('../assets/icons/expand_less.svg');
+  width: 20px;
+  height: 20px;
+  opacity: 0.6;
 }

 .layout-panel-sheet-selector:hover .layout-panel-expand-less-icon {
-    opacity: 1;
+  opacity: 1;
 }

 .layout-panel-sheet-item {
-    font: 12px var(--font-family-regular);
-    line-height: 30px; 
-    color: #cfcfcf;   
-    padding-left: 10px;
+  font: 12px var(--font-family-regular);
+  line-height: 30px;
+  color: var(--theme-color-fg-default);
+  padding-left: 10px;
 }

 .layout-panel-sheet-item:hover {
-    background-color: #1f1f1f;
+  background-color: var(--theme-color-bg-2);
 }

 .layout-panel-component-item {
-    font: 12px var(--font-family-regular);
-    line-height: 30px; 
-    color: #cfcfcf;   
-    padding-left: 10px;
+  font: 12px var(--font-family-regular);
+  line-height: 30px;
+  color: var(--theme-color-fg-default);
+  padding-left: 10px;
 }

 .layout-panel-component-item:hover {
-    background-color: #1f1f1f;
+  background-color: var(--theme-color-bg-2);
 }

 .layout-panel-edit-button {
-    width: 30px;
-    height: 30px;
-    background-color: transparent;
-    color: #7b7b7b;
-    border: none;
+  width: 30px;
+  height: 30px;
+  background-color: transparent;
+  color: var(--theme-color-fg-muted);
+  border: none;
 }
-  
+
 .layout-panel-edit-button:hover {
-    background-color: #1f1f1f;
-    color: #f8f8f8;
+  background-color: var(--theme-color-bg-2);
+  color: var(--theme-color-fg-highlight);
 }

 .layout-panel-dark-input {
-   /* background-color: #222222;
+  /* background-color: #222222;
    color: #dddddd;*/
-    border: none;
-    display: block;
-    padding:0 0 0 10px;
-    box-sizing: border-box;
-    font: 12px var(--font-family-regular);
-  }
-
+  border: none;
+  display: block;
+  padding: 0 0 0 10px;
+  box-sizing: border-box;
+  font: 12px var(--font-family-regular);
+}
--- a/packages/noodl-editor/src/editor/src/styles/newupdatepopup.css
+++ b/packages/noodl-editor/src/editor/src/styles/newupdatepopup.css
@@ -1,40 +1,40 @@
 /* -------------------------------------------------------------------
   Update available
   ------------------------------------------------------------------- */
-   .updatepopup-group-label {
-    display: block;
-    color: #888888;
-    background-color: #272727;
-    padding: 5px;
-  }
-  
-  .updatepopup-message {
-    display: block;
-  }
-  
-  .updatepopup-button {
-    background-color: #d49517;
-    border:none;
-    color:black;
-    padding: 10px;
-    font-weight: bold;
-    font-size: 12px;
-    cursor: pointer;
-  }
-  
-  .updatepopup-button:hover {
-    background-color:  #fdb314;
-  }
+.updatepopup-group-label {
+  display: block;
+  color: var(--theme-color-fg-default-shy);
+  background-color: var(--theme-color-bg-4);
+  padding: 5px;
+}

-  .updatepopup-button-grey {
-    border:none;
-    background-color: #333333;
-    color: #999999;
-    padding: 10px;
-    font-weight: bold;
-    font-size: 12px;
-  }
-  
-  .updatepopup-button-grey:hover {
-    background-color: #555555;
-  }
+.updatepopup-message {
+  display: block;
+}
+
+.updatepopup-button {
+  background-color: var(--theme-color-notice);
+  border: none;
+  color: var(--theme-color-bg-0);
+  padding: 10px;
+  font-weight: bold;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.updatepopup-button:hover {
+  background-color: var(--theme-color-notice-hover);
+}
+
+.updatepopup-button-grey {
+  border: none;
+  background-color: var(--theme-color-bg-5);
+  color: var(--theme-color-fg-default-shy);
+  padding: 10px;
+  font-weight: bold;
+  font-size: 12px;
+}
+
+.updatepopup-button-grey:hover {
+  background-color: var(--theme-color-border-strong);
+}
--- a/packages/noodl-editor/src/editor/src/styles/popuplayer.css
+++ b/packages/noodl-editor/src/editor/src/styles/popuplayer.css
@@ -15,7 +15,7 @@
 }

 .popup-layer.dim {
-  background-color: #0000007f;
+  background-color: var(--base-color-black-transparent-50);
  transition: background-color 0.2s linear;
  pointer-events: all;
 }
@@ -93,7 +93,7 @@
 }

 .popup-layer-popup-arrow.dark {
-  border-bottom-color: rgba(0, 0, 0, 0.7);
+  border-bottom-color: var(--base-color-black-transparent-70);
 }

 /** popout **/
@@ -122,7 +122,7 @@
  width: 0;
  position: absolute;
  pointer-events: none;
-  border-bottom-color: #333;
+  border-bottom-color: var(--theme-color-bg-5);
  border-width: 10px;
  margin-left: -10px;
 }
@@ -136,7 +136,7 @@
  width: 0;
  position: absolute;
  pointer-events: none;
-  border-left-color: #333;
+  border-left-color: var(--theme-color-bg-5);
  border-width: 10px;
  margin-top: -10px;
 }
@@ -150,7 +150,7 @@
  width: 0;
  position: absolute;
  pointer-events: none;
-  border-top-color: #333;
+  border-top-color: var(--theme-color-bg-5);
  border-width: 10px;
  margin-left: -10px;
 }
@@ -164,7 +164,7 @@
  width: 0;
  position: absolute;
  pointer-events: none;
-  border-right-color: #333;
+  border-right-color: var(--theme-color-bg-5);
  border-width: 10px;
  margin-top: -10px;
 }
@@ -197,19 +197,19 @@

 .popup-layer-popup-menu-divider {
  height: 0px;
-  border-top: 2px #333 solid;
+  border-top: 2px var(--theme-color-border-default) solid;
  margin-top: 3px;
  margin-bottom: 3px;
 }

 .popup-layer-toast {
  position: absolute;
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: var(--base-color-black-transparent-70);
  border-radius: 3px;
-  border-color: rgba(0, 0, 0, 0.7);
+  border-color: var(--base-color-black-transparent-70);
  border-width: 3px;
  padding: 5px;
-  color: white;
+  color: var(--theme-color-fg-highlight);
  opacity: 0;
  transition: opacity 500ms;
  font-size: 15px;
@@ -218,10 +218,10 @@

 .popup-layer-dragger {
  position: absolute;
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: var(--base-color-black-transparent-80);
  border-radius: 3px;
  border-width: 3px;
-  color: white;
+  color: var(--theme-color-fg-highlight);
  font-size: 12px;
  -webkit-transition: opacity 0.25s ease-out;
  padding: 5px;
@@ -243,13 +243,13 @@
  border-color: var(--popup-layer-tooltip-border-color);
  border-width: 1px;
  padding: 12px 16px;
-  color: white;
+  color: var(--theme-color-fg-highlight);
  position: absolute;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  pointer-events: none;
  z-index: 2000;
-  box-shadow: -4px 4px 16px rgba(0, 0, 0, 0.3);
+  box-shadow: -4px 4px 16px var(--base-color-black-transparent-30);
 }

 .popup-layer-tooltip-content {
@@ -343,7 +343,7 @@

 .popup {
  padding-bottom: 3px;
-  color: #aaaaaa;
+  color: var(--theme-color-fg-default-shy);
 }

 .popup p {
@@ -353,20 +353,20 @@

 .popup-group-label {
  display: block;
-  color: #cccccc;
-  background-color: #272727;
+  color: var(--theme-color-fg-default);
+  background-color: var(--theme-color-bg-4);
  padding: 5px;
 }

 .popup-text {
  display: block;
-  color: #777777;
+  color: var(--theme-color-fg-muted);
  margin-left: 5px;
  margin-right: 5px;
 }

 .popup-file-drop {
-  background-color: #000000;
+  background-color: var(--theme-color-bg-0);
  opacity: 0.7;
  width: 100%;
  height: 100%;
@@ -374,10 +374,10 @@

 .popup-file-drop-msg {
  margin: auto;
-  color: #eeeeee;
+  color: var(--theme-color-fg-default-contrast);
  width: 400px;
  background-color: transparent;
-  border-color: #aaaaaa;
+  border-color: var(--theme-color-fg-default-shy);
  border-width: 2px;
  border-style: dashed;
  font-size: 20px;
@@ -393,12 +393,12 @@

 .popup-layer-activity {
  position: absolute;
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: var(--base-color-black-transparent-70);
  border-radius: 3px;
-  border-color: rgba(0, 0, 0, 0.7);
+  border-color: var(--base-color-black-transparent-70);
  border-width: 3px;
  padding: 10px;
-  color: white;
+  color: var(--theme-color-fg-highlight);
  opacity: 0;
  transition: opacity 500ms;
  font-size: 15px;
@@ -417,7 +417,7 @@
 .popup-layer-activity-progress {
  margin-left: 10px;
  margin-right: 10px;
-  background-color: black;
+  background-color: var(--theme-color-bg-0);
  opacity: 0.5;
  height: 10px;
  display: none;
@@ -426,69 +426,69 @@
 .popup-layer-activity-progress-bar {
  width: 0%;
  height: 100%;
-  background-color: #cccccc;
+  background-color: var(--theme-color-fg-default);
 }

 .popup-title {
  display: block;
-  color: #aaaaaa;
+  color: var(--theme-color-fg-default-shy);
  margin-left: 5px;
  margin-right: 5px;
 }

 .popup-title > strong {
-  color: #cccccc;
+  color: var(--theme-color-fg-default);
 }

 .popup-message {
  display: block;
-  color: #aaa;
+  color: var(--theme-color-fg-default-shy);
  margin-left: 5px;
  margin-right: 5px;
 }

 .popup-message > strong {
-  color: #ddd;
+  color: var(--theme-color-fg-default-contrast);
 }

 .popup-button {
  border: none;
  padding: 0px;
-  background-color: #d49517;
-  color: #171717;
+  background-color: var(--theme-color-notice);
+  color: var(--theme-color-bg-2);
  padding: 2px 15px 2px 15px;
  font-size: 12px;
  text-transform: uppercase;
 }

 .popup-button:hover {
-  background-color: #fdb314;
+  background-color: var(--theme-color-notice-hover);
 }

 .popup-button-grey {
  border: none;
  padding: 0px;
-  background-color: #333333;
-  color: #999999;
+  background-color: var(--theme-color-bg-5);
+  color: var(--theme-color-fg-default-shy);
  padding: 2px 15px 2px 15px;
  font-size: 12px;
  text-transform: uppercase;
 }

 .popup-button-grey:hover {
-  background-color: #555555;
+  background-color: var(--theme-color-border-strong);
 }

 .popup-small-docs {
  position: absolute;
-  background-color: #171717;
+  background-color: var(--theme-color-bg-2);
  z-index: 2;
  bottom: 2px;
 }

 /* Confim modal */
 .confirm-modal {
-  color: #c4c4c4;
+  color: var(--theme-color-fg-default);
  max-width: 70vw;
  max-height: 70vh;
  overflow-y: auto;
@@ -496,7 +496,7 @@

 .confirm-modal label {
  display: block;
-  background-color: #272727;
+  background-color: var(--theme-color-bg-4);
  padding: 5px 10px;
 }

@@ -519,19 +519,19 @@
 }

 .confirm-modal .confirm-button {
-  background-color: #f67465;
-  color: #1d1f20;
+  background-color: var(--theme-color-primary);
+  color: var(--theme-color-bg-2);
 }

 .confirm-modal .confirm-button:hover {
-  background-color: #f89387;
+  background-color: var(--theme-color-primary-hover);
 }

 .confirm-modal .cancel-button {
-  background-color: #1d1f20;
-  color: #c4c4c4;
+  background-color: var(--theme-color-bg-2);
+  color: var(--theme-color-fg-default);
 }

 .confirm-modal .cancel-button:hover {
-  background-color: #2f3335;
+  background-color: var(--theme-color-bg-3);
 }
--- a/packages/noodl-editor/src/editor/src/styles/projectsview.css
+++ b/packages/noodl-editor/src/editor/src/styles/projectsview.css
@@ -4,7 +4,7 @@
 .projects-main {
  width: 100%;
  height: 100%;
-  background-color: #131313;
+  background-color: var(--theme-color-bg-1);
  position: absolute;
  top: 0px;
  left: 0px;
@@ -24,36 +24,36 @@
  }*/

 .projects-lab-title {
-  color: white;
+  color: var(--theme-color-fg-highlight);
  font: 20px var(--font-family-bold);
 }

 .projects-lab-desc {
-  color: #8e8e8e;
+  color: var(--theme-color-fg-muted);
  font: 12px var(--font-family-regular);
 }

 .projects-header-tab {
-  color: #8e8e8e;
+  color: var(--theme-color-fg-muted);
  font-size: 15px;
 }

 .projects-header-tab:hover {
-  color: white;
+  color: var(--theme-color-fg-highlight);
 }

 .projects-header-tab-selected {
-  color: white;
+  color: var(--theme-color-fg-highlight);
  opacity: 1;
 }

 .projects-header-tab-small {
-  color: #8e8e8e;
+  color: var(--theme-color-fg-muted);
  font-size: 16px;
 }

 .projects-header-tab-small:hover {
-  color: white;
+  color: var(--theme-color-fg-highlight);
 }

 .projects-sign-out-icon {
@@ -64,23 +64,23 @@
 }

 .projects-header-button {
-  background-color: #333;
+  background-color: var(--theme-color-bg-5);
  border: none;
-  color: #d4d4d4;
+  color: var(--theme-color-fg-default);
  padding: 10px;
  font-weight: bold;
  font-size: 12px;
 }

 .projects-header-button:hover {
-  background-color: #555;
-  color: white;
+  background-color: var(--theme-color-border-strong);
+  color: var(--theme-color-fg-highlight);
 }

 .projects-create-new-project-button {
-  background-color: #d49517;
+  background-color: var(--theme-color-notice);
  border: none;
-  color: black;
+  color: var(--theme-color-bg-0);
  padding: 10px;
  font-weight: bold;
  font-size: 12px;
@@ -88,13 +88,13 @@
 }

 .projects-create-new-project-button:hover {
-  background-color: #fdb314;
-  color: black;
+  background-color: var(--theme-color-notice-hover);
+  color: var(--theme-color-bg-0);
 }

 .projects-create-new-project-button:disabled {
  opacity: 0.5;
-  background-color: #d49517;
+  background-color: var(--theme-color-notice);
 }

 .projects-discord-button {
@@ -107,23 +107,23 @@
 }

 .projects-button-grey {
-  background-color: #333;
+  background-color: var(--theme-color-bg-5);
  border: none;
-  color: #d4d4d4;
+  color: var(--theme-color-fg-default);
  padding: 10px;
  font-weight: bold;
  font-size: 12px;
 }

 .projects-button-grey:hover {
-  background-color: #555;
-  color: white;
+  background-color: var(--theme-color-border-strong);
+  color: var(--theme-color-fg-highlight);
 }

 .projects-checkbox {
  width: 20px;
  height: 20px;
-  border: 1px solid #aaa;
+  border: 1px solid var(--theme-color-fg-default-shy);
 }

 .projects-checkmark {
@@ -134,12 +134,12 @@
 }

 .projects-search-bg {
-  background-color: #191919;
+  background-color: var(--theme-color-bg-2);
 }

 .projects-search-input {
-  background-color: #191919;
-  color: #aaaaaa;
+  background-color: var(--theme-color-bg-2);
+  color: var(--theme-color-fg-default-shy);
  border: none;
  display: block;
  padding: 0 0 0 10px;
@@ -148,8 +148,8 @@
 }

 .projects-project-name-input {
-  background-color: #191919;
-  color: #aaaaaa;
+  background-color: var(--theme-color-bg-2);
+  color: var(--theme-color-fg-default-shy);
  border: none;
  display: block;
  padding: 0 0 0 10px;
@@ -166,35 +166,35 @@
 }

 .projects-header-user-label {
-  color: white;
+  color: var(--theme-color-fg-highlight);
  font-size: 15px;
 }

 .projects-header-user-sublabel {
  display: inline;
-  color: #aaa;
+  color: var(--theme-color-fg-default-shy);
  font-size: 11px;
 }

 .projects-header-user-expand-menu {
-  color: #ccc;
+  color: var(--theme-color-fg-default);
  margin-left: 5px;
  margin-top: 1px;
 }

 .projects-header-workspace-label {
-  color: white;
+  color: var(--theme-color-fg-highlight);
  font-size: 11px;
  margin: 0px;
  padding: 5px 10px;
 }

 .projects-header-workspace-label:hover {
-  background-color: #555;
+  background-color: var(--theme-color-border-strong);
 }

 .projects-header-workspace-label-btn {
-  color: white;
+  color: var(--theme-color-fg-highlight);
  font-size: 11px;
  padding-left: 10px;
  margin: 0px;
@@ -203,16 +203,16 @@
 }

 .projects-header-workspace-label-btn:hover {
-  background-color: #555;
+  background-color: var(--theme-color-border-strong);
 }

 .projects-header-workspace-divider {
  height: 0px;
-  border-top: 2px #333 solid;
+  border-top: 2px var(--theme-color-bg-5) solid;
 }

 .projects-header-workspace-title {
-  color: #aaa;
+  color: var(--theme-color-fg-default-shy);
  font-size: 10px;
  text-transform: uppercase;
  margin-top: 5px;
@@ -221,7 +221,7 @@
 }

 .projects-header-workspaces {
-  background-color: #444;
+  background-color: var(--theme-color-bg-5);
 }

 .projects-header-settings-icon {
@@ -236,7 +236,7 @@
 }

 .projects-header-settings:hover {
-  background-color: #363637;
+  background-color: var(--theme-color-bg-5);
 }

 .projects-header-settings-icon:hover {
@@ -255,8 +255,8 @@
 }

 .projects-panel-header {
-  background-color: #363637;
-  color: white;
+  background-color: var(--theme-color-bg-5);
+  color: var(--theme-color-fg-highlight);
  padding: 15px;
  font-size: 16px;
  margin: 5px;
@@ -265,16 +265,16 @@
 #admin-settings {
  box-sizing: border-box;
  padding: 20px;
-  background-color: #131313;
+  background-color: var(--theme-color-bg-1);
 }

 .projects-feed-title {
-  color: #a3a2a2;
+  color: var(--theme-color-fg-default-shy);
  font-size: 16px;
 }

 .projects-feed-body {
-  color: #838282;
+  color: var(--theme-color-fg-muted);
  font-size: 12px;
  line-height: 15px;
  padding-top: 5px;
@@ -305,26 +305,26 @@
 }

 .projects-lesson-big-item-plate {
-  background-color: #181818;
+  background-color: var(--theme-color-bg-2);
 }

 .projects-lesson-big-item-plate:hover {
-  background-color: #292929;
+  background-color: var(--theme-color-bg-4);
 }

 .projects-lesson-big-item-label {
-  color: white;
+  color: var(--theme-color-fg-highlight);
  font: 16px var(--font-family-bold);
 }

 .projects-lesson-big-item-desc {
-  color: #8e8e8e;
+  color: var(--theme-color-fg-muted);
  font: 12px var(--font-family-regular);
 }

 .projects-lesson-big-item-progress {
-  color: #181818;
-  background-color: #333333;
+  color: var(--theme-color-bg-2);
+  background-color: var(--theme-color-bg-5);
  overflow: hidden;
 }

@@ -336,13 +336,13 @@
 .projects-lesson-big-item-progress-label {
  font-size: 15px;
  font-weight: bold;
-  color: #8e8e8e;
+  color: var(--theme-color-fg-muted);
 }

 .projects-lesson-item-progress-label {
  font-size: 12px;
  font-weight: bold;
-  color: #aaaaaa;
+  color: var(--theme-color-fg-default-shy);
 }

 .projects-lesson-image {
@@ -368,51 +368,51 @@
 }

 .projects-lesson-item-progress {
-  color: #8e8e8e;
+  color: var(--theme-color-fg-muted);
  font-size: 15px;
 }

 .projects-lesson-item-progress-completed {
-  color: #e4bc4f;
+  color: var(--theme-color-notice);
 }

 .projects-lesson-item-progress-not-started {
-  color: #838282;
+  color: var(--theme-color-fg-muted);
 }

 .projects-lesson-item-progress-has-started {
-  color: #af9234;
+  color: var(--theme-color-notice);
 }

 .projects-lesson-item-progress-has-completed {
-  color: #436845;
+  color: var(--theme-color-success);
 }

 .projects-panel-icon {
  font-size: 20px;
-  color: #737272;
+  color: var(--theme-color-fg-muted);
 }

 .projects-panel-dark {
  font-size: 20px;
-  color: #333232;
+  color: var(--theme-color-bg-5);
 }

 .projects-panel-icon:hover {
-  color: #c3c2c2;
+  color: var(--theme-color-fg-default);
 }

 .projects-panel-circle-ellipse-icon {
  border-radius: 50%;
-  background-color: #737272;
+  background-color: var(--theme-color-fg-muted);
  width: 18px;
  height: 18px;
  text-align: center;
-  color: #464647;
+  color: var(--theme-color-bg-5);
 }

 .projects-panel-circle-ellipse-icon:hover {
-  background-color: #c3c2c2;
+  background-color: var(--theme-color-fg-default);
 }

 .projects-panel-icon-show-on-hover {
@@ -432,8 +432,8 @@
 }

 .projects-section-header {
-  background-color: #171717;
-  color: white;
+  background-color: var(--theme-color-bg-2);
+  color: var(--theme-color-fg-highlight);
  line-height: 30px;
  padding-left: 5px;
 }
@@ -453,15 +453,15 @@
 }

 .projects-item-plate {
-  background-color: #333;
+  background-color: var(--theme-color-bg-5);
 }

 .projects-item-plate:hover {
-  background-color: #555;
+  background-color: var(--theme-color-border-strong);
 }

 .projects-item-label-bg {
-  background-color: #333333;
+  background-color: var(--theme-color-bg-5);
  text-align: center;
  opacity: 0.6;
 }
@@ -474,7 +474,7 @@

 .projects-item-cloud-synced {
  font: 10px var(--font-family-bold);
-  color: #838282;
+  color: var(--theme-color-fg-muted);
 }

 .projects-item-cloud-synced-icon {
@@ -489,30 +489,30 @@
 .projects-item-cloud-download {
  text-align: center;
  font-size: 40px;
-  color: #777777;
+  color: var(--theme-color-fg-muted);
  display: none;
-  background-color: #222222;
+  background-color: var(--theme-color-bg-2);
 }

 .projects-add-new-item-border {
  border-width: 2px;
  border-style: dashed;
-  border-color: #888888;
+  border-color: var(--theme-color-fg-muted);
 }

 .projects-item-remove-icon {
  opacity: 0;
-  background-color: #333333;
-  border-color: #333333;
+  background-color: var(--theme-color-bg-5);
+  border-color: var(--theme-color-bg-5);
  border-width: 3px;
  border-radius: 3px;
  padding: 5px;
-  color: #aaaaaa;
+  color: var(--theme-color-fg-default-shy);
 }

 .projects-item-remove-icon:hover {
-  background-color: #555555;
-  border-color: #555555;
+  background-color: var(--theme-color-border-strong);
+  border-color: var(--theme-color-border-strong);
 }

 .projects-item:hover .projects-item-remove-icon {
@@ -524,8 +524,8 @@
 }

 .projects-update-banner {
-  background-color: #557766;
-  color: #cccccc;
+  background-color: var(--theme-color-success);
+  color: var(--theme-color-fg-default);
  border-radius: 2px;
  padding: 10px;
  padding-top: 3px;
@@ -533,24 +533,25 @@
 }

 .projects-update-banner:hover {
-  background-color: #779988;
+  background-color: var(--theme-color-success);
+  opacity: 0.8;
 }

 .projects-remote-url-label {
-  color: #888888;
+  color: var(--theme-color-fg-muted);
 }

 .projects-remote-url-clone-button {
-  background-color: #8f7204;
+  background-color: var(--theme-color-notice);
  border: none;
-  color: #cccccc;
+  color: var(--theme-color-fg-default);
  height: 100%;
  margin-top: 5px;
  float: right;
 }

 .projects-remote-url-clone-button:hover {
-  background-color: #af9224;
+  background-color: var(--theme-color-notice-hover);
 }

 .projects-feed-top-item {
@@ -581,50 +582,50 @@
 }

 .projects-feed-item {
-  background-color: #1f1f1f;
+  background-color: var(--theme-color-bg-2);
 }

 .projects-feed-item:hover {
-  background-color: #2f2f2f;
+  background-color: var(--theme-color-bg-3);
 }

 .projects-feed-item-title {
-  color: white;
+  color: var(--theme-color-fg-highlight);
  font: 14px var(--font-family-regular);
 }

 .projects-feed-item-body {
-  color: #929292;
+  color: var(--theme-color-fg-muted);
  font: 12px var(--font-family-regular);
 }

 .projects-create-from-template-title {
-  color: white;
+  color: var(--theme-color-fg-highlight);
  font-size: 20px;
  margin-bottom: 10px;
  margin-top: 20px;
 }

 .projects-title {
-  color: white;
+  color: var(--theme-color-fg-highlight);
  font: 24px var(--font-family-semibold);
  text-transform: capitalize;
 }

 .projects-popup-title {
-  color: white;
+  color: var(--theme-color-fg-highlight);
  font: 20px var(--font-family-semibold);
  text-transform: capitalize;
 }

 .projects-divider-label {
-  color: white;
+  color: var(--theme-color-fg-highlight);
  font: 24px var(--font-family-semibold);
  text-transform: capitalize;
 }

 .projects-sub-divider-label {
-  color: #777;
+  color: var(--theme-color-fg-muted);
  font-weight: 600;
  font-size: 16px;
  padding-top: 48px;
@@ -632,32 +633,32 @@
 }

 .projects-label {
-  color: #dedede;
+  color: var(--theme-color-fg-default-contrast);
  font: 14px var(--font-family-bold);
  opacity: 0.5;
 }

 .projects-label.highlighted {
-  color: white;
+  color: var(--theme-color-fg-highlight);
 }

 .projects-label-small {
-  color: #aaaaaa;
+  color: var(--theme-color-fg-default-shy);
  font: 12px var(--font-family-regular);
  text-transform: uppercase;
 }

 .projects-sublabel {
-  color: #dedede;
+  color: var(--theme-color-fg-default-contrast);
  font: 12px var(--font-family-regular);
 }

 .projects-sublabel.highlighted {
-  color: #aaaaaa;
+  color: var(--theme-color-fg-default-shy);
 }

 .projects-create-new-project-cs {
-  color: #dedede;
+  color: var(--theme-color-fg-default-contrast);
  font: 14px var(--font-family-bold);
 }

@@ -700,7 +701,7 @@
 }

 .projects-template-item-title {
-  color: white;
+  color: var(--theme-color-fg-highlight);
  font: 14px var(--font-family-semibold);
  padding-bottom: 4px;
 }
@@ -737,13 +738,13 @@
 }

 .projects-item-label {
-  color: white;
+  color: var(--theme-color-fg-highlight);
  font-weight: var(--font-weight-semibold);
 }

 .projects-item-sublabel {
  font: 10px var(--font-family-bold);
-  color: #838282;
+  color: var(--theme-color-fg-muted);
 }

 .projects-edit-icon {
@@ -761,13 +762,13 @@
 }

 .projects-start-pane-label {
-  color: #aaaaaa;
+  color: var(--theme-color-fg-default-shy);
  font: 16px var(--font-family-regular);
  text-transform: initial;
 }

 .projects-start-pane-feed-big {
-  background-color: #131313dd;
+  background-color: var(--base-color-black-transparent-85);
 }

 .projects-start-pane-thumb {
@@ -778,16 +779,16 @@
 }

 .projects-start-pane-item {
-  background-color: #191919;
+  background-color: var(--theme-color-bg-2);
 }

 .projects-start-pane-item:hover {
-  background-color: #222222;
+  background-color: var(--theme-color-bg-2);
 }

 .projects-rename-input {
-  background-color: #181818;
-  color: white;
+  background-color: var(--theme-color-bg-2);
+  color: var(--theme-color-fg-highlight);
  border: none;
  display: block;
  padding: 0px;
@@ -799,17 +800,17 @@
 }

 .projects-icon {
-  color: #aaaaaa;
+  color: var(--theme-color-fg-default-shy);
  margin-left: 5px;
 }

 .projects-icon.highlighted {
-  color: white;
+  color: var(--theme-color-fg-highlight);
  margin-left: 5px;
 }

 .projects-cloudservices-bg {
-  background-color: #191919;
+  background-color: var(--theme-color-bg-2);
 }

 .projects-getting-started-item {
@@ -820,7 +821,7 @@
 }

 .projects-getting-started-item:hover {
-  background-color: #333;
+  background-color: var(--theme-color-bg-5);
 }

 .tutorial-items {
@@ -869,14 +870,14 @@
 }

 .projects-tutorial-item-label {
-  color: black;
+  color: var(--theme-color-bg-0);
  font: 20px var(--font-family-semibold);
  line-height: 27px;
  white-space: normal;
 }

 .projects-tutorial-item-sublabel {
-  color: white;
+  color: var(--theme-color-fg-highlight);
  font: 12px var(--font-family-regular);
 }

@@ -905,7 +906,7 @@
 }

 .tutorial-category-item {
-  color: white;
+  color: var(--theme-color-fg-highlight);
  font: 24px var(--font-family-semibold);
  font-weight: 600;
  margin-right: 40px;
@@ -929,21 +930,21 @@
 }

 .projects-new-version-available-link {
-  color: #f5bc41;
+  color: var(--theme-color-notice);
 }

 .projects-new-version-available-link:hover {
-  color: #ffd373;
+  color: var(--theme-color-notice-hover);
  -webkit-app-region: no-drag;
 }

 .projects-new-update-available {
-  color: #f5bc41;
+  color: var(--theme-color-notice);
  -webkit-app-region: no-drag;
 }

 .projects-new-update-available:hover {
-  color: #ffd373;
+  color: var(--theme-color-notice-hover);
 }

 .account-menu-workspaces {
@@ -957,12 +958,12 @@

 /* Legacy project card modifier */
 .projects-item--legacy {
-  border: 2px solid #d49517;
+  border: 2px solid var(--theme-color-notice);
  box-sizing: border-box;
 }

 .projects-item--legacy:hover {
-  border-color: #fdb314;
+  border-color: var(--theme-color-notice-hover);
 }

 /* Legacy badge in top-right corner */
@@ -974,7 +975,7 @@
  align-items: center;
  gap: 4px;
  background-color: rgba(212, 149, 23, 0.9);
-  color: #000;
+  color: var(--theme-color-bg-0);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
@@ -1014,9 +1015,9 @@

 /* Migrate Project button */
 .projects-item-migrate-btn {
-  background-color: #d49517;
+  background-color: var(--theme-color-notice);
  border: none;
-  color: #000;
+  color: var(--theme-color-bg-0);
  padding: 10px 20px;
  font-weight: 600;
  font-size: 12px;
@@ -1028,14 +1029,14 @@
 }

 .projects-item-migrate-btn:hover {
-  background-color: #fdb314;
+  background-color: var(--theme-color-notice-hover);
 }

 /* Open Read-Only button */
 .projects-item-readonly-btn {
  background-color: transparent;
-  border: 1px solid #666;
-  color: #aaa;
+  border: 1px solid var(--theme-color-border-default);
+  color: var(--theme-color-fg-default-shy);
  padding: 8px 16px;
  font-weight: 500;
  font-size: 11px;
@@ -1047,9 +1048,9 @@
 }

 .projects-item-readonly-btn:hover {
-  background-color: #333;
-  border-color: #888;
-  color: #fff;
+  background-color: var(--theme-color-bg-5);
+  border-color: var(--theme-color-fg-muted);
+  color: var(--theme-color-fg-highlight);
 }

 /* Runtime detection pending indicator */
@@ -1058,14 +1059,14 @@
 }

 .projects-item-detecting::after {
-  content: "";
+  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 12px;
  height: 12px;
-  border: 2px solid #666;
-  border-top-color: #d49517;
+  border: 2px solid var(--theme-color-border-default);
+  border-top-color: var(--theme-color-notice);
  border-radius: 50%;
  animation: spin 1s linear infinite;
 }
--- a/packages/noodl-editor/src/editor/src/styles/projectsview.lessoncards.css
+++ b/packages/noodl-editor/src/editor/src/styles/projectsview.lessoncards.css
@@ -9,7 +9,7 @@

 .tutorial-lesson-item .progress-bar {
  box-sizing: border-box;
-  background-color: #0000007f;
+  background-color: var(--base-color-black-transparent-50);
  width: 100%;
  height: 8px;
 }
@@ -162,7 +162,7 @@
 .tutorial-lesson-item.in-progress.is-feature-highlight,
 .tutorial-lesson-item.next-up.is-feature-highligh {
  /*always highligt this*/
-  background-color: #332c7d;
+  background-color: var(--theme-color-bg-4);
 }

 .tutorial-lesson-item.not-started.is-feature-highlight button,
@@ -179,16 +179,16 @@
 }

 .tutorial-lesson-item.completed.is-feature-highlight {
-  background-color: #1f1b52;
+  background-color: var(--theme-color-bg-2);
 }

 .tutorial-lesson-item.completed.is-feature-highlight button {
-  background-color: #3a3578;
+  background-color: var(--theme-color-bg-5);
  color: var(--base-color-teal-100);
 }

 .tutorial-lesson-item.in-progress.is-feature-highlight button {
-  background-color: #5b54a6;
+  background-color: var(--theme-color-border-strong);
  color: var(--base-color-teal-100);
 }

--- a/packages/noodl-editor/src/editor/src/styles/propertyeditor/iconpicker.css
+++ b/packages/noodl-editor/src/editor/src/styles/propertyeditor/iconpicker.css
@@ -1,32 +1,32 @@
 .iconpicker-bg {
-  background-color: #222;
+  background-color: var(--theme-color-bg-2);
 }

 .iconpicker-header {
-  background-color: #292929;
+  background-color: var(--theme-color-bg-4);
  flex: 0 0 26px;
  line-height: 30px;
  padding-left: 10px;
 }

 .iconpicker-search-header {
-  background-color: #292929;
+  background-color: var(--theme-color-bg-4);
 }

 .iconpicker-iconset-header {
-  background-color: #292929;
+  background-color: var(--theme-color-bg-4);
  flex: 0 0 26px;
  line-height: 30px;
  padding-left: 10px;
 }

 .iconpicker-label {
-  color: #7a7a7a;
+  color: var(--theme-color-fg-muted);
 }

 .iconpicker-search-input {
-  background-color: #333333;
-  color: #dddddd;
+  background-color: var(--theme-color-bg-5);
+  color: var(--theme-color-fg-default-contrast);
  border: none;
  display: block;
  padding: 0 0 0 10px;
@@ -35,7 +35,7 @@
 }

 .iconpicker-icon {
-  color: white;
+  color: var(--theme-color-fg-highlight);
  width: 24px;
  height: 24px;
  padding: 5px;
--- a/packages/noodl-editor/src/editor/src/styles/propertyeditor/pages.css
+++ b/packages/noodl-editor/src/editor/src/styles/propertyeditor/pages.css
@@ -1,56 +1,54 @@
 .router-pages-page {
-    padding: 7px;
-    margin:2px;
-    margin-right:10px;
-    margin-left:10px;
-    background-color: #222;
-    display:flex;
-    flex-grow: 1;
+  padding: 7px;
+  margin: 2px;
+  margin-right: 10px;
+  margin-left: 10px;
+  background-color: var(--theme-color-bg-2);
+  display: flex;
+  flex-grow: 1;
 }

 .router-pages-page:hover {
-    background-color: #333;
+  background-color: var(--theme-color-bg-5);
 }

 .router-pages-component {
-    color: #f8f8f8;
+  color: var(--theme-color-fg-highlight);
 }

 .router-pages-path {
-    color: #777;
+  color: var(--theme-color-fg-muted);
 }

 .router-pages-icon {
-    content:url("../assets/icons/page.svg");
-    width:18px;
-    opacity:0.7;
-    align-self:center;
-    margin-right:7px;
+  content: url('../assets/icons/page.svg');
+  width: 18px;
+  opacity: 0.7;
+  align-self: center;
+  margin-right: 7px;
 }

 .router-pages-icon.start-page {
-    content:url("../assets/icons/page-filled.svg");
+  content: url('../assets/icons/page-filled.svg');
 }

 .router-pages-label {
-    color: #999;
-    margin:5px;
-    margin-right:15px;
+  color: var(--theme-color-fg-default-shy);
+  margin: 5px;
+  margin-right: 15px;
 }

 .router-pages-actions-icon {
-    color: #999;
-    align-self:center;;
-    visibility: hidden;
-    padding:8px 15px;
+  color: var(--theme-color-fg-default-shy);
+  align-self: center;
+  visibility: hidden;
+  padding: 8px 15px;
 }

 .router-pages-page:hover .router-pages-actions-icon {
-    visibility: visible;
+  visibility: visible;
 }

 .router-pages-actions-icon:hover {
-    color: #fff;
+  color: var(--theme-color-fg-highlight);
 }
-
-
--- a/packages/noodl-editor/src/editor/src/styles/propertyeditor/propertyeditor.css
+++ b/packages/noodl-editor/src/editor/src/styles/propertyeditor/propertyeditor.css
@@ -29,7 +29,7 @@
  top: 12px;
  height: 10px;
  width: 10px;
-  background-color: #555;
+  background-color: var(--theme-color-fg-muted);
  border-radius: 50%;
 }

@@ -58,28 +58,28 @@
 }

 .property-input-dropdown-arrow {
-  color: #7b7b7b;
+  color: var(--theme-color-fg-muted);
 }

 .property-input-dropdown-arrow:hover {
-  color: #f8f8f8;
+  color: var(--theme-color-fg-highlight);
 }

 .property-input-enum:hover {
-  background-color: #555555;
+  background-color: var(--theme-color-border-strong);
  cursor: pointer;
 }

 .property-input-enum {
-  background-color: #000000;
-  color: #f8f8f8;
+  background-color: var(--theme-color-bg-0);
+  color: var(--theme-color-fg-highlight);
  min-height: 30px;
  line-height: 30px;
  padding-left: 10px;
 }

 .property-input-enum + .property-input-enum {
-  border-top: 1px solid #2e2e2e;
+  border-top: 1px solid var(--theme-color-border-subtle);
 }

 .property-input-connected {
@@ -92,12 +92,12 @@
 }

 .property-input-focused {
-  color: #f8f8f8;
-  background-color: #000000;
+  color: var(--theme-color-fg-highlight);
+  background-color: var(--theme-color-bg-0);
 }

 .property-input-color {
-  background-color: #222222;
+  background-color: var(--theme-color-bg-2);
 }

 .property-input-color-hidden {
@@ -115,8 +115,8 @@
 }

 .property-input-textarea:focus {
-  color: #f8f8f8;
-  background-color: #000000;
+  color: var(--theme-color-fg-highlight);
+  background-color: var(--theme-color-bg-0);
 }

 .property-input-textarea-bg {
@@ -150,7 +150,7 @@
 }

 .property-header-bar-label {
-  color: #f8f8f8;
+  color: var(--theme-color-fg-highlight);
  font: 12px var(--font-family-regular);
  padding: 10px 0 10px 10px;
  text-overflow: ellipsis;
@@ -169,12 +169,12 @@
 }

 .property-editor-highlight {
-  color: #ffa300;
+  color: var(--theme-color-notice);
 }

 .property-editor-highlight:hover {
-  background-color: #ffa300;
-  color: #f8f8f8;
+  background-color: var(--theme-color-notice);
+  color: var(--theme-color-fg-highlight);
 }

 .property-codeeditor-button {
@@ -195,19 +195,19 @@
 }

 .property-number-unit-enum {
-  background-color: #000000;
-  color: #f8f8f8;
+  background-color: var(--theme-color-bg-0);
+  color: var(--theme-color-fg-highlight);
  height: 30px;
  line-height: 30px;
  cursor: default;
 }

 .property-number-unit-enum + .property-number-unit-enum {
-  border-top: 1px solid #2e2e2e;
+  border-top: 1px solid var(--theme-color-border-subtle);
 }

 .property-number-unit-enum:hover {
-  background-color: #555555;
+  background-color: var(--theme-color-border-strong);
 }

 .property-dimension-fixed-disabled {
--- a/packages/noodl-editor/src/editor/src/styles/propertyeditor/proplist.css
+++ b/packages/noodl-editor/src/editor/src/styles/propertyeditor/proplist.css
@@ -2,23 +2,23 @@
   String list
   ------------------------------------------------------------------- */
 .proplist-add-button-container {
-    position: relative;
-    padding-right: 0;
-  }
-  
-  .proplist-default-label {
-    color: #666666;
-  }
+  position: relative;
+  padding-right: 0;
+}
+
+.proplist-default-label {
+  color: var(--theme-color-fg-muted);
+}

 .proplist-item {
-    cursor: default;
-    color: #f8f8f8;
-    position: relative;
-    line-height: 35px;    
+  cursor: default;
+  color: var(--theme-color-fg-highlight);
+  position: relative;
+  line-height: 35px;
 }

 .proplist-header {
-    background-color: #1f1f1f;
-    margin-bottom:2px;
-    margin-top:2px;
-}
+  background-color: var(--theme-color-bg-2);
+  margin-bottom: 2px;
+  margin-top: 2px;
+}
--- a/packages/noodl-editor/src/editor/src/styles/propertyeditor/queryeditor.css
+++ b/packages/noodl-editor/src/editor/src/styles/propertyeditor/queryeditor.css
@@ -1,5 +1,5 @@
 .queryeditor-popup {
-  background-color: #333;
+  background-color: var(--theme-color-bg-5);
  padding: 8px;
  display: flex;
  flex-direction: column;
@@ -13,27 +13,27 @@

 .queryeditor-add-filter-group {
  margin: 5px;
-  border: 1px solid #393939;
+  border: 1px solid var(--theme-color-border-default);
  padding: 3px;
 }

 .queryeditor-add-filter-group-inner {
-  background-color: #222;
-  color: #999;
+  background-color: var(--theme-color-bg-2);
+  color: var(--theme-color-fg-default-shy);
  padding: 10px;
  text-align: center;
  flex-grow: 1;
 }

 .queryeditor-add-filter-group-inner:hover {
-  background-color: #333;
-  color: #ccc;
+  background-color: var(--theme-color-bg-5);
+  color: var(--theme-color-fg-default);
 }

 .queryeditor-group {
  display: flex;
  flex-direction: column;
-  border: 1px solid #393939;
+  border: 1px solid var(--theme-color-border-default);
  padding: 5px;
  margin-right: 3px;
  margin-left: 2px;
@@ -56,21 +56,21 @@

 .queryeditor-remove-icon {
  margin-left: 10px;
-  color: #999;
+  color: var(--theme-color-fg-default-shy);
  width: 20px;
  height: 20px;
 }

 .queryeditor-remove-icon:hover {
-  color: #ccc;
+  color: var(--theme-color-fg-default);
 }

 .queryeditor-and-toggle {
-  color: #999;
-  background-color: #333;
-  border-left: 1px solid #999;
-  border-top: 1px solid #999;
-  border-bottom: 1px solid #999;
+  color: var(--theme-color-fg-default-shy);
+  background-color: var(--theme-color-bg-5);
+  border-left: 1px solid var(--theme-color-fg-default-shy);
+  border-top: 1px solid var(--theme-color-fg-default-shy);
+  border-bottom: 1px solid var(--theme-color-fg-default-shy);
  border-radius: 5px 0px 0px 5px;
  padding: 3px;
  padding-left: 5px;
@@ -78,20 +78,20 @@
 }

 .queryeditor-and-toggle:hover {
-  color: #fff;
+  color: var(--theme-color-fg-highlight);
 }

 .queryeditor-and-toggle.selected {
-  background-color: #777;
-  color: #fff;
+  background-color: var(--theme-color-fg-muted);
+  color: var(--theme-color-fg-highlight);
 }

 .queryeditor-or-toggle {
-  color: #999;
-  background-color: #333;
-  border-right: 1px solid #999;
-  border-top: 1px solid #999;
-  border-bottom: 1px solid #999;
+  color: var(--theme-color-fg-default-shy);
+  background-color: var(--theme-color-bg-5);
+  border-right: 1px solid var(--theme-color-fg-default-shy);
+  border-top: 1px solid var(--theme-color-fg-default-shy);
+  border-bottom: 1px solid var(--theme-color-fg-default-shy);
  border-radius: 0px 5px 5px 0px;
  padding: 3px;
  padding-right: 5px;
@@ -99,23 +99,23 @@
 }

 .queryeditor-or-toggle.selected {
-  background-color: #777;
-  color: #fff;
+  background-color: var(--theme-color-fg-muted);
+  color: var(--theme-color-fg-highlight);
 }

 .queryeditor-or-toggle:hover {
-  color: #fff;
+  color: var(--theme-color-fg-highlight);
 }

 .queryeditor-add-rule {
  display: flex;
-  color: #999;
+  color: var(--theme-color-fg-default-shy);
  align-items: center;
  margin-right: 10px;
 }

 .queryeditor-add-rule:hover {
-  color: #ccc;
+  color: var(--theme-color-fg-default);
 }

 .queryeditor-add-icon {
@@ -129,19 +129,19 @@

 .queryeditor-add-group {
  display: flex;
-  color: #999;
+  color: var(--theme-color-fg-default-shy);
  align-items: center;
 }

 .queryeditor-add-group:hover {
-  color: #ccc;
+  color: var(--theme-color-fg-default);
 }

 .queryeditor-rule {
  display: flex;
  padding: 10px;
  align-items: flex-start;
-  background-color: #222;
+  background-color: var(--theme-color-bg-2);
  flex-shrink: 0;
 }

@@ -155,11 +155,11 @@

 .queryeditor-component {
  position: relative;
-  background-color: #333;
+  background-color: var(--theme-color-bg-5);
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
-  color: #ccc;
+  color: var(--theme-color-fg-default);
  display: flex;
  align-items: flex-start;
  min-height: 32px;
@@ -168,7 +168,7 @@
 }

 .queryeditor-component.hoverable:hover {
-  color: #fff;
+  color: var(--theme-color-fg-highlight);
 }

 .queryeditor-property-inner {
@@ -179,7 +179,7 @@
 }

 .queryeditor-property-label {
-  color: #999;
+  color: var(--theme-color-fg-default-shy);
  font-size: 10px;
  font-weight: bold;
 }
@@ -190,7 +190,7 @@
  outline: none;
  border: none;
  background-color: transparent;
-  color: #fff;
+  color: var(--theme-color-fg-highlight);
 }

 .queryeditor-caret-icon {
@@ -202,8 +202,8 @@
 .queryeditor-dropdown {
  position: absolute;
  top: 47px;
-  background-color: #181818;
-  color: #ccc;
+  background-color: var(--theme-color-bg-2);
+  color: var(--theme-color-fg-default);
  border-radius: 3px;
  margin-left: -10px;
  z-index: 10;
@@ -218,32 +218,32 @@
 }

 .queryeditor-dropdown-item:hover {
-  color: #fff;
-  background-color: #333;
+  color: var(--theme-color-fg-highlight);
+  background-color: var(--theme-color-bg-5);
 }

 .queryeditor-value-type-icon {
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
-  color: #ccc;
+  color: var(--theme-color-fg-default);
  margin-right: 10px;
 }

 .queryeditor-value-type-icon:hover {
-  color: #fff;
+  color: var(--theme-color-fg-highlight);
 }

 .queryeditor-header {
  display: flex;
  font-size: 12px;
-  color: #999;
+  color: var(--theme-color-fg-default-shy);
  margin-left: 5px;
  margin-bottom: 8px;
 }

 .queryeditor-desc {
-  color: #999;
+  color: var(--theme-color-fg-default-shy);
  margin-right: 10px;
  line-height: 12px;
  flex-grow: 0;
@@ -251,16 +251,16 @@

 .queryeditor-combinator-label {
  padding: 5px;
-  color: #999;
+  color: var(--theme-color-fg-default-shy);
 }

 .queryeditor-combinator-label:hover {
-  color: #ccc;
+  color: var(--theme-color-fg-default);
 }

 .queryeditor-add-button {
-  background-color: #222;
-  color: #ccc;
+  background-color: var(--theme-color-bg-2);
+  color: var(--theme-color-fg-default);
  padding: 3px;
  padding-left: 7px;
  padding-right: 7px;
@@ -268,14 +268,14 @@
 }

 .queryeditor-add-button:hover {
-  background-color: #292929;
-  color: #fff;
+  background-color: var(--theme-color-bg-4);
+  color: var(--theme-color-fg-highlight);
 }

 .queryeditor-sorting {
  display: flex;
  flex-direction: column;
-  border: 1px solid #666;
+  border: 1px solid var(--theme-color-border-strong);
  padding: 5px;
 }

@@ -286,28 +286,28 @@
 }

 .queryeditor-span {
-  color: #999;
+  color: var(--theme-color-fg-default-shy);
 }

 .queryeditor-strong {
-  color: #ccc;
+  color: var(--theme-color-fg-default);
  font-weight: bold;
 }

 .queryeditor-span-strong {
-  color: #ccc;
+  color: var(--theme-color-fg-default);
  font-weight: bold;
  margin-left: 5px;
  margin-right: 5px;
 }

 .queryeditor-text-rule {
-  background-color: #222;
+  background-color: var(--theme-color-bg-2);
  padding: 3px;
 }

 .queryeditor-text-rule:hover {
-  background-color: #333;
+  background-color: var(--theme-color-bg-5);
 }

 .queryeditor-trash-icon {
@@ -327,7 +327,7 @@
 .queryeditor-sorting-rules {
  display: flex;
  flex-direction: column;
-  border: 1px solid #393939;
+  border: 1px solid var(--theme-color-border-default);
  padding: 5px;
  margin-right: 3px;
  margin-left: 2px;
--- a/packages/noodl-editor/src/editor/src/styles/propertyeditor/variantseditor.css
+++ b/packages/noodl-editor/src/editor/src/styles/propertyeditor/variantseditor.css
@@ -108,8 +108,8 @@
 }

 .variants-name:hover {
-  background-color: #333;
-  color: #fff;
+  background-color: var(--theme-color-bg-5);
+  color: var(--theme-color-fg-highlight);
 }

 .variants-input-container {
--- a/packages/noodl-editor/src/editor/src/styles/propertyeditor/visualstates.css
+++ b/packages/noodl-editor/src/editor/src/styles/propertyeditor/visualstates.css
@@ -31,7 +31,7 @@
 }

 .visual-state-default-transition .label {
-  background-color: #292929;
+  background-color: var(--theme-color-bg-4);
  padding: 2px 2px 2px 8px;
  color: rgba(255, 255, 255, 0.75);
  flex-grow: 1;
--- a/packages/noodl-editor/src/editor/src/views/CommentLayer/CommentLayer.css
+++ b/packages/noodl-editor/src/editor/src/views/CommentLayer/CommentLayer.css
@@ -48,7 +48,7 @@

 .comment-layer-comment.background.fill:not(.selected),
 .comment-layer-comment.background.transparent:not(.selected) {
-  border: 2px solid #00000020;
+  border: 2px solid rgba(0, 0, 0, 0.125);
 }

 .comment-layer-comment.background.selected.fill,
@@ -78,15 +78,15 @@
 }

 .comment-layer-comment.background.has-annotation.changed {
-  outline: 2px solid #83b8ba;
+  outline: 2px solid var(--theme-color-primary);
 }

 .comment-layer-comment.background.has-annotation.deleted {
-  outline: 2px solid #f57569;
+  outline: 2px solid var(--theme-color-danger);
 }

 .comment-layer-comment.background.has-annotation.created {
-  outline: 2px solid #5bf59e;
+  outline: 2px solid var(--theme-color-success);
 }

 .comment-drag-area {
--- a/packages/noodl-editor/src/editor/src/views/ConnectionPopup/ConnectionPopup.module.scss
+++ b/packages/noodl-editor/src/editor/src/views/ConnectionPopup/ConnectionPopup.module.scss
@@ -36,7 +36,7 @@
  position: relative;

  &.disabled {
-    color: #ffffff80;
+    color: rgba(255, 255, 255, 0.5);
  }
 }

@@ -67,13 +67,13 @@

  &.disabled::after {
    @extend %overlay;
-    background-color: #00000060;
+    background-color: rgba(0, 0, 0, 0.4);
  }
 }

 .noPortsMessage {
  padding: 10px;
-  color: #ccc;
+  color: var(--theme-color-fg-default-contrast);
 }

 .listElement {
@@ -96,7 +96,7 @@
  }

  &.disabled {
-    color: #ffffff40;
+    color: rgba(255, 255, 255, 0.25);

    .signalIcon {
      opacity: 0.3;
@@ -108,7 +108,7 @@

    &::before {
      @extend %overlay;
-      background-color: #ffffff33;
+      background-color: rgba(255, 255, 255, 0.2);
    }
  }
 }
@@ -134,7 +134,7 @@
  display: flex;
  align-items: center;
  position: relative;
-  color: #ffffffaa;
+  color: rgba(255, 255, 255, 0.67);
 }

 .groupLabel {
@@ -148,14 +148,14 @@

 .docsPopup {
  width: 300px;
-  background-color: #171717;
+  background-color: var(--theme-color-bg-2);
  padding: 10px;
-  color: #fff;
+  color: var(--theme-color-fg-highlight);
 }

 .docsType {
  margin-left: 5px;
-  color: #72babb;
+  color: var(--theme-color-primary);
 }

 .docsHeader {
@@ -163,7 +163,7 @@
 }

 .docsBody {
-  color: #ccc;
+  color: var(--theme-color-fg-default-contrast);
 }

 .docsEnumValue {
@@ -184,7 +184,7 @@

  &,
  &::placeholder {
-    color: rgba(255,255,255,0.6);
+    color: rgba(255, 255, 255, 0.6);
  }
 }

--- a/packages/noodl-editor/src/editor/src/views/NodePicker/tabs/NodeLibrary/NodeLibrary.module.scss
+++ b/packages/noodl-editor/src/editor/src/views/NodePicker/tabs/NodeLibrary/NodeLibrary.module.scss
@@ -63,7 +63,7 @@ $_scroll-bar-width: 4px;
  }

  &::-webkit-scrollbar-thumb {
-    background-color: #575757;
+    background-color: var(--theme-color-bg-5);
  }
 }

--- a/packages/noodl-editor/src/editor/src/views/TextStylePicker/TextStylePicker.css
+++ b/packages/noodl-editor/src/editor/src/views/TextStylePicker/TextStylePicker.css
@@ -6,7 +6,7 @@
  display: flex;
  justify-content: center;
  align-items: center;
-  border-left: 1px solid #292929;
+  border-left: 1px solid var(--theme-color-bg-4);
 }

 .textstyles-edit-style::before {
--- a/packages/noodl-editor/src/editor/src/views/lessons/LessonLayerView.css
+++ b/packages/noodl-editor/src/editor/src/views/lessons/LessonLayerView.css
@@ -1,5 +1,5 @@
 .lessonlayerview {
-  background-color: #1f1f1f;
+  background-color: var(--theme-color-bg-2);
 }

 .lesson-layer-progressbar {
@@ -31,7 +31,7 @@
  box-sizing: border-box;
  width: 230px;
  padding: 8px 16px;
-  color: #f0f7f980;
+  color: rgba(240, 247, 249, 0.5);
  border-left: 1px solid var(--theme-color-bg-1);
  flex-shrink: 0;
  overflow: hidden;
--- a/packages/noodl-editor/src/editor/src/views/nodegrapheditor.ts
+++ b/packages/noodl-editor/src/editor/src/views/nodegrapheditor.ts
@@ -347,25 +347,31 @@ export class NodeGraphEditor extends View {

    KeyboardHandler.instance.registerCommands(this.keyboardCommands);

+    // Load icons using webpack require to ensure proper bundling
    this.homeIcon = new Image();
-    this.homeIcon.src = '../assets/icons/core-ui-temp/home--nodegraph.svg';
+    this.homeIcon.src = require('../../../assets/icons/core-ui-temp/home--nodegraph.svg');
    this.homeIcon.onload = () => this.repaint();
+    this.homeIcon.onerror = (e) => console.error('Failed to load home icon:', e);

    this.componentIcon = new Image();
-    this.componentIcon.src = '../assets/icons/core-ui-temp/component--nodegraph.svg';
+    this.componentIcon.src = require('../../../assets/icons/core-ui-temp/component--nodegraph.svg');
    this.componentIcon.onload = () => this.repaint();
+    this.componentIcon.onerror = (e) => console.error('Failed to load component icon:', e);

    this.aiAssistantInnerIcon = new Image();
-    this.aiAssistantInnerIcon.src = '../assets/icons/core-ui-temp/aiAssistant--nodegraph-inner.svg';
+    this.aiAssistantInnerIcon.src = require('../../../assets/icons/core-ui-temp/aiAssistant--nodegraph-inner.svg');
    this.aiAssistantInnerIcon.onload = () => this.repaint();
+    this.aiAssistantInnerIcon.onerror = (e) => console.error('Failed to load AI assistant inner icon:', e);

    this.aiAssistantOuterIcon = new Image();
-    this.aiAssistantOuterIcon.src = '../assets/icons/core-ui-temp/aiAssistant--nodegraph-outer.svg';
+    this.aiAssistantOuterIcon.src = require('../../../assets/icons/core-ui-temp/aiAssistant--nodegraph-outer.svg');
    this.aiAssistantOuterIcon.onload = () => this.repaint();
+    this.aiAssistantOuterIcon.onerror = (e) => console.error('Failed to load AI assistant outer icon:', e);

    this.warningIcon = new Image();
-    this.warningIcon.src = '../assets/icons/core-ui-temp/warning_triangle.svg';
+    this.warningIcon.src = require('../../../assets/icons/core-ui-temp/warning_triangle.svg');
    this.warningIcon.onload = () => this.repaint();
+    this.warningIcon.onerror = (e) => console.error('Failed to load warning icon:', e);

    SidebarModel.instance.on(
      SidebarModelEvent.activeChanged,
--- a/packages/noodl-editor/src/editor/src/views/nodegrapheditor/InspectJSONView/InspectPopup.module.scss
+++ b/packages/noodl-editor/src/editor/src/views/nodegrapheditor/InspectJSONView/InspectPopup.module.scss
@@ -1,13 +1,13 @@
 $pin-icon-size: 14px;

 .Root {
-  background-color: #383838;
+  background-color: var(--theme-color-bg-4);
  max-height: 300px;
  max-width: 500px;
  display: flex;
  gap: 5px;
  padding: 5px;
-  border: 1px solid #2a2a2a;
+  border: 1px solid var(--theme-color-border-default);
 }

 .ValueContainer {
@@ -32,14 +32,14 @@ $pin-icon-size: 14px;

    svg,
    path {
-      color: #a0a0a0 !important;
-      fill: #a0a0a0 !important;
+      color: var(--theme-color-fg-default-shy) !important;
+      fill: var(--theme-color-fg-default-shy) !important;
    }
  }

  :global(.object-key) {
    span {
-      color: #ffffff;
+      color: var(--theme-color-fg-highlight);
    }
  }

@@ -50,7 +50,7 @@ $pin-icon-size: 14px;

 .ValueInspector {
  font-family: monospace;
-  color: #f6f6f6;
+  color: var(--theme-color-fg-highlight);
  white-space: pre;
  cursor: text;
  user-select: text;
@@ -71,7 +71,7 @@ $pin-icon-size: 14px;
  margin: 0;
  padding: 0;
  border: none;
-  background: #b9b9b9;
+  background: var(--theme-color-fg-default);
  flex-shrink: 0;

  &.is-pinned {
--- a/packages/noodl-editor/src/editor/src/views/nodegrapheditor/NodeGraphEditorNode.ts
+++ b/packages/noodl-editor/src/editor/src/views/nodegrapheditor/NodeGraphEditorNode.ts
@@ -642,21 +642,26 @@ export class NodeGraphEditorNode {
        ctx.globalAlpha = 1;
      }

-      if (this.icon) {
+      if (this.icon && this.icon.complete && this.icon.naturalWidth > 0) {
        ctx.imageSmoothingEnabled = true;
        ctx.imageSmoothingQuality = 'high';

        const offset = Math.abs(this.iconSize - 18);

-        ctx.drawImage(
-          this.icon,
-          x + horizontalSpacing + this.nodeSize.width - horizontalSpacing - connectionDragAreaWidth - 16 - offset,
-          y + NodeGraphEditorNode.verticalSpacing + 1 - offset / 2,
-          this.iconSize,
-          this.iconSize
-        );
+        try {
+          ctx.drawImage(
+            this.icon,
+            x + horizontalSpacing + this.nodeSize.width - horizontalSpacing - connectionDragAreaWidth - 16 - offset,
+            y + NodeGraphEditorNode.verticalSpacing + 1 - offset / 2,
+            this.iconSize,
+            this.iconSize
+          );
+        } catch (e) {
+          // Icon failed to load, skip drawing
+          console.warn('Failed to draw node icon:', e);
+        }

-        if (this.rotatingIcon) {
+        if (this.rotatingIcon && this.rotatingIcon.complete && this.rotatingIcon.naturalWidth > 0) {
          ctx.save();
          ctx.translate(
            x +
@@ -670,7 +675,13 @@ export class NodeGraphEditorNode {
            y + NodeGraphEditorNode.verticalSpacing + 1 - offset / 2 + this.iconSize / 2
          );
          ctx.rotate(this.iconRotation);
-          ctx.drawImage(this.rotatingIcon, -this.iconSize / 2, -this.iconSize / 2, this.iconSize, this.iconSize);
+
+          try {
+            ctx.drawImage(this.rotatingIcon, -this.iconSize / 2, -this.iconSize / 2, this.iconSize, this.iconSize);
+          } catch (e) {
+            // Rotating icon failed to load, skip drawing
+            console.warn('Failed to draw rotating icon:', e);
+          }

          ctx.restore();
        }
--- a/packages/noodl-editor/src/frames/viewer-frame/index.js
+++ b/packages/noodl-editor/src/frames/viewer-frame/index.js
@@ -1,6 +1,7 @@
 import '../../editor/src/styles/custom-properties/animations.css';
 import '../../editor/src/styles/custom-properties/fonts.css';
 import '../../editor/src/styles/custom-properties/colors.css';
+import '../../editor/src/styles/custom-properties/spacing.css';
 import PopupLayer from '../../editor/src/views/popuplayer';
 import Viewer from './src/views/viewer';