From 3724a937b2cb671878847b5b28392bd9fd672b35 Mon Sep 17 00:00:00 2001
From: JeraldJF <jeraldj@sanketika.in>
Date: Wed, 22 Apr 2026 12:29:15 +0530
Subject: [PATCH 01/12] feat: theme changes

---
 angular.json                                  |  10 +-
 .../assets-browser.component.scss             |  15 +-
 .../components/editor/editor.component.scss   |  37 +-
 .../fancy-tree/fancy-tree.component.html      |   4 +-
 .../fancy-tree/fancy-tree.component.scss      |  23 +-
 .../components/header/header.component.scss   |   6 +-
 .../question/question.component.scss          |  26 +-
 .../lib/semantic/semantic-overrides.scss      | 174 ++++
 .../styles/_portal-theme-overrides.scss       | 773 ++++++++++++++++++
 src/assets/styles/_variables.scss             |  30 +-
 src/assets/styles/components/_buttons.scss    |  15 +-
 src/assets/styles/components/_modal.scss      |  16 +-
 src/assets/styles/styles.scss                 |   3 +-
 web-component/package.json                    |   2 +-
 14 files changed, 1063 insertions(+), 71 deletions(-)
 create mode 100644 src/assets/styles/_portal-theme-overrides.scss

diff --git a/angular.json b/angular.json
index 4eb5b4faf..a1fa1cda2 100644
--- a/angular.json
+++ b/angular.json
@@ -38,12 +38,12 @@
               }
             ],
             "styles": [
-              "node_modules/@project-sunbird/sunbird-quml-player-web-component/assets/quml-player/styles.css",
               "node_modules/@project-sunbird/sb-styles/assets/styles.scss",
               "src/styles.scss",
               "src/assets/lib/semantic/semantic.min.css",
-              "src/assets/styles/styles.scss",
-              "node_modules/font-awesome/css/font-awesome.css"
+              "node_modules/font-awesome/css/font-awesome.css",
+              "node_modules/@project-sunbird/sunbird-quml-player-web-component/assets/quml-player/styles.css",
+              "src/assets/styles/styles.scss"
             ],
             "scripts": [
               "src/assets/libs/iziToast/iziToast.min.js",
@@ -225,9 +225,9 @@
               "src/assets/quml-styles/quml-carousel.css",
               "node_modules/@project-sunbird/sb-styles/assets/styles.scss",
               "src/assets/lib/semantic/semantic.min.css",
-              "src/assets/styles/styles.scss",
               "node_modules/font-awesome/css/font-awesome.css",
-              "node_modules/@project-sunbird/sunbird-quml-player-web-component/assets/quml-player/styles.css"
+              "node_modules/@project-sunbird/sunbird-quml-player-web-component/assets/quml-player/styles.css",
+              "src/assets/styles/styles.scss"
             ],
             "scripts": [
               "node_modules/@project-sunbird/sunbird-file-upload-library/sunbird-file-upload-library.js",
diff --git a/projects/questionset-editor-library/src/lib/components/assets-browser/assets-browser.component.scss b/projects/questionset-editor-library/src/lib/components/assets-browser/assets-browser.component.scss
index 799c9782c..9609159e8 100644
--- a/projects/questionset-editor-library/src/lib/components/assets-browser/assets-browser.component.scss
+++ b/projects/questionset-editor-library/src/lib/components/assets-browser/assets-browser.component.scss
@@ -64,8 +64,9 @@
     justify-content: center;
     flex-direction: column;
     margin: 0 auto;
-    background-color: #F5F9FC;
-    border: 1px dashed #80a7ce;
+    background-color: var(--primary-0);
+    border: 1px dashed var(--primary-200);
+    border-radius: 0.5rem;
   }
   
   .upload-file-description p {
@@ -220,11 +221,11 @@
   }
   
   .upload-image-modal-section {
-    border-radius: 4px;
+    border-radius: 0.5rem;
     width: 100%;
     min-height: 130px;
-    background: #F5F9FC;
-    border: 1px dashed #024f9d;
+    background: var(--primary-0);
+    border: 1px dashed var(--primary-300);
   }
   
   .upload-input-button {
@@ -284,9 +285,9 @@
       position: relative;
       margin-bottom: 0.5rem;
       .sb-form-control{
-        border: 1px solid rgba(34,36,38,.15);
+        border: 1px solid var(--gray-100);
         width: 100%;
-        border-radius: .28571429rem;
+        border-radius: 0.5rem;
         box-shadow: 0 0 0 0 transparent inset;
         padding: .25rem .5rem!important;
       }
diff --git a/projects/questionset-editor-library/src/lib/components/editor/editor.component.scss b/projects/questionset-editor-library/src/lib/components/editor/editor.component.scss
index 7fe57c055..82e3557b7 100755
--- a/projects/questionset-editor-library/src/lib/components/editor/editor.component.scss
+++ b/projects/questionset-editor-library/src/lib/components/editor/editor.component.scss
@@ -32,7 +32,7 @@ lib-questionset-editor {
   .add-to-library {
     position: relative;
     z-index: 998 !important;
-    background: #e5edf5;
+    background: var(--primary-0);
     .sb-required {
       color: #ff4558;
       padding-left: 2px;
@@ -75,11 +75,16 @@ lib-questionset-editor {
       select,
       .sb-textarea,
       .list-border {
-        border: 1px solid rgba(34, 36, 38, 0.15) !important;
+        border: 1px solid var(--gray-100) !important;
         padding: 0.85rem 0.5rem !important;
-        border-radius: 0.28571429rem;
+        border-radius: 0.5rem;
         font-size: 0.785rem !important;
         font-weight: 500;
+        transition: border-color 0.2s ease, box-shadow 0.2s ease;
+        &:focus {
+          border-color: var(--primary-300) !important;
+          box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.12) !important;
+        }
         // text-transform: capitalize;
       }
       select {
@@ -123,8 +128,8 @@ lib-questionset-editor {
         }
       }
       .sb-keywordbox {
-        border: 1px solid rgba(34, 36, 38, 0.15) !important;
-        border-radius: 0.28571429rem;
+        border: 1px solid var(--gray-100) !important;
+        border-radius: 0.5rem;
         font-size: 0.785rem !important;
         font-weight: 500;
         padding: 0 !important;
@@ -290,11 +295,15 @@ lib-questionset-editor {
   .ck.ck-editor__top
   .ck-sticky-panel
   .ck-toolbar {
-    border-left: 1px solid #c4c4c4 !important;
-    border-right: 1px solid #c4c4c4 !important;
+    border-left: 1px solid var(--gray-100) !important;
+    border-right: 1px solid var(--gray-100) !important;
+    border-top: 1px solid var(--gray-100) !important;
     border-bottom-left-radius: 0 !important;
     border-bottom-right-radius: 0 !important;
+    border-top-left-radius: 0.5rem !important;
+    border-top-right-radius: 0.5rem !important;
     border-bottom: 0 !important;
+    background-color: var(--primary-0) !important;
   }
   sb-dynamic-richtext
   .ck-rounded-corners
@@ -303,8 +312,14 @@ lib-questionset-editor {
   sb-dynamic-richtext
   .ck.ck-editor__main
   > .ck-editor__editable.ck-rounded-corners {
-    border: 1px solid #c4c4c4 !important;
-    border-color: var(--ck-color-base-border) !important;
+    border: 1px solid var(--gray-100) !important;
+    border-color: var(--gray-100) !important;
+    border-bottom-left-radius: 0.5rem !important;
+    border-bottom-right-radius: 0.5rem !important;
+    &:focus {
+      border-color: var(--primary-300) !important;
+      box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.12) !important;
+    }
   }
 
 
@@ -551,8 +566,8 @@ lib-questionset-editor {
     .sb-timer-input{
       width: 10rem;
       font-size: .785rem!important;
-      border: 1px solid rgba(34,36,38,.15)!important;
-      border-radius: .28571429rem;
+      border: 1px solid var(--gray-100)!important;
+      border-radius: 0.5rem;
       padding: 12px 10px;
       margin-right: 5px;
       height: 44px;
diff --git a/projects/questionset-editor-library/src/lib/components/fancy-tree/fancy-tree.component.html b/projects/questionset-editor-library/src/lib/components/fancy-tree/fancy-tree.component.html
index 2bd164966..d3a6fbe40 100755
--- a/projects/questionset-editor-library/src/lib/components/fancy-tree/fancy-tree.component.html
+++ b/projects/questionset-editor-library/src/lib/components/fancy-tree/fancy-tree.component.html
@@ -22,8 +22,8 @@
     </div>
     {{configService.labelConfig?.button_labels?.add_from_library_btn_label}}
   </button>
-  <button class="sb-btn sb-btn-normal sb-btn-primary" [disabled]="!visibility?.createNew"
-    [ngClass]="[!visibility?.createNew ? 'sb-btn-outline-disabled' : '', (visibility?.createNew && buttonLoaders?.addFromLibraryButtonLoader) ? 'sb-btn-loading-spinner sb-btn-outline-disabled': '']"
+  <button class="sb-btn sb-btn-normal" [disabled]="!visibility?.createNew"
+    [ngClass]="[visibility?.createNew && !buttonLoaders?.addFromLibraryButtonLoader ? 'sb-btn-primary' : '', !visibility?.createNew ? 'sb-btn-outline-disabled' : '', (visibility?.createNew && buttonLoaders?.addFromLibraryButtonLoader) ? 'sb-btn-loading-spinner sb-btn-outline-disabled': '']"
     type="button"  (click)="createNewContent()"
     libTelemetryInteract
     [telemetryInteractEdata]="telemetryService.getTelemetryInteractEdata('create_new','click','launch', telemetryService.telemetryPageId)">
diff --git a/projects/questionset-editor-library/src/lib/components/fancy-tree/fancy-tree.component.scss b/projects/questionset-editor-library/src/lib/components/fancy-tree/fancy-tree.component.scss
index 76965252a..9128d108e 100644
--- a/projects/questionset-editor-library/src/lib/components/fancy-tree/fancy-tree.component.scss
+++ b/projects/questionset-editor-library/src/lib/components/fancy-tree/fancy-tree.component.scss
@@ -52,13 +52,18 @@
           &-expanded {
             padding: 15px 33px;
             border: 1px solid transparent;
-            background-color: #fff;
+            background-color: var(--white);
+            border-radius: 0.375rem;
           }
           &-active {
-            border: 1px solid #d0e0f3;
+            border: 1px solid transparent;
             background-color: var(--primary-0);
             padding: 15px 33px;
             border-top: none;
+            border-left: 3px solid var(--primary-400);
+            border-right: none;
+            border-bottom: none;
+            border-radius: 0 0.375rem 0.375rem 0;
           }
         }
 
@@ -101,13 +106,18 @@
               padding: 6px 6px 8px 5px;
               margin-left: 45px;
               border: 1px solid transparent;
+              border-radius: 0.375rem;
+              transition: background-color 0.15s ease, border-color 0.15s ease;
 
               &.fancytree-active,
               &.fancytree-focused,
               &:hover {
-                border: 1px solid #d0e0f3;
+                border: 1px solid transparent;
                 background-color: var(--primary-0);
                 border-right: 0;
+                border-bottom: 0;
+                border-top: 0;
+                border-left: 3px solid var(--primary-400);
               }
 
               &.dependent {
@@ -159,16 +169,17 @@
   .sb-fixed-with-whitebg {
     position: fixed;
     width: 100%;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid var(--gray-100);
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: #fff;
+    background-color: var(--white);
+    box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.06);
     z-index: 99999;
     padding: 0 !important;
     .sb-btn-cover{
       padding: 0.5rem;
-      border-right: solid 1px #ccc;
+      border-right: solid 1px var(--gray-100);
       width: 50%;
       text-align: center;
       .sb-btn{
diff --git a/projects/questionset-editor-library/src/lib/components/header/header.component.scss b/projects/questionset-editor-library/src/lib/components/header/header.component.scss
index 703afa66b..cb190ffdf 100755
--- a/projects/questionset-editor-library/src/lib/components/header/header.component.scss
+++ b/projects/questionset-editor-library/src/lib/components/header/header.component.scss
@@ -22,15 +22,15 @@
     }
   }
   .sb-bg-header-blue {
-    background: #d8e1e8;
-  }  
+    background: var(--primary-0);
+  }
     
   .sb-bg-lightBlue {
     background: var(--primary-0) !important;
   }
   
   .bb-1 {
-    border-bottom: 1px solid #d8d8d8;
+    border-bottom: 1px solid var(--gray-100);
   }
 
   .flex-as-baseline {
diff --git a/projects/questionset-editor-library/src/lib/components/question/question.component.scss b/projects/questionset-editor-library/src/lib/components/question/question.component.scss
index 0fe07ea01..6eba362e8 100644
--- a/projects/questionset-editor-library/src/lib/components/question/question.component.scss
+++ b/projects/questionset-editor-library/src/lib/components/question/question.component.scss
@@ -3,7 +3,7 @@
 }
 sui-select {
   width: 100%;
-  border: 1px solid rgba(34, 36, 38, 0.15);
+  border: 1px solid var(--gray-100);
   font-size: 0.8rem;
   padding: 0.4rem 0.2rem;
   background: #fff;
@@ -55,28 +55,28 @@ sui-select {
 
 .ckeditor-tool__option,
 .ckeditor-tool__question{
-  border: 1px solid #c4c4c4;
-  border-radius: 4px;
+  border: 1px solid var(--gray-100);
+  border-radius: 0.5rem;
   border-top: 0;
   position: relative;
   display: flow-root;
 }
 .ckeditor-tool__solution, .ckeditor-tool__question-readonly, .ckeditor-tool__option-readonly {
-  border: 1px solid #c4c4c4;
-  border-radius: 4px;
+  border: 1px solid var(--gray-100);
+  border-radius: 0.5rem;
   margin-bottom: -4px;
 }
 
 .ckeditor-tool__label {
-  background-color: #f3f8ff;
+  background-color: var(--primary-0);
   color: var(--primary-color)!important;
   font-weight: 600;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
 }
 
 .mcq-checkbox-answer {
-  background: #f2f2f2;
+  background: var(--gray-0);
   padding: 8px;
   display: flex;
   justify-content: center;
@@ -201,9 +201,9 @@ sui-select {
       select,
       .sb-textarea,
       .list-border {
-        border: 1px solid rgba(34, 36, 38, 0.15) !important;
+        border: 1px solid var(--gray-100) !important;
         padding: 12px 8px !important;
-        border-radius: 0.28571429rem;
+        border-radius: 0.5rem;
         font-size: 0.785rem !important;
         font-weight: 500;
         // text-transform: capitalize;
@@ -234,8 +234,8 @@ sui-select {
     }
   }
     .sb-keywordbox{
-      border: 1px solid rgba(34,36,38,.15) !important;
-      border-radius: .28571429rem;
+      border: 1px solid var(--gray-100) !important;
+      border-radius: 0.5rem;
       font-size: 0.785rem !important;
       font-weight: 500;
       padding: 0 !important;
diff --git a/src/assets/lib/semantic/semantic-overrides.scss b/src/assets/lib/semantic/semantic-overrides.scss
index b84c1f25e..f95e5d61f 100644
--- a/src/assets/lib/semantic/semantic-overrides.scss
+++ b/src/assets/lib/semantic/semantic-overrides.scss
@@ -98,3 +98,177 @@ input[type=number]::-webkit-outer-spin-button {
     width: 50% !important;
   }
 }
+
+// =============================================================================
+// Portal theme overrides for Semantic UI components
+// =============================================================================
+
+// Inputs & Form fields
+.ui.input > input,
+.ui.form input[type=text],
+.ui.form input[type=email],
+.ui.form input[type=password],
+.ui.form input[type=search],
+.ui.form input[type=number],
+.ui.form input[type=url],
+.ui.form input[type=tel],
+.ui.form textarea {
+  border-radius: 0.5rem !important;
+  border-color: var(--gray-100) !important;
+  font-size: 0.875rem !important;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
+  &:focus {
+    border-color: var(--primary-300) !important;
+    box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.12) !important;
+  }
+}
+
+// Dropdowns
+.ui.selection.dropdown {
+  border-radius: 0.5rem !important;
+  border-color: var(--gray-100) !important;
+  font-size: 0.875rem !important;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
+  min-height: 2.5rem !important;
+  &.active, &:focus, &.visible {
+    border-color: var(--primary-300) !important;
+    box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.12) !important;
+  }
+  > .dropdown.icon {
+    color: var(--gray-400) !important;
+  }
+  > .text {
+    font-size: 0.875rem !important;
+    color: var(--gray-800) !important;
+  }
+  .menu {
+    border-radius: 0 0 0.5rem 0.5rem !important;
+    border-color: var(--gray-100) !important;
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.10) !important;
+    > .item {
+      font-size: 0.875rem !important;
+      transition: background-color 0.15s ease !important;
+      &:hover, &.active, &.selected {
+        background-color: var(--primary-0) !important;
+        color: var(--primary-400) !important;
+        font-weight: 500 !important;
+      }
+    }
+  }
+}
+
+// Cards
+.ui.card, .ui.cards > .card {
+  border-radius: 0.75rem !important;
+  border: 1px solid var(--gray-100) !important;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06) !important;
+  transition: box-shadow 0.2s ease !important;
+  &:hover {
+    box-shadow: 0 4px 16px 0 rgba(var(--rc-rgba-primary), 0.14) !important;
+  }
+}
+
+// Buttons
+.ui.button {
+  border-radius: 0.5rem !important;
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
+  &.primary {
+    background-color: var(--primary-400) !important;
+    color: var(--white) !important;
+    &:hover { background-color: var(--primary-800) !important; }
+  }
+  &.secondary {
+    background-color: var(--secondary-200) !important;
+    color: var(--white) !important;
+  }
+}
+
+// Segments / panels
+.ui.segment {
+  border-radius: 0.75rem !important;
+  border-color: var(--gray-100) !important;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05) !important;
+}
+
+// Tabs / menus
+.ui.menu {
+  border-radius: 0.5rem !important;
+  .item {
+    font-size: 0.875rem !important;
+    transition: color 0.15s ease, background-color 0.15s ease !important;
+  }
+  .active.item {
+    color: var(--primary-400) !important;
+    font-weight: 600 !important;
+    border-color: var(--primary-400) !important;
+  }
+}
+.ui.secondary.pointing.menu {
+  border-color: var(--gray-100) !important;
+  .active.item {
+    border-color: var(--primary-400) !important;
+    color: var(--primary-400) !important;
+  }
+}
+
+// Labels
+.ui.label {
+  border-radius: 0.375rem !important;
+  font-size: 0.75rem !important;
+  font-weight: 500 !important;
+}
+
+// Tables
+.ui.table {
+  border-radius: 0.75rem !important;
+  border-color: var(--gray-100) !important;
+  thead th {
+    background-color: var(--primary-0) !important;
+    color: var(--gray-800) !important;
+    font-weight: 600 !important;
+    border-bottom-color: var(--gray-100) !important;
+  }
+  tbody tr:hover td {
+    background-color: var(--primary-0) !important;
+  }
+}
+
+// Checkboxes
+.ui.checkbox input:checked ~ .box:before,
+.ui.checkbox input:checked ~ label:before {
+  border-color: var(--primary-400) !important;
+  background: var(--primary-400) !important;
+}
+.ui.checkbox input:checked ~ .box:after,
+.ui.checkbox input:checked ~ label:after {
+  color: var(--white) !important;
+}
+.ui.toggle.checkbox input:checked ~ label:before {
+  background-color: var(--primary-400) !important;
+}
+
+// Search results
+.ui.search > .results {
+  border-radius: 0.5rem !important;
+  border-color: var(--gray-100) !important;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.10) !important;
+  .result:hover {
+    background: var(--primary-0) !important;
+  }
+}
+
+// Accordion
+.ui.accordion .title:not(.ui) {
+  color: var(--primary-400) !important;
+  font-weight: 600 !important;
+}
+
+// Loader
+.ui.loader:before {
+  border-color: var(--gray-100) !important;
+}
+.ui.loader:after {
+  border-color: var(--primary-400) transparent transparent !important;
+}
diff --git a/src/assets/styles/_portal-theme-overrides.scss b/src/assets/styles/_portal-theme-overrides.scss
new file mode 100644
index 000000000..da5cdacb1
--- /dev/null
+++ b/src/assets/styles/_portal-theme-overrides.scss
@@ -0,0 +1,773 @@
+// =============================================================================
+// Portal Theme Overrides — Sunbird Editor
+// Aligns the editor UI with the Sunbird Portal orange/white design system.
+// All rules here are intentionally scoped or use specificity to override
+// vendor/library defaults without breaking structural layout.
+// =============================================================================
+
+// -----------------------------------------------------------------------------
+// 1. BODY & PAGE BACKGROUND
+// -----------------------------------------------------------------------------
+
+body,
+.sb-editor-body,
+.editor-body {
+  background-color: var(--bg-body); // #ffffff — white portal base
+}
+
+// -----------------------------------------------------------------------------
+// 2. TYPOGRAPHY — font sizes, weights, link colours
+// -----------------------------------------------------------------------------
+
+body,
+input,
+textarea,
+select,
+button {
+  font-size: var(--font-size-base); // 14px
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--gray-800);
+  font-weight: 600;
+}
+
+a,
+a:link,
+a:visited {
+  color: var(--primary-400); // orange
+  transition: color 0.15s ease;
+}
+
+a:hover,
+a:focus {
+  color: var(--primary-600); // darker orange on hover
+  text-decoration: underline;
+}
+
+// -----------------------------------------------------------------------------
+// 3. FORM INPUTS — rounded corners, orange focus ring
+// -----------------------------------------------------------------------------
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="search"],
+input[type="url"],
+input[type="tel"],
+textarea,
+select {
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-100);
+  padding: 0.5rem 0.75rem;
+  font-size: var(--font-size-base);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  background-color: var(--white);
+  color: var(--gray-800);
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    border-color: var(--primary-300);
+    box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.15);
+  }
+
+  &::placeholder {
+    color: var(--gray-200);
+    font-size: var(--font-size-base);
+  }
+}
+
+// Semantic UI input overrides
+.ui.input > input,
+.ui.form input[type="text"],
+.ui.form input[type="email"],
+.ui.form input[type="password"],
+.ui.form input[type="search"],
+.ui.form textarea,
+.ui.form select {
+  border-radius: 0.5rem !important;
+  border-color: var(--gray-100) !important;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
+
+  &:focus {
+    border-color: var(--primary-300) !important;
+    box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.15) !important;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 4. DROPDOWNS / SELECTS — rounded, orange active state
+// -----------------------------------------------------------------------------
+
+.ui.dropdown,
+.ui.selection.dropdown {
+  border-radius: 0.5rem !important;
+  border-color: var(--gray-100) !important;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
+
+  &.active,
+  &:focus {
+    border-color: var(--primary-300) !important;
+    box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.15) !important;
+  }
+
+  .menu {
+    border-radius: 0 0 0.5rem 0.5rem !important;
+    border-color: var(--gray-100) !important;
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12) !important;
+
+    > .item {
+      font-size: var(--font-size-base) !important;
+      transition: background-color 0.15s ease !important;
+
+      &:hover,
+      &.active,
+      &.selected {
+        background-color: var(--primary-0) !important;
+        color: var(--primary-400) !important;
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 5. CHECKBOXES & RADIO BUTTONS — orange accent
+// -----------------------------------------------------------------------------
+
+.ui.checkbox input:checked ~ .box:after,
+.ui.checkbox input:checked ~ label:after {
+  color: var(--primary-400) !important;
+}
+
+.ui.checkbox input:checked ~ .box:before,
+.ui.checkbox input:checked ~ label:before {
+  border-color: var(--primary-400) !important;
+  background-color: var(--primary-400) !important;
+}
+
+.ui.checkbox input:focus ~ .box:before,
+.ui.checkbox input:focus ~ label:before {
+  border-color: var(--primary-300) !important;
+  box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.15) !important;
+}
+
+.ui.radio.checkbox input:checked ~ label:after {
+  background-color: var(--primary-400) !important;
+}
+
+// -----------------------------------------------------------------------------
+// 6. TABS / NAV TABS — orange active indicator
+// -----------------------------------------------------------------------------
+
+.ui.menu .item {
+  transition: color 0.15s ease, background-color 0.15s ease !important;
+}
+
+.ui.menu .active.item,
+.ui.menu .item.active {
+  color: var(--primary-400) !important;
+  border-color: var(--primary-400) !important;
+  font-weight: 600;
+}
+
+.ui.pointing.menu .active.item:after {
+  background-color: var(--primary-400) !important;
+  border-color: var(--primary-400) !important;
+}
+
+.ui.secondary.pointing.menu .active.item {
+  border-color: var(--primary-400) !important;
+  color: var(--primary-400) !important;
+}
+
+// Tab underline indicator
+.sb-tabs .sb-tab-item.active,
+.sb-tab.active {
+  border-bottom-color: var(--primary-400) !important;
+  color: var(--primary-400) !important;
+}
+
+// -----------------------------------------------------------------------------
+// 7. TREE / COLLECTION TREE — hover & selected state
+// -----------------------------------------------------------------------------
+
+.fancy-tree .fancytree-node:hover > .fancytree-title,
+.fancytree-node:hover > .fancytree-title {
+  background-color: var(--primary-0) !important;
+  color: var(--primary-400) !important;
+  border-radius: 0.25rem;
+}
+
+.fancy-tree .fancytree-active > .fancytree-title,
+.fancytree-active > .fancytree-title {
+  background-color: var(--primary-100) !important;
+  color: var(--primary-400) !important;
+  border-left: 3px solid var(--primary-400);
+  border-radius: 0 0.25rem 0.25rem 0;
+}
+
+// Plain tree hover
+.plain-tree .tree-node:hover,
+.sb-tree-node:hover {
+  background-color: var(--primary-0) !important;
+  border-radius: 0.375rem;
+}
+
+.plain-tree .tree-node.active,
+.sb-tree-node.active {
+  background-color: var(--primary-100) !important;
+  border-left: 3px solid var(--primary-400) !important;
+  color: var(--primary-400) !important;
+}
+
+// -----------------------------------------------------------------------------
+// 8. HEADER / TOOLBAR — portal-style top bar
+// -----------------------------------------------------------------------------
+
+.editor-header,
+.sb-editor-header,
+.header-component {
+  background-color: var(--white);
+  border-bottom: 1px solid var(--gray-100);
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
+}
+
+// Primary action area in header
+.header-component .sb-btn-primary,
+.editor-header .sb-btn-primary {
+  background-color: var(--primary-400) !important;
+  border-color: var(--primary-400) !important;
+  color: var(--white) !important;
+  border-radius: 0.5rem !important;
+}
+
+// Override sb-styles full-color primary header background
+.sb-bg-color-primary {
+  background-color: var(--primary-600) !important;
+  background-image: none !important;
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
+
+  .sb-btn.back-btn,
+  .sb-btn.sb-btn-primary.back-btn {
+    background: transparent !important;
+    border-color: transparent !important;
+    border: none !important;
+    color: var(--white) !important;
+    font-size: 0.8rem !important;
+    padding: 0.25rem 0.75rem !important;
+    border-radius: 0.375rem !important;
+    &:hover {
+      background: rgba(255, 255, 255, 0.15) !important;
+    }
+  }
+
+  .sb-color-white,
+  * { color: var(--white) !important; }
+}
+
+// Second row header (title + action buttons)
+.sb-bg-lightBlue {
+  background-color: var(--white) !important;
+  border-bottom: 1px solid var(--gray-100) !important;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05) !important;
+
+  .practical-header__title {
+    color: var(--gray-800) !important;
+    font-size: 1rem !important;
+    font-weight: 700 !important;
+  }
+
+  .sb-btn-outline-primary {
+    border-color: var(--primary-300) !important;
+    color: var(--primary-400) !important;
+    border-radius: 0.5rem !important;
+    &:hover { background-color: var(--primary-0) !important; }
+    &.sb-btn-outline-disabled,
+    &[disabled] {
+      background-color: var(--white) !important;
+      border-color: var(--gray-200) !important;
+      color: var(--gray-400) !important;
+      cursor: not-allowed !important;
+      pointer-events: none;
+      &:hover {
+        background-color: var(--white) !important;
+        border-color: var(--gray-200) !important;
+        color: var(--gray-400) !important;
+      }
+    }
+  }
+
+  .sb-btn-primary {
+    background-color: var(--primary-400) !important;
+    border-color: var(--primary-400) !important;
+    color: var(--white) !important;
+    border-radius: 0.5rem !important;
+    font-weight: 600 !important;
+    &:hover { background-color: var(--primary-800) !important; }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 9. PROGRESS / STATUS INDICATORS
+// -----------------------------------------------------------------------------
+
+.sb-progress-status .active,
+.progress-status .active {
+  color: var(--primary-400) !important;
+  border-color: var(--primary-400) !important;
+}
+
+.sb-progress-status .completed {
+  color: var(--secondary-200) !important; // green for completed
+}
+
+// Semantic UI progress bar
+.ui.progress .bar {
+  background-color: var(--primary-400) !important;
+  border-radius: 0.5rem !important;
+}
+
+.ui.progress {
+  border-radius: 0.5rem !important;
+}
+
+// -----------------------------------------------------------------------------
+// 10. TOASTS / NOTIFICATIONS — matching portal style
+// -----------------------------------------------------------------------------
+
+.sb-toast,
+.iziToast,
+[class*="iziToast-color"] {
+  border-radius: 0.5rem !important;
+  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12) !important;
+}
+
+.iziToast.iziToast-color-blue,
+.sb-toast-info {
+  background-color: var(--primary-0) !important;
+  border-left: 4px solid var(--primary-400) !important;
+  color: var(--gray-800) !important;
+}
+
+.iziToast.iziToast-color-green,
+.sb-toast-success {
+  background-color: var(--secondary-0) !important;
+  border-left: 4px solid var(--secondary-200) !important;
+}
+
+.iziToast.iziToast-color-red,
+.sb-toast-error {
+  background-color: var(--red-0) !important;
+  border-left: 4px solid var(--red-400) !important;
+}
+
+.iziToast.iziToast-color-yellow,
+.sb-toast-warning {
+  background-color: var(--tertiary-0) !important;
+  border-left: 4px solid var(--tertiary-100) !important;
+}
+
+// -----------------------------------------------------------------------------
+// 11. CARDS & CONTENT PANELS — white surface with subtle shadow
+// -----------------------------------------------------------------------------
+
+.sb-card,
+.content-card,
+.meta-form-card,
+.editor-panel {
+  background-color: var(--white);
+  border-radius: 0.75rem;
+  border: 1px solid var(--gray-0);
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
+}
+
+// -----------------------------------------------------------------------------
+// 12. SLIDERS — orange track/thumb
+// -----------------------------------------------------------------------------
+
+input[type="range"] {
+  accent-color: var(--primary-400);
+}
+
+.ui.slider.checkbox input:checked ~ label:before,
+.ui.toggle.checkbox input:checked ~ label:before {
+  background-color: var(--primary-400) !important;
+}
+
+// -----------------------------------------------------------------------------
+// 13. PUBLISH CHECKLIST — orange accent for checked items
+// -----------------------------------------------------------------------------
+
+.publish-checklist .checklist-item.checked,
+.sb-checklist-item.checked {
+  color: var(--primary-400);
+}
+
+.publish-checklist .checklist-item.checked .item-icon,
+.sb-checklist-item.checked .item-icon {
+  color: var(--secondary-200); // green tick for completed
+}
+
+// -----------------------------------------------------------------------------
+// 14. SCROLLBAR — subtle portal-matching style (WebKit)
+// -----------------------------------------------------------------------------
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--gray-0);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--primary-200);
+  border-radius: 3px;
+
+  &:hover {
+    background: var(--primary-300);
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 15. LABELS / BADGES / CHIPS — orange variant
+// -----------------------------------------------------------------------------
+
+.sb-label,
+.ui.label {
+  border-radius: 0.375rem !important;
+}
+
+.sb-label-primary,
+.ui.label.sb-label-primary {
+  background-color: var(--primary-0) !important;
+  color: var(--primary-400) !important;
+  border: 1px solid var(--primary-200) !important;
+}
+
+// Status chips
+.sb-status-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.625rem;
+  border-radius: 1rem;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+
+  &.draft    { background-color: var(--gray-0);     color: var(--gray-400); }
+  &.review   { background-color: var(--tertiary-0); color: var(--tertiary-400); }
+  &.live     { background-color: var(--secondary-0); color: var(--secondary-400); }
+  &.rejected { background-color: var(--red-0);      color: var(--red-400); }
+}
+
+// -----------------------------------------------------------------------------
+// 16. CK EDITOR TOOLBAR — align with portal colour
+// -----------------------------------------------------------------------------
+
+.ck.ck-toolbar {
+  border-radius: 0.5rem 0.5rem 0 0 !important;
+  border-color: var(--gray-100) !important;
+  background-color: var(--primary-0) !important;
+}
+
+.ck.ck-editor__main > .ck-editor__editable {
+  border-radius: 0 0 0.5rem 0.5rem !important;
+  border-color: var(--gray-100) !important;
+
+  &.ck-focused {
+    border-color: var(--primary-300) !important;
+    box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.15) !important;
+  }
+}
+
+.ck.ck-button.ck-on,
+.ck.ck-button:hover:not(.ck-disabled) {
+  background-color: var(--primary-0) !important;
+  color: var(--primary-400) !important;
+}
+
+// -----------------------------------------------------------------------------
+// 17. ASSET BROWSER / LIBRARY — card hover
+// -----------------------------------------------------------------------------
+
+.asset-card:hover,
+.library-card:hover,
+.sb-asset-card:hover {
+  border-color: var(--primary-300) !important;
+  box-shadow: 0 4px 12px 0 rgba(var(--rc-rgba-primary), 0.18) !important;
+}
+
+.asset-card.selected,
+.library-card.selected,
+.sb-asset-card.selected {
+  border-color: var(--primary-400) !important;
+  box-shadow: 0 0 0 2px var(--primary-400) !important;
+}
+
+// -----------------------------------------------------------------------------
+// 18. BUTTONS — global .sb-btn rounding & modern style
+// -----------------------------------------------------------------------------
+
+.sb-btn {
+  border-radius: 0.5rem !important;
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
+
+  &.sb-btn-primary {
+    background-color: var(--primary-400) !important;
+    border-color: var(--primary-400) !important;
+    color: var(--white) !important;
+    &:hover { background-color: var(--primary-800) !important; }
+  }
+
+  &.sb-btn-outline-primary {
+    background-color: transparent !important;
+    border: 1px solid var(--primary-300) !important;
+    color: var(--primary-400) !important;
+    &:hover {
+      background-color: var(--primary-0) !important;
+      border-color: var(--primary-400) !important;
+    }
+    &.sb-btn-outline-disabled,
+    &[disabled] {
+      background-color: var(--white) !important;
+      border-color: var(--gray-200) !important;
+      color: var(--gray-400) !important;
+      cursor: not-allowed !important;
+      pointer-events: none;
+      &:hover {
+        background-color: var(--white) !important;
+        border-color: var(--gray-200) !important;
+        color: var(--gray-400) !important;
+      }
+    }
+  }
+
+  &.sb-btn-secondary {
+    background-color: var(--white) !important;
+    border: 1.5px solid var(--primary-400) !important;
+    color: var(--primary-400) !important;
+    border-radius: 0.5rem !important;
+    &:hover,
+    &:focus {
+      background-color: var(--primary-0) !important;
+      border-color: var(--primary-600) !important;
+      color: var(--primary-600) !important;
+    }
+    &:disabled,
+    &.disabled {
+      background-color: var(--gray-100) !important;
+      border-color: var(--gray-300) !important;
+      color: var(--gray-400) !important;
+      opacity: 0.6;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  &.sb-btn-outline-error {
+    border-color: var(--red-400) !important;
+    color: var(--red-400) !important;
+    border-radius: 0.5rem !important;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 19. MODALS — rounded, subtle shadow
+// -----------------------------------------------------------------------------
+
+.ui.modal {
+  border-radius: 0.75rem !important;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.16) !important;
+
+  > .header {
+    border-radius: 0.75rem 0.75rem 0 0 !important;
+    background-color: var(--white) !important;
+    border-bottom: 1px solid var(--gray-100) !important;
+    color: var(--gray-800) !important;
+    font-weight: 700 !important;
+    font-size: 1rem !important;
+  }
+
+  > .actions {
+    background-color: var(--gray-0) !important;
+    border-top: 1px solid var(--gray-100) !important;
+    border-radius: 0 0 0.75rem 0.75rem !important;
+  }
+
+  > .close {
+    right: 1rem !important;
+    &:hover { color: inherit !important; }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 20. QUESTION EDITOR SPECIFIC — question/option card panels
+// -----------------------------------------------------------------------------
+
+.ckeditor-tool__option,
+.ckeditor-tool__question,
+.ckeditor-tool__solution {
+  border-radius: 0.5rem !important;
+  border-color: var(--gray-100) !important;
+}
+
+.ckeditor-tool__label {
+  background-color: var(--primary-0) !important;
+  color: var(--primary-400) !important;
+  border-radius: 0.5rem 0.5rem 0 0 !important;
+  font-weight: 600 !important;
+}
+
+.mcq-checkbox-answer {
+  background-color: var(--gray-0) !important;
+  border-radius: 0 0 0.5rem 0.5rem !important;
+}
+
+// Left panel tree background
+.eight.bg-white,
+.sb-collectionTree-fancyTreelist {
+  background-color: var(--white) !important;
+}
+
+// Bottom action buttons bar
+.sb-fixed-with-whitebg {
+  background-color: var(--white) !important;
+  border-top: 1px solid var(--gray-100) !important;
+  box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.05) !important;
+
+  // Add Sibling / Add Child — text link style, no border
+  .sb-btn-cover .sb-btn {
+    border: none !important;
+    background: transparent !important;
+    color: var(--primary-400) !important;
+    font-weight: 600 !important;
+    font-size: 0.8125rem !important;
+    box-shadow: none !important;
+    &:hover {
+      color: var(--primary-800) !important;
+      background: transparent !important;
+    }
+  }
+}
+
+// Fancytree active — no border at all
+.fancytree-active > .fancytree-title,
+span.fancytree-active span.fancytree-title {
+  background-color: var(--primary-0) !important;
+  color: var(--primary-400) !important;
+  border: none !important;
+}
+
+// -----------------------------------------------------------------------------
+// 21. PLAYER BORDER RADIUS — all content players
+// -----------------------------------------------------------------------------
+
+.sunbird-video-player-container,
+.sunbird-pdf-player-container,
+.sunbird-epub-player-container,
+.sunbird-quml-player-container,
+.player-container {
+  border-radius: 0.75rem !important;
+  overflow: hidden !important;
+}
+
+// ECML / old iframe player + inline players inside aspectratio
+.aspectratio,
+.contentViewerIframeShadow {
+  border-radius: 0.75rem !important;
+  overflow: hidden !important;
+}
+
+// sbtoc-container padding
+.sbtoc-container {
+  padding: 1rem !important;
+}
+
+// -----------------------------------------------------------------------------
+// 22. GREEN BUTTONS → white bg + orange border (portal design system)
+// -----------------------------------------------------------------------------
+
+// sb-btn-success (upload buttons)
+.sb-btn-success,
+.sb-btn.sb-btn-success {
+  background-color: var(--white) !important;
+  border: 1.5px solid var(--primary-400) !important;
+  color: var(--primary-400) !important;
+
+  &:hover,
+  &:focus {
+    background-color: var(--primary-0) !important;
+    border-color: var(--primary-600) !important;
+    color: var(--primary-600) !important;
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: var(--gray-100) !important;
+    border-color: var(--gray-300) !important;
+    color: var(--gray-400) !important;
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+// sb-btn-dark-green (Select Content / Add to collection buttons)
+.sb-btn-dark-green,
+.sb-btn.sb-btn-dark-green {
+  background-color: var(--white) !important;
+  border: 1.5px solid var(--primary-400) !important;
+  color: var(--primary-400) !important;
+
+  &:hover,
+  &:focus {
+    background-color: var(--primary-0) !important;
+    border-color: var(--primary-600) !important;
+    color: var(--primary-600) !important;
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: var(--gray-100) !important;
+    border-color: var(--gray-300) !important;
+    color: var(--gray-400) !important;
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 27. sb-btn-secondary standalone — replace green with white + orange outline
+// -----------------------------------------------------------------------------
+
+.sb-btn-secondary,
+.sb-btn.sb-btn-secondary {
+  background-color: var(--white) !important;
+  border: 1.5px solid var(--primary-400) !important;
+  color: var(--primary-400) !important;
+
+  &:hover,
+  &:focus {
+    background-color: var(--primary-0) !important;
+    border-color: var(--primary-600) !important;
+    color: var(--primary-600) !important;
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: var(--gray-100) !important;
+    border-color: var(--gray-300) !important;
+    color: var(--gray-400) !important;
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index 4d56e2d98..b65487644 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -44,20 +44,20 @@
     --gray-400: hsl(var(--gray-hs), 40%); // sub heading #666666
     --gray-800: var(--gray); // text color #333333
 
-    // basetheme
-    --primary-color: #024f9d;
+    // basetheme — Sunbird Portal orange/white theme
+    --primary-color: #a85236;  // sunbird-brick (terracotta orange)
     --secondary-color: #008840;
     --tertiary-color: #e55a28;
 
-    // primary colors
-    --primary-0: #f3f7fa; // bg
-    --primary-100: #edf4f9; // default button bg
-    --primary-200: #80a7ce; // divider
-    --primary-250: #d3e7f4; //pagination bg color
-    --primary-300: #7ab4ee; // outline, focus fields
+    // primary colors — orange scale matching portal sunbird-brick
+    --primary-0: #fff5f2; // light orange tint bg
+    --primary-100: #fde8e0; // default button bg
+    --primary-200: #e8a48a; // divider
+    --primary-250: #f5cfc4; // pagination bg color
+    --primary-300: #c9714f; // outline, focus fields
     --primary-400: var(--primary-color); // button bg, heading, table titles, links, toggles
-    --primary-600: #005391; // on press
-    --primary-800: #002e50; // hover
+    --primary-600: #8c3d24; // on press
+    --primary-800: #6b2a14; // hover
 
     // secondary colors
     --secondary-0: #e1ffdf; // toast bg, label
@@ -82,10 +82,10 @@
     --warning-color: var(--orange);
     --danger-color: var(--red);
 
-    // element based variables
-    --body-background-color: var(--primary-0);
+    // element based variables — white base matching portal
+    --body-background-color: #ffffff;
     --default-text-color: var(--gray-800);
-    --bg-body: var(--primary-0);
+    --bg-body: #ffffff;
     --body-color: var(--gray-800);
 
     // alpha
@@ -224,8 +224,8 @@
     --rc-rgba-black: 0, 0, 0; // var(--black)
     --rc-rgba-white: 255, 255, 255; // var(--white)
     --rc-rgba-gray: 51, 51, 51; // var(--gray-300)
-    --rc-rgba-primary: 2, 79, 157; // var(--primary-color)
-    --rc-rgba-primary-300: 41, 114, 164; //var(--primary-300)
+    --rc-rgba-primary: 168, 82, 54; // var(--primary-color) sunbird-brick
+    --rc-rgba-primary-300: 201, 113, 79; //var(--primary-300)
     --rc-rgba-gray-300: 34, 36, 38; //var(--gray-100)
     --rc-rgba-866a6a: 134, 106, 106;
     --rc-rgba-d0d0d0: 208, 208, 208;
diff --git a/src/assets/styles/components/_buttons.scss b/src/assets/styles/components/_buttons.scss
index 63d82cf0d..cf6cec820 100644
--- a/src/assets/styles/components/_buttons.scss
+++ b/src/assets/styles/components/_buttons.scss
@@ -46,9 +46,10 @@ button.sb-btn:focus {
   min-width: calculateRem(64px);
   position: relative;
   line-height: 1;
-  border-radius: 3px;
-  -webkit-border-radius: 3px;
+  border-radius: 0.5rem; // rounded corners matching portal
+  -webkit-border-radius: 0.5rem;
   border: 1px solid;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
 
   text: {
     transform: inherit;
@@ -155,6 +156,16 @@ $btns: "gray"var(--gray-200) var(--gray-400) var(--gray-100),
   }
 }
 
+// Primary button shadow — portal style
+.sb-btn-primary {
+  box-shadow: 0 2px 6px 0 rgba(var(--rc-rgba-primary), 0.35);
+  &:hover,
+  &:active,
+  &.active {
+    box-shadow: 0 4px 10px 0 rgba(var(--rc-rgba-primary), 0.45);
+  }
+}
+
 // Create button sizes classess from the below list
 // class height padding fontsize width
 $btnsizes: "xs"1.5rem "0.25rem 0.5rem"0.75rem null,
diff --git a/src/assets/styles/components/_modal.scss b/src/assets/styles/components/_modal.scss
index 91ae3c8e6..d7d2d25cf 100644
--- a/src/assets/styles/components/_modal.scss
+++ b/src/assets/styles/components/_modal.scss
@@ -6,22 +6,26 @@
   height: auto;
   width: 100%;
   background: 0 0;
+  border-radius: 0.75rem; // portal-style rounded modal
+  overflow: hidden;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(168, 82, 54, 0.1);
 
   .sb-modal-header {
-    background-color: var(--primary-400);
+    background-color: var(--primary-400); // now orange via variable
     color: var(--white);
     font-weight: 700;
     font-size: 1rem;
-    padding: .5rem 1rem;
+    padding: .75rem 1.25rem;
     border-bottom: 0 solid var(--gray-100);
     min-height: 2.5rem;
     line-height: 1.5rem;
+    border-radius: 0.75rem 0.75rem 0 0; // rounded top corners
   }
 
   .sb-modal-center .sb-modal-actions,
   .sb-modal-content {
     min-height: 100px;
-    padding: 1rem;
+    padding: 1.25rem;
     overflow-y: auto;
     background: var(--white);
   }
@@ -53,13 +57,14 @@
   }
 
   .sb-modal-actions {
-    padding: .5rem 1rem;
+    padding: .75rem 1.25rem;
     background: var(--white);
     border-top: 0.0625rem solid var(--gray-100);
     min-height: 3.5rem;
     display: flex;
     flex-direction: row-reverse;
     align-items: center;
+    border-radius: 0 0 0.75rem 0.75rem; // rounded bottom corners
 
     .sb-btn+.sb-btn {
       margin: 0 0.5rem 0 0 !important;
@@ -123,11 +128,12 @@
   margin: 0 auto !important;
   overflow-y: auto;
   overflow-x: hidden;
+  border-radius: 0; // fullscreen: no rounded corners
 
   .sb-modal-header {
     height: 3.5rem;
     width: auto;
-    border-radius: 0;
+    border-radius: 0; // flat header for fullscreen
     display: flex;
     justify-content: space-between;
   }
diff --git a/src/assets/styles/styles.scss b/src/assets/styles/styles.scss
index a984a78f1..9ef1f7ddf 100644
--- a/src/assets/styles/styles.scss
+++ b/src/assets/styles/styles.scss
@@ -20,4 +20,5 @@
 @import "./pages/pages.scss";
 @import "../lib/semantic/semantic-overrides.scss";
 @import "./legacy";
-@import "./global";
\ No newline at end of file
+@import "./global";
+@import "./portal-theme-overrides"; // Sunbird Portal orange/white theme alignment
\ No newline at end of file
diff --git a/web-component/package.json b/web-component/package.json
index a6d5397d5..95fd8263a 100644
--- a/web-component/package.json
+++ b/web-component/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "@project-sunbird/sunbird-questionset-editor-web-component",
+    "name": "@jeraldj/sunbird-questionset-editor-web-component",
     "version": "6.0.3",
     "description": "The web component package for the sunbird questionset editor",
     "main": "assets/quml-editor/sunbird-questionset-editor.js",

From 9cda122421846d5bb2ab8062790efb1b2b7b276a Mon Sep 17 00:00:00 2001
From: JeraldJF <jeraldj@sanketika.in>
Date: Wed, 22 Apr 2026 19:31:19 +0530
Subject: [PATCH 02/12] refactor: align sb-btn-dark-green to Spark theme in
 QuML editor

Replace hardcoded green background on .sb-btn-dark-green with
white background + primary-400 border/text, mirroring the same
change applied to the collection editor in commit 11f2030.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/assets/styles/_variables.scss          | 6 ++++--
 src/assets/styles/components/_buttons.scss | 6 +++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index b65487644..c175dc4de 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -44,8 +44,10 @@
     --gray-400: hsl(var(--gray-hs), 40%); // sub heading #666666
     --gray-800: var(--gray); // text color #333333
 
-    // basetheme — Sunbird Portal orange/white theme
-    --primary-color: #a85236;  // sunbird-brick (terracotta orange)
+    // basetheme — matches Sunbird Portal's sunbird-brick color (#a85236).
+    // NOTE: This editor loads in an iframe so it CANNOT inherit the portal's CSS variables.
+    // To change the theme, update --primary-color here AND update --sunbird-brick in the portal's :root.
+    --primary-color: #a85236;  // keep in sync with portal: hsl(var(--sunbird-brick)) = #a85236
     --secondary-color: #008840;
     --tertiary-color: #e55a28;
 
diff --git a/src/assets/styles/components/_buttons.scss b/src/assets/styles/components/_buttons.scss
index cf6cec820..20d906208 100644
--- a/src/assets/styles/components/_buttons.scss
+++ b/src/assets/styles/components/_buttons.scss
@@ -357,7 +357,7 @@ $btnSquaresizes: "xs"1.5rem 1.5rem 1rem null,
 }
 
 .sb-btn-dark-green{
-  background: var(--green);
-  border:solid 1px green !important;
-  color: var(--white);
+  background-color: var(--white);
+  border: 1.5px solid var(--primary-400) !important;
+  color: var(--primary-400);
 }
\ No newline at end of file

From 351ce6699fb8dd4fc47fcd564041f4144ff74417 Mon Sep 17 00:00:00 2001
From: JeraldJF <jeraldj@sanketika.in>
Date: Wed, 22 Apr 2026 22:13:55 +0530
Subject: [PATCH 03/12] refactor: replace legacy CSS vars with Spark design
 tokens across all theme files
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mirror the same Spark token substitution applied to the collection editor,
replacing --white, --primary-4/6/800, --gray-0/100/200/300/400/800 with
direct --spark-* token references in all SCSS files touched by commit
3724a93 and the restructure. QuML editor component and portal-theme-overrides
now use the canonical Spark token names throughout.

Token mapping applied:
  --white         → --spark-surface
  --primary-400   → --spark-brick
  --primary-600   → --spark-brick-dark
  --primary-800   → --spark-brick-dark
  --gray-0        → --spark-card-alt
  --gray-100      → --spark-border-card
  --gray-200      → --spark-gray-b2
  --gray-300      → --spark-gray-82
  --gray-400      → --spark-gray-75
  --gray-800      → --spark-charcoal

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../assets-browser.component.scss             |   2 +-
 .../fancy-tree/fancy-tree.component.scss      |  18 +-
 .../components/header/header.component.scss   |   6 +-
 .../styles/_portal-theme-overrides.scss       | 254 +++++++++---------
 src/assets/styles/components/_buttons.scss    |  34 +--
 src/assets/styles/components/_modal.scss      |  20 +-
 6 files changed, 167 insertions(+), 167 deletions(-)

diff --git a/projects/questionset-editor-library/src/lib/components/assets-browser/assets-browser.component.scss b/projects/questionset-editor-library/src/lib/components/assets-browser/assets-browser.component.scss
index 9609159e8..a4d6f5f7d 100644
--- a/projects/questionset-editor-library/src/lib/components/assets-browser/assets-browser.component.scss
+++ b/projects/questionset-editor-library/src/lib/components/assets-browser/assets-browser.component.scss
@@ -285,7 +285,7 @@
       position: relative;
       margin-bottom: 0.5rem;
       .sb-form-control{
-        border: 1px solid var(--gray-100);
+        border: 1px solid var(--spark-border-card);
         width: 100%;
         border-radius: 0.5rem;
         box-shadow: 0 0 0 0 transparent inset;
diff --git a/projects/questionset-editor-library/src/lib/components/fancy-tree/fancy-tree.component.scss b/projects/questionset-editor-library/src/lib/components/fancy-tree/fancy-tree.component.scss
index 9128d108e..e4de4117f 100644
--- a/projects/questionset-editor-library/src/lib/components/fancy-tree/fancy-tree.component.scss
+++ b/projects/questionset-editor-library/src/lib/components/fancy-tree/fancy-tree.component.scss
@@ -52,7 +52,7 @@
           &-expanded {
             padding: 15px 33px;
             border: 1px solid transparent;
-            background-color: var(--white);
+            background-color: var(--spark-surface);
             border-radius: 0.375rem;
           }
           &-active {
@@ -60,7 +60,7 @@
             background-color: var(--primary-0);
             padding: 15px 33px;
             border-top: none;
-            border-left: 3px solid var(--primary-400);
+            border-left: 3px solid var(--spark-brick);
             border-right: none;
             border-bottom: none;
             border-radius: 0 0.375rem 0.375rem 0;
@@ -117,7 +117,7 @@
                 border-right: 0;
                 border-bottom: 0;
                 border-top: 0;
-                border-left: 3px solid var(--primary-400);
+                border-left: 3px solid var(--spark-brick);
               }
 
               &.dependent {
@@ -132,7 +132,7 @@
         }
 
         .sb-fancyTree-icon {
-          color: var(--gray-300) !important;
+          color: var(--spark-gray-82) !important;
         }
 
         .fancytree-custom-icon {
@@ -169,23 +169,23 @@
   .sb-fixed-with-whitebg {
     position: fixed;
     width: 100%;
-    border-top: 1px solid var(--gray-100);
+    border-top: 1px solid var(--spark-border-card);
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--white);
+    background-color: var(--spark-surface);
     box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.06);
     z-index: 99999;
     padding: 0 !important;
     .sb-btn-cover{
       padding: 0.5rem;
-      border-right: solid 1px var(--gray-100);
+      border-right: solid 1px var(--spark-border-card);
       width: 50%;
       text-align: center;
       .sb-btn{
         &:hover{
           background: none !important;
-          color:var(--primary-400);
+          color:var(--spark-brick);
         }
       }
     }
@@ -203,7 +203,7 @@
     }
   }
   .eight.bg-white{
-    border-left: solid 1px var(--gray-100);
+    border-left: solid 1px var(--spark-border-card);
     padding-bottom: 4.5rem !important;
   }
   .b-none{
diff --git a/projects/questionset-editor-library/src/lib/components/header/header.component.scss b/projects/questionset-editor-library/src/lib/components/header/header.component.scss
index cb190ffdf..59ac0f512 100755
--- a/projects/questionset-editor-library/src/lib/components/header/header.component.scss
+++ b/projects/questionset-editor-library/src/lib/components/header/header.component.scss
@@ -1,6 +1,6 @@
 .sb-disabled{
-    background: var(--gray-0);
-    border: .0625rem solid var(--gray-0);
+    background: var(--spark-card-alt);
+    border: .0625rem solid var(--spark-card-alt);
     opacity: .45;
     pointer-events: none;
 }
@@ -30,7 +30,7 @@
   }
   
   .bb-1 {
-    border-bottom: 1px solid var(--gray-100);
+    border-bottom: 1px solid var(--spark-border-card);
   }
 
   .flex-as-baseline {
diff --git a/src/assets/styles/_portal-theme-overrides.scss b/src/assets/styles/_portal-theme-overrides.scss
index da5cdacb1..f690358f2 100644
--- a/src/assets/styles/_portal-theme-overrides.scss
+++ b/src/assets/styles/_portal-theme-overrides.scss
@@ -12,7 +12,7 @@
 body,
 .sb-editor-body,
 .editor-body {
-  background-color: var(--bg-body); // #ffffff — white portal base
+  background-color: var(--bg-body); // #E9E8D9 — Spark warm parchment
 }
 
 // -----------------------------------------------------------------------------
@@ -28,20 +28,20 @@ button {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  color: var(--gray-800);
+  color: var(--spark-charcoal);
   font-weight: 600;
 }
 
 a,
 a:link,
 a:visited {
-  color: var(--primary-400); // orange
+  color: var(--spark-brick); // orange
   transition: color 0.15s ease;
 }
 
 a:hover,
 a:focus {
-  color: var(--primary-600); // darker orange on hover
+  color: var(--spark-brick-dark); // darker orange on hover
   text-decoration: underline;
 }
 
@@ -59,12 +59,12 @@ input[type="tel"],
 textarea,
 select {
   border-radius: 0.5rem;
-  border: 1px solid var(--gray-100);
+  border: 1px solid var(--spark-border-card);
   padding: 0.5rem 0.75rem;
   font-size: var(--font-size-base);
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
-  background-color: var(--white);
-  color: var(--gray-800);
+  background-color: var(--spark-surface);
+  color: var(--spark-charcoal);
 
   &:focus,
   &:focus-visible {
@@ -74,7 +74,7 @@ select {
   }
 
   &::placeholder {
-    color: var(--gray-200);
+    color: var(--spark-gray-b2);
     font-size: var(--font-size-base);
   }
 }
@@ -88,7 +88,7 @@ select {
 .ui.form textarea,
 .ui.form select {
   border-radius: 0.5rem !important;
-  border-color: var(--gray-100) !important;
+  border-color: var(--spark-border-card) !important;
   transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
 
   &:focus {
@@ -104,7 +104,7 @@ select {
 .ui.dropdown,
 .ui.selection.dropdown {
   border-radius: 0.5rem !important;
-  border-color: var(--gray-100) !important;
+  border-color: var(--spark-border-card) !important;
   transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
 
   &.active,
@@ -115,7 +115,7 @@ select {
 
   .menu {
     border-radius: 0 0 0.5rem 0.5rem !important;
-    border-color: var(--gray-100) !important;
+    border-color: var(--spark-border-card) !important;
     box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12) !important;
 
     > .item {
@@ -126,7 +126,7 @@ select {
       &.active,
       &.selected {
         background-color: var(--primary-0) !important;
-        color: var(--primary-400) !important;
+        color: var(--spark-brick) !important;
         font-weight: 500;
       }
     }
@@ -139,13 +139,13 @@ select {
 
 .ui.checkbox input:checked ~ .box:after,
 .ui.checkbox input:checked ~ label:after {
-  color: var(--primary-400) !important;
+  color: var(--spark-brick) !important;
 }
 
 .ui.checkbox input:checked ~ .box:before,
 .ui.checkbox input:checked ~ label:before {
-  border-color: var(--primary-400) !important;
-  background-color: var(--primary-400) !important;
+  border-color: var(--spark-brick) !important;
+  background-color: var(--spark-brick) !important;
 }
 
 .ui.checkbox input:focus ~ .box:before,
@@ -155,7 +155,7 @@ select {
 }
 
 .ui.radio.checkbox input:checked ~ label:after {
-  background-color: var(--primary-400) !important;
+  background-color: var(--spark-brick) !important;
 }
 
 // -----------------------------------------------------------------------------
@@ -168,26 +168,26 @@ select {
 
 .ui.menu .active.item,
 .ui.menu .item.active {
-  color: var(--primary-400) !important;
-  border-color: var(--primary-400) !important;
+  color: var(--spark-brick) !important;
+  border-color: var(--spark-brick) !important;
   font-weight: 600;
 }
 
 .ui.pointing.menu .active.item:after {
-  background-color: var(--primary-400) !important;
-  border-color: var(--primary-400) !important;
+  background-color: var(--spark-brick) !important;
+  border-color: var(--spark-brick) !important;
 }
 
 .ui.secondary.pointing.menu .active.item {
-  border-color: var(--primary-400) !important;
-  color: var(--primary-400) !important;
+  border-color: var(--spark-brick) !important;
+  color: var(--spark-brick) !important;
 }
 
 // Tab underline indicator
 .sb-tabs .sb-tab-item.active,
 .sb-tab.active {
-  border-bottom-color: var(--primary-400) !important;
-  color: var(--primary-400) !important;
+  border-bottom-color: var(--spark-brick) !important;
+  color: var(--spark-brick) !important;
 }
 
 // -----------------------------------------------------------------------------
@@ -197,15 +197,15 @@ select {
 .fancy-tree .fancytree-node:hover > .fancytree-title,
 .fancytree-node:hover > .fancytree-title {
   background-color: var(--primary-0) !important;
-  color: var(--primary-400) !important;
+  color: var(--spark-brick) !important;
   border-radius: 0.25rem;
 }
 
 .fancy-tree .fancytree-active > .fancytree-title,
 .fancytree-active > .fancytree-title {
   background-color: var(--primary-100) !important;
-  color: var(--primary-400) !important;
-  border-left: 3px solid var(--primary-400);
+  color: var(--spark-brick) !important;
+  border-left: 3px solid var(--spark-brick);
   border-radius: 0 0.25rem 0.25rem 0;
 }
 
@@ -219,8 +219,8 @@ select {
 .plain-tree .tree-node.active,
 .sb-tree-node.active {
   background-color: var(--primary-100) !important;
-  border-left: 3px solid var(--primary-400) !important;
-  color: var(--primary-400) !important;
+  border-left: 3px solid var(--spark-brick) !important;
+  color: var(--spark-brick) !important;
 }
 
 // -----------------------------------------------------------------------------
@@ -230,23 +230,23 @@ select {
 .editor-header,
 .sb-editor-header,
 .header-component {
-  background-color: var(--white);
-  border-bottom: 1px solid var(--gray-100);
+  background-color: var(--spark-surface);
+  border-bottom: 1px solid var(--spark-border-card);
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
 }
 
 // Primary action area in header
 .header-component .sb-btn-primary,
 .editor-header .sb-btn-primary {
-  background-color: var(--primary-400) !important;
-  border-color: var(--primary-400) !important;
-  color: var(--white) !important;
+  background-color: var(--spark-brick) !important;
+  border-color: var(--spark-brick) !important;
+  color: var(--spark-surface) !important;
   border-radius: 0.5rem !important;
 }
 
 // Override sb-styles full-color primary header background
 .sb-bg-color-primary {
-  background-color: var(--primary-600) !important;
+  background-color: var(--spark-brick-dark) !important;
   background-image: none !important;
   padding-top: 0.25rem !important;
   padding-bottom: 0.25rem !important;
@@ -256,7 +256,7 @@ select {
     background: transparent !important;
     border-color: transparent !important;
     border: none !important;
-    color: var(--white) !important;
+    color: var(--spark-surface) !important;
     font-size: 0.8rem !important;
     padding: 0.25rem 0.75rem !important;
     border-radius: 0.375rem !important;
@@ -266,48 +266,48 @@ select {
   }
 
   .sb-color-white,
-  * { color: var(--white) !important; }
+  * { color: var(--spark-surface) !important; }
 }
 
 // Second row header (title + action buttons)
 .sb-bg-lightBlue {
-  background-color: var(--white) !important;
-  border-bottom: 1px solid var(--gray-100) !important;
+  background-color: var(--spark-surface) !important;
+  border-bottom: 1px solid var(--spark-border-card) !important;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05) !important;
 
   .practical-header__title {
-    color: var(--gray-800) !important;
+    color: var(--spark-charcoal) !important;
     font-size: 1rem !important;
     font-weight: 700 !important;
   }
 
   .sb-btn-outline-primary {
     border-color: var(--primary-300) !important;
-    color: var(--primary-400) !important;
+    color: var(--spark-brick) !important;
     border-radius: 0.5rem !important;
     &:hover { background-color: var(--primary-0) !important; }
     &.sb-btn-outline-disabled,
     &[disabled] {
-      background-color: var(--white) !important;
-      border-color: var(--gray-200) !important;
-      color: var(--gray-400) !important;
+      background-color: var(--spark-surface) !important;
+      border-color: var(--spark-gray-b2) !important;
+      color: var(--spark-gray-75) !important;
       cursor: not-allowed !important;
       pointer-events: none;
       &:hover {
-        background-color: var(--white) !important;
-        border-color: var(--gray-200) !important;
-        color: var(--gray-400) !important;
+        background-color: var(--spark-surface) !important;
+        border-color: var(--spark-gray-b2) !important;
+        color: var(--spark-gray-75) !important;
       }
     }
   }
 
   .sb-btn-primary {
-    background-color: var(--primary-400) !important;
-    border-color: var(--primary-400) !important;
-    color: var(--white) !important;
+    background-color: var(--spark-brick) !important;
+    border-color: var(--spark-brick) !important;
+    color: var(--spark-surface) !important;
     border-radius: 0.5rem !important;
     font-weight: 600 !important;
-    &:hover { background-color: var(--primary-800) !important; }
+    &:hover { background-color: var(--spark-brick-dark) !important; }
   }
 }
 
@@ -317,8 +317,8 @@ select {
 
 .sb-progress-status .active,
 .progress-status .active {
-  color: var(--primary-400) !important;
-  border-color: var(--primary-400) !important;
+  color: var(--spark-brick) !important;
+  border-color: var(--spark-brick) !important;
 }
 
 .sb-progress-status .completed {
@@ -327,7 +327,7 @@ select {
 
 // Semantic UI progress bar
 .ui.progress .bar {
-  background-color: var(--primary-400) !important;
+  background-color: var(--spark-brick) !important;
   border-radius: 0.5rem !important;
 }
 
@@ -349,8 +349,8 @@ select {
 .iziToast.iziToast-color-blue,
 .sb-toast-info {
   background-color: var(--primary-0) !important;
-  border-left: 4px solid var(--primary-400) !important;
-  color: var(--gray-800) !important;
+  border-left: 4px solid var(--spark-brick) !important;
+  color: var(--spark-charcoal) !important;
 }
 
 .iziToast.iziToast-color-green,
@@ -379,9 +379,9 @@ select {
 .content-card,
 .meta-form-card,
 .editor-panel {
-  background-color: var(--white);
+  background-color: var(--spark-surface);
   border-radius: 0.75rem;
-  border: 1px solid var(--gray-0);
+  border: 1px solid var(--spark-card-alt);
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
 }
 
@@ -390,12 +390,12 @@ select {
 // -----------------------------------------------------------------------------
 
 input[type="range"] {
-  accent-color: var(--primary-400);
+  accent-color: var(--spark-brick);
 }
 
 .ui.slider.checkbox input:checked ~ label:before,
 .ui.toggle.checkbox input:checked ~ label:before {
-  background-color: var(--primary-400) !important;
+  background-color: var(--spark-brick) !important;
 }
 
 // -----------------------------------------------------------------------------
@@ -404,7 +404,7 @@ input[type="range"] {
 
 .publish-checklist .checklist-item.checked,
 .sb-checklist-item.checked {
-  color: var(--primary-400);
+  color: var(--spark-brick);
 }
 
 .publish-checklist .checklist-item.checked .item-icon,
@@ -422,7 +422,7 @@ input[type="range"] {
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--gray-0);
+  background: var(--spark-card-alt);
   border-radius: 3px;
 }
 
@@ -447,7 +447,7 @@ input[type="range"] {
 .sb-label-primary,
 .ui.label.sb-label-primary {
   background-color: var(--primary-0) !important;
-  color: var(--primary-400) !important;
+  color: var(--spark-brick) !important;
   border: 1px solid var(--primary-200) !important;
 }
 
@@ -460,7 +460,7 @@ input[type="range"] {
   font-size: var(--font-size-sm);
   font-weight: 500;
 
-  &.draft    { background-color: var(--gray-0);     color: var(--gray-400); }
+  &.draft    { background-color: var(--spark-card-alt);     color: var(--spark-gray-75); }
   &.review   { background-color: var(--tertiary-0); color: var(--tertiary-400); }
   &.live     { background-color: var(--secondary-0); color: var(--secondary-400); }
   &.rejected { background-color: var(--red-0);      color: var(--red-400); }
@@ -472,13 +472,13 @@ input[type="range"] {
 
 .ck.ck-toolbar {
   border-radius: 0.5rem 0.5rem 0 0 !important;
-  border-color: var(--gray-100) !important;
+  border-color: var(--spark-border-card) !important;
   background-color: var(--primary-0) !important;
 }
 
 .ck.ck-editor__main > .ck-editor__editable {
   border-radius: 0 0 0.5rem 0.5rem !important;
-  border-color: var(--gray-100) !important;
+  border-color: var(--spark-border-card) !important;
 
   &.ck-focused {
     border-color: var(--primary-300) !important;
@@ -489,7 +489,7 @@ input[type="range"] {
 .ck.ck-button.ck-on,
 .ck.ck-button:hover:not(.ck-disabled) {
   background-color: var(--primary-0) !important;
-  color: var(--primary-400) !important;
+  color: var(--spark-brick) !important;
 }
 
 // -----------------------------------------------------------------------------
@@ -506,8 +506,8 @@ input[type="range"] {
 .asset-card.selected,
 .library-card.selected,
 .sb-asset-card.selected {
-  border-color: var(--primary-400) !important;
-  box-shadow: 0 0 0 2px var(--primary-400) !important;
+  border-color: var(--spark-brick) !important;
+  box-shadow: 0 0 0 2px var(--spark-brick) !important;
 }
 
 // -----------------------------------------------------------------------------
@@ -521,51 +521,51 @@ input[type="range"] {
   transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
 
   &.sb-btn-primary {
-    background-color: var(--primary-400) !important;
-    border-color: var(--primary-400) !important;
-    color: var(--white) !important;
-    &:hover { background-color: var(--primary-800) !important; }
+    background-color: var(--spark-brick) !important;
+    border-color: var(--spark-brick) !important;
+    color: var(--spark-surface) !important;
+    &:hover { background-color: var(--spark-brick-dark) !important; }
   }
 
   &.sb-btn-outline-primary {
     background-color: transparent !important;
     border: 1px solid var(--primary-300) !important;
-    color: var(--primary-400) !important;
+    color: var(--spark-brick) !important;
     &:hover {
       background-color: var(--primary-0) !important;
-      border-color: var(--primary-400) !important;
+      border-color: var(--spark-brick) !important;
     }
     &.sb-btn-outline-disabled,
     &[disabled] {
-      background-color: var(--white) !important;
-      border-color: var(--gray-200) !important;
-      color: var(--gray-400) !important;
+      background-color: var(--spark-surface) !important;
+      border-color: var(--spark-gray-b2) !important;
+      color: var(--spark-gray-75) !important;
       cursor: not-allowed !important;
       pointer-events: none;
       &:hover {
-        background-color: var(--white) !important;
-        border-color: var(--gray-200) !important;
-        color: var(--gray-400) !important;
+        background-color: var(--spark-surface) !important;
+        border-color: var(--spark-gray-b2) !important;
+        color: var(--spark-gray-75) !important;
       }
     }
   }
 
   &.sb-btn-secondary {
-    background-color: var(--white) !important;
-    border: 1.5px solid var(--primary-400) !important;
-    color: var(--primary-400) !important;
+    background-color: var(--spark-surface) !important;
+    border: 1.5px solid var(--spark-brick) !important;
+    color: var(--spark-brick) !important;
     border-radius: 0.5rem !important;
     &:hover,
     &:focus {
       background-color: var(--primary-0) !important;
-      border-color: var(--primary-600) !important;
-      color: var(--primary-600) !important;
+      border-color: var(--spark-brick-dark) !important;
+      color: var(--spark-brick-dark) !important;
     }
     &:disabled,
     &.disabled {
-      background-color: var(--gray-100) !important;
-      border-color: var(--gray-300) !important;
-      color: var(--gray-400) !important;
+      background-color: var(--spark-border-card) !important;
+      border-color: var(--spark-gray-82) !important;
+      color: var(--spark-gray-75) !important;
       opacity: 0.6;
       cursor: not-allowed;
       pointer-events: none;
@@ -589,16 +589,16 @@ input[type="range"] {
 
   > .header {
     border-radius: 0.75rem 0.75rem 0 0 !important;
-    background-color: var(--white) !important;
-    border-bottom: 1px solid var(--gray-100) !important;
-    color: var(--gray-800) !important;
+    background-color: var(--spark-surface) !important;
+    border-bottom: 1px solid var(--spark-border-card) !important;
+    color: var(--spark-charcoal) !important;
     font-weight: 700 !important;
     font-size: 1rem !important;
   }
 
   > .actions {
-    background-color: var(--gray-0) !important;
-    border-top: 1px solid var(--gray-100) !important;
+    background-color: var(--spark-card-alt) !important;
+    border-top: 1px solid var(--spark-border-card) !important;
     border-radius: 0 0 0.75rem 0.75rem !important;
   }
 
@@ -616,43 +616,43 @@ input[type="range"] {
 .ckeditor-tool__question,
 .ckeditor-tool__solution {
   border-radius: 0.5rem !important;
-  border-color: var(--gray-100) !important;
+  border-color: var(--spark-border-card) !important;
 }
 
 .ckeditor-tool__label {
   background-color: var(--primary-0) !important;
-  color: var(--primary-400) !important;
+  color: var(--spark-brick) !important;
   border-radius: 0.5rem 0.5rem 0 0 !important;
   font-weight: 600 !important;
 }
 
 .mcq-checkbox-answer {
-  background-color: var(--gray-0) !important;
+  background-color: var(--spark-card-alt) !important;
   border-radius: 0 0 0.5rem 0.5rem !important;
 }
 
 // Left panel tree background
 .eight.bg-white,
 .sb-collectionTree-fancyTreelist {
-  background-color: var(--white) !important;
+  background-color: var(--spark-surface) !important;
 }
 
 // Bottom action buttons bar
 .sb-fixed-with-whitebg {
-  background-color: var(--white) !important;
-  border-top: 1px solid var(--gray-100) !important;
+  background-color: var(--spark-surface) !important;
+  border-top: 1px solid var(--spark-border-card) !important;
   box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.05) !important;
 
   // Add Sibling / Add Child — text link style, no border
   .sb-btn-cover .sb-btn {
     border: none !important;
     background: transparent !important;
-    color: var(--primary-400) !important;
+    color: var(--spark-brick) !important;
     font-weight: 600 !important;
     font-size: 0.8125rem !important;
     box-shadow: none !important;
     &:hover {
-      color: var(--primary-800) !important;
+      color: var(--spark-brick-dark) !important;
       background: transparent !important;
     }
   }
@@ -662,7 +662,7 @@ input[type="range"] {
 .fancytree-active > .fancytree-title,
 span.fancytree-active span.fancytree-title {
   background-color: var(--primary-0) !important;
-  color: var(--primary-400) !important;
+  color: var(--spark-brick) !important;
   border: none !important;
 }
 
@@ -698,22 +698,22 @@ span.fancytree-active span.fancytree-title {
 // sb-btn-success (upload buttons)
 .sb-btn-success,
 .sb-btn.sb-btn-success {
-  background-color: var(--white) !important;
-  border: 1.5px solid var(--primary-400) !important;
-  color: var(--primary-400) !important;
+  background-color: var(--spark-surface) !important;
+  border: 1.5px solid var(--spark-brick) !important;
+  color: var(--spark-brick) !important;
 
   &:hover,
   &:focus {
     background-color: var(--primary-0) !important;
-    border-color: var(--primary-600) !important;
-    color: var(--primary-600) !important;
+    border-color: var(--spark-brick-dark) !important;
+    color: var(--spark-brick-dark) !important;
   }
 
   &:disabled,
   &.disabled {
-    background-color: var(--gray-100) !important;
-    border-color: var(--gray-300) !important;
-    color: var(--gray-400) !important;
+    background-color: var(--spark-border-card) !important;
+    border-color: var(--spark-gray-82) !important;
+    color: var(--spark-gray-75) !important;
     opacity: 0.6;
     cursor: not-allowed;
   }
@@ -722,22 +722,22 @@ span.fancytree-active span.fancytree-title {
 // sb-btn-dark-green (Select Content / Add to collection buttons)
 .sb-btn-dark-green,
 .sb-btn.sb-btn-dark-green {
-  background-color: var(--white) !important;
-  border: 1.5px solid var(--primary-400) !important;
-  color: var(--primary-400) !important;
+  background-color: var(--spark-surface) !important;
+  border: 1.5px solid var(--spark-brick) !important;
+  color: var(--spark-brick) !important;
 
   &:hover,
   &:focus {
     background-color: var(--primary-0) !important;
-    border-color: var(--primary-600) !important;
-    color: var(--primary-600) !important;
+    border-color: var(--spark-brick-dark) !important;
+    color: var(--spark-brick-dark) !important;
   }
 
   &:disabled,
   &.disabled {
-    background-color: var(--gray-100) !important;
-    border-color: var(--gray-300) !important;
-    color: var(--gray-400) !important;
+    background-color: var(--spark-border-card) !important;
+    border-color: var(--spark-gray-82) !important;
+    color: var(--spark-gray-75) !important;
     opacity: 0.6;
     cursor: not-allowed;
     pointer-events: none;
@@ -750,22 +750,22 @@ span.fancytree-active span.fancytree-title {
 
 .sb-btn-secondary,
 .sb-btn.sb-btn-secondary {
-  background-color: var(--white) !important;
-  border: 1.5px solid var(--primary-400) !important;
-  color: var(--primary-400) !important;
+  background-color: var(--spark-surface) !important;
+  border: 1.5px solid var(--spark-brick) !important;
+  color: var(--spark-brick) !important;
 
   &:hover,
   &:focus {
     background-color: var(--primary-0) !important;
-    border-color: var(--primary-600) !important;
-    color: var(--primary-600) !important;
+    border-color: var(--spark-brick-dark) !important;
+    color: var(--spark-brick-dark) !important;
   }
 
   &:disabled,
   &.disabled {
-    background-color: var(--gray-100) !important;
-    border-color: var(--gray-300) !important;
-    color: var(--gray-400) !important;
+    background-color: var(--spark-border-card) !important;
+    border-color: var(--spark-gray-82) !important;
+    color: var(--spark-gray-75) !important;
     opacity: 0.6;
     cursor: not-allowed;
     pointer-events: none;
diff --git a/src/assets/styles/components/_buttons.scss b/src/assets/styles/components/_buttons.scss
index 20d906208..2e6802734 100644
--- a/src/assets/styles/components/_buttons.scss
+++ b/src/assets/styles/components/_buttons.scss
@@ -85,7 +85,7 @@ button.sb-btn:focus {
 
 // Create button color classess from the below list
 // btnname basecolor hovercolor outlinecolor
-$btns: "gray"var(--gray-200) var(--gray-400) var(--gray-100),
+$btns: "gray"var(--gray-200) var(--gray-400) var(--spark-border-card),
 "primary"var(--primary-400) var(--primary-800) var(--primary-100),
 "secondary"var(--secondary-200) var(--secondary-400) var(--secondary-0),
 "tertiary"var(--tertiary-100) var(--tertiary-400) var(--tertiary-0),
@@ -103,19 +103,19 @@ $btns: "gray"var(--gray-200) var(--gray-400) var(--gray-100),
       @if $btntype==btn {
         background-color: #{nth($btn, 2)};
         border-color: #{nth($btn, 2)};
-        color: var(--white);
+        color: var(--spark-surface);
 
         &:hover,
         &:active,
         &.active {
           background-color: #{nth($btn, 3)};
           border: 1px solid transparent;
-          color: var(--white);
+          color: var(--spark-surface);
         }
       }
 
       @else if $btntype==btn-outline {
-        background-color: var(--white);
+        background-color: var(--spark-surface);
         color: #{nth($btn, 2)};
         border-color: #{nth($btn, 2)};
 
@@ -142,7 +142,7 @@ $btns: "gray"var(--gray-200) var(--gray-400) var(--gray-100),
       @else if $btntype==btn-dashed {
         border-style: dashed;
         border-width: calculateRem(1px);
-        background-color: var(--white);
+        background-color: var(--spark-surface);
         border-color: #{nth($btn, 2)};
         color: #{nth($btn, 2)};
 
@@ -234,24 +234,24 @@ $btnSquaresizes: "xs"1.5rem 1.5rem 1rem null,
 }
 
 .sb-btn-disabled {
-  background-color: var(--gray-100);
-  border: calculateRem(1px) solid var(--gray-100);
+  background-color: var(--spark-border-card);
+  border: calculateRem(1px) solid var(--spark-border-card);
 
   &:hover {
-    background-color: var(--gray-100) !important;
-    color: var(--gray-200) !important;
+    background-color: var(--spark-border-card) !important;
+    color: var(--spark-gray-b2) !important;
   }
 }
 
 .sb-btn-outline-disabled {
-  background-color: var(--white);
-  border: calculateRem(1px) solid var(--gray-100);
+  background-color: var(--spark-surface);
+  border: calculateRem(1px) solid var(--spark-border-card);
 
   &:hover {
-    background-color: var(--white) !important;
+    background-color: var(--spark-surface) !important;
     ;
-    border: calculateRem(1px) solid var(--gray-100) !important;
-    color: var(--gray-200) !important;
+    border: calculateRem(1px) solid var(--spark-border-card) !important;
+    color: var(--spark-gray-b2) !important;
   }
 }
 
@@ -357,7 +357,7 @@ $btnSquaresizes: "xs"1.5rem 1.5rem 1rem null,
 }
 
 .sb-btn-dark-green{
-  background-color: var(--white);
-  border: 1.5px solid var(--primary-400) !important;
-  color: var(--primary-400);
+  background-color: var(--spark-surface);
+  border: 1.5px solid var(--spark-brick) !important;
+  color: var(--spark-brick);
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/_modal.scss b/src/assets/styles/components/_modal.scss
index d7d2d25cf..dadbabbe2 100644
--- a/src/assets/styles/components/_modal.scss
+++ b/src/assets/styles/components/_modal.scss
@@ -11,12 +11,12 @@
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(168, 82, 54, 0.1);
 
   .sb-modal-header {
-    background-color: var(--primary-400); // now orange via variable
-    color: var(--white);
+    background-color: var(--spark-brick); // now orange via variable
+    color: var(--spark-surface);
     font-weight: 700;
     font-size: 1rem;
     padding: .75rem 1.25rem;
-    border-bottom: 0 solid var(--gray-100);
+    border-bottom: 0 solid var(--spark-border-card);
     min-height: 2.5rem;
     line-height: 1.5rem;
     border-radius: 0.75rem 0.75rem 0 0; // rounded top corners
@@ -27,7 +27,7 @@
     min-height: 100px;
     padding: 1.25rem;
     overflow-y: auto;
-    background: var(--white);
+    background: var(--spark-surface);
   }
 }
 
@@ -35,12 +35,12 @@
   min-height: 100px;
   padding: 1rem;
   overflow-y: auto;
-  background: var(--white);
+  background: var(--spark-surface);
 }
 
 .sb-modal .ui.modal {
   >.close {
-    color: var(--white);
+    color: var(--spark-surface);
     font-size: .875rem;
     padding: 0 !important;
     margin: 0 !important;
@@ -58,8 +58,8 @@
 
   .sb-modal-actions {
     padding: .75rem 1.25rem;
-    background: var(--white);
-    border-top: 0.0625rem solid var(--gray-100);
+    background: var(--spark-surface);
+    border-top: 0.0625rem solid var(--spark-border-card);
     min-height: 3.5rem;
     display: flex;
     flex-direction: row-reverse;
@@ -72,7 +72,7 @@
   }
 
   .small {
-    color: var(--gray-400);
+    color: var(--spark-gray-75);
   }
 
   &.small {
@@ -255,7 +255,7 @@
 .sb-modal-white .ui.modal>.close {
   top: 0;
   right: 0;
-  color: var(--primary-400);
+  color: var(--spark-brick);
 }
 
 .sb-workspace-modal {

From aea1197d0d02fe30bdecb982fc101e78f19fdebf Mon Sep 17 00:00:00 2001
From: JeraldJF <jeraldj@sanketika.in>
Date: Wed, 22 Apr 2026 22:40:22 +0530
Subject: [PATCH 04/12] refactor: add friendly semantic aliases and replace all
 legacy CSS vars with aliases
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Extended _spark-tokens.scss with --color-* friendly aliases (--color-brand,
  --color-surface, --color-border, --color-upload-bg, etc.) that wrap raw spark
  and primary/secondary tokens — avoids exposing internal token names to component authors
- Replaced every remaining var(--primary-*), var(--secondary-*), var(--gray-*),
  var(--white) in all 9 committed SCSS files with the appropriate --color-* alias
- $btns Sass loop in _buttons.scss intentionally unchanged (drives color generation)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../assets-browser.component.scss             |   8 +-
 .../components/editor/editor.component.scss   |  30 ++---
 .../fancy-tree/fancy-tree.component.scss      |   4 +-
 .../components/header/header.component.scss   |   4 +-
 .../question/question.component.scss          |  16 +--
 .../lib/semantic/semantic-overrides.scss      |  70 +++++------
 .../styles/_portal-theme-overrides.scss       |  66 +++++------
 src/assets/styles/_spark-tokens.scss          | 110 ++++++++++++++++++
 src/assets/styles/components/_modal.scss      |   2 +-
 9 files changed, 210 insertions(+), 100 deletions(-)
 create mode 100644 src/assets/styles/_spark-tokens.scss

diff --git a/projects/questionset-editor-library/src/lib/components/assets-browser/assets-browser.component.scss b/projects/questionset-editor-library/src/lib/components/assets-browser/assets-browser.component.scss
index a4d6f5f7d..efe85e2c5 100644
--- a/projects/questionset-editor-library/src/lib/components/assets-browser/assets-browser.component.scss
+++ b/projects/questionset-editor-library/src/lib/components/assets-browser/assets-browser.component.scss
@@ -64,8 +64,8 @@
     justify-content: center;
     flex-direction: column;
     margin: 0 auto;
-    background-color: var(--primary-0);
-    border: 1px dashed var(--primary-200);
+    background-color: var(--color-brand-tint);
+    border: 1px dashed var(--color-brand-divider);
     border-radius: 0.5rem;
   }
   
@@ -224,8 +224,8 @@
     border-radius: 0.5rem;
     width: 100%;
     min-height: 130px;
-    background: var(--primary-0);
-    border: 1px dashed var(--primary-300);
+    background: var(--color-brand-tint);
+    border: 1px dashed var(--color-brand-outline);
   }
   
   .upload-input-button {
diff --git a/projects/questionset-editor-library/src/lib/components/editor/editor.component.scss b/projects/questionset-editor-library/src/lib/components/editor/editor.component.scss
index 82e3557b7..278840a72 100755
--- a/projects/questionset-editor-library/src/lib/components/editor/editor.component.scss
+++ b/projects/questionset-editor-library/src/lib/components/editor/editor.component.scss
@@ -32,7 +32,7 @@ lib-questionset-editor {
   .add-to-library {
     position: relative;
     z-index: 998 !important;
-    background: var(--primary-0);
+    background: var(--color-brand-tint);
     .sb-required {
       color: #ff4558;
       padding-left: 2px;
@@ -75,14 +75,14 @@ lib-questionset-editor {
       select,
       .sb-textarea,
       .list-border {
-        border: 1px solid var(--gray-100) !important;
+        border: 1px solid var(--color-border) !important;
         padding: 0.85rem 0.5rem !important;
         border-radius: 0.5rem;
         font-size: 0.785rem !important;
         font-weight: 500;
         transition: border-color 0.2s ease, box-shadow 0.2s ease;
         &:focus {
-          border-color: var(--primary-300) !important;
+          border-color: var(--color-brand-outline) !important;
           box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.12) !important;
         }
         // text-transform: capitalize;
@@ -128,7 +128,7 @@ lib-questionset-editor {
         }
       }
       .sb-keywordbox {
-        border: 1px solid var(--gray-100) !important;
+        border: 1px solid var(--color-border) !important;
         border-radius: 0.5rem;
         font-size: 0.785rem !important;
         font-weight: 500;
@@ -278,7 +278,7 @@ lib-questionset-editor {
     display: none !important;
   }
   .sb-textbox::-webkit-input-placeholder {
-    color: var(--gray-100) !important;
+    color: var(--color-border) !important;
     font-weight: 600 !important;
   }
   .treepicker-parent {
@@ -295,15 +295,15 @@ lib-questionset-editor {
   .ck.ck-editor__top
   .ck-sticky-panel
   .ck-toolbar {
-    border-left: 1px solid var(--gray-100) !important;
-    border-right: 1px solid var(--gray-100) !important;
-    border-top: 1px solid var(--gray-100) !important;
+    border-left: 1px solid var(--color-border) !important;
+    border-right: 1px solid var(--color-border) !important;
+    border-top: 1px solid var(--color-border) !important;
     border-bottom-left-radius: 0 !important;
     border-bottom-right-radius: 0 !important;
     border-top-left-radius: 0.5rem !important;
     border-top-right-radius: 0.5rem !important;
     border-bottom: 0 !important;
-    background-color: var(--primary-0) !important;
+    background-color: var(--color-brand-tint) !important;
   }
   sb-dynamic-richtext
   .ck-rounded-corners
@@ -312,12 +312,12 @@ lib-questionset-editor {
   sb-dynamic-richtext
   .ck.ck-editor__main
   > .ck-editor__editable.ck-rounded-corners {
-    border: 1px solid var(--gray-100) !important;
-    border-color: var(--gray-100) !important;
+    border: 1px solid var(--color-border) !important;
+    border-color: var(--color-border) !important;
     border-bottom-left-radius: 0.5rem !important;
     border-bottom-right-radius: 0.5rem !important;
     &:focus {
-      border-color: var(--primary-300) !important;
+      border-color: var(--color-brand-outline) !important;
       box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.12) !important;
     }
   }
@@ -345,8 +345,8 @@ lib-questionset-editor {
   }
 
   .sb-disabled-textarea {
-    background: var(--gray-0) !important;
-    border: 0.0625rem solid var(--gray-100) !important;
+    background: var(--color-surface-alt) !important;
+    border: 0.0625rem solid var(--color-border) !important;
     opacity: 0.45 !important;
     pointer-events: none !important;
     font-size: 1em !important;
@@ -566,7 +566,7 @@ lib-questionset-editor {
     .sb-timer-input{
       width: 10rem;
       font-size: .785rem!important;
-      border: 1px solid var(--gray-100)!important;
+      border: 1px solid var(--color-border)!important;
       border-radius: 0.5rem;
       padding: 12px 10px;
       margin-right: 5px;
diff --git a/projects/questionset-editor-library/src/lib/components/fancy-tree/fancy-tree.component.scss b/projects/questionset-editor-library/src/lib/components/fancy-tree/fancy-tree.component.scss
index e4de4117f..b9a211a42 100644
--- a/projects/questionset-editor-library/src/lib/components/fancy-tree/fancy-tree.component.scss
+++ b/projects/questionset-editor-library/src/lib/components/fancy-tree/fancy-tree.component.scss
@@ -57,7 +57,7 @@
           }
           &-active {
             border: 1px solid transparent;
-            background-color: var(--primary-0);
+            background-color: var(--color-brand-tint);
             padding: 15px 33px;
             border-top: none;
             border-left: 3px solid var(--spark-brick);
@@ -113,7 +113,7 @@
               &.fancytree-focused,
               &:hover {
                 border: 1px solid transparent;
-                background-color: var(--primary-0);
+                background-color: var(--color-brand-tint);
                 border-right: 0;
                 border-bottom: 0;
                 border-top: 0;
diff --git a/projects/questionset-editor-library/src/lib/components/header/header.component.scss b/projects/questionset-editor-library/src/lib/components/header/header.component.scss
index 59ac0f512..09ad9c3cd 100755
--- a/projects/questionset-editor-library/src/lib/components/header/header.component.scss
+++ b/projects/questionset-editor-library/src/lib/components/header/header.component.scss
@@ -22,11 +22,11 @@
     }
   }
   .sb-bg-header-blue {
-    background: var(--primary-0);
+    background: var(--color-brand-tint);
   }
     
   .sb-bg-lightBlue {
-    background: var(--primary-0) !important;
+    background: var(--color-brand-tint) !important;
   }
   
   .bb-1 {
diff --git a/projects/questionset-editor-library/src/lib/components/question/question.component.scss b/projects/questionset-editor-library/src/lib/components/question/question.component.scss
index 6eba362e8..60943f8b3 100644
--- a/projects/questionset-editor-library/src/lib/components/question/question.component.scss
+++ b/projects/questionset-editor-library/src/lib/components/question/question.component.scss
@@ -3,7 +3,7 @@
 }
 sui-select {
   width: 100%;
-  border: 1px solid var(--gray-100);
+  border: 1px solid var(--color-border);
   font-size: 0.8rem;
   padding: 0.4rem 0.2rem;
   background: #fff;
@@ -55,20 +55,20 @@ sui-select {
 
 .ckeditor-tool__option,
 .ckeditor-tool__question{
-  border: 1px solid var(--gray-100);
+  border: 1px solid var(--color-border);
   border-radius: 0.5rem;
   border-top: 0;
   position: relative;
   display: flow-root;
 }
 .ckeditor-tool__solution, .ckeditor-tool__question-readonly, .ckeditor-tool__option-readonly {
-  border: 1px solid var(--gray-100);
+  border: 1px solid var(--color-border);
   border-radius: 0.5rem;
   margin-bottom: -4px;
 }
 
 .ckeditor-tool__label {
-  background-color: var(--primary-0);
+  background-color: var(--color-brand-tint);
   color: var(--primary-color)!important;
   font-weight: 600;
   border-top-left-radius: 0.5rem;
@@ -76,7 +76,7 @@ sui-select {
 }
 
 .mcq-checkbox-answer {
-  background: var(--gray-0);
+  background: var(--color-surface-alt);
   padding: 8px;
   display: flex;
   justify-content: center;
@@ -139,7 +139,7 @@ sui-select {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: 0.5rem;
-  border-bottom: solid 1px var(--gray-100);
+  border-bottom: solid 1px var(--color-border);
   &:last-child{
     border-bottom: none;
   }
@@ -201,7 +201,7 @@ sui-select {
       select,
       .sb-textarea,
       .list-border {
-        border: 1px solid var(--gray-100) !important;
+        border: 1px solid var(--color-border) !important;
         padding: 12px 8px !important;
         border-radius: 0.5rem;
         font-size: 0.785rem !important;
@@ -234,7 +234,7 @@ sui-select {
     }
   }
     .sb-keywordbox{
-      border: 1px solid var(--gray-100) !important;
+      border: 1px solid var(--color-border) !important;
       border-radius: 0.5rem;
       font-size: 0.785rem !important;
       font-weight: 500;
diff --git a/src/assets/lib/semantic/semantic-overrides.scss b/src/assets/lib/semantic/semantic-overrides.scss
index f95e5d61f..4bd85bb23 100644
--- a/src/assets/lib/semantic/semantic-overrides.scss
+++ b/src/assets/lib/semantic/semantic-overrides.scss
@@ -114,11 +114,11 @@ input[type=number]::-webkit-outer-spin-button {
 .ui.form input[type=tel],
 .ui.form textarea {
   border-radius: 0.5rem !important;
-  border-color: var(--gray-100) !important;
+  border-color: var(--color-border) !important;
   font-size: 0.875rem !important;
   transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
   &:focus {
-    border-color: var(--primary-300) !important;
+    border-color: var(--color-brand-outline) !important;
     box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.12) !important;
   }
 }
@@ -126,31 +126,31 @@ input[type=number]::-webkit-outer-spin-button {
 // Dropdowns
 .ui.selection.dropdown {
   border-radius: 0.5rem !important;
-  border-color: var(--gray-100) !important;
+  border-color: var(--color-border) !important;
   font-size: 0.875rem !important;
   transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
   min-height: 2.5rem !important;
   &.active, &:focus, &.visible {
-    border-color: var(--primary-300) !important;
+    border-color: var(--color-brand-outline) !important;
     box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.12) !important;
   }
   > .dropdown.icon {
-    color: var(--gray-400) !important;
+    color: var(--color-text-secondary) !important;
   }
   > .text {
     font-size: 0.875rem !important;
-    color: var(--gray-800) !important;
+    color: var(--color-text) !important;
   }
   .menu {
     border-radius: 0 0 0.5rem 0.5rem !important;
-    border-color: var(--gray-100) !important;
+    border-color: var(--color-border) !important;
     box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.10) !important;
     > .item {
       font-size: 0.875rem !important;
       transition: background-color 0.15s ease !important;
       &:hover, &.active, &.selected {
-        background-color: var(--primary-0) !important;
-        color: var(--primary-400) !important;
+        background-color: var(--color-brand-tint) !important;
+        color: var(--color-brand-action) !important;
         font-weight: 500 !important;
       }
     }
@@ -160,7 +160,7 @@ input[type=number]::-webkit-outer-spin-button {
 // Cards
 .ui.card, .ui.cards > .card {
   border-radius: 0.75rem !important;
-  border: 1px solid var(--gray-100) !important;
+  border: 1px solid var(--color-border) !important;
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06) !important;
   transition: box-shadow 0.2s ease !important;
   &:hover {
@@ -175,20 +175,20 @@ input[type=number]::-webkit-outer-spin-button {
   font-weight: 500 !important;
   transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
   &.primary {
-    background-color: var(--primary-400) !important;
-    color: var(--white) !important;
-    &:hover { background-color: var(--primary-800) !important; }
+    background-color: var(--color-brand-action) !important;
+    color: var(--color-surface) !important;
+    &:hover { background-color: var(--color-brand-deep) !important; }
   }
   &.secondary {
-    background-color: var(--secondary-200) !important;
-    color: var(--white) !important;
+    background-color: var(--color-success) !important;
+    color: var(--color-surface) !important;
   }
 }
 
 // Segments / panels
 .ui.segment {
   border-radius: 0.75rem !important;
-  border-color: var(--gray-100) !important;
+  border-color: var(--color-border) !important;
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05) !important;
 }
 
@@ -200,16 +200,16 @@ input[type=number]::-webkit-outer-spin-button {
     transition: color 0.15s ease, background-color 0.15s ease !important;
   }
   .active.item {
-    color: var(--primary-400) !important;
+    color: var(--color-brand-action) !important;
     font-weight: 600 !important;
-    border-color: var(--primary-400) !important;
+    border-color: var(--color-brand-action) !important;
   }
 }
 .ui.secondary.pointing.menu {
-  border-color: var(--gray-100) !important;
+  border-color: var(--color-border) !important;
   .active.item {
-    border-color: var(--primary-400) !important;
-    color: var(--primary-400) !important;
+    border-color: var(--color-brand-action) !important;
+    color: var(--color-brand-action) !important;
   }
 }
 
@@ -223,52 +223,52 @@ input[type=number]::-webkit-outer-spin-button {
 // Tables
 .ui.table {
   border-radius: 0.75rem !important;
-  border-color: var(--gray-100) !important;
+  border-color: var(--color-border) !important;
   thead th {
-    background-color: var(--primary-0) !important;
-    color: var(--gray-800) !important;
+    background-color: var(--color-brand-tint) !important;
+    color: var(--color-text) !important;
     font-weight: 600 !important;
-    border-bottom-color: var(--gray-100) !important;
+    border-bottom-color: var(--color-border) !important;
   }
   tbody tr:hover td {
-    background-color: var(--primary-0) !important;
+    background-color: var(--color-brand-tint) !important;
   }
 }
 
 // Checkboxes
 .ui.checkbox input:checked ~ .box:before,
 .ui.checkbox input:checked ~ label:before {
-  border-color: var(--primary-400) !important;
-  background: var(--primary-400) !important;
+  border-color: var(--color-brand-action) !important;
+  background: var(--color-brand-action) !important;
 }
 .ui.checkbox input:checked ~ .box:after,
 .ui.checkbox input:checked ~ label:after {
-  color: var(--white) !important;
+  color: var(--color-surface) !important;
 }
 .ui.toggle.checkbox input:checked ~ label:before {
-  background-color: var(--primary-400) !important;
+  background-color: var(--color-brand-action) !important;
 }
 
 // Search results
 .ui.search > .results {
   border-radius: 0.5rem !important;
-  border-color: var(--gray-100) !important;
+  border-color: var(--color-border) !important;
   box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.10) !important;
   .result:hover {
-    background: var(--primary-0) !important;
+    background: var(--color-brand-tint) !important;
   }
 }
 
 // Accordion
 .ui.accordion .title:not(.ui) {
-  color: var(--primary-400) !important;
+  color: var(--color-brand-action) !important;
   font-weight: 600 !important;
 }
 
 // Loader
 .ui.loader:before {
-  border-color: var(--gray-100) !important;
+  border-color: var(--color-border) !important;
 }
 .ui.loader:after {
-  border-color: var(--primary-400) transparent transparent !important;
+  border-color: var(--color-brand-action) transparent transparent !important;
 }
diff --git a/src/assets/styles/_portal-theme-overrides.scss b/src/assets/styles/_portal-theme-overrides.scss
index f690358f2..8c1c918ba 100644
--- a/src/assets/styles/_portal-theme-overrides.scss
+++ b/src/assets/styles/_portal-theme-overrides.scss
@@ -69,7 +69,7 @@ select {
   &:focus,
   &:focus-visible {
     outline: none;
-    border-color: var(--primary-300);
+    border-color: var(--color-brand-outline);
     box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.15);
   }
 
@@ -92,7 +92,7 @@ select {
   transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
 
   &:focus {
-    border-color: var(--primary-300) !important;
+    border-color: var(--color-brand-outline) !important;
     box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.15) !important;
   }
 }
@@ -109,7 +109,7 @@ select {
 
   &.active,
   &:focus {
-    border-color: var(--primary-300) !important;
+    border-color: var(--color-brand-outline) !important;
     box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.15) !important;
   }
 
@@ -125,7 +125,7 @@ select {
       &:hover,
       &.active,
       &.selected {
-        background-color: var(--primary-0) !important;
+        background-color: var(--color-brand-tint) !important;
         color: var(--spark-brick) !important;
         font-weight: 500;
       }
@@ -150,7 +150,7 @@ select {
 
 .ui.checkbox input:focus ~ .box:before,
 .ui.checkbox input:focus ~ label:before {
-  border-color: var(--primary-300) !important;
+  border-color: var(--color-brand-outline) !important;
   box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.15) !important;
 }
 
@@ -196,14 +196,14 @@ select {
 
 .fancy-tree .fancytree-node:hover > .fancytree-title,
 .fancytree-node:hover > .fancytree-title {
-  background-color: var(--primary-0) !important;
+  background-color: var(--color-brand-tint) !important;
   color: var(--spark-brick) !important;
   border-radius: 0.25rem;
 }
 
 .fancy-tree .fancytree-active > .fancytree-title,
 .fancytree-active > .fancytree-title {
-  background-color: var(--primary-100) !important;
+  background-color: var(--color-brand-subtle) !important;
   color: var(--spark-brick) !important;
   border-left: 3px solid var(--spark-brick);
   border-radius: 0 0.25rem 0.25rem 0;
@@ -212,13 +212,13 @@ select {
 // Plain tree hover
 .plain-tree .tree-node:hover,
 .sb-tree-node:hover {
-  background-color: var(--primary-0) !important;
+  background-color: var(--color-brand-tint) !important;
   border-radius: 0.375rem;
 }
 
 .plain-tree .tree-node.active,
 .sb-tree-node.active {
-  background-color: var(--primary-100) !important;
+  background-color: var(--color-brand-subtle) !important;
   border-left: 3px solid var(--spark-brick) !important;
   color: var(--spark-brick) !important;
 }
@@ -282,10 +282,10 @@ select {
   }
 
   .sb-btn-outline-primary {
-    border-color: var(--primary-300) !important;
+    border-color: var(--color-brand-outline) !important;
     color: var(--spark-brick) !important;
     border-radius: 0.5rem !important;
-    &:hover { background-color: var(--primary-0) !important; }
+    &:hover { background-color: var(--color-brand-tint) !important; }
     &.sb-btn-outline-disabled,
     &[disabled] {
       background-color: var(--spark-surface) !important;
@@ -322,7 +322,7 @@ select {
 }
 
 .sb-progress-status .completed {
-  color: var(--secondary-200) !important; // green for completed
+  color: var(--color-success) !important; // green for completed
 }
 
 // Semantic UI progress bar
@@ -348,15 +348,15 @@ select {
 
 .iziToast.iziToast-color-blue,
 .sb-toast-info {
-  background-color: var(--primary-0) !important;
+  background-color: var(--color-brand-tint) !important;
   border-left: 4px solid var(--spark-brick) !important;
   color: var(--spark-charcoal) !important;
 }
 
 .iziToast.iziToast-color-green,
 .sb-toast-success {
-  background-color: var(--secondary-0) !important;
-  border-left: 4px solid var(--secondary-200) !important;
+  background-color: var(--color-success-bg) !important;
+  border-left: 4px solid var(--color-success) !important;
 }
 
 .iziToast.iziToast-color-red,
@@ -409,7 +409,7 @@ input[type="range"] {
 
 .publish-checklist .checklist-item.checked .item-icon,
 .sb-checklist-item.checked .item-icon {
-  color: var(--secondary-200); // green tick for completed
+  color: var(--color-success); // green tick for completed
 }
 
 // -----------------------------------------------------------------------------
@@ -427,11 +427,11 @@ input[type="range"] {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--primary-200);
+  background: var(--color-brand-divider);
   border-radius: 3px;
 
   &:hover {
-    background: var(--primary-300);
+    background: var(--color-brand-outline);
   }
 }
 
@@ -446,9 +446,9 @@ input[type="range"] {
 
 .sb-label-primary,
 .ui.label.sb-label-primary {
-  background-color: var(--primary-0) !important;
+  background-color: var(--color-brand-tint) !important;
   color: var(--spark-brick) !important;
-  border: 1px solid var(--primary-200) !important;
+  border: 1px solid var(--color-brand-divider) !important;
 }
 
 // Status chips
@@ -462,7 +462,7 @@ input[type="range"] {
 
   &.draft    { background-color: var(--spark-card-alt);     color: var(--spark-gray-75); }
   &.review   { background-color: var(--tertiary-0); color: var(--tertiary-400); }
-  &.live     { background-color: var(--secondary-0); color: var(--secondary-400); }
+  &.live     { background-color: var(--color-success-bg); color: var(--color-selected-deep); }
   &.rejected { background-color: var(--red-0);      color: var(--red-400); }
 }
 
@@ -473,7 +473,7 @@ input[type="range"] {
 .ck.ck-toolbar {
   border-radius: 0.5rem 0.5rem 0 0 !important;
   border-color: var(--spark-border-card) !important;
-  background-color: var(--primary-0) !important;
+  background-color: var(--color-brand-tint) !important;
 }
 
 .ck.ck-editor__main > .ck-editor__editable {
@@ -481,14 +481,14 @@ input[type="range"] {
   border-color: var(--spark-border-card) !important;
 
   &.ck-focused {
-    border-color: var(--primary-300) !important;
+    border-color: var(--color-brand-outline) !important;
     box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.15) !important;
   }
 }
 
 .ck.ck-button.ck-on,
 .ck.ck-button:hover:not(.ck-disabled) {
-  background-color: var(--primary-0) !important;
+  background-color: var(--color-brand-tint) !important;
   color: var(--spark-brick) !important;
 }
 
@@ -499,7 +499,7 @@ input[type="range"] {
 .asset-card:hover,
 .library-card:hover,
 .sb-asset-card:hover {
-  border-color: var(--primary-300) !important;
+  border-color: var(--color-brand-outline) !important;
   box-shadow: 0 4px 12px 0 rgba(var(--rc-rgba-primary), 0.18) !important;
 }
 
@@ -529,10 +529,10 @@ input[type="range"] {
 
   &.sb-btn-outline-primary {
     background-color: transparent !important;
-    border: 1px solid var(--primary-300) !important;
+    border: 1px solid var(--color-brand-outline) !important;
     color: var(--spark-brick) !important;
     &:hover {
-      background-color: var(--primary-0) !important;
+      background-color: var(--color-brand-tint) !important;
       border-color: var(--spark-brick) !important;
     }
     &.sb-btn-outline-disabled,
@@ -557,7 +557,7 @@ input[type="range"] {
     border-radius: 0.5rem !important;
     &:hover,
     &:focus {
-      background-color: var(--primary-0) !important;
+      background-color: var(--color-brand-tint) !important;
       border-color: var(--spark-brick-dark) !important;
       color: var(--spark-brick-dark) !important;
     }
@@ -620,7 +620,7 @@ input[type="range"] {
 }
 
 .ckeditor-tool__label {
-  background-color: var(--primary-0) !important;
+  background-color: var(--color-brand-tint) !important;
   color: var(--spark-brick) !important;
   border-radius: 0.5rem 0.5rem 0 0 !important;
   font-weight: 600 !important;
@@ -661,7 +661,7 @@ input[type="range"] {
 // Fancytree active — no border at all
 .fancytree-active > .fancytree-title,
 span.fancytree-active span.fancytree-title {
-  background-color: var(--primary-0) !important;
+  background-color: var(--color-brand-tint) !important;
   color: var(--spark-brick) !important;
   border: none !important;
 }
@@ -704,7 +704,7 @@ span.fancytree-active span.fancytree-title {
 
   &:hover,
   &:focus {
-    background-color: var(--primary-0) !important;
+    background-color: var(--color-brand-tint) !important;
     border-color: var(--spark-brick-dark) !important;
     color: var(--spark-brick-dark) !important;
   }
@@ -728,7 +728,7 @@ span.fancytree-active span.fancytree-title {
 
   &:hover,
   &:focus {
-    background-color: var(--primary-0) !important;
+    background-color: var(--color-brand-tint) !important;
     border-color: var(--spark-brick-dark) !important;
     color: var(--spark-brick-dark) !important;
   }
@@ -756,7 +756,7 @@ span.fancytree-active span.fancytree-title {
 
   &:hover,
   &:focus {
-    background-color: var(--primary-0) !important;
+    background-color: var(--color-brand-tint) !important;
     border-color: var(--spark-brick-dark) !important;
     color: var(--spark-brick-dark) !important;
   }
diff --git a/src/assets/styles/_spark-tokens.scss b/src/assets/styles/_spark-tokens.scss
new file mode 100644
index 000000000..bfd67ae66
--- /dev/null
+++ b/src/assets/styles/_spark-tokens.scss
@@ -0,0 +1,110 @@
+// =============================================================================
+// Sunbird Spark Design Tokens
+// Single source of truth for all Spark brand values.
+// Kept in sync with sunbird-spark-theme.css used by the generic/content editors.
+// Import this BEFORE _variables.scss so variables can reference these tokens.
+// =============================================================================
+
+:root {
+  /* Brand Colors */
+  --spark-brick:         #AC5139;
+  --spark-brick-dark:    #A85236;
+  --spark-ginger:        #CC8545;
+  --spark-yellow:        #FFD954;
+  --spark-sunflower:     #FFDB73;
+  --spark-ivory:         #FFFEF4;
+  --spark-teal:          #4A8C8C;
+  --spark-wave:          #70EDBF;
+  --spark-ink:           #376673;
+  --spark-jamun:         #540F3B;
+
+  /* Surfaces & Backgrounds */
+  --spark-bg:            #E9E8D9;
+  --spark-surface:       #FFFFFF;
+  --spark-card-alt:      #F3F3E5;
+  --spark-sidebar:       #F8F8F8;
+
+  /* Text Colors */
+  --spark-obsidian:      #222222;
+  --spark-charcoal:      #333333;
+  --spark-gray-75:       #757575;
+  --spark-gray-82:       #828282;
+  --spark-gray-b2:       #B2B2B2;
+
+  /* Border Colors */
+  --spark-border:        #D0D5DD;
+  --spark-border-light:  #E5E7EB;
+  --spark-border-card:   #F1F1F1;
+
+  /* Status Colors */
+  --spark-success:       #4CAF50;
+  --spark-success-bg:    #F0F4F0;
+  --spark-warning-bg:    #FFF1C7;
+  --spark-complete-bg:   #CAE5B6;
+  --spark-destructive:   #E53E3E;
+
+  /* Shadows */
+  --spark-shadow-sm:     0 0.125rem 0.625rem rgba(0, 0, 0, 0.05);
+  --spark-shadow-md:     0 0.875rem 0.875rem rgba(0, 0, 0, 0.05);
+  --spark-shadow-lg:     0 0.25rem 1.25rem 0 rgba(0, 0, 0, 0.1);
+  --spark-shadow-card:   0.125rem 0.125rem 1.25rem 0 rgba(0, 0, 0, 0.09);
+
+  /* Border Radius */
+  --spark-radius-xs:     0.625rem;
+  --spark-radius-sm:     0.75rem;
+  --spark-radius-md:     1rem;
+  --spark-radius-lg:     1.25rem;
+  --spark-radius-pill:   2.25rem;
+  --spark-radius-full:   9999px;
+
+  /* Typography */
+  --spark-font:          'Rubik', 'Noto Sans', sans-serif;
+  --spark-font-size-xs:  0.75rem;
+  --spark-font-size-sm:  0.875rem;
+  --spark-font-size-md:  1rem;
+  --spark-font-size-lg:  1.125rem;
+  --spark-font-size-xl:  1.25rem;
+  --spark-font-size-2xl: 1.625rem;
+  --spark-font-size-3xl: 1.875rem;
+
+  // ─── Friendly semantic aliases ─────────────────────────────────────────────
+  // Use these in components instead of raw spark-* or legacy gray-/primary- names
+
+  /* Brand / action */
+  --color-brand:           var(--spark-brick);       /* primary action, active borders */
+  --color-brand-outline:   var(--primary-300);       /* outline buttons, focus rings */
+  --color-brand-divider:   var(--primary-200);       /* brand-tinted dividers / dashed borders */
+  --color-brand-tint:      var(--primary-0);         /* lightest brand bg (upload zones, hovers) */
+  --color-brand-subtle:    var(--primary-100);       /* light brand bg (selected rows) */
+  --color-brand-action:    var(--primary-400);       /* filled action buttons bg */
+  --color-brand-deep:      var(--primary-800);       /* hover state on filled action buttons */
+
+  /* Secondary / success */
+  --color-success:         var(--secondary-200);     /* green success, completed status */
+  --color-success-bg:      var(--secondary-0);       /* light green bg, live badge */
+  --color-success-tint:    var(--secondary-100);     /* subtle green tint */
+  --color-selected-bg:     var(--secondary-300);     /* selected item row background */
+  --color-selected-deep:   var(--secondary-400);     /* deep secondary for text on light bg */
+
+  /* Surfaces */
+  --color-surface:         var(--spark-surface);     /* white canvas */
+  --color-surface-alt:     var(--spark-card-alt);    /* off-white / parchment card */
+  --color-page-bg:         var(--spark-bg);          /* warm page background */
+
+  /* Borders */
+  --color-border:          var(--spark-border-card); /* default card/input border */
+  --color-border-mid:      var(--spark-border);      /* stronger border (D0D5DD) */
+  --color-border-light:    var(--spark-border-light);/* subtlest border */
+
+  /* Text */
+  --color-text:            var(--spark-charcoal);    /* primary body text */
+  --color-text-secondary:  var(--spark-gray-75);     /* muted / secondary text */
+  --color-text-placeholder:var(--spark-gray-82);     /* placeholders */
+  --color-text-disabled:   var(--spark-gray-b2);     /* disabled labels */
+  --color-text-dark:       var(--spark-obsidian);    /* headings, high emphasis */
+
+  /* Upload / drop-zone */
+  --color-upload-bg:       var(--primary-0);         /* drop zone background */
+  --color-upload-border:   var(--primary-200);       /* drop zone dashed border */
+  --color-upload-border-focus: var(--primary-300);   /* drop zone focused/hover border */
+}
diff --git a/src/assets/styles/components/_modal.scss b/src/assets/styles/components/_modal.scss
index dadbabbe2..210601940 100644
--- a/src/assets/styles/components/_modal.scss
+++ b/src/assets/styles/components/_modal.scss
@@ -194,7 +194,7 @@
   }
 
   &.sb-success .ui.modal .sb-modal-header {
-    background-color: var(--secondary-200);
+    background-color: var(--color-success);
   }
 
   &.sb-error .ui.modal .sb-modal-header {

From 139736d1f7f408c93a624b78ac4b11aa07020179 Mon Sep 17 00:00:00 2001
From: JeraldJF <jeraldj@sanketika.in>
Date: Wed, 22 Apr 2026 22:57:46 +0530
Subject: [PATCH 05/12] fix: sharpen alias token values for better visual
 contrast
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- --color-brand-tint: primary-0 → primary-100 (#fde8e0) — warmer, visible hover/active bg
- --color-brand-subtle: primary-100 → primary-0 (#fff5f2) — faintest tint for upload zones
- --color-selected-bg: secondary-300 (mint green) → primary-100 (#fde8e0) — selected rows now use brand warm tint
- --color-border: border-card (#F1F1F1) → spark-border (#D0D5DD) — crisper default borders

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/assets/styles/_spark-tokens.scss | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/assets/styles/_spark-tokens.scss b/src/assets/styles/_spark-tokens.scss
index bfd67ae66..65628435c 100644
--- a/src/assets/styles/_spark-tokens.scss
+++ b/src/assets/styles/_spark-tokens.scss
@@ -74,8 +74,8 @@
   --color-brand:           var(--spark-brick);       /* primary action, active borders */
   --color-brand-outline:   var(--primary-300);       /* outline buttons, focus rings */
   --color-brand-divider:   var(--primary-200);       /* brand-tinted dividers / dashed borders */
-  --color-brand-tint:      var(--primary-0);         /* lightest brand bg (upload zones, hovers) */
-  --color-brand-subtle:    var(--primary-100);       /* light brand bg (selected rows) */
+  --color-brand-tint:      var(--primary-100);       /* warm brand bg — hover zones, active rows (#fde8e0) */
+  --color-brand-subtle:    var(--primary-0);         /* faintest brand tint — upload zones, page accents (#fff5f2) */
   --color-brand-action:    var(--primary-400);       /* filled action buttons bg */
   --color-brand-deep:      var(--primary-800);       /* hover state on filled action buttons */
 
@@ -83,18 +83,18 @@
   --color-success:         var(--secondary-200);     /* green success, completed status */
   --color-success-bg:      var(--secondary-0);       /* light green bg, live badge */
   --color-success-tint:    var(--secondary-100);     /* subtle green tint */
-  --color-selected-bg:     var(--secondary-300);     /* selected item row background */
+  --color-selected-bg:     var(--primary-100);       /* selected item row — warm brick tint (#fde8e0) */
   --color-selected-deep:   var(--secondary-400);     /* deep secondary for text on light bg */
 
   /* Surfaces */
   --color-surface:         var(--spark-surface);     /* white canvas */
-  --color-surface-alt:     var(--spark-card-alt);    /* off-white / parchment card */
-  --color-page-bg:         var(--spark-bg);          /* warm page background */
+  --color-surface-alt:     var(--spark-card-alt);    /* off-white / parchment card (#F3F3E5) */
+  --color-page-bg:         var(--spark-bg);          /* warm page background (#E9E8D9) */
 
   /* Borders */
-  --color-border:          var(--spark-border-card); /* default card/input border */
+  --color-border:          var(--spark-border);      /* default border — sharper (#D0D5DD) */
   --color-border-mid:      var(--spark-border);      /* stronger border (D0D5DD) */
-  --color-border-light:    var(--spark-border-light);/* subtlest border */
+  --color-border-light:    var(--spark-border-card); /* subtle card border (#F1F1F1) */
 
   /* Text */
   --color-text:            var(--spark-charcoal);    /* primary body text */

From 770362ff5a5ecd4c3ca2422a6df01c32c0d07e08 Mon Sep 17 00:00:00 2001
From: JeraldJF <jeraldj@sanketika.in>
Date: Wed, 22 Apr 2026 23:38:31 +0530
Subject: [PATCH 06/12] refactor: rename theme files for clarity
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- _spark-tokens.scss → _spark-aliases.scss (brand values + --color-* aliases)
- _portal-theme-overrides.scss → _spark-overrides.scss (Semantic UI overrides)
- Update @import references in styles.scss and comment in _variables.scss

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ..._spark-tokens.scss => _spark-aliases.scss} |  0
 ...e-overrides.scss => _spark-overrides.scss} |  0
 src/assets/styles/_variables.scss             | 28 ++++++++++---------
 src/assets/styles/styles.scss                 |  3 +-
 4 files changed, 17 insertions(+), 14 deletions(-)
 rename src/assets/styles/{_spark-tokens.scss => _spark-aliases.scss} (100%)
 rename src/assets/styles/{_portal-theme-overrides.scss => _spark-overrides.scss} (100%)

diff --git a/src/assets/styles/_spark-tokens.scss b/src/assets/styles/_spark-aliases.scss
similarity index 100%
rename from src/assets/styles/_spark-tokens.scss
rename to src/assets/styles/_spark-aliases.scss
diff --git a/src/assets/styles/_portal-theme-overrides.scss b/src/assets/styles/_spark-overrides.scss
similarity index 100%
rename from src/assets/styles/_portal-theme-overrides.scss
rename to src/assets/styles/_spark-overrides.scss
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index c175dc4de..c609dc442 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -44,21 +44,23 @@
     --gray-400: hsl(var(--gray-hs), 40%); // sub heading #666666
     --gray-800: var(--gray); // text color #333333
 
-    // basetheme — matches Sunbird Portal's sunbird-brick color (#a85236).
-    // NOTE: This editor loads in an iframe so it CANNOT inherit the portal's CSS variables.
-    // To change the theme, update --primary-color here AND update --sunbird-brick in the portal's :root.
-    --primary-color: #a85236;  // keep in sync with portal: hsl(var(--sunbird-brick)) = #a85236
+    // Spark tokens are defined in _spark-aliases.scss (imported before this file).
+    // Here we bridge them into the QuML editor's legacy variable system.
+    //
+    // NOTE: This editor loads in an iframe — it CANNOT inherit portal :root CSS variables.
+    // --primary-color is hardcoded to var(--spark-brick) which resolves within this iframe.
+    --primary-color: var(--spark-brick);
     --secondary-color: #008840;
-    --tertiary-color: #e55a28;
+    --tertiary-color: var(--spark-ginger);
 
-    // primary colors — orange scale matching portal sunbird-brick
-    --primary-0: #fff5f2; // light orange tint bg
+    // primary colors — Spark brick scale
+    --primary-0: #fff5f2;   // light brick tint bg
     --primary-100: #fde8e0; // default button bg
     --primary-200: #e8a48a; // divider
     --primary-250: #f5cfc4; // pagination bg color
     --primary-300: #c9714f; // outline, focus fields
     --primary-400: var(--primary-color); // button bg, heading, table titles, links, toggles
-    --primary-600: #8c3d24; // on press
+    --primary-600: var(--spark-brick-dark); // on press
     --primary-800: #6b2a14; // hover
 
     // secondary colors
@@ -84,11 +86,11 @@
     --warning-color: var(--orange);
     --danger-color: var(--red);
 
-    // element based variables — white base matching portal
-    --body-background-color: #ffffff;
-    --default-text-color: var(--gray-800);
-    --bg-body: #ffffff;
-    --body-color: var(--gray-800);
+    // element based variables
+    --body-background-color: var(--spark-bg);
+    --default-text-color: var(--spark-charcoal, var(--gray-800));
+    --bg-body: var(--spark-bg);
+    --body-color: var(--spark-charcoal, var(--gray-800));
 
     // alpha
     --alpha0: 0;
diff --git a/src/assets/styles/styles.scss b/src/assets/styles/styles.scss
index 9ef1f7ddf..5b4a7a6b1 100644
--- a/src/assets/styles/styles.scss
+++ b/src/assets/styles/styles.scss
@@ -12,6 +12,7 @@
 @import "./fonts/noto-nastaliqurdu/notonastaliqurdu.css";
 
 @import "./mixins/mixins";
+@import "./spark-aliases";
 @import "./variables";
 @import "./base/base.scss";
 @import "./vendors/vendors";
@@ -21,4 +22,4 @@
 @import "../lib/semantic/semantic-overrides.scss";
 @import "./legacy";
 @import "./global";
-@import "./portal-theme-overrides"; // Sunbird Portal orange/white theme alignment
\ No newline at end of file
+@import "./spark-overrides"; // Spark theme overrides for Semantic UI components
\ No newline at end of file

From ff3f41925e691f40aab46e9d1e828816265c684b Mon Sep 17 00:00:00 2001
From: JeraldJF <jeraldj@sanketika.in>
Date: Thu, 23 Apr 2026 18:06:57 +0530
Subject: [PATCH 07/12] #fix: question set editor changes

---
 .../components/editor/editor.component.scss   | 1002 ++++++++++++++++-
 .../components/header/header.component.scss   |   82 +-
 src/assets/styles/_spark-aliases.scss         |    3 +-
 3 files changed, 992 insertions(+), 95 deletions(-)

diff --git a/projects/questionset-editor-library/src/lib/components/editor/editor.component.scss b/projects/questionset-editor-library/src/lib/components/editor/editor.component.scss
index 278840a72..248e34a74 100755
--- a/projects/questionset-editor-library/src/lib/components/editor/editor.component.scss
+++ b/projects/questionset-editor-library/src/lib/components/editor/editor.component.scss
@@ -1,5 +1,791 @@
 lib-questionset-editor {
-  .fancytree-helper-hidden{display:none}.fancytree-helper-indeterminate-cb{color:#777}.fancytree-helper-disabled{color:silver}.fancytree-helper-spin{-webkit-animation:spin 1s infinite linear;animation:spin 1s infinite linear}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}ul.fancytree-container{font-family:inherit;font-size:10pt;white-space:nowrap;padding:3px;margin:0;background-color:#fff;border:1px dotted gray;min-height:0;position:relative}ul.fancytree-container ul{padding:0 0 0 16px;margin:0}ul.fancytree-container ul>li:before{content:none}ul.fancytree-container li{list-style-image:none;list-style-position:outside;list-style-type:none;-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background-attachment:scroll;background-color:transparent;background-position:0 0;background-repeat:repeat-y;background-image:none;margin:0}ul.fancytree-container li.fancytree-lastsib{background-image:none}.ui-fancytree-disabled ul.fancytree-container{opacity:.5;background-color:silver}ul.fancytree-connectors.fancytree-container li{background-image:url(../../assets/images/vline.gif);background-position:0 0}ul.fancytree-container li.fancytree-lastsib,ul.fancytree-no-connector>li{background-image:none}li.fancytree-animating{position:relative}#fancytree-drop-marker,span.fancytree-checkbox,span.fancytree-drag-helper-img,span.fancytree-empty,span.fancytree-expander,span.fancytree-icon,span.fancytree-vline{width:16px;height:16px;display:inline-block;vertical-align:top;background-repeat:no-repeat;background-image:url(../../assets/images/icons.gif);background-position:0 0}span.fancytree-checkbox,span.fancytree-custom-icon,span.fancytree-expander,span.fancytree-icon{margin-top:0}span.fancytree-custom-icon{width:16px;height:16px;display:inline-block;margin-left:3px;background-position:0 0}img.fancytree-icon{width:16px;height:16px;margin-left:3px;margin-top:0;vertical-align:top;border-style:none}span.fancytree-expander{cursor:pointer}.fancytree-exp-n span.fancytree-expander,.fancytree-exp-nl span.fancytree-expander{background-image:none;cursor:default}.fancytree-connectors .fancytree-exp-n span.fancytree-expander,.fancytree-connectors .fancytree-exp-nl span.fancytree-expander{background-image:url(../../assets/images/icons.gif);margin-top:0}.fancytree-connectors .fancytree-exp-n span.fancytree-expander,.fancytree-connectors .fancytree-exp-n span.fancytree-expander:hover{background-position:0 -64px}.fancytree-connectors .fancytree-exp-nl span.fancytree-expander,.fancytree-connectors .fancytree-exp-nl span.fancytree-expander:hover{background-position:-16px -64px}.fancytree-exp-c span.fancytree-expander{background-position:0 -80px}.fancytree-exp-c span.fancytree-expander:hover{background-position:-16px -80px}.fancytree-exp-cl span.fancytree-expander{background-position:0 -96px}.fancytree-exp-cl span.fancytree-expander:hover{background-position:-16px -96px}.fancytree-exp-cd span.fancytree-expander{background-position:-64px -80px}.fancytree-exp-cd span.fancytree-expander:hover{background-position:-80px -80px}.fancytree-exp-cdl span.fancytree-expander{background-position:-64px -96px}.fancytree-exp-cdl span.fancytree-expander:hover{background-position:-80px -96px}.fancytree-exp-e span.fancytree-expander,.fancytree-exp-ed span.fancytree-expander{background-position:-32px -80px}.fancytree-exp-e span.fancytree-expander:hover,.fancytree-exp-ed span.fancytree-expander:hover{background-position:-48px -80px}.fancytree-exp-edl span.fancytree-expander,.fancytree-exp-el span.fancytree-expander{background-position:-32px -96px}.fancytree-exp-edl span.fancytree-expander:hover,.fancytree-exp-el span.fancytree-expander:hover{background-position:-48px -96px}.fancytree-fade-expander span.fancytree-expander{transition:opacity 1.5s;opacity:0}.fancytree-fade-expander .fancytree-treefocus span.fancytree-expander,.fancytree-fade-expander [class*=fancytree-statusnode-] span.fancytree-expander,.fancytree-fade-expander.fancytree-treefocus span.fancytree-expander,.fancytree-fade-expander:hover span.fancytree-expander{transition:opacity .6s;opacity:1}span.fancytree-checkbox{margin-left:3px;background-position:0 -32px}span.fancytree-checkbox:hover{background-position:-16px -32px}span.fancytree-checkbox.fancytree-radio{background-position:0 -48px}span.fancytree-checkbox.fancytree-radio:hover{background-position:-16px -48px}.fancytree-partsel span.fancytree-checkbox{background-position:-64px -32px}.fancytree-partsel span.fancytree-checkbox:hover{background-position:-80px -32px}.fancytree-partsel span.fancytree-checkbox.fancytree-radio{background-position:-64px -48px}.fancytree-partsel span.fancytree-checkbox.fancytree-radio:hover{background-position:-80px -48px}.fancytree-selected span.fancytree-checkbox{background-position:-32px -32px}.fancytree-selected span.fancytree-checkbox:hover{background-position:-48px -32px}.fancytree-selected span.fancytree-checkbox.fancytree-radio{background-position:-32px -48px}.fancytree-selected span.fancytree-checkbox.fancytree-radio:hover{background-position:-48px -48px}.fancytree-unselectable span.fancytree-checkbox{opacity:.4}.fancytree-unselectable span.fancytree-checkbox:hover{background-position:0 -32px}.fancytree-unselectable span.fancytree-checkbox.fancytree-radio:hover{background-position:0 -48px}.fancytree-unselectable.fancytree-partsel span.fancytree-checkbox:hover{background-position:-64px -32px}.fancytree-unselectable.fancytree-selected span.fancytree-checkbox:hover{background-position:-32px -32px}.fancytree-unselectable.fancytree-selected span.fancytree-checkbox.fancytree-radio:hover{background-position:-32px -48px}.fancytree-container.fancytree-checkbox-auto-hide span.fancytree-checkbox{visibility:hidden}.fancytree-container.fancytree-checkbox-auto-hide .fancytree-node.fancytree-selected span.fancytree-checkbox,.fancytree-container.fancytree-checkbox-auto-hide .fancytree-node:hover span.fancytree-checkbox,.fancytree-container.fancytree-checkbox-auto-hide tr.fancytree-selected td span.fancytree-checkbox,.fancytree-container.fancytree-checkbox-auto-hide tr:hover td span.fancytree-checkbox{visibility:unset}.fancytree-container.fancytree-checkbox-auto-hide.fancytree-treefocus .fancytree-node.fancytree-active span.fancytree-checkbox,.fancytree-container.fancytree-checkbox-auto-hide.fancytree-treefocus tr.fancytree-active td span.fancytree-checkbox{visibility:unset}span.fancytree-icon{margin-left:3px;background-position:0 0}.fancytree-ico-c span.fancytree-icon:hover{background-position:-16px 0}.fancytree-has-children.fancytree-ico-c span.fancytree-icon{background-position:-32px 0}.fancytree-has-children.fancytree-ico-c span.fancytree-icon:hover{background-position:-48px 0}.fancytree-ico-e span.fancytree-icon{background-position:-64px 0}.fancytree-ico-e span.fancytree-icon:hover{background-position:-80px 0}.fancytree-ico-cf span.fancytree-icon{background-position:0 -16px}.fancytree-ico-cf span.fancytree-icon:hover{background-position:-16px -16px}.fancytree-has-children.fancytree-ico-cf span.fancytree-icon{background-position:-32px -16px}.fancytree-has-children.fancytree-ico-cf span.fancytree-icon:hover{background-position:-48px -16px}.fancytree-ico-ef span.fancytree-icon{background-position:-64px -16px}.fancytree-ico-ef span.fancytree-icon:hover{background-position:-80px -16px}.fancytree-loading span.fancytree-expander,.fancytree-loading span.fancytree-expander:hover,.fancytree-statusnode-loading span.fancytree-icon,.fancytree-statusnode-loading span.fancytree-icon:hover,span.fancytree-icon.fancytree-icon-loading{background-image:url(../../assets/images/loading.gif);background-position:0 0}.fancytree-statusnode-error span.fancytree-icon,.fancytree-statusnode-error span.fancytree-icon:hover{background-position:0 -112px}span.fancytree-node{display:inherit;width:100%;margin-top:1px;min-height:16px}span.fancytree-title{color:#000;cursor:pointer;display:inline-block;vertical-align:top;min-height:16px;padding:0 3px 0 3px;margin:0 0 0 3px;border:1px solid transparent;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;border-radius:0}span.fancytree-node.fancytree-error span.fancytree-title{color:red}span.fancytree-childcounter{color:#fff;background:#337ab7;border:1px solid gray;border-radius:10px;padding:2px;text-align:center}div.fancytree-drag-helper span.fancytree-childcounter,div.fancytree-drag-helper span.fancytree-dnd-modifier{display:inline-block;color:#fff;background:#337ab7;border:1px solid gray;min-width:10px;height:10px;line-height:1;vertical-align:baseline;border-radius:10px;padding:2px;text-align:center;font-size:9px}div.fancytree-drag-helper span.fancytree-childcounter{position:absolute;top:-6px;right:-6px}div.fancytree-drag-helper span.fancytree-dnd-modifier{background:#5cb85c;border:none;font-weight:bolder}div.fancytree-drag-helper.fancytree-drop-accept span.fancytree-drag-helper-img{background-position:-32px -112px}div.fancytree-drag-helper.fancytree-drop-reject span.fancytree-drag-helper-img{background-position:-16px -112px}#fancytree-drop-marker{width:32px;position:absolute;background-position:0 -128px;margin:0}#fancytree-drop-marker.fancytree-drop-after,#fancytree-drop-marker.fancytree-drop-before{width:64px;background-position:0 -144px}#fancytree-drop-marker.fancytree-drop-copy{background-position:-64px -128px}#fancytree-drop-marker.fancytree-drop-move{background-position:-32px -128px}span.fancytree-drag-source.fancytree-drag-remove{opacity:.15}.fancytree-container.fancytree-rtl span.fancytree-connector,.fancytree-container.fancytree-rtl span.fancytree-drag-helper-img,.fancytree-container.fancytree-rtl span.fancytree-expander,.fancytree-container.fancytree-rtl span.fancytree-icon{background-image:url(../../assets/images/icons-rtl.gif)}.fancytree-container.fancytree-rtl .fancytree-exp-n span.fancytree-expander,.fancytree-container.fancytree-rtl .fancytree-exp-nl span.fancytree-expander{background-image:none}.fancytree-container.fancytree-rtl.fancytree-connectors .fancytree-exp-n span.fancytree-expander,.fancytree-container.fancytree-rtl.fancytree-connectors .fancytree-exp-nl span.fancytree-expander{background-image:url(../../assets/images/icons-rtl.gif)}ul.fancytree-container.fancytree-rtl ul{padding:0 16px 0 0}ul.fancytree-container.fancytree-rtl.fancytree-connectors li{background-position:right 0;background-image:url(../../assets/images/vline-rtl.gif)}ul.fancytree-container.fancytree-rtl li.fancytree-lastsib,ul.fancytree-container.fancytree-rtl.fancytree-no-connector>li{background-image:none}#fancytree-drop-marker.fancytree-rtl{background-image:url(../../assets/images/icons-rtl.gif)}table.fancytree-ext-table{font-family:inherit;font-size:10pt;border-collapse:collapse}table.fancytree-ext-table span.fancytree-node{display:inline-block;box-sizing:border-box}table.fancytree-ext-table td.fancytree-status-merged{text-align:center;font-style:italic;color:silver}table.fancytree-ext-table tr.fancytree-statusnode-error td.fancytree-status-merged{color:red}table.fancytree-ext-table.fancytree-ext-ariagrid.fancytree-cell-mode>tbody>tr.fancytree-active>td{background-color:#eee}table.fancytree-ext-table.fancytree-ext-ariagrid.fancytree-cell-mode>tbody>tr>td.fancytree-active-cell{background-color:#cbe8f6}table.fancytree-ext-table.fancytree-ext-ariagrid.fancytree-cell-mode.fancytree-cell-nav-mode>tbody>tr>td.fancytree-active-cell{background-color:#3875d7}table.fancytree-ext-columnview tbody tr td{position:relative;border:1px solid gray;vertical-align:top;overflow:auto}table.fancytree-ext-columnview tbody tr td>ul{padding:0}table.fancytree-ext-columnview tbody tr td>ul li{list-style-image:none;list-style-position:outside;list-style-type:none;-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background-attachment:scroll;background-color:transparent;background-position:0 0;background-repeat:repeat-y;background-image:none;margin:0}table.fancytree-ext-columnview span.fancytree-node{position:relative;display:inline-block}table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded{background-color:#e0e0e0}table.fancytree-ext-columnview span.fancytree-node.fancytree-active{background-color:#cbe8f6}table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right{position:absolute;right:3px;background-position:0 -80px}table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right:hover{background-position:-16px -80px}.fancytree-ext-filter-dimm span.fancytree-node span.fancytree-title{color:silver;font-weight:lighter}.fancytree-ext-filter-dimm span.fancytree-node.fancytree-submatch span.fancytree-title,.fancytree-ext-filter-dimm tr.fancytree-submatch span.fancytree-title{color:#000;font-weight:400}.fancytree-ext-filter-dimm span.fancytree-node.fancytree-match span.fancytree-title,.fancytree-ext-filter-dimm tr.fancytree-match span.fancytree-title{color:#000;font-weight:700}.fancytree-ext-filter-hide span.fancytree-node.fancytree-hide,.fancytree-ext-filter-hide tr.fancytree-hide{display:none}.fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title,.fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title{color:silver;font-weight:lighter}.fancytree-ext-filter-hide span.fancytree-node.fancytree-match span.fancytree-title,.fancytree-ext-filter-hide tr.fancytree-match span.fancytree-title{color:#000;font-weight:400}.fancytree-ext-filter-hide-expanders span.fancytree-node.fancytree-match span.fancytree-expander,.fancytree-ext-filter-hide-expanders tr.fancytree-match span.fancytree-expander{visibility:hidden}.fancytree-ext-filter-hide-expanders span.fancytree-node.fancytree-submatch span.fancytree-expander,.fancytree-ext-filter-hide-expanders tr.fancytree-submatch span.fancytree-expander{visibility:visible}.fancytree-ext-childcounter span.fancytree-custom-icon,.fancytree-ext-childcounter span.fancytree-icon,.fancytree-ext-filter span.fancytree-custom-icon,.fancytree-ext-filter span.fancytree-icon{position:relative}.fancytree-ext-childcounter span.fancytree-childcounter,.fancytree-ext-filter span.fancytree-childcounter{color:#fff;background:#777;border:1px solid gray;position:absolute;top:-6px;right:-6px;min-width:10px;height:10px;line-height:1;vertical-align:baseline;border-radius:10px;padding:2px;text-align:center;font-size:9px}ul.fancytree-ext-wide{position:relative;min-width:100%;z-index:2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}ul.fancytree-ext-wide span.fancytree-node>span{position:relative;z-index:2}ul.fancytree-ext-wide span.fancytree-node span.fancytree-title{position:absolute;z-index:1;left:0;min-width:100%;margin-left:0;margin-right:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fancytree-ext-fixed-wrapper .fancytree-ext-fixed-hidden{display:none}.fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-scroll-border-bottom{border-bottom:3px solid rgba(0,0,0,.75)}.fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-scroll-border-right{border-right:3px solid rgba(0,0,0,.75)}.fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-wrapper-tl{position:absolute;overflow:hidden;z-index:3;top:0;left:0}.fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-wrapper-tr{position:absolute;overflow:hidden;z-index:2;top:0}.fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-wrapper-bl{position:absolute;overflow:hidden;z-index:2;left:0}.fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-wrapper-br{position:absolute;overflow:scroll;z-index:1}span.fancytree-title{border:1px solid transparent;border-radius:0}span.fancytree-focused span.fancytree-title{outline:1px dotted #000}span.fancytree-active span.fancytree-title,span.fancytree-selected span.fancytree-title{background-color:#d4d4d4}span.fancytree-selected span.fancytree-title{font-style:italic}.fancytree-treefocus span.fancytree-active span.fancytree-title,.fancytree-treefocus span.fancytree-selected span.fancytree-title{color:#fff;background-color:#3875d7}table.fancytree-ext-table{border-collapse:collapse}table.fancytree-ext-table tbody tr.fancytree-focused{background-color:#99defd}table.fancytree-ext-table tbody tr.fancytree-active{background-color:#4169e1}table.fancytree-ext-table tbody tr.fancytree-selected{background-color:#99defd}table.fancytree-ext-columnview tbody tr td{border:1px solid gray}table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded{background-color:#ccc}table.fancytree-ext-columnview span.fancytree-node.fancytree-active{background-color:#4169e1}
+
+  font-family: var(--spark-font) !important;
+
+  .fancytree-helper-hidden {
+    display: none
+  }
+
+  .fancytree-helper-indeterminate-cb {
+    color: #777
+  }
+
+  .fancytree-helper-disabled {
+    color: silver
+  }
+
+  .fancytree-helper-spin {
+    -webkit-animation: spin 1s infinite linear;
+    animation: spin 1s infinite linear
+  }
+
+  @-webkit-keyframes spin {
+    0% {
+      -webkit-transform: rotate(0);
+      transform: rotate(0)
+    }
+
+    100% {
+      -webkit-transform: rotate(359deg);
+      transform: rotate(359deg)
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      -webkit-transform: rotate(0);
+      transform: rotate(0)
+    }
+
+    100% {
+      -webkit-transform: rotate(359deg);
+      transform: rotate(359deg)
+    }
+  }
+
+  ul.fancytree-container {
+    font-family: inherit;
+    font-size: 10pt;
+    white-space: nowrap;
+    padding: 3px;
+    margin: 0;
+    background-color: #fff;
+    border: 1px dotted gray;
+    min-height: 0;
+    position: relative
+  }
+
+  ul.fancytree-container ul {
+    padding: 0 0 0 16px;
+    margin: 0
+  }
+
+  ul.fancytree-container ul>li:before {
+    content: none
+  }
+
+  ul.fancytree-container li {
+    list-style-image: none;
+    list-style-position: outside;
+    list-style-type: none;
+    -moz-background-clip: border;
+    -moz-background-inline-policy: continuous;
+    -moz-background-origin: padding;
+    background-attachment: scroll;
+    background-color: transparent;
+    background-position: 0 0;
+    background-repeat: repeat-y;
+    background-image: none;
+    margin: 0
+  }
+
+  ul.fancytree-container li.fancytree-lastsib {
+    background-image: none
+  }
+
+  .ui-fancytree-disabled ul.fancytree-container {
+    opacity: .5;
+    background-color: silver
+  }
+
+  ul.fancytree-connectors.fancytree-container li {
+    background-image: url(../../assets/images/vline.gif);
+    background-position: 0 0
+  }
+
+  ul.fancytree-container li.fancytree-lastsib,
+  ul.fancytree-no-connector>li {
+    background-image: none
+  }
+
+  li.fancytree-animating {
+    position: relative
+  }
+
+  #fancytree-drop-marker,
+  span.fancytree-checkbox,
+  span.fancytree-drag-helper-img,
+  span.fancytree-empty,
+  span.fancytree-expander,
+  span.fancytree-icon,
+  span.fancytree-vline {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    vertical-align: top;
+    background-repeat: no-repeat;
+    background-image: url(../../assets/images/icons.gif);
+    background-position: 0 0
+  }
+
+  span.fancytree-checkbox,
+  span.fancytree-custom-icon,
+  span.fancytree-expander,
+  span.fancytree-icon {
+    margin-top: 0
+  }
+
+  span.fancytree-custom-icon {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    margin-left: 3px;
+    background-position: 0 0
+  }
+
+  img.fancytree-icon {
+    width: 16px;
+    height: 16px;
+    margin-left: 3px;
+    margin-top: 0;
+    vertical-align: top;
+    border-style: none
+  }
+
+  span.fancytree-expander {
+    cursor: pointer
+  }
+
+  .fancytree-exp-n span.fancytree-expander,
+  .fancytree-exp-nl span.fancytree-expander {
+    background-image: none;
+    cursor: default
+  }
+
+  .fancytree-connectors .fancytree-exp-n span.fancytree-expander,
+  .fancytree-connectors .fancytree-exp-nl span.fancytree-expander {
+    background-image: url(../../assets/images/icons.gif);
+    margin-top: 0
+  }
+
+  .fancytree-connectors .fancytree-exp-n span.fancytree-expander,
+  .fancytree-connectors .fancytree-exp-n span.fancytree-expander:hover {
+    background-position: 0 -64px
+  }
+
+  .fancytree-connectors .fancytree-exp-nl span.fancytree-expander,
+  .fancytree-connectors .fancytree-exp-nl span.fancytree-expander:hover {
+    background-position: -16px -64px
+  }
+
+  .fancytree-exp-c span.fancytree-expander {
+    background-position: 0 -80px
+  }
+
+  .fancytree-exp-c span.fancytree-expander:hover {
+    background-position: -16px -80px
+  }
+
+  .fancytree-exp-cl span.fancytree-expander {
+    background-position: 0 -96px
+  }
+
+  .fancytree-exp-cl span.fancytree-expander:hover {
+    background-position: -16px -96px
+  }
+
+  .fancytree-exp-cd span.fancytree-expander {
+    background-position: -64px -80px
+  }
+
+  .fancytree-exp-cd span.fancytree-expander:hover {
+    background-position: -80px -80px
+  }
+
+  .fancytree-exp-cdl span.fancytree-expander {
+    background-position: -64px -96px
+  }
+
+  .fancytree-exp-cdl span.fancytree-expander:hover {
+    background-position: -80px -96px
+  }
+
+  .fancytree-exp-e span.fancytree-expander,
+  .fancytree-exp-ed span.fancytree-expander {
+    background-position: -32px -80px
+  }
+
+  .fancytree-exp-e span.fancytree-expander:hover,
+  .fancytree-exp-ed span.fancytree-expander:hover {
+    background-position: -48px -80px
+  }
+
+  .fancytree-exp-edl span.fancytree-expander,
+  .fancytree-exp-el span.fancytree-expander {
+    background-position: -32px -96px
+  }
+
+  .fancytree-exp-edl span.fancytree-expander:hover,
+  .fancytree-exp-el span.fancytree-expander:hover {
+    background-position: -48px -96px
+  }
+
+  .fancytree-fade-expander span.fancytree-expander {
+    transition: opacity 1.5s;
+    opacity: 0
+  }
+
+  .fancytree-fade-expander .fancytree-treefocus span.fancytree-expander,
+  .fancytree-fade-expander [class*=fancytree-statusnode-] span.fancytree-expander,
+  .fancytree-fade-expander.fancytree-treefocus span.fancytree-expander,
+  .fancytree-fade-expander:hover span.fancytree-expander {
+    transition: opacity .6s;
+    opacity: 1
+  }
+
+  span.fancytree-checkbox {
+    margin-left: 3px;
+    background-position: 0 -32px
+  }
+
+  span.fancytree-checkbox:hover {
+    background-position: -16px -32px
+  }
+
+  span.fancytree-checkbox.fancytree-radio {
+    background-position: 0 -48px
+  }
+
+  span.fancytree-checkbox.fancytree-radio:hover {
+    background-position: -16px -48px
+  }
+
+  .fancytree-partsel span.fancytree-checkbox {
+    background-position: -64px -32px
+  }
+
+  .fancytree-partsel span.fancytree-checkbox:hover {
+    background-position: -80px -32px
+  }
+
+  .fancytree-partsel span.fancytree-checkbox.fancytree-radio {
+    background-position: -64px -48px
+  }
+
+  .fancytree-partsel span.fancytree-checkbox.fancytree-radio:hover {
+    background-position: -80px -48px
+  }
+
+  .fancytree-selected span.fancytree-checkbox {
+    background-position: -32px -32px
+  }
+
+  .fancytree-selected span.fancytree-checkbox:hover {
+    background-position: -48px -32px
+  }
+
+  .fancytree-selected span.fancytree-checkbox.fancytree-radio {
+    background-position: -32px -48px
+  }
+
+  .fancytree-selected span.fancytree-checkbox.fancytree-radio:hover {
+    background-position: -48px -48px
+  }
+
+  .fancytree-unselectable span.fancytree-checkbox {
+    opacity: .4
+  }
+
+  .fancytree-unselectable span.fancytree-checkbox:hover {
+    background-position: 0 -32px
+  }
+
+  .fancytree-unselectable span.fancytree-checkbox.fancytree-radio:hover {
+    background-position: 0 -48px
+  }
+
+  .fancytree-unselectable.fancytree-partsel span.fancytree-checkbox:hover {
+    background-position: -64px -32px
+  }
+
+  .fancytree-unselectable.fancytree-selected span.fancytree-checkbox:hover {
+    background-position: -32px -32px
+  }
+
+  .fancytree-unselectable.fancytree-selected span.fancytree-checkbox.fancytree-radio:hover {
+    background-position: -32px -48px
+  }
+
+  .fancytree-container.fancytree-checkbox-auto-hide span.fancytree-checkbox {
+    visibility: hidden
+  }
+
+  .fancytree-container.fancytree-checkbox-auto-hide .fancytree-node.fancytree-selected span.fancytree-checkbox,
+  .fancytree-container.fancytree-checkbox-auto-hide .fancytree-node:hover span.fancytree-checkbox,
+  .fancytree-container.fancytree-checkbox-auto-hide tr.fancytree-selected td span.fancytree-checkbox,
+  .fancytree-container.fancytree-checkbox-auto-hide tr:hover td span.fancytree-checkbox {
+    visibility: unset
+  }
+
+  .fancytree-container.fancytree-checkbox-auto-hide.fancytree-treefocus .fancytree-node.fancytree-active span.fancytree-checkbox,
+  .fancytree-container.fancytree-checkbox-auto-hide.fancytree-treefocus tr.fancytree-active td span.fancytree-checkbox {
+    visibility: unset
+  }
+
+  span.fancytree-icon {
+    margin-left: 3px;
+    background-position: 0 0
+  }
+
+  .fancytree-ico-c span.fancytree-icon:hover {
+    background-position: -16px 0
+  }
+
+  .fancytree-has-children.fancytree-ico-c span.fancytree-icon {
+    background-position: -32px 0
+  }
+
+  .fancytree-has-children.fancytree-ico-c span.fancytree-icon:hover {
+    background-position: -48px 0
+  }
+
+  .fancytree-ico-e span.fancytree-icon {
+    background-position: -64px 0
+  }
+
+  .fancytree-ico-e span.fancytree-icon:hover {
+    background-position: -80px 0
+  }
+
+  .fancytree-ico-cf span.fancytree-icon {
+    background-position: 0 -16px
+  }
+
+  .fancytree-ico-cf span.fancytree-icon:hover {
+    background-position: -16px -16px
+  }
+
+  .fancytree-has-children.fancytree-ico-cf span.fancytree-icon {
+    background-position: -32px -16px
+  }
+
+  .fancytree-has-children.fancytree-ico-cf span.fancytree-icon:hover {
+    background-position: -48px -16px
+  }
+
+  .fancytree-ico-ef span.fancytree-icon {
+    background-position: -64px -16px
+  }
+
+  .fancytree-ico-ef span.fancytree-icon:hover {
+    background-position: -80px -16px
+  }
+
+  .fancytree-loading span.fancytree-expander,
+  .fancytree-loading span.fancytree-expander:hover,
+  .fancytree-statusnode-loading span.fancytree-icon,
+  .fancytree-statusnode-loading span.fancytree-icon:hover,
+  span.fancytree-icon.fancytree-icon-loading {
+    background-image: url(../../assets/images/loading.gif);
+    background-position: 0 0
+  }
+
+  .fancytree-statusnode-error span.fancytree-icon,
+  .fancytree-statusnode-error span.fancytree-icon:hover {
+    background-position: 0 -112px
+  }
+
+  span.fancytree-node {
+    display: inherit;
+    width: 100%;
+    margin-top: 1px;
+    min-height: 16px
+  }
+
+  span.fancytree-title {
+    color: #000;
+    cursor: pointer;
+    display: inline-block;
+    vertical-align: top;
+    min-height: 16px;
+    padding: 0 3px 0 3px;
+    margin: 0 0 0 3px;
+    border: 1px solid transparent;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    -ms-border-radius: 0;
+    -o-border-radius: 0;
+    border-radius: 0
+  }
+
+  span.fancytree-node.fancytree-error span.fancytree-title {
+    color: red
+  }
+
+  span.fancytree-childcounter {
+    color: #fff;
+    background: #337ab7;
+    border: 1px solid gray;
+    border-radius: 10px;
+    padding: 2px;
+    text-align: center
+  }
+
+  div.fancytree-drag-helper span.fancytree-childcounter,
+  div.fancytree-drag-helper span.fancytree-dnd-modifier {
+    display: inline-block;
+    color: #fff;
+    background: #337ab7;
+    border: 1px solid gray;
+    min-width: 10px;
+    height: 10px;
+    line-height: 1;
+    vertical-align: baseline;
+    border-radius: 10px;
+    padding: 2px;
+    text-align: center;
+    font-size: 9px
+  }
+
+  div.fancytree-drag-helper span.fancytree-childcounter {
+    position: absolute;
+    top: -6px;
+    right: -6px
+  }
+
+  div.fancytree-drag-helper span.fancytree-dnd-modifier {
+    background: #5cb85c;
+    border: none;
+    font-weight: bolder
+  }
+
+  div.fancytree-drag-helper.fancytree-drop-accept span.fancytree-drag-helper-img {
+    background-position: -32px -112px
+  }
+
+  div.fancytree-drag-helper.fancytree-drop-reject span.fancytree-drag-helper-img {
+    background-position: -16px -112px
+  }
+
+  #fancytree-drop-marker {
+    width: 32px;
+    position: absolute;
+    background-position: 0 -128px;
+    margin: 0
+  }
+
+  #fancytree-drop-marker.fancytree-drop-after,
+  #fancytree-drop-marker.fancytree-drop-before {
+    width: 64px;
+    background-position: 0 -144px
+  }
+
+  #fancytree-drop-marker.fancytree-drop-copy {
+    background-position: -64px -128px
+  }
+
+  #fancytree-drop-marker.fancytree-drop-move {
+    background-position: -32px -128px
+  }
+
+  span.fancytree-drag-source.fancytree-drag-remove {
+    opacity: .15
+  }
+
+  .fancytree-container.fancytree-rtl span.fancytree-connector,
+  .fancytree-container.fancytree-rtl span.fancytree-drag-helper-img,
+  .fancytree-container.fancytree-rtl span.fancytree-expander,
+  .fancytree-container.fancytree-rtl span.fancytree-icon {
+    background-image: url(../../assets/images/icons-rtl.gif)
+  }
+
+  .fancytree-container.fancytree-rtl .fancytree-exp-n span.fancytree-expander,
+  .fancytree-container.fancytree-rtl .fancytree-exp-nl span.fancytree-expander {
+    background-image: none
+  }
+
+  .fancytree-container.fancytree-rtl.fancytree-connectors .fancytree-exp-n span.fancytree-expander,
+  .fancytree-container.fancytree-rtl.fancytree-connectors .fancytree-exp-nl span.fancytree-expander {
+    background-image: url(../../assets/images/icons-rtl.gif)
+  }
+
+  ul.fancytree-container.fancytree-rtl ul {
+    padding: 0 16px 0 0
+  }
+
+  ul.fancytree-container.fancytree-rtl.fancytree-connectors li {
+    background-position: right 0;
+    background-image: url(../../assets/images/vline-rtl.gif)
+  }
+
+  ul.fancytree-container.fancytree-rtl li.fancytree-lastsib,
+  ul.fancytree-container.fancytree-rtl.fancytree-no-connector>li {
+    background-image: none
+  }
+
+  #fancytree-drop-marker.fancytree-rtl {
+    background-image: url(../../assets/images/icons-rtl.gif)
+  }
+
+  table.fancytree-ext-table {
+    font-family: inherit;
+    font-size: 10pt;
+    border-collapse: collapse
+  }
+
+  table.fancytree-ext-table span.fancytree-node {
+    display: inline-block;
+    box-sizing: border-box
+  }
+
+  table.fancytree-ext-table td.fancytree-status-merged {
+    text-align: center;
+    font-style: italic;
+    color: silver
+  }
+
+  table.fancytree-ext-table tr.fancytree-statusnode-error td.fancytree-status-merged {
+    color: red
+  }
+
+  table.fancytree-ext-table.fancytree-ext-ariagrid.fancytree-cell-mode>tbody>tr.fancytree-active>td {
+    background-color: #eee
+  }
+
+  table.fancytree-ext-table.fancytree-ext-ariagrid.fancytree-cell-mode>tbody>tr>td.fancytree-active-cell {
+    background-color: #cbe8f6
+  }
+
+  table.fancytree-ext-table.fancytree-ext-ariagrid.fancytree-cell-mode.fancytree-cell-nav-mode>tbody>tr>td.fancytree-active-cell {
+    background-color: #3875d7
+  }
+
+  table.fancytree-ext-columnview tbody tr td {
+    position: relative;
+    border: 1px solid gray;
+    vertical-align: top;
+    overflow: auto
+  }
+
+  table.fancytree-ext-columnview tbody tr td>ul {
+    padding: 0
+  }
+
+  table.fancytree-ext-columnview tbody tr td>ul li {
+    list-style-image: none;
+    list-style-position: outside;
+    list-style-type: none;
+    -moz-background-clip: border;
+    -moz-background-inline-policy: continuous;
+    -moz-background-origin: padding;
+    background-attachment: scroll;
+    background-color: transparent;
+    background-position: 0 0;
+    background-repeat: repeat-y;
+    background-image: none;
+    margin: 0
+  }
+
+  table.fancytree-ext-columnview span.fancytree-node {
+    position: relative;
+    display: inline-block
+  }
+
+  table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
+    background-color: #e0e0e0
+  }
+
+  table.fancytree-ext-columnview span.fancytree-node.fancytree-active {
+    background-color: #cbe8f6
+  }
+
+  table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right {
+    position: absolute;
+    right: 3px;
+    background-position: 0 -80px
+  }
+
+  table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right:hover {
+    background-position: -16px -80px
+  }
+
+  .fancytree-ext-filter-dimm span.fancytree-node span.fancytree-title {
+    color: silver;
+    font-weight: lighter
+  }
+
+  .fancytree-ext-filter-dimm span.fancytree-node.fancytree-submatch span.fancytree-title,
+  .fancytree-ext-filter-dimm tr.fancytree-submatch span.fancytree-title {
+    color: #000;
+    font-weight: 400
+  }
+
+  .fancytree-ext-filter-dimm span.fancytree-node.fancytree-match span.fancytree-title,
+  .fancytree-ext-filter-dimm tr.fancytree-match span.fancytree-title {
+    color: #000;
+    font-weight: 700
+  }
+
+  .fancytree-ext-filter-hide span.fancytree-node.fancytree-hide,
+  .fancytree-ext-filter-hide tr.fancytree-hide {
+    display: none
+  }
+
+  .fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title,
+  .fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title {
+    color: silver;
+    font-weight: lighter
+  }
+
+  .fancytree-ext-filter-hide span.fancytree-node.fancytree-match span.fancytree-title,
+  .fancytree-ext-filter-hide tr.fancytree-match span.fancytree-title {
+    color: #000;
+    font-weight: 400
+  }
+
+  .fancytree-ext-filter-hide-expanders span.fancytree-node.fancytree-match span.fancytree-expander,
+  .fancytree-ext-filter-hide-expanders tr.fancytree-match span.fancytree-expander {
+    visibility: hidden
+  }
+
+  .fancytree-ext-filter-hide-expanders span.fancytree-node.fancytree-submatch span.fancytree-expander,
+  .fancytree-ext-filter-hide-expanders tr.fancytree-submatch span.fancytree-expander {
+    visibility: visible
+  }
+
+  .fancytree-ext-childcounter span.fancytree-custom-icon,
+  .fancytree-ext-childcounter span.fancytree-icon,
+  .fancytree-ext-filter span.fancytree-custom-icon,
+  .fancytree-ext-filter span.fancytree-icon {
+    position: relative
+  }
+
+  .fancytree-ext-childcounter span.fancytree-childcounter,
+  .fancytree-ext-filter span.fancytree-childcounter {
+    color: #fff;
+    background: #777;
+    border: 1px solid gray;
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    min-width: 10px;
+    height: 10px;
+    line-height: 1;
+    vertical-align: baseline;
+    border-radius: 10px;
+    padding: 2px;
+    text-align: center;
+    font-size: 9px
+  }
+
+  ul.fancytree-ext-wide {
+    position: relative;
+    min-width: 100%;
+    z-index: 2;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box
+  }
+
+  ul.fancytree-ext-wide span.fancytree-node>span {
+    position: relative;
+    z-index: 2
+  }
+
+  ul.fancytree-ext-wide span.fancytree-node span.fancytree-title {
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    min-width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box
+  }
+
+  .fancytree-ext-fixed-wrapper .fancytree-ext-fixed-hidden {
+    display: none
+  }
+
+  .fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-scroll-border-bottom {
+    border-bottom: 3px solid rgba(0, 0, 0, .75)
+  }
+
+  .fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-scroll-border-right {
+    border-right: 3px solid rgba(0, 0, 0, .75)
+  }
+
+  .fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-wrapper-tl {
+    position: absolute;
+    overflow: hidden;
+    z-index: 3;
+    top: 0;
+    left: 0
+  }
+
+  .fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-wrapper-tr {
+    position: absolute;
+    overflow: hidden;
+    z-index: 2;
+    top: 0
+  }
+
+  .fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-wrapper-bl {
+    position: absolute;
+    overflow: hidden;
+    z-index: 2;
+    left: 0
+  }
+
+  .fancytree-ext-fixed-wrapper div.fancytree-ext-fixed-wrapper-br {
+    position: absolute;
+    overflow: scroll;
+    z-index: 1
+  }
+
+  span.fancytree-title {
+    border: 1px solid transparent;
+    border-radius: 0
+  }
+
+  span.fancytree-focused span.fancytree-title {
+    outline: 1px dotted #000
+  }
+
+  span.fancytree-active span.fancytree-title,
+  span.fancytree-selected span.fancytree-title {
+    background-color: #d4d4d4
+  }
+
+  span.fancytree-selected span.fancytree-title {
+    font-style: italic
+  }
+
+  .fancytree-treefocus span.fancytree-active span.fancytree-title,
+  .fancytree-treefocus span.fancytree-selected span.fancytree-title {
+    color: #fff;
+    background-color: #3875d7
+  }
+
+  table.fancytree-ext-table {
+    border-collapse: collapse
+  }
+
+  table.fancytree-ext-table tbody tr.fancytree-focused {
+    background-color: #99defd
+  }
+
+  table.fancytree-ext-table tbody tr.fancytree-active {
+    background-color: #4169e1
+  }
+
+  table.fancytree-ext-table tbody tr.fancytree-selected {
+    background-color: #99defd
+  }
+
+  table.fancytree-ext-columnview tbody tr td {
+    border: 1px solid gray
+  }
+
+  table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
+    background-color: #ccc
+  }
+
+  table.fancytree-ext-columnview span.fancytree-node.fancytree-active {
+    background-color: #4169e1
+  }
+
   .optionsArrayMap,
   .optionsLast,
   .optionsArray {
@@ -16,37 +802,46 @@ lib-questionset-editor {
         }
       }
     }
+
     sb-dynamic-checkbox {
       margin-top: 3.5rem;
     }
+
     .sb-dropdown-select {
       padding: 16px 8px !important;
     }
+
     .list-border {
       margin-top: 2px !important;
     }
   }
+
   body {
     background: #fff !important;
   }
+
   .add-to-library {
     position: relative;
     z-index: 998 !important;
     background: var(--color-brand-tint);
+
     .sb-required {
       color: #ff4558;
       padding-left: 2px;
       position: relative;
       top: -5px;
     }
+
     .back-btn {
       &:hover {
         background: none !important;
       }
     }
+
     .back-btn {
       min-width: auto;
     }
+
     .dynamic-form {
       .multi-select-section-app {
         label {
@@ -55,8 +850,9 @@ lib-questionset-editor {
         }
       }
     }
+
     .dynamic-form {
-      
+
       label {
         font-size: 12px !important;
         margin-bottom: 0.5rem !important;
@@ -81,15 +877,19 @@ lib-questionset-editor {
         font-size: 0.785rem !important;
         font-weight: 500;
         transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
         &:focus {
           border-color: var(--color-brand-outline) !important;
           box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.12) !important;
         }
+
         // text-transform: capitalize;
       }
+
       select {
         padding: 12px 8px !important;
       }
+
       .list-border {
         margin-top: 2px !important;
         min-height: 43px !important;
@@ -103,6 +903,7 @@ lib-questionset-editor {
             font-weight: 500 !important;
             color: #333 !important;
           }
+
           ul {
             @extend label;
             color: #333;
@@ -127,41 +928,50 @@ lib-questionset-editor {
           z-index: 99999 !important;
         }
       }
+
       .sb-keywordbox {
         border: 1px solid var(--color-border) !important;
         border-radius: 0.5rem;
         font-size: 0.785rem !important;
         font-weight: 500;
         padding: 0 !important;
+
         .ng2-tag-input {
           padding: 0;
+
           tag {
             margin-left: 0.5rem;
           }
         }
+
         .ng2-tags-container {
           margin-top: 0.2rem;
         }
+
         .tag-wrapper,
         delete-icon svg {
           height: 24px;
           line-height: 24px;
         }
       }
+
       .topic-picker-selector {
         @extend .sb-textbox;
       }
+
       .sb-dropdown {
         label {
           padding: 0;
         }
       }
+
       .textbox {
         .sb-textarea-container {
           .sb-textarea {
             height: 10rem !important;
             padding-top: 0.5rem !important;
           }
+
           label {
             padding: 0;
           }
@@ -173,6 +983,7 @@ lib-questionset-editor {
           height: 2.9rem;
           padding-top: 0.5rem !important;
         }
+
         label {
           padding: 0;
         }
@@ -182,19 +993,23 @@ lib-questionset-editor {
         padding: 0;
         margin-top: 0;
       }
+
       sb-icon-dropdown {
         top: 10px !important;
         right: 6px !important;
       }
     }
+
     .sb-textarea-container,
     .sb-dropdown {
       margin: 1rem 0 !important;
     }
+
     .sb-container {
       width: 95% !important;
     }
   }
+
   .sb-checkbox-tnc {
     .sb-required {
       position: absolute;
@@ -206,12 +1021,15 @@ lib-questionset-editor {
   .h-100vh {
     height: 100vh;
   }
-  .ui.column.grid > [class*='eight wide'].column {
+
+  .ui.column.grid>[class*='eight wide'].column {
     width: 73% !important;
   }
+
   .footer-fix {
     padding-bottom: 1rem !important;
   }
+
   .bg-white,
   .ui.twelve.grid {
     background: #fff !important;
@@ -222,6 +1040,7 @@ lib-questionset-editor {
       transform: rotate(360deg);
     }
   }
+
   .sb-loading-spinner {
     width: 1rem;
     height: 1rem;
@@ -235,6 +1054,7 @@ lib-questionset-editor {
     -webkit-animation: spinner-border 0.75s linear infinite;
     animation: spinner-border 0.75s linear infinite;
   }
+
   .sb-btn-loading:before {
     position: absolute;
     content: '';
@@ -246,6 +1066,7 @@ lib-questionset-editor {
     border-radius: 500rem;
     border: 0.2em solid rgba(0, 0, 0, 0.15);
   }
+
   .sb-btn-loading:after {
     position: absolute;
     content: '';
@@ -265,6 +1086,7 @@ lib-questionset-editor {
     -webkit-box-shadow: 0 0 0 1px transparent;
     box-shadow: 0 0 0 1px transparent;
   }
+
   .sb-btn-outline-disabled {
     background-color: #ffffff;
     border: 1px solid #cccccc;
@@ -277,24 +1099,25 @@ lib-questionset-editor {
   .chat_bot {
     display: none !important;
   }
+
   .sb-textbox::-webkit-input-placeholder {
     color: var(--color-border) !important;
     font-weight: 600 !important;
   }
+
   .treepicker-parent {
     margin: 0.6rem 0 !important;
   }
+
   .ck-content ul {
     list-style-type: disc !important;
+
     li {
       margin-bottom: 0px !important;
     }
   }
-  sb-dynamic-richtext
-  .ck-rounded-corners
-  .ck.ck-editor__top
-  .ck-sticky-panel
-  .ck-toolbar {
+
+  sb-dynamic-richtext .ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar {
     border-left: 1px solid var(--color-border) !important;
     border-right: 1px solid var(--color-border) !important;
     border-top: 1px solid var(--color-border) !important;
@@ -305,17 +1128,14 @@ lib-questionset-editor {
     border-bottom: 0 !important;
     background-color: var(--color-brand-tint) !important;
   }
-  sb-dynamic-richtext
-  .ck-rounded-corners
-  .ck.ck-editor__main
-  > .ck-editor__editable,
-  sb-dynamic-richtext
-  .ck.ck-editor__main
-  > .ck-editor__editable.ck-rounded-corners {
+
+  sb-dynamic-richtext .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable,
+  sb-dynamic-richtext .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners {
     border: 1px solid var(--color-border) !important;
     border-color: var(--color-border) !important;
     border-bottom-left-radius: 0.5rem !important;
     border-bottom-right-radius: 0.5rem !important;
+
     &:focus {
       border-color: var(--color-brand-outline) !important;
       box-shadow: 0 0 0 3px rgba(var(--rc-rgba-primary), 0.12) !important;
@@ -361,81 +1181,114 @@ lib-questionset-editor {
   }
 
   // Fancy tree css
-  #fancytree-drop-marker.fa-long-arrow-right:before{
+  #fancytree-drop-marker.fa-long-arrow-right:before {
     content: " " !important;
   }
+
   .sb-collectionTree-fancyTreelist {
-    ul> li> span:first-child{
+    ul>li>span:first-child {
       padding: 15px 33px;
     }
-    .fancytree-exp-n span.fancytree-expander,.fancytree-exp-nl span.fancytree-expander{
+
+    .fancytree-exp-n span.fancytree-expander,
+    .fancytree-exp-nl span.fancytree-expander {
       background: none !important;
     }
-    .ui-fancytree:before, .ui-fancytree ul:before{
-      content: none  !important;
+
+    .ui-fancytree:before,
+    .ui-fancytree ul:before {
+      content: none !important;
     }
-    .ui-fancytree li:before, .ui-fancytree ul li:before{
-      content: none  !important;
+
+    .ui-fancytree li:before,
+    .ui-fancytree ul li:before {
+      content: none !important;
     }
+
     .ui-fancytree li .fancytree-custom-icon::before {
-      color: var(--primary-color)!important;
+      color: var(--primary-color) !important;
       margin-left: 5px;
     }
+
     .ui-fancytree .fancytree-folder .fancytree-title {
-      color: var(--primary-color)!important;
-      font-size: .9286rem!important;
-      font-weight: 700!important;
+      color: var(--primary-color) !important;
+      font-size: .9286rem !important;
+      font-weight: 700 !important;
       padding-left: 5px;
-      width: inherit!important;
+      width: inherit !important;
     }
-    .ui-fancytree .fa-caret-right, .ui-fancytree .fa-caret-down, .ui-fancytree ul .fa-caret-right, .ui-fancytree ul .fa-caret-down{
+
+    .ui-fancytree .fa-caret-right,
+    .ui-fancytree .fa-caret-down,
+    .ui-fancytree ul .fa-caret-right,
+    .ui-fancytree ul .fa-caret-down {
       display: block !important;
     }
 
-    ul.fancytree-container{
+    ul.fancytree-container {
       font-size: inherit !important;
       font-family: inherit !important;
       border: none !important;
     }
-    ul.fancytree-connectors.fancytree-container li{
+
+    ul.fancytree-connectors.fancytree-container li {
       background-image: none !important;
     }
-    span.fancytree-node{
+
+    span.fancytree-node {
       width: inherit !important;
     }
-    span.fancytree-active span.fancytree-title, span.fancytree-selected span.fancytree-title{
+
+    span.fancytree-active span.fancytree-title,
+    span.fancytree-selected span.fancytree-title {
       background: none !important;
     }
-    .fancytree-treefocus span.fancytree-active span.fancytree-title, .fancytree-treefocus span.fancytree-selected span.fancytree-title{
+
+    .fancytree-treefocus span.fancytree-active span.fancytree-title,
+    .fancytree-treefocus span.fancytree-selected span.fancytree-title {
       background: none !important;
     }
-    .fancytree-exp-edl span.fancytree-expander, .fancytree-exp-el span.fancytree-expander{
+
+    .fancytree-exp-edl span.fancytree-expander,
+    .fancytree-exp-el span.fancytree-expander {
       background-position: -34px -94px;
     }
-    span.fancytree-focused span.fancytree-title{
+
+    span.fancytree-focused span.fancytree-title {
       outline: 0 !important;
     }
-    .ui-fancytree{
-      margin:0 !important;
+
+    .ui-fancytree {
+      margin: 0 !important;
     }
-    &.ui-fancytree, .ui-fancytree ul{
+
+    &.ui-fancytree,
+    .ui-fancytree ul {
       margin: 0 0 0 0.625rem !important;
     }
-    .fancytree-exp-e span.fancytree-expander, .fancytree-exp-ed span.fancytree-expander{
+
+    .fancytree-exp-e span.fancytree-expander,
+    .fancytree-exp-ed span.fancytree-expander {
       background-position: -32px -68px !important;
     }
-    .fancytree-exp-edl span.fancytree-expander, .fancytree-exp-el span.fancytree-expander{
+
+    .fancytree-exp-edl span.fancytree-expander,
+    .fancytree-exp-el span.fancytree-expander {
       background-position: -34px -94px !important;
     }
-    .fancytree-treefocus span.fancytree-active span.fancytree-title,.fancytree-treefocus span.fancytree-selected span.fancytree-title{
-      color:inherit;
+
+    .fancytree-treefocus span.fancytree-active span.fancytree-title,
+    .fancytree-treefocus span.fancytree-selected span.fancytree-title {
+      color: inherit;
     }
   }
+
   .sb-loader {
     position: fixed;
     top: 0%;
     left: 23%;
     transform: translate(-50%, -50%);
+
     &:after {
       content: '';
       width: 32px;
@@ -449,6 +1302,7 @@ lib-questionset-editor {
       left: 50%;
       transform: translate(-50%, -50%);
     }
+
     &.dimmer {
       width: 100%;
       height: 100%;
@@ -456,24 +1310,29 @@ lib-questionset-editor {
       z-index: 9999;
     }
   }
+
   @keyframes loader {
     0% {
       transform: rotate(0deg);
     }
+
     100% {
       transform: rotate(360deg);
     }
   }
+
   .sb-success-loader {
     position: absolute !important;
     top: 46% !important;
     left: -12% !important;
     transform: translate(-46%, -50%) !important;
+
     &:after {
       width: 1.2rem !important;
       height: 1.2rem !important;
     }
   }
+
   .pos-relative {
     position: relative;
   }
@@ -482,17 +1341,21 @@ lib-questionset-editor {
     list-style-type: disc;
     padding: 0;
     font-size: 0.785rem;
+
     li {
       margin: 0 !important;
       line-height: 1.4;
     }
   }
+
   .sb-bg-color-success-0 {
     background: #e1ffdf;
   }
+
   .flex-ai-center {
     align-self: center !important;
   }
+
   .sb-br-primary {
     border: 1px dashed #aedbfd !important;
   }
@@ -500,35 +1363,44 @@ lib-questionset-editor {
   .sb-min-h-250 {
     min-height: 250px;
   }
+
   .z-index-9 {
     .menu {
       z-index: 99999 !important;
     }
   }
+
   .p-50 {
     padding: 10px 0 10px 50px;
   }
+
   .h-1 {
     height: 1.1em !important;
   }
+
   .mn-15 {
     margin: -15px !important;
   }
+
   .upload-input-button {
     position: relative;
   }
+
   .upload-input-button input {
     position: absolute;
     opacity: 0;
     left: 0;
   }
+
   .bg-none {
     background: none;
   }
+
   .label-disable {
     opacity: 0.3 !important;
     font-weight: 500 !important;
   }
+
   .sb-folder-menu {
     position: absolute;
     /*top: 131px;*/
@@ -538,45 +1410,59 @@ lib-questionset-editor {
     width: 24%;
     margin-top: 5px;
   }
-  .sb-disable-icon{color:#ccc !important;}
-  .sb-w-240px{width:240px}
-  .publish-checklist{
+
+  .sb-disable-icon {
+    color: #ccc !important;
+  }
+
+  .sb-w-240px {
+    width: 240px
+  }
+
+  .publish-checklist {
     label {
       font-size: 13px !important;
       padding: 0 1.5rem !important;
     }
   }
-  .sb-keywords{
-    input{
+
+  .sb-keywords {
+    input {
       width: 100%;
     }
-    input::placeholder{
+
+    input::placeholder {
       display: block !important;
       width: 100%;
     }
-    .ng2-tags-container{
+
+    .ng2-tags-container {
       width: inherit !important;
       display: block !important;
-      tag{
+
+      tag {
         display: inline-flex !important;
       }
     }
   }
-  sb-dynamic-timer{
-    .sb-timer-input{
+
+  sb-dynamic-timer {
+    .sb-timer-input {
       width: 10rem;
-      font-size: .785rem!important;
-      border: 1px solid var(--color-border)!important;
+      font-size: .785rem !important;
+      border: 1px solid var(--color-border) !important;
       border-radius: 0.5rem;
       padding: 12px 10px;
       margin-right: 5px;
       height: 44px;
-      &:focus-visible{
-        border: 1px solid rgba(34,36,38,.15)!important;
+
+      &:focus-visible {
+        border: 1px solid rgba(34, 36, 38, .15) !important;
       }
     }
-    .sb-btn-normal{
+
+    .sb-btn-normal {
       height: 42px !important;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/projects/questionset-editor-library/src/lib/components/header/header.component.scss b/projects/questionset-editor-library/src/lib/components/header/header.component.scss
index 09ad9c3cd..d5400a589 100755
--- a/projects/questionset-editor-library/src/lib/components/header/header.component.scss
+++ b/projects/questionset-editor-library/src/lib/components/header/header.component.scss
@@ -1,53 +1,63 @@
-.sb-disabled{
-    background: var(--spark-card-alt);
-    border: .0625rem solid var(--spark-card-alt);
-    opacity: .45;
-    pointer-events: none;
-}
-  .hover-none {
-    &:hover {
-      background: none !important;
-    }
-  }
-  .bx-none .ui.modal{
-    box-shadow:none !important;
-  }
-  
-  .overflow-modal {
-    .ui.modal{
-      box-shadow: none;
-    }
-    .sb-tabset-segment{
-      border: none;
-    }
-  }
-  .sb-bg-header-blue {
-    background: var(--color-brand-tint);
+.sb-disabled {
+  background: var(--spark-card-alt);
+  border: .0625rem solid var(--spark-card-alt);
+  opacity: .45;
+  pointer-events: none;
+}
+
+.hover-none {
+  &:hover {
+    background: none !important;
   }
-    
-  .sb-bg-lightBlue {
-    background: var(--color-brand-tint) !important;
+}
+
+.bx-none .ui.modal {
+  box-shadow: none !important;
+}
+
+.overflow-modal {
+  .ui.modal {
+    box-shadow: none;
   }
-  
-  .bb-1 {
-    border-bottom: 1px solid var(--spark-border-card);
+
+  .sb-tabset-segment {
+    border: none;
   }
+}
 
-  .flex-as-baseline {
-    align-self: baseline !important;
- }
+.sb-bg-header-blue {
+  background: var(--color-brand-tint);
+}
+
+.sb-bg-lightBlue {
+  background: var(--color-brand-tint) !important;
+}
 
- div[data-title]:before{
+.bb-1 {
+  border-bottom: 1px solid var(--spark-border-card);
+}
+
+.flex-as-baseline {
+  align-self: baseline !important;
+}
+
+div[data-title]:before {
   position: absolute;
   right: 30%;
   top: 85%;
   height: 25px;
   width: max-content;
 }
-.sb-modal-fullscreen .modals.dimmer .ui.scrolling.modal{
+
+.sb-modal-fullscreen .modals.dimmer .ui.scrolling.modal {
   margin: 0 auto !important;
 }
+
 .sb-modal-header {
   display: flex;
   justify-content: space-between;
+}
+
+.modals.dimmer .ui.scrolling.modal {
+  position: fixed !important;
 }
\ No newline at end of file
diff --git a/src/assets/styles/_spark-aliases.scss b/src/assets/styles/_spark-aliases.scss
index 65628435c..f6373f960 100644
--- a/src/assets/styles/_spark-aliases.scss
+++ b/src/assets/styles/_spark-aliases.scss
@@ -5,7 +5,8 @@
 // Import this BEFORE _variables.scss so variables can reference these tokens.
 // =============================================================================
 
-:root {
+:root,
+lib-editor {
   /* Brand Colors */
   --spark-brick:         #AC5139;
   --spark-brick-dark:    #A85236;

From b754f316939f9a7dfa4b3c8d2a34280f2c93d417 Mon Sep 17 00:00:00 2001
From: JeraldJF <jeraldj@sanketika.in>
Date: Thu, 23 Apr 2026 18:08:35 +0530
Subject: [PATCH 08/12] fix: version change

---
 web-component/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-component/package.json b/web-component/package.json
index 95fd8263a..a6d5397d5 100644
--- a/web-component/package.json
+++ b/web-component/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "@jeraldj/sunbird-questionset-editor-web-component",
+    "name": "@project-sunbird/sunbird-questionset-editor-web-component",
     "version": "6.0.3",
     "description": "The web component package for the sunbird questionset editor",
     "main": "assets/quml-editor/sunbird-questionset-editor.js",

From 6e17937f7a1ba7e75acd5c48d28dca2c67f20bb8 Mon Sep 17 00:00:00 2001
From: JeraldJF <jeraldj@sanketika.in>
Date: Thu, 23 Apr 2026 18:17:58 +0530
Subject: [PATCH 09/12] #fix: vuln fixes

---
 package-lock.json | 154 ++++++++++++++++++++--------------------------
 package.json      |   5 +-
 2 files changed, 70 insertions(+), 89 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4f9ec9575..1bef17b69 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,7 +53,7 @@
         "rxjs": "^7.8.1",
         "svg2img": "1.0.0-beta.2",
         "tslib": "^2.7.0",
-        "uuid": "^9.0.0",
+        "uuid": "^14.0.0",
         "zone.js": "~0.15.0"
       },
       "devDependencies": {
@@ -12641,6 +12641,21 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/http-signature": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.4.0.tgz",
+      "integrity": "sha512-G5akfn7eKbpDN+8nPS/cb57YeA1jLTVxjpCj7tmm3QKPdyDy7T+qSC40e9ptydSWvkwjSXw1VbkpyEm39ukeAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "jsprim": "^2.0.2",
+        "sshpk": "^1.18.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/https-proxy-agent": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
@@ -14040,6 +14055,22 @@
       ],
       "license": "MIT"
     },
+    "node_modules/jsprim": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz",
+      "integrity": "sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==",
+      "dev": true,
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.4.0",
+        "verror": "1.10.0"
+      }
+    },
     "node_modules/jszip": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
@@ -18500,6 +18531,37 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/request": {
+      "name": "@cypress/request",
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.10.tgz",
+      "integrity": "sha512-hauBrOdvu08vOsagkZ/Aju5XuiZx6ldsLfByg1htFeldhex+PeMrYauANzFsMJeAA0+dyPLbDoX2OYuvVoLDkQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "aws-sign2": "~0.7.0",
+        "aws4": "^1.8.0",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.6",
+        "extend": "~3.0.2",
+        "forever-agent": "~0.6.1",
+        "form-data": "~4.0.4",
+        "http-signature": "~1.4.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.19",
+        "performance-now": "^2.1.0",
+        "qs": "~6.14.1",
+        "safe-buffer": "^5.1.2",
+        "tough-cookie": "^5.0.0",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^8.3.2"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -19650,16 +19712,6 @@
         "websocket-driver": "^0.7.4"
       }
     },
-    "node_modules/sockjs/node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
     "node_modules/socks": {
       "version": "2.8.7",
       "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.7.tgz",
@@ -21424,16 +21476,16 @@
       }
     },
     "node_modules/uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-14.0.0.tgz",
+      "integrity": "sha512-Qo+uWgilfSmAhXCMav1uYFynlQO7fMFiMVZsQqZRMIXp0O7rR7qjkj+cPvBHLgBqi960QCoo/PH2/6ZtVqKvrg==",
       "funding": [
         "https://github.com/sponsors/broofa",
         "https://github.com/sponsors/ctavan"
       ],
       "license": "MIT",
       "bin": {
-        "uuid": "dist/bin/uuid"
+        "uuid": "dist-node/bin/uuid"
       }
     },
     "node_modules/v8-compile-cache-lib": {
@@ -21832,21 +21884,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/webdriver-manager/node_modules/http-signature": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.4.0.tgz",
-      "integrity": "sha512-G5akfn7eKbpDN+8nPS/cb57YeA1jLTVxjpCj7tmm3QKPdyDy7T+qSC40e9ptydSWvkwjSXw1VbkpyEm39ukeAg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "assert-plus": "^1.0.0",
-        "jsprim": "^2.0.2",
-        "sshpk": "^1.18.0"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
     "node_modules/webdriver-manager/node_modules/ini": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
@@ -21854,53 +21891,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/webdriver-manager/node_modules/jsprim": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz",
-      "integrity": "sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==",
-      "dev": true,
-      "engines": [
-        "node >=0.6.0"
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "assert-plus": "1.0.0",
-        "extsprintf": "1.3.0",
-        "json-schema": "0.4.0",
-        "verror": "1.10.0"
-      }
-    },
-    "node_modules/webdriver-manager/node_modules/request": {
-      "name": "@cypress/request",
-      "version": "3.0.10",
-      "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.10.tgz",
-      "integrity": "sha512-hauBrOdvu08vOsagkZ/Aju5XuiZx6ldsLfByg1htFeldhex+PeMrYauANzFsMJeAA0+dyPLbDoX2OYuvVoLDkQ==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "aws-sign2": "~0.7.0",
-        "aws4": "^1.8.0",
-        "caseless": "~0.12.0",
-        "combined-stream": "~1.0.6",
-        "extend": "~3.0.2",
-        "forever-agent": "~0.6.1",
-        "form-data": "~4.0.4",
-        "http-signature": "~1.4.0",
-        "is-typedarray": "~1.0.0",
-        "isstream": "~0.1.2",
-        "json-stringify-safe": "~5.0.1",
-        "mime-types": "~2.1.19",
-        "performance-now": "^2.1.0",
-        "qs": "~6.14.1",
-        "safe-buffer": "^5.1.2",
-        "tough-cookie": "^5.0.0",
-        "tunnel-agent": "^0.6.0",
-        "uuid": "^8.3.2"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/webdriver-manager/node_modules/rimraf": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
@@ -21948,16 +21938,6 @@
         "node": ">=0.8.0"
       }
     },
-    "node_modules/webdriver-manager/node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
diff --git a/package.json b/package.json
index 38e66ea54..7584e111f 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,8 @@
     "phin": "^3.7.1",
     "tmp": "^0.2.3",
     "xml2js": "^0.6.2",
-    "request": "npm:@cypress/request@^3.0.0"
+    "request": "npm:@cypress/request@^3.0.0",
+    "uuid": "^14.0.0"
   },
   "dependencies": {
     "@angular-devkit/core": "^19.2.18",
@@ -90,7 +91,7 @@
     "rxjs": "^7.8.1",
     "svg2img": "1.0.0-beta.2",
     "tslib": "^2.7.0",
-    "uuid": "^9.0.0",
+    "uuid": "^14.0.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {

From c53f58a5f898bf1571012cdae5fe5ac052310694 Mon Sep 17 00:00:00 2001
From: JeraldJF <jeraldj@sanketika.in>
Date: Fri, 24 Apr 2026 18:14:39 +0530
Subject: [PATCH 10/12] #fix: use portal variable theme

---
 src/assets/styles/_spark-aliases.scss      |   6 +-
 src/assets/styles/_spark-overrides.scss    | 135 +++++++++++----------
 src/assets/styles/_variables.scss          |  23 ++--
 src/assets/styles/components/_buttons.scss |   4 +-
 src/assets/styles/components/_modal.scss   |   4 +-
 web-component/package.json                 |   4 +-
 6 files changed, 93 insertions(+), 83 deletions(-)

diff --git a/src/assets/styles/_spark-aliases.scss b/src/assets/styles/_spark-aliases.scss
index f6373f960..70f3e91d4 100644
--- a/src/assets/styles/_spark-aliases.scss
+++ b/src/assets/styles/_spark-aliases.scss
@@ -8,8 +8,8 @@
 :root,
 lib-editor {
   /* Brand Colors */
-  --spark-brick:         #AC5139;
-  --spark-brick-dark:    #A85236;
+  --spark-editor-theme:         hsl(var(--sunbird-primary, 12 50% 45%));
+  --spark-editor-theme-dark:    color-mix(in srgb, hsl(var(--sunbird-primary, 12 50% 45%)) 70%, black);
   --spark-ginger:        #CC8545;
   --spark-yellow:        #FFD954;
   --spark-sunflower:     #FFDB73;
@@ -72,7 +72,7 @@ lib-editor {
   // Use these in components instead of raw spark-* or legacy gray-/primary- names
 
   /* Brand / action */
-  --color-brand:           var(--spark-brick);       /* primary action, active borders */
+  --color-brand:           var(--spark-editor-theme);       /* primary action, active borders */
   --color-brand-outline:   var(--primary-300);       /* outline buttons, focus rings */
   --color-brand-divider:   var(--primary-200);       /* brand-tinted dividers / dashed borders */
   --color-brand-tint:      var(--primary-100);       /* warm brand bg — hover zones, active rows (#fde8e0) */
diff --git a/src/assets/styles/_spark-overrides.scss b/src/assets/styles/_spark-overrides.scss
index 8c1c918ba..8854328e7 100644
--- a/src/assets/styles/_spark-overrides.scss
+++ b/src/assets/styles/_spark-overrides.scss
@@ -27,6 +27,15 @@ button {
   font-size: var(--font-size-base); // 14px
 }
 
+lib-editor,
+lib-questionset-editor {
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--spark-font);
+    font-weight: 400;
+    color: var(--spark-charcoal);
+  }
+}
+
 h1, h2, h3, h4, h5, h6 {
   color: var(--spark-charcoal);
   font-weight: 600;
@@ -35,13 +44,13 @@ h1, h2, h3, h4, h5, h6 {
 a,
 a:link,
 a:visited {
-  color: var(--spark-brick); // orange
+  color: var(--spark-editor-theme); // orange
   transition: color 0.15s ease;
 }
 
 a:hover,
 a:focus {
-  color: var(--spark-brick-dark); // darker orange on hover
+  color: var(--spark-editor-theme-dark); // darker orange on hover
   text-decoration: underline;
 }
 
@@ -126,7 +135,7 @@ select {
       &.active,
       &.selected {
         background-color: var(--color-brand-tint) !important;
-        color: var(--spark-brick) !important;
+        color: var(--spark-editor-theme) !important;
         font-weight: 500;
       }
     }
@@ -139,13 +148,13 @@ select {
 
 .ui.checkbox input:checked ~ .box:after,
 .ui.checkbox input:checked ~ label:after {
-  color: var(--spark-brick) !important;
+  color: var(--spark-editor-theme) !important;
 }
 
 .ui.checkbox input:checked ~ .box:before,
 .ui.checkbox input:checked ~ label:before {
-  border-color: var(--spark-brick) !important;
-  background-color: var(--spark-brick) !important;
+  border-color: var(--spark-editor-theme) !important;
+  background-color: var(--spark-editor-theme) !important;
 }
 
 .ui.checkbox input:focus ~ .box:before,
@@ -155,7 +164,7 @@ select {
 }
 
 .ui.radio.checkbox input:checked ~ label:after {
-  background-color: var(--spark-brick) !important;
+  background-color: var(--spark-editor-theme) !important;
 }
 
 // -----------------------------------------------------------------------------
@@ -168,26 +177,26 @@ select {
 
 .ui.menu .active.item,
 .ui.menu .item.active {
-  color: var(--spark-brick) !important;
-  border-color: var(--spark-brick) !important;
+  color: var(--spark-editor-theme) !important;
+  border-color: var(--spark-editor-theme) !important;
   font-weight: 600;
 }
 
 .ui.pointing.menu .active.item:after {
-  background-color: var(--spark-brick) !important;
-  border-color: var(--spark-brick) !important;
+  background-color: var(--spark-editor-theme) !important;
+  border-color: var(--spark-editor-theme) !important;
 }
 
 .ui.secondary.pointing.menu .active.item {
-  border-color: var(--spark-brick) !important;
-  color: var(--spark-brick) !important;
+  border-color: var(--spark-editor-theme) !important;
+  color: var(--spark-editor-theme) !important;
 }
 
 // Tab underline indicator
 .sb-tabs .sb-tab-item.active,
 .sb-tab.active {
-  border-bottom-color: var(--spark-brick) !important;
-  color: var(--spark-brick) !important;
+  border-bottom-color: var(--spark-editor-theme) !important;
+  color: var(--spark-editor-theme) !important;
 }
 
 // -----------------------------------------------------------------------------
@@ -197,15 +206,15 @@ select {
 .fancy-tree .fancytree-node:hover > .fancytree-title,
 .fancytree-node:hover > .fancytree-title {
   background-color: var(--color-brand-tint) !important;
-  color: var(--spark-brick) !important;
+  color: var(--spark-editor-theme) !important;
   border-radius: 0.25rem;
 }
 
 .fancy-tree .fancytree-active > .fancytree-title,
 .fancytree-active > .fancytree-title {
   background-color: var(--color-brand-subtle) !important;
-  color: var(--spark-brick) !important;
-  border-left: 3px solid var(--spark-brick);
+  color: var(--spark-editor-theme) !important;
+  border-left: 3px solid var(--spark-editor-theme);
   border-radius: 0 0.25rem 0.25rem 0;
 }
 
@@ -219,8 +228,8 @@ select {
 .plain-tree .tree-node.active,
 .sb-tree-node.active {
   background-color: var(--color-brand-subtle) !important;
-  border-left: 3px solid var(--spark-brick) !important;
-  color: var(--spark-brick) !important;
+  border-left: 3px solid var(--spark-editor-theme) !important;
+  color: var(--spark-editor-theme) !important;
 }
 
 // -----------------------------------------------------------------------------
@@ -238,15 +247,15 @@ select {
 // Primary action area in header
 .header-component .sb-btn-primary,
 .editor-header .sb-btn-primary {
-  background-color: var(--spark-brick) !important;
-  border-color: var(--spark-brick) !important;
+  background-color: var(--spark-editor-theme) !important;
+  border-color: var(--spark-editor-theme) !important;
   color: var(--spark-surface) !important;
   border-radius: 0.5rem !important;
 }
 
 // Override sb-styles full-color primary header background
 .sb-bg-color-primary {
-  background-color: var(--spark-brick-dark) !important;
+  background-color: var(--spark-editor-theme-dark) !important;
   background-image: none !important;
   padding-top: 0.25rem !important;
   padding-bottom: 0.25rem !important;
@@ -283,7 +292,7 @@ select {
 
   .sb-btn-outline-primary {
     border-color: var(--color-brand-outline) !important;
-    color: var(--spark-brick) !important;
+    color: var(--spark-editor-theme) !important;
     border-radius: 0.5rem !important;
     &:hover { background-color: var(--color-brand-tint) !important; }
     &.sb-btn-outline-disabled,
@@ -302,12 +311,12 @@ select {
   }
 
   .sb-btn-primary {
-    background-color: var(--spark-brick) !important;
-    border-color: var(--spark-brick) !important;
+    background-color: var(--spark-editor-theme) !important;
+    border-color: var(--spark-editor-theme) !important;
     color: var(--spark-surface) !important;
     border-radius: 0.5rem !important;
     font-weight: 600 !important;
-    &:hover { background-color: var(--spark-brick-dark) !important; }
+    &:hover { background-color: var(--spark-editor-theme-dark) !important; }
   }
 }
 
@@ -317,8 +326,8 @@ select {
 
 .sb-progress-status .active,
 .progress-status .active {
-  color: var(--spark-brick) !important;
-  border-color: var(--spark-brick) !important;
+  color: var(--spark-editor-theme) !important;
+  border-color: var(--spark-editor-theme) !important;
 }
 
 .sb-progress-status .completed {
@@ -327,7 +336,7 @@ select {
 
 // Semantic UI progress bar
 .ui.progress .bar {
-  background-color: var(--spark-brick) !important;
+  background-color: var(--spark-editor-theme) !important;
   border-radius: 0.5rem !important;
 }
 
@@ -349,7 +358,7 @@ select {
 .iziToast.iziToast-color-blue,
 .sb-toast-info {
   background-color: var(--color-brand-tint) !important;
-  border-left: 4px solid var(--spark-brick) !important;
+  border-left: 4px solid var(--spark-editor-theme) !important;
   color: var(--spark-charcoal) !important;
 }
 
@@ -390,12 +399,12 @@ select {
 // -----------------------------------------------------------------------------
 
 input[type="range"] {
-  accent-color: var(--spark-brick);
+  accent-color: var(--spark-editor-theme);
 }
 
 .ui.slider.checkbox input:checked ~ label:before,
 .ui.toggle.checkbox input:checked ~ label:before {
-  background-color: var(--spark-brick) !important;
+  background-color: var(--spark-editor-theme) !important;
 }
 
 // -----------------------------------------------------------------------------
@@ -404,7 +413,7 @@ input[type="range"] {
 
 .publish-checklist .checklist-item.checked,
 .sb-checklist-item.checked {
-  color: var(--spark-brick);
+  color: var(--spark-editor-theme);
 }
 
 .publish-checklist .checklist-item.checked .item-icon,
@@ -447,7 +456,7 @@ input[type="range"] {
 .sb-label-primary,
 .ui.label.sb-label-primary {
   background-color: var(--color-brand-tint) !important;
-  color: var(--spark-brick) !important;
+  color: var(--spark-editor-theme) !important;
   border: 1px solid var(--color-brand-divider) !important;
 }
 
@@ -489,7 +498,7 @@ input[type="range"] {
 .ck.ck-button.ck-on,
 .ck.ck-button:hover:not(.ck-disabled) {
   background-color: var(--color-brand-tint) !important;
-  color: var(--spark-brick) !important;
+  color: var(--spark-editor-theme) !important;
 }
 
 // -----------------------------------------------------------------------------
@@ -506,8 +515,8 @@ input[type="range"] {
 .asset-card.selected,
 .library-card.selected,
 .sb-asset-card.selected {
-  border-color: var(--spark-brick) !important;
-  box-shadow: 0 0 0 2px var(--spark-brick) !important;
+  border-color: var(--spark-editor-theme) !important;
+  box-shadow: 0 0 0 2px var(--spark-editor-theme) !important;
 }
 
 // -----------------------------------------------------------------------------
@@ -521,19 +530,19 @@ input[type="range"] {
   transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
 
   &.sb-btn-primary {
-    background-color: var(--spark-brick) !important;
-    border-color: var(--spark-brick) !important;
+    background-color: var(--spark-editor-theme) !important;
+    border-color: var(--spark-editor-theme) !important;
     color: var(--spark-surface) !important;
-    &:hover { background-color: var(--spark-brick-dark) !important; }
+    &:hover { background-color: var(--spark-editor-theme-dark) !important; }
   }
 
   &.sb-btn-outline-primary {
     background-color: transparent !important;
     border: 1px solid var(--color-brand-outline) !important;
-    color: var(--spark-brick) !important;
+    color: var(--spark-editor-theme) !important;
     &:hover {
       background-color: var(--color-brand-tint) !important;
-      border-color: var(--spark-brick) !important;
+      border-color: var(--spark-editor-theme) !important;
     }
     &.sb-btn-outline-disabled,
     &[disabled] {
@@ -552,14 +561,14 @@ input[type="range"] {
 
   &.sb-btn-secondary {
     background-color: var(--spark-surface) !important;
-    border: 1.5px solid var(--spark-brick) !important;
-    color: var(--spark-brick) !important;
+    border: 1.5px solid var(--spark-editor-theme) !important;
+    color: var(--spark-editor-theme) !important;
     border-radius: 0.5rem !important;
     &:hover,
     &:focus {
       background-color: var(--color-brand-tint) !important;
-      border-color: var(--spark-brick-dark) !important;
-      color: var(--spark-brick-dark) !important;
+      border-color: var(--spark-editor-theme-dark) !important;
+      color: var(--spark-editor-theme-dark) !important;
     }
     &:disabled,
     &.disabled {
@@ -621,7 +630,7 @@ input[type="range"] {
 
 .ckeditor-tool__label {
   background-color: var(--color-brand-tint) !important;
-  color: var(--spark-brick) !important;
+  color: var(--spark-editor-theme) !important;
   border-radius: 0.5rem 0.5rem 0 0 !important;
   font-weight: 600 !important;
 }
@@ -647,12 +656,12 @@ input[type="range"] {
   .sb-btn-cover .sb-btn {
     border: none !important;
     background: transparent !important;
-    color: var(--spark-brick) !important;
+    color: var(--spark-editor-theme) !important;
     font-weight: 600 !important;
     font-size: 0.8125rem !important;
     box-shadow: none !important;
     &:hover {
-      color: var(--spark-brick-dark) !important;
+      color: var(--spark-editor-theme-dark) !important;
       background: transparent !important;
     }
   }
@@ -662,7 +671,7 @@ input[type="range"] {
 .fancytree-active > .fancytree-title,
 span.fancytree-active span.fancytree-title {
   background-color: var(--color-brand-tint) !important;
-  color: var(--spark-brick) !important;
+  color: var(--spark-editor-theme) !important;
   border: none !important;
 }
 
@@ -699,14 +708,14 @@ span.fancytree-active span.fancytree-title {
 .sb-btn-success,
 .sb-btn.sb-btn-success {
   background-color: var(--spark-surface) !important;
-  border: 1.5px solid var(--spark-brick) !important;
-  color: var(--spark-brick) !important;
+  border: 1.5px solid var(--spark-editor-theme) !important;
+  color: var(--spark-editor-theme) !important;
 
   &:hover,
   &:focus {
     background-color: var(--color-brand-tint) !important;
-    border-color: var(--spark-brick-dark) !important;
-    color: var(--spark-brick-dark) !important;
+    border-color: var(--spark-editor-theme-dark) !important;
+    color: var(--spark-editor-theme-dark) !important;
   }
 
   &:disabled,
@@ -723,14 +732,14 @@ span.fancytree-active span.fancytree-title {
 .sb-btn-dark-green,
 .sb-btn.sb-btn-dark-green {
   background-color: var(--spark-surface) !important;
-  border: 1.5px solid var(--spark-brick) !important;
-  color: var(--spark-brick) !important;
+  border: 1.5px solid var(--spark-editor-theme) !important;
+  color: var(--spark-editor-theme) !important;
 
   &:hover,
   &:focus {
     background-color: var(--color-brand-tint) !important;
-    border-color: var(--spark-brick-dark) !important;
-    color: var(--spark-brick-dark) !important;
+    border-color: var(--spark-editor-theme-dark) !important;
+    color: var(--spark-editor-theme-dark) !important;
   }
 
   &:disabled,
@@ -751,14 +760,14 @@ span.fancytree-active span.fancytree-title {
 .sb-btn-secondary,
 .sb-btn.sb-btn-secondary {
   background-color: var(--spark-surface) !important;
-  border: 1.5px solid var(--spark-brick) !important;
-  color: var(--spark-brick) !important;
+  border: 1.5px solid var(--spark-editor-theme) !important;
+  color: var(--spark-editor-theme) !important;
 
   &:hover,
   &:focus {
     background-color: var(--color-brand-tint) !important;
-    border-color: var(--spark-brick-dark) !important;
-    color: var(--spark-brick-dark) !important;
+    border-color: var(--spark-editor-theme-dark) !important;
+    color: var(--spark-editor-theme-dark) !important;
   }
 
   &:disabled,
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index c609dc442..ad87a0cf6 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -48,20 +48,21 @@
     // Here we bridge them into the QuML editor's legacy variable system.
     //
     // NOTE: This editor loads in an iframe — it CANNOT inherit portal :root CSS variables.
-    // --primary-color is hardcoded to var(--spark-brick) which resolves within this iframe.
-    --primary-color: var(--spark-brick);
+    // --primary-color is hardcoded to var(--spark-editor-theme) which resolves within this iframe.
+    --primary-color: var(--spark-editor-theme);
     --secondary-color: #008840;
     --tertiary-color: var(--spark-ginger);
 
-    // primary colors — Spark brick scale
-    --primary-0: #fff5f2;   // light brick tint bg
-    --primary-100: #fde8e0; // default button bg
-    --primary-200: #e8a48a; // divider
-    --primary-250: #f5cfc4; // pagination bg color
-    --primary-300: #c9714f; // outline, focus fields
-    --primary-400: var(--primary-color); // button bg, heading, table titles, links, toggles
-    --primary-600: var(--spark-brick-dark); // on press
-    --primary-800: #6b2a14; // hover
+    // primary colors — derived from --spark-editor-theme via color-mix().
+    // Portal overrides --spark-editor-theme on the element; the full scale follows automatically.
+    --primary-0:   color-mix(in srgb, var(--spark-editor-theme)  5%, white);
+    --primary-100: color-mix(in srgb, var(--spark-editor-theme) 15%, white);
+    --primary-200: color-mix(in srgb, var(--spark-editor-theme) 35%, white);
+    --primary-250: color-mix(in srgb, var(--spark-editor-theme) 22%, white);
+    --primary-300: color-mix(in srgb, var(--spark-editor-theme) 55%, white);
+    --primary-400: var(--spark-editor-theme);
+    --primary-600: var(--spark-editor-theme-dark);
+    --primary-800: color-mix(in srgb, var(--spark-editor-theme) 70%, black);
 
     // secondary colors
     --secondary-0: #e1ffdf; // toast bg, label
diff --git a/src/assets/styles/components/_buttons.scss b/src/assets/styles/components/_buttons.scss
index 2e6802734..b6ed51305 100644
--- a/src/assets/styles/components/_buttons.scss
+++ b/src/assets/styles/components/_buttons.scss
@@ -358,6 +358,6 @@ $btnSquaresizes: "xs"1.5rem 1.5rem 1rem null,
 
 .sb-btn-dark-green{
   background-color: var(--spark-surface);
-  border: 1.5px solid var(--spark-brick) !important;
-  color: var(--spark-brick);
+  border: 1.5px solid var(--spark-editor-theme) !important;
+  color: var(--spark-editor-theme);
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/_modal.scss b/src/assets/styles/components/_modal.scss
index 210601940..667c8aaed 100644
--- a/src/assets/styles/components/_modal.scss
+++ b/src/assets/styles/components/_modal.scss
@@ -11,7 +11,7 @@
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(168, 82, 54, 0.1);
 
   .sb-modal-header {
-    background-color: var(--spark-brick); // now orange via variable
+    background-color: var(--spark-editor-theme); // now orange via variable
     color: var(--spark-surface);
     font-weight: 700;
     font-size: 1rem;
@@ -255,7 +255,7 @@
 .sb-modal-white .ui.modal>.close {
   top: 0;
   right: 0;
-  color: var(--spark-brick);
+  color: var(--spark-editor-theme);
 }
 
 .sb-workspace-modal {
diff --git a/web-component/package.json b/web-component/package.json
index a6d5397d5..ea9b045bc 100644
--- a/web-component/package.json
+++ b/web-component/package.json
@@ -1,6 +1,6 @@
 {
-    "name": "@project-sunbird/sunbird-questionset-editor-web-component",
-    "version": "6.0.3",
+    "name": "@jeraldj/sunbird-questionset-editor-web-component",
+    "version": "6.0.5",
     "description": "The web component package for the sunbird questionset editor",
     "main": "assets/quml-editor/sunbird-questionset-editor.js",
     "scripts": {

From edd5d4ebbffeceda034287c9eac7c5948ab998b5 Mon Sep 17 00:00:00 2001
From: JeraldJF <jeraldj@sanketika.in>
Date: Fri, 24 Apr 2026 18:37:38 +0530
Subject: [PATCH 11/12] #fix: modal issue

---
 src/assets/styles/_spark-overrides.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/assets/styles/_spark-overrides.scss b/src/assets/styles/_spark-overrides.scss
index 8854328e7..e1f8597f5 100644
--- a/src/assets/styles/_spark-overrides.scss
+++ b/src/assets/styles/_spark-overrides.scss
@@ -780,3 +780,10 @@ span.fancytree-active span.fancytree-title {
     pointer-events: none;
   }
 }
+
+// -----------------------------------------------------------------------------
+// Semantic UI scrolling modal — override static positioning from semantic.min.css
+// -----------------------------------------------------------------------------
+.modals.dimmer .ui.scrolling.modal {
+  position: fixed !important;
+}

From 2594ee3386daf91fd56387a32fd0b7f8850a8913 Mon Sep 17 00:00:00 2001
From: JeraldJF <jeraldj@sanketika.in>
Date: Fri, 24 Apr 2026 18:40:17 +0530
Subject: [PATCH 12/12] #fix: update package.json

---
 web-component/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-component/package.json b/web-component/package.json
index ea9b045bc..a6d5397d5 100644
--- a/web-component/package.json
+++ b/web-component/package.json
@@ -1,6 +1,6 @@
 {
-    "name": "@jeraldj/sunbird-questionset-editor-web-component",
-    "version": "6.0.5",
+    "name": "@project-sunbird/sunbird-questionset-editor-web-component",
+    "version": "6.0.3",
     "description": "The web component package for the sunbird questionset editor",
     "main": "assets/quml-editor/sunbird-questionset-editor.js",
     "scripts": {