From 363ca2edfebc4078478d7d303286420a87393c1f Mon Sep 17 00:00:00 2001
From: Hadi Khazaee Asl <hadi_khazaee_asl@yahoo.com>
Date: Sun, 23 Aug 2026 01:52:25 +0330
Subject: [PATCH] add xFramework Theme Generator and also a list of available
 preset theme files ...

---
 .../Generator/xFrameworkThemeGenerator.html   | 1339 +++++++++++++++++
 Documents/Themes/x-framework-blue-theme.json  |  121 ++
 Documents/Themes/x-framework-brown-theme.json |  121 ++
 .../Themes/x-framework-default-theme.json     |  121 ++
 Documents/Themes/x-framework-green-theme.json |  121 ++
 .../Themes/x-framework-mabsut-theme.json      |  121 ++
 .../Themes/x-framework-maroon-theme.json      |  121 ++
 Documents/Themes/x-framework-navy-theme.json  |  121 ++
 .../Themes/x-framework-orange-theme.json      |  121 ++
 Documents/Themes/x-framework-saher-theme.json |  121 ++
 .../Themes/x-framework-teal-ocean-theme.json  |  121 ++
 Documents/Themes/x-framework-test-theme.json  |  121 ++
 .../Themes/x-framework-xappmanager-theme.json |  121 ++
 13 files changed, 2791 insertions(+)
 create mode 100644 Documents/Themes/Generator/xFrameworkThemeGenerator.html
 create mode 100644 Documents/Themes/x-framework-blue-theme.json
 create mode 100644 Documents/Themes/x-framework-brown-theme.json
 create mode 100644 Documents/Themes/x-framework-default-theme.json
 create mode 100644 Documents/Themes/x-framework-green-theme.json
 create mode 100644 Documents/Themes/x-framework-mabsut-theme.json
 create mode 100644 Documents/Themes/x-framework-maroon-theme.json
 create mode 100644 Documents/Themes/x-framework-navy-theme.json
 create mode 100644 Documents/Themes/x-framework-orange-theme.json
 create mode 100644 Documents/Themes/x-framework-saher-theme.json
 create mode 100644 Documents/Themes/x-framework-teal-ocean-theme.json
 create mode 100644 Documents/Themes/x-framework-test-theme.json
 create mode 100644 Documents/Themes/x-framework-xappmanager-theme.json

diff --git a/Documents/Themes/Generator/xFrameworkThemeGenerator.html b/Documents/Themes/Generator/xFrameworkThemeGenerator.html
new file mode 100644
index 0000000..1a10d30
--- /dev/null
+++ b/Documents/Themes/Generator/xFrameworkThemeGenerator.html
@@ -0,0 +1,1339 @@
+<!doctype html>
+<html lang="fa" dir="rtl">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>xFramework Theme Generator</title>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      body {
+        font-family: "Segoe UI", Tahoma, sans-serif;
+        background: linear-gradient(135deg, #1e1e2f 0%, #2a2a3e 100%);
+        color: #eee;
+        min-height: 100vh;
+        padding: 20px;
+      }
+      header {
+        text-align: center;
+        padding: 30px 20px;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 16px;
+        margin-bottom: 30px;
+        backdrop-filter: blur(10px);
+      }
+      header h1 {
+        font-size: 2.2em;
+        margin-bottom: 10px;
+        color: #7ec8ff;
+      }
+      header p {
+        opacity: 0.8;
+      }
+      header .meta {
+        margin-top: 12px;
+        font-size: 0.85em;
+        opacity: 0.6;
+      }
+      .container {
+        max-width: 1500px;
+        margin: 0 auto;
+      }
+      .section {
+        background: rgba(255, 255, 255, 0.04);
+        border-radius: 16px;
+        padding: 24px;
+        margin-bottom: 24px;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+      }
+      .section h2 {
+        margin-bottom: 20px;
+        color: #7ec8ff;
+        border-bottom: 2px solid rgba(126, 200, 255, 0.3);
+        padding-bottom: 10px;
+      }
+
+      /* Source Selection */
+      .source-tabs {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 20px;
+        background: rgba(0, 0, 0, 0.2);
+        padding: 6px;
+        border-radius: 10px;
+      }
+      .source-tab {
+        flex: 1;
+        padding: 12px 16px;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 8px;
+        cursor: pointer;
+        text-align: center;
+        font-weight: 600;
+        transition: all 0.2s;
+        border: 1px solid transparent;
+        font-size: 14px;
+      }
+      .source-tab:hover {
+        background: rgba(255, 255, 255, 0.1);
+      }
+      .source-tab.active {
+        background: rgba(126, 200, 255, 0.15);
+        border-color: rgba(126, 200, 255, 0.4);
+        color: #7ec8ff;
+      }
+      .source-content {
+        display: none;
+      }
+      .source-content.active {
+        display: block;
+      }
+
+      /* Preset Themes Scrollable */
+      .preset-container {
+        max-height: 340px;
+        overflow-y: auto;
+        padding: 8px;
+        background: rgba(0, 0, 0, 0.15);
+        border-radius: 10px;
+        border: 1px solid rgba(255, 255, 255, 0.05);
+      }
+      .preset-container::-webkit-scrollbar {
+        width: 8px;
+      }
+      .preset-container::-webkit-scrollbar-track {
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 4px;
+      }
+      .preset-container::-webkit-scrollbar-thumb {
+        background: rgba(126, 200, 255, 0.4);
+        border-radius: 4px;
+      }
+      .preset-container::-webkit-scrollbar-thumb:hover {
+        background: rgba(126, 200, 255, 0.6);
+      }
+      .preset-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+        gap: 12px;
+        padding: 4px;
+      }
+      .theme-card {
+        background: rgba(0, 0, 0, 0.3);
+        border-radius: 10px;
+        padding: 12px;
+        border: 2px solid transparent;
+        transition: all 0.2s;
+        cursor: pointer;
+      }
+      .theme-card:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+        border-color: rgba(126, 200, 255, 0.3);
+      }
+      .theme-card.selected {
+        border-color: #7ec8ff;
+        box-shadow: 0 0 0 2px rgba(126, 200, 255, 0.3);
+      }
+      .theme-card h3 {
+        margin-bottom: 8px;
+        font-size: 0.95em;
+        color: #cde4ff;
+      }
+      .color-row {
+        display: flex;
+        gap: 4px;
+        margin-bottom: 4px;
+        flex-wrap: wrap;
+      }
+      .color-swatch {
+        width: 24px;
+        height: 24px;
+        border-radius: 4px;
+        border: 2px solid rgba(255, 255, 255, 0.2);
+      }
+
+      /* Upload */
+      .upload-section {
+        background: rgba(0, 0, 0, 0.2);
+        border: 2px dashed rgba(126, 200, 255, 0.3);
+        border-radius: 12px;
+        padding: 24px;
+        text-align: center;
+        transition: all 0.3s;
+      }
+      .upload-section:hover {
+        border-color: rgba(126, 200, 255, 0.6);
+        background: rgba(0, 0, 0, 0.3);
+      }
+      .upload-btn {
+        display: inline-block;
+        padding: 10px 24px;
+        background: #7ec8ff;
+        color: #1e1e2f;
+        border-radius: 8px;
+        cursor: pointer;
+        font-weight: 600;
+        transition: all 0.2s;
+      }
+      .upload-btn:hover {
+        background: #5ab0f0;
+        transform: translateY(-2px);
+      }
+      .upload-status {
+        margin-top: 12px;
+        font-size: 13px;
+        min-height: 18px;
+      }
+      .upload-status.success {
+        color: #4caf50;
+      }
+      .upload-status.error {
+        color: #f44336;
+      }
+
+      /* Edit Layout */
+      .edit-layout {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 20px;
+      }
+      @media (max-width: 1100px) {
+        .edit-layout {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      /* Preview Mode Toggle */
+      .preview-mode-toggle {
+        display: flex;
+        gap: 6px;
+        margin-bottom: 12px;
+        background: rgba(0, 0, 0, 0.2);
+        padding: 4px;
+        border-radius: 8px;
+      }
+      .mode-btn {
+        flex: 1;
+        padding: 8px 12px;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 6px;
+        cursor: pointer;
+        text-align: center;
+        font-weight: 600;
+        transition: all 0.2s;
+        font-size: 13px;
+        border: 1px solid transparent;
+      }
+      .mode-btn:hover {
+        background: rgba(255, 255, 255, 0.1);
+      }
+      .mode-btn.active {
+        background: rgba(126, 200, 255, 0.2);
+        border-color: rgba(126, 200, 255, 0.4);
+        color: #7ec8ff;
+      }
+
+      /* Color Inputs */
+      .color-group {
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 10px;
+        padding: 14px;
+        margin-bottom: 12px;
+        border: 1px solid rgba(255, 255, 255, 0.05);
+      }
+      .color-group-title {
+        color: #7ec8ff;
+        margin-bottom: 10px;
+        font-size: 14px;
+        padding-bottom: 6px;
+        border-bottom: 1px solid rgba(126, 200, 255, 0.2);
+        font-weight: 600;
+      }
+      .color-input-row {
+        display: grid;
+        grid-template-columns: 110px 40px 1fr;
+        gap: 8px;
+        align-items: center;
+        margin-bottom: 6px;
+        padding: 4px 6px;
+        border-radius: 4px;
+        transition: background 0.2s;
+      }
+      .color-input-row:hover {
+        background: rgba(255, 255, 255, 0.03);
+      }
+      .color-input-row label {
+        font-size: 12px;
+        color: #aaa;
+        font-weight: 500;
+      }
+      .color-input-row input[type="color"] {
+        width: 40px;
+        height: 30px;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        background: transparent;
+        padding: 0;
+      }
+      .color-input-row input[type="text"] {
+        width: 100%;
+        padding: 5px 8px;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        border-radius: 4px;
+        color: #fff;
+        font-family: monospace;
+        font-size: 12px;
+      }
+
+      /* Preview Box */
+      .preview-box {
+        background: rgba(0, 0, 0, 0.4);
+        border-radius: 12px;
+        padding: 16px;
+        min-height: 280px;
+        position: sticky;
+        top: 20px;
+      }
+      .preview-header {
+        padding: 14px;
+        border-radius: 8px;
+        margin-bottom: 12px;
+        font-weight: bold;
+        text-align: center;
+        transition: all 0.3s;
+      }
+      .preview-buttons {
+        display: flex;
+        gap: 6px;
+        flex-wrap: wrap;
+        margin-bottom: 12px;
+      }
+      .preview-btn {
+        padding: 8px 16px;
+        border-radius: 6px;
+        border: none;
+        color: #fff;
+        font-weight: 600;
+        cursor: pointer;
+        font-size: 13px;
+        transition: all 0.3s;
+      }
+      .preview-cards {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 10px;
+      }
+      .preview-card {
+        padding: 14px;
+        border-radius: 8px;
+        text-align: center;
+        font-weight: bold;
+        font-size: 13px;
+        transition: all 0.3s;
+      }
+      .preview-info {
+        margin-top: 12px;
+        padding: 10px;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 6px;
+        font-size: 12px;
+      }
+      .preview-info strong {
+        color: #7ec8ff;
+      }
+
+      /* JSON Output */
+      .json-output {
+        background: #0d1117;
+        border-radius: 8px;
+        padding: 14px;
+        max-height: 380px;
+        overflow: auto;
+        font-family: "Consolas", monospace;
+        font-size: 11px;
+        color: #c9d1d9;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        direction: ltr;
+        text-align: left;
+        white-space: pre;
+      }
+      .json-output::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+      .json-output::-webkit-scrollbar-track {
+        background: rgba(0, 0, 0, 0.2);
+      }
+      .json-output::-webkit-scrollbar-thumb {
+        background: rgba(126, 200, 255, 0.4);
+        border-radius: 4px;
+      }
+      .tabs {
+        display: flex;
+        gap: 4px;
+        margin-bottom: 12px;
+      }
+      .tab {
+        padding: 8px 16px;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 6px 6px 0 0;
+        cursor: pointer;
+        border: 1px solid transparent;
+        font-size: 13px;
+        font-weight: 500;
+      }
+      .tab.active {
+        background: rgba(126, 200, 255, 0.15);
+        border-color: rgba(126, 200, 255, 0.3);
+        color: #7ec8ff;
+      }
+
+      /* Action Buttons */
+      .action-buttons {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+        margin-top: 16px;
+        padding-top: 16px;
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+      }
+      .btn {
+        padding: 10px 20px;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+        font-weight: 600;
+        font-size: 13px;
+        transition: all 0.2s;
+      }
+      .btn-primary {
+        background: #7ec8ff;
+        color: #1e1e2f;
+      }
+      .btn-primary:hover {
+        background: #5ab0f0;
+      }
+      .btn-success {
+        background: #4caf50;
+        color: #fff;
+      }
+      .btn-success:hover {
+        background: #3d9140;
+      }
+      .btn-warning {
+        background: #ff9800;
+        color: #fff;
+      }
+      .btn-warning:hover {
+        background: #e08600;
+      }
+      .btn-info {
+        background: #2196f3;
+        color: #fff;
+      }
+      .btn-info:hover {
+        background: #1976d2;
+      }
+
+      /* Theme Name Input */
+      .theme-name-input {
+        width: 100%;
+        padding: 10px 14px;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        border-radius: 8px;
+        color: #fff;
+        font-size: 14px;
+        margin-bottom: 16px;
+      }
+
+      /* Normalize Info */
+      .normalize-info {
+        margin-top: 10px;
+        padding: 10px;
+        background: rgba(255, 152, 0, 0.1);
+        border: 1px solid rgba(255, 152, 0, 0.3);
+        border-radius: 6px;
+        font-size: 12px;
+        color: #ffb74d;
+      }
+      .normalize-info ul {
+        margin: 6px 0 0 0;
+        padding-right: 18px;
+      }
+      .normalize-info li {
+        margin: 3px 0;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <h1>🎨 تولیدکننده پوسته xFramework</h1>
+      <p>
+        مدیریت و ویرایش پوسته‌های رنگی برای برنامه‌های کاربردی مبتنی بر
+        xFramework
+      </p>
+      <div class="meta">
+        توسعه‌دهنده: هادی خزاعی اصل | شرکت: فن آوران ساحر علم | تاریخ: ۱ شهریور
+        ۱۴۰۵
+      </div>
+    </header>
+
+    <div class="container">
+      <div class="section">
+        <h2>✏️ ویرایش پوسته</h2>
+
+        <div class="form-group" style="margin-bottom: 16px">
+          <label
+            style="
+              display: block;
+              margin-bottom: 6px;
+              color: #a8d0ff;
+              font-weight: 600;
+            "
+            >نام پوسته</label
+          >
+          <input
+            type="text"
+            id="themeName"
+            class="theme-name-input"
+            value="MyCustomTheme"
+          />
+        </div>
+
+        <div class="source-tabs">
+          <div class="source-tab active" onclick="switchSource('preset')">
+            📚 پوسته‌های از پیش تعریف‌شده (۵۰ مورد)
+          </div>
+          <div class="source-tab" onclick="switchSource('upload')">
+            📁 بارگذاری فایل JSON
+          </div>
+        </div>
+
+        <div id="source-preset" class="source-content active">
+          <div class="preset-container">
+            <div class="preset-grid" id="presetGrid"></div>
+          </div>
+        </div>
+
+        <div id="source-upload" class="source-content">
+          <div class="upload-section">
+            <label for="themeFileInput" class="upload-btn"
+              >📁 انتخاب فایل JSON پوسته</label
+            >
+            <input
+              type="file"
+              id="themeFileInput"
+              accept=".json"
+              style="display: none"
+              onchange="handleThemeFileUpload(event)"
+            />
+            <div id="uploadStatus" class="upload-status"></div>
+            <div
+              id="normalizeInfo"
+              class="normalize-info"
+              style="display: none"
+            ></div>
+          </div>
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="edit-layout">
+            <!-- Left: Color Inputs -->
+            <div>
+              <div class="preview-mode-toggle">
+                <div
+                  class="mode-btn active"
+                  onclick="switchPreviewMode('light')"
+                >
+                  ☀️ Light
+                </div>
+                <div class="mode-btn" onclick="switchPreviewMode('dark')">
+                  🌙 Dark
+                </div>
+              </div>
+              <div id="colorInputs"></div>
+            </div>
+
+            <!-- Right: Preview -->
+            <div>
+              <div class="preview-box" id="previewBox">
+                <div class="preview-header" id="previewHeader">
+                  پیش‌نمایش زنده
+                </div>
+                <div class="preview-buttons" id="previewButtons"></div>
+                <div class="preview-cards" id="previewCards"></div>
+                <div class="preview-info" id="previewInfo"></div>
+              </div>
+            </div>
+          </div>
+
+          <div style="margin-top: 20px">
+            <div class="tabs">
+              <div class="tab active" onclick="switchJsonTab('light')">
+                📄 JSON (Light)
+              </div>
+              <div class="tab" onclick="switchJsonTab('dark')">
+                📄 JSON (Dark)
+              </div>
+              <div class="tab" onclick="switchJsonTab('full')">
+                📄 Full JSON
+              </div>
+            </div>
+            <pre class="json-output" id="jsonOutput"></pre>
+          </div>
+
+          <div class="action-buttons">
+            <button class="btn btn-success" onclick="downloadTheme()">
+              ⬇️ دانلود JSON
+            </button>
+            <button class="btn btn-warning" onclick="copyJson()">
+              📋 کپی JSON
+            </button>
+            <button class="btn btn-info" onclick="resetToEmpty()">
+              🔄 بازنشانی
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // ============ 50 Preset Themes ============
+      const PRESET_THEMES = [
+        { name: "default", p: "#3880ff", s: "#0cd1e8", t: "#7044ff" },
+        { name: "blue", p: "#3880ff", s: "#0cd1e8", t: "#7044ff" },
+        { name: "green", p: "#0f9535", s: "#6d950f", t: "#086fa7" },
+        { name: "brown", p: "#5d4037", s: "#512da8", t: "#a1887f" },
+        { name: "orange", p: "#d88e30", s: "#c83adf", t: "#d3dd33" },
+        { name: "royal-purple", p: "#6a0dad", s: "#9b59b6", t: "#8e44ad" },
+        { name: "teal-ocean", p: "#008080", s: "#20b2aa", t: "#48d1cc" },
+        { name: "rose-garden", p: "#e91e63", s: "#f06292", t: "#c2185b" },
+        { name: "midnight-blue", p: "#191970", s: "#4169e1", t: "#6495ed" },
+        { name: "coral-sunset", p: "#ff7f50", s: "#ffa07a", t: "#ff6347" },
+        { name: "forest-green", p: "#228b22", s: "#32cd32", t: "#006400" },
+        { name: "sunset-orange", p: "#ff4500", s: "#ffa500", t: "#ffd700" },
+        { name: "ocean-blue", p: "#006994", s: "#4682b4", t: "#5f9ea0" },
+        { name: "cherry-blossom", p: "#ff69b4", s: "#ffb6c1", t: "#ff1493" },
+        { name: "emerald", p: "#50c878", s: "#2ecc71", t: "#27ae60" },
+        { name: "lavender", p: "#e6e6fa", s: "#b19cd9", t: "#9370db" },
+        { name: "mint-green", p: "#98ff98", s: "#3eb489", t: "#00a550" },
+        { name: "peach", p: "#ffdab9", s: "#ffcc99", t: "#ff9966" },
+        { name: "sky-blue", p: "#87ceeb", s: "#87cefa", t: "#00bfff" },
+        { name: "olive", p: "#808000", s: "#6b8e23", t: "#556b2f" },
+        { name: "burgundy", p: "#800020", s: "#722f37", t: "#8b0000" },
+        { name: "navy", p: "#000080", s: "#00008b", t: "#0000cd" },
+        { name: "mustard", p: "#ffdb58", s: "#ffdb58", t: "#e1ad01" },
+        { name: "sage", p: "#bcb88a", s: "#9dc183", t: "#6b8e23" },
+        { name: "plum", p: "#8e4585", s: "#673147", t: "#4b0082" },
+        { name: "turquoise", p: "#40e0d0", s: "#00ced1", t: "#00ced1" },
+        { name: "maroon", p: "#800000", s: "#8b0000", t: "#a52a2a" },
+        { name: "slate", p: "#708090", s: "#778899", t: "#2f4f4f" },
+        { name: "gold", p: "#ffd700", s: "#daa520", t: "#b8860b" },
+        { name: "silver", p: "#c0c0c0", s: "#a9a9a9", t: "#808080" },
+        { name: "rust", p: "#b7410e", s: "#a52a2a", t: "#8b4513" },
+        { name: "indigo", p: "#4b0082", s: "#483d8b", t: "#191970" },
+        { name: "periwinkle", p: "#ccccff", s: "#ccccff", t: "#9999ff" },
+        { name: "salmon", p: "#fa8072", s: "#ffa07a", t: "#e9967a" },
+        { name: "aquamarine", p: "#7fffd4", s: "#7fffd4", t: "#00ffff" },
+        { name: "crimson", p: "#dc143c", s: "#dc143c", t: "#b22222" },
+        { name: "cobalt", p: "#0047ab", s: "#0047ab", t: "#00008b" },
+        { name: "bronze", p: "#cd7f32", s: "#cd7f32", t: "#8b4513" },
+        { name: "magenta", p: "#ff00ff", s: "#ff00ff", t: "#c71585" },
+        { name: "cyan", p: "#00ffff", s: "#00ffff", t: "#00ced1" },
+        { name: "amber", p: "#ffbf00", s: "#ffbf00", t: "#ff8c00" },
+        { name: "ivory", p: "#fffff0", s: "#fffff0", t: "#fafad2" },
+        { name: "charcoal", p: "#36454f", s: "#36454f", t: "#2f4f4f" },
+        { name: "lime", p: "#00ff00", s: "#32cd32", t: "#00ff00" },
+        { name: "fuchsia", p: "#ff00ff", s: "#ff00ff", t: "#c71585" },
+        { name: "taupe", p: "#483c32", s: "#483c32", t: "#483c32" },
+        { name: "mauve", p: "#e0b0ff", s: "#e0b0ff", t: "#dda0dd" },
+        { name: "sienna", p: "#a0522d", s: "#a0522d", t: "#8b4513" },
+        { name: "peridot", p: "#e6e200", s: "#e6e200", t: "#c8b800" },
+        { name: "amethyst", p: "#9966cc", s: "#9966cc", t: "#8a2be2" },
+      ];
+
+      // ============ Color Utilities ============
+      function hexToRgb(hex) {
+        hex = hex.trim().replace("#", "");
+        if (hex.length === 8) hex = hex.substring(0, 6);
+        if (hex.length === 3)
+          hex = hex
+            .split("")
+            .map((c) => c + c)
+            .join("");
+        const r = parseInt(hex.slice(0, 2), 16);
+        const g = parseInt(hex.slice(2, 4), 16);
+        const b = parseInt(hex.slice(4, 6), 16);
+        return { r, g, b };
+      }
+      function rgbToHex(r, g, b) {
+        return (
+          "#" +
+          [r, g, b]
+            .map((x) => {
+              const hex = Math.max(0, Math.min(255, Math.round(x))).toString(
+                16,
+              );
+              return hex.length === 1 ? "0" + hex : hex;
+            })
+            .join("")
+        );
+      }
+      function rgbToHsl(r, g, b) {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b),
+          min = Math.min(r, g, b);
+        let h,
+          s,
+          l = (max + min) / 2;
+        if (max === min) {
+          h = s = 0;
+        } else {
+          const d = max - min;
+          s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+          switch (max) {
+            case r:
+              h = (g - b) / d + (g < b ? 6 : 0);
+              break;
+            case g:
+              h = (b - r) / d + 2;
+              break;
+            case b:
+              h = (r - g) / d + 4;
+              break;
+          }
+          h /= 6;
+        }
+        return { h: h * 360, s: s * 100, l: l * 100 };
+      }
+      function hslToRgb(h, s, l) {
+        h /= 360;
+        s /= 100;
+        l /= 100;
+        let r, g, b;
+        if (s === 0) {
+          r = g = b = l;
+        } else {
+          const hue2rgb = (p, q, t) => {
+            if (t < 0) t += 1;
+            if (t > 1) t -= 1;
+            if (t < 1 / 6) return p + (q - p) * 6 * t;
+            if (t < 1 / 2) return q;
+            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+          };
+          const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+          const p = 2 * l - q;
+          r = hue2rgb(p, q, h + 1 / 3);
+          g = hue2rgb(p, q, h);
+          b = hue2rgb(p, q, h - 1 / 3);
+        }
+        return {
+          r: Math.round(r * 255),
+          g: Math.round(g * 255),
+          b: Math.round(b * 255),
+        };
+      }
+      function generateShade(hex, percent = 18) {
+        const rgb = hexToRgb(hex);
+        const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+        hsl.l = Math.max(0, hsl.l - percent);
+        hsl.s = Math.min(100, hsl.s + 5);
+        const newRgb = hslToRgb(hsl.h, hsl.s, hsl.l);
+        return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
+      }
+      function generateTint(hex, percent = 18) {
+        const rgb = hexToRgb(hex);
+        const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+        hsl.l = Math.min(100, hsl.l + percent);
+        hsl.s = Math.max(0, hsl.s - 5);
+        const newRgb = hslToRgb(hsl.h, hsl.s, hsl.l);
+        return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
+      }
+      function generateContrast(hex) {
+        const rgb = hexToRgb(hex);
+        const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+        return luminance > 0.55 ? "#000000" : "#ffffff";
+      }
+      function normalizeColorValue(value) {
+        if (typeof value !== "string") return value;
+        let normalized = value.trim();
+        if (/^#[0-9A-Fa-f]{8}$/.test(normalized))
+          normalized = normalized.substring(0, 7);
+        if (normalized && !normalized.startsWith("#"))
+          normalized = "#" + normalized;
+        if (!/^#[0-9A-Fa-f]{6}$/.test(normalized)) return value;
+        return normalized;
+      }
+
+      // ============ Build Theme ============
+      function buildTheme(name, primary, secondary, tertiary) {
+        const success = "#10dc60",
+          warning = "#ffce00",
+          danger = "#f04141";
+        const dark = "#222428",
+          medium = "#989aa2",
+          light = "#f4f5f8";
+        return {
+          name,
+          light: {
+            type: "light",
+            colors: {
+              XColorPrimary: primary,
+              XColorPrimaryContrast: generateContrast(primary),
+              XColorPrimaryShade: generateShade(primary),
+              XColorPrimaryShadeContrast: generateContrast(
+                generateShade(primary),
+              ),
+              XColorPrimaryTint: generateTint(primary),
+              XColorPrimaryTintContrast: generateContrast(
+                generateTint(primary),
+              ),
+              XColorSecondary: secondary,
+              XColorSecondaryContrast: generateContrast(secondary),
+              XColorSecondaryShade: generateShade(secondary),
+              XColorSecondaryShadeContrast: generateContrast(
+                generateShade(secondary),
+              ),
+              XColorSecondaryTint: generateTint(secondary),
+              XColorSecondaryTintContrast: generateContrast(
+                generateTint(secondary),
+              ),
+              XColorTertiary: tertiary,
+              XColorTertiaryContrast: generateContrast(tertiary),
+              XColorTertiaryShade: generateShade(tertiary),
+              XColorTertiaryShadeContrast: generateContrast(
+                generateShade(tertiary),
+              ),
+              XColorTertiaryTint: generateTint(tertiary),
+              XColorTertiaryTintContrast: generateContrast(
+                generateTint(tertiary),
+              ),
+              XColorSuccess: success,
+              XColorSuccessContrast: "#ffffff",
+              XColorSuccessShade: generateShade(success),
+              XColorSuccessShadeContrast: "#ffffff",
+              XColorSuccessTint: generateTint(success),
+              XColorSuccessTintContrast: "#ffffff",
+              XColorWarning: warning,
+              XColorWarningContrast: "#ffffff",
+              XColorWarningShade: generateShade(warning),
+              XColorWarningShadeContrast: "#ffffff",
+              XColorWarningTint: generateTint(warning),
+              XColorWarningTintContrast: "#ffffff",
+              XColorDanger: danger,
+              XColorDangerContrast: "#ffffff",
+              XColorDangerShade: generateShade(danger),
+              XColorDangerShadeContrast: "#ffffff",
+              XColorDangerTint: generateTint(danger),
+              XColorDangerTintContrast: "#ffffff",
+              XColorDark: dark,
+              XColorDarkContrast: "#ffffff",
+              XColorDarkShade: generateShade(dark),
+              XColorDarkShadeContrast: "#ffffff",
+              XColorDarkTint: generateTint(dark),
+              XColorDarkTintContrast: "#ffffff",
+              XColorMedium: medium,
+              XColorMediumContrast: "#ffffff",
+              XColorMediumShade: generateShade(medium),
+              XColorMediumShadeContrast: "#ffffff",
+              XColorMediumTint: generateTint(medium),
+              XColorMediumTintContrast: "#ffffff",
+              XColorLight: light,
+              XColorLightContrast: "#000000",
+              XColorLightShade: generateShade(light),
+              XColorLightShadeContrast: "#000000",
+              XColorLightTint: generateTint(light),
+              XColorLightTintContrast: "#000000",
+            },
+          },
+          dark: {
+            type: "dark",
+            colors: {
+              XColorPrimary: dark,
+              XColorPrimaryContrast: "#ffffff",
+              XColorPrimaryShade: generateShade(dark),
+              XColorPrimaryShadeContrast: "#ffffff",
+              XColorPrimaryTint: generateTint(dark),
+              XColorPrimaryTintContrast: "#ffffff",
+              XColorSecondary: generateShade(dark, 5),
+              XColorSecondaryContrast: "#ffffff",
+              XColorSecondaryShade: generateShade(dark, 10),
+              XColorSecondaryShadeContrast: "#ffffff",
+              XColorSecondaryTint: generateTint(dark, 10),
+              XColorSecondaryTintContrast: "#ffffff",
+              XColorTertiary: tertiary,
+              XColorTertiaryContrast: generateContrast(tertiary),
+              XColorTertiaryShade: generateShade(tertiary),
+              XColorTertiaryShadeContrast: generateContrast(
+                generateShade(tertiary),
+              ),
+              XColorTertiaryTint: generateTint(tertiary),
+              XColorTertiaryTintContrast: generateContrast(
+                generateTint(tertiary),
+              ),
+              XColorSuccess: success,
+              XColorSuccessContrast: "#ffffff",
+              XColorSuccessShade: generateShade(success),
+              XColorSuccessShadeContrast: "#ffffff",
+              XColorSuccessTint: generateTint(success),
+              XColorSuccessTintContrast: "#ffffff",
+              XColorWarning: warning,
+              XColorWarningContrast: "#ffffff",
+              XColorWarningShade: generateShade(warning),
+              XColorWarningShadeContrast: "#ffffff",
+              XColorWarningTint: generateTint(warning),
+              XColorWarningTintContrast: "#ffffff",
+              XColorDanger: danger,
+              XColorDangerContrast: "#ffffff",
+              XColorDangerShade: generateShade(danger),
+              XColorDangerShadeContrast: "#ffffff",
+              XColorDangerTint: generateTint(danger),
+              XColorDangerTintContrast: "#ffffff",
+              XColorDark: dark,
+              XColorDarkContrast: "#ffffff",
+              XColorDarkShade: generateShade(dark),
+              XColorDarkShadeContrast: "#ffffff",
+              XColorDarkTint: generateTint(dark),
+              XColorDarkTintContrast: "#ffffff",
+              XColorMedium: medium,
+              XColorMediumContrast: "#ffffff",
+              XColorMediumShade: generateShade(medium),
+              XColorMediumShadeContrast: "#ffffff",
+              XColorMediumTint: generateTint(medium),
+              XColorMediumTintContrast: "#ffffff",
+              XColorLight: light,
+              XColorLightContrast: "#000000",
+              XColorLightShade: generateShade(light),
+              XColorLightShadeContrast: "#000000",
+              XColorLightTint: generateTint(light),
+              XColorLightTintContrast: "#000000",
+            },
+          },
+        };
+      }
+
+      // ============ State ============
+      let currentTheme = null;
+      let previewMode = "light"; // 'light' or 'dark'
+      let jsonTab = "light";
+      let selectedPresetIndex = -1;
+
+      // ============ Render Presets ============
+      function renderPresets() {
+        const grid = document.getElementById("presetGrid");
+        grid.innerHTML = "";
+        PRESET_THEMES.forEach((preset, idx) => {
+          const theme = buildTheme(preset.name, preset.p, preset.s, preset.t);
+          const card = document.createElement("div");
+          card.className = "theme-card";
+          card.dataset.index = idx;
+          card.innerHTML = `
+      <h3>${preset.name}</h3>
+      <div class="color-row">
+        <div class="color-swatch" style="background:${theme.light.colors.XColorPrimary}"></div>
+        <div class="color-swatch" style="background:${theme.light.colors.XColorSecondary}"></div>
+        <div class="color-swatch" style="background:${theme.light.colors.XColorTertiary}"></div>
+      </div>
+      <div class="color-row">
+        <div class="color-swatch" style="background:${theme.light.colors.XColorSuccess}"></div>
+        <div class="color-swatch" style="background:${theme.light.colors.XColorWarning}"></div>
+        <div class="color-swatch" style="background:${theme.light.colors.XColorDanger}"></div>
+      </div>
+    `;
+          card.onclick = () => selectPreset(idx);
+          grid.appendChild(card);
+        });
+      }
+
+      function selectPreset(idx) {
+        selectedPresetIndex = idx;
+        document
+          .querySelectorAll(".theme-card")
+          .forEach((c) => c.classList.remove("selected"));
+        const card = document.querySelector(`.theme-card[data-index="${idx}"]`);
+        if (card) card.classList.add("selected");
+
+        const preset = PRESET_THEMES[idx];
+        const theme = buildTheme(preset.name, preset.p, preset.s, preset.t);
+        currentTheme = theme;
+
+        document.getElementById("themeName").value = preset.name;
+        renderColorInputs();
+        renderPreview();
+        renderJson();
+      }
+
+      // ============ Render Color Inputs ============
+      function renderColorInputs() {
+        const container = document.getElementById("colorInputs");
+        if (!currentTheme) {
+          container.innerHTML =
+            '<p style="opacity:0.5; text-align:center; padding:20px;">یک پوسته انتخاب کنید یا فایل JSON بارگذاری کنید</p>';
+          return;
+        }
+
+        const mode = previewMode;
+        const colors = currentTheme[mode].colors;
+        container.innerHTML = "";
+
+        const groups = [
+          "Primary",
+          "Secondary",
+          "Tertiary",
+          "Success",
+          "Warning",
+          "Danger",
+          "Dark",
+          "Medium",
+          "Light",
+        ];
+        const groupLabels = {
+          Primary: "رنگ اصلی (Primary)",
+          Secondary: "رنگ دوم (Secondary)",
+          Tertiary: "رنگ سوم (Tertiary)",
+          Success: "موفقیت (Success)",
+          Warning: "هشدار (Warning)",
+          Danger: "خطر (Danger)",
+          Dark: "تیره (Dark)",
+          Medium: "میانه (Medium)",
+          Light: "روشن (Light)",
+        };
+
+        groups.forEach((group) => {
+          const groupDiv = document.createElement("div");
+          groupDiv.className = "color-group";
+
+          let html = `<div class="color-group-title">${groupLabels[group]}</div>`;
+
+          const fields = [
+            { key: `XColor${group}`, label: "Base" },
+            { key: `XColor${group}Shade`, label: "Shade" },
+            { key: `XColor${group}Tint`, label: "Tint" },
+            { key: `XColor${group}Contrast`, label: "Contrast" },
+            { key: `XColor${group}ShadeContrast`, label: "Shade Contrast" },
+            { key: `XColor${group}TintContrast`, label: "Tint Contrast" },
+          ];
+
+          fields.forEach((field) => {
+            const value = colors[field.key] || "#000000";
+            html += `
+        <div class="color-input-row">
+          <label>${field.label}</label>
+          <input type="color" value="${value}" data-key="${field.key}" data-mode="${mode}" onchange="handleColorChange(this)">
+          <input type="text" value="${value}" data-key="${field.key}" data-mode="${mode}" onchange="handleColorChange(this)" oninput="handleColorInput(this)">
+        </div>
+      `;
+          });
+
+          groupDiv.innerHTML = html;
+          container.appendChild(groupDiv);
+        });
+      }
+
+      function handleColorChange(input) {
+        const row = input.parentElement;
+        const colorInput = row.querySelector('input[type="color"]');
+        const textInput = row.querySelector('input[type="text"]');
+
+        if (input.type === "color") {
+          textInput.value = input.value;
+        } else {
+          if (/^#[0-9A-Fa-f]{6}$/.test(input.value)) {
+            colorInput.value = input.value;
+          } else {
+            return;
+          }
+        }
+
+        const key = input.dataset.key;
+        const mode = input.dataset.mode;
+        if (currentTheme && currentTheme[mode]) {
+          currentTheme[mode].colors[key] =
+            input.type === "color" ? input.value : input.value;
+        }
+
+        renderPreview();
+        renderJson();
+      }
+
+      function handleColorInput(input) {
+        if (/^#[0-9A-Fa-f]{6}$/.test(input.value)) {
+          handleColorChange(input);
+        }
+      }
+
+      // ============ Preview Mode Toggle ============
+      function switchPreviewMode(mode) {
+        previewMode = mode;
+        document
+          .querySelectorAll(".mode-btn")
+          .forEach((b) => b.classList.remove("active"));
+        event.target.classList.add("active");
+        renderColorInputs();
+        renderPreview();
+      }
+
+      // ============ Render Preview ============
+      function renderPreview() {
+        if (!currentTheme) return;
+
+        const mode = previewMode;
+        const colors = currentTheme[mode].colors;
+
+        const header = document.getElementById("previewHeader");
+        header.style.background = colors.XColorPrimary;
+        header.style.color = colors.XColorPrimaryContrast;
+        header.textContent = `پیش‌نمایش پوسته: ${currentTheme.name} (${mode === "light" ? "روشن" : "تیره"})`;
+
+        const buttons = document.getElementById("previewButtons");
+        buttons.innerHTML = `
+    <button class="preview-btn" style="background:${colors.XColorPrimary};color:${colors.XColorPrimaryContrast}">Primary</button>
+    <button class="preview-btn" style="background:${colors.XColorSecondary};color:${colors.XColorSecondaryContrast}">Secondary</button>
+    <button class="preview-btn" style="background:${colors.XColorTertiary};color:${colors.XColorTertiaryContrast}">Tertiary</button>
+    <button class="preview-btn" style="background:${colors.XColorSuccess};color:${colors.XColorSuccessContrast}">Success</button>
+    <button class="preview-btn" style="background:${colors.XColorWarning};color:${colors.XColorWarningContrast}">Warning</button>
+    <button class="preview-btn" style="background:${colors.XColorDanger};color:${colors.XColorDangerContrast}">Danger</button>
+  `;
+
+        const cards = document.getElementById("previewCards");
+        cards.innerHTML = `
+    <div class="preview-card" style="background:${colors.XColorPrimaryTint};color:${colors.XColorPrimaryTintContrast}">Tint</div>
+    <div class="preview-card" style="background:${colors.XColorPrimary};color:${colors.XColorPrimaryContrast}">Base</div>
+    <div class="preview-card" style="background:${colors.XColorPrimaryShade};color:${colors.XColorPrimaryShadeContrast}">Shade</div>
+  `;
+
+        const info = document.getElementById("previewInfo");
+        info.innerHTML = `
+    <div><strong>نام پوسته:</strong> ${currentTheme.name}</div>
+    <div><strong>حالت نمایش:</strong> ${mode === "light" ? "روشن (Light)" : "تیره (Dark)"}</div>
+    <div><strong>Primary:</strong> <span style="display:inline-block;width:14px;height:14px;background:${colors.XColorPrimary};border-radius:3px;vertical-align:middle;border:1px solid rgba(255,255,255,0.3)"></span> ${colors.XColorPrimary}</div>
+    <div><strong>Secondary:</strong> <span style="display:inline-block;width:14px;height:14px;background:${colors.XColorSecondary};border-radius:3px;vertical-align:middle;border:1px solid rgba(255,255,255,0.3)"></span> ${colors.XColorSecondary}</div>
+  `;
+      }
+
+      // ============ JSON Tab ============
+      function switchJsonTab(tab) {
+        jsonTab = tab;
+        document
+          .querySelectorAll(".tab")
+          .forEach((t) => t.classList.remove("active"));
+        event.target.classList.add("active");
+        renderJson();
+      }
+
+      function renderJson() {
+        if (!currentTheme) {
+          document.getElementById("jsonOutput").textContent = "";
+          return;
+        }
+        let data;
+        if (jsonTab === "light") data = currentTheme.light;
+        else if (jsonTab === "dark") data = currentTheme.dark;
+        else data = currentTheme;
+        document.getElementById("jsonOutput").textContent = JSON.stringify(
+          data,
+          null,
+          1,
+        );
+      }
+
+      // ============ Source Tabs ============
+      function switchSource(source) {
+        document
+          .querySelectorAll(".source-tab")
+          .forEach((t) => t.classList.remove("active"));
+        event.target.classList.add("active");
+        document
+          .querySelectorAll(".source-content")
+          .forEach((c) => c.classList.remove("active"));
+        document.getElementById(`source-${source}`).classList.add("active");
+      }
+
+      // ============ File Upload ============
+      function handleThemeFileUpload(event) {
+        const file = event.target.files[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = function (e) {
+          try {
+            let raw = JSON.parse(e.target.result);
+
+            // Normalize
+            const { data: normalized, changes } = normalizeThemeJson(raw);
+
+            const normalizeInfo = document.getElementById("normalizeInfo");
+            if (
+              changes.keysTrimmed.length > 0 ||
+              changes.alphaRemoved.length > 0
+            ) {
+              let info = "<strong>⚠️ فایل قدیمی شناسایی و اصلاح شد:</strong>";
+              if (changes.keysTrimmed.length > 0) {
+                info += "<br><strong>کلیدهای اصلاح‌شده:</strong><ul>";
+                changes.keysTrimmed
+                  .slice(0, 5)
+                  .forEach((c) => (info += `<li>${c}</li>`));
+                if (changes.keysTrimmed.length > 5)
+                  info += `<li>... و ${changes.keysTrimmed.length - 5} مورد دیگر</li>`;
+                info += "</ul>";
+              }
+              if (changes.alphaRemoved.length > 0) {
+                info +=
+                  "<br><strong>رنگ‌های اصلاح‌شده (حذف Alpha):</strong><ul>";
+                changes.alphaRemoved
+                  .slice(0, 5)
+                  .forEach((c) => (info += `<li>${c}</li>`));
+                if (changes.alphaRemoved.length > 5)
+                  info += `<li>... و ${changes.alphaRemoved.length - 5} مورد دیگر</li>`;
+                info += "</ul>";
+              }
+              normalizeInfo.innerHTML = info;
+              normalizeInfo.style.display = "block";
+            } else {
+              normalizeInfo.style.display = "none";
+            }
+
+            if (
+              !normalized.name ||
+              !normalized.light ||
+              !normalized.dark ||
+              !normalized.light.colors ||
+              !normalized.dark.colors
+            ) {
+              throw new Error("ساختار فایل JSON نامعتبر است");
+            }
+
+            currentTheme = normalized;
+            selectedPresetIndex = -1;
+            document
+              .querySelectorAll(".theme-card")
+              .forEach((c) => c.classList.remove("selected"));
+
+            document.getElementById("themeName").value = normalized.name;
+            document.getElementById("uploadStatus").className =
+              "upload-status success";
+            document.getElementById("uploadStatus").textContent =
+              `✅ فایل با موفقیت بارگذاری شد: ${normalized.name}`;
+
+            renderColorInputs();
+            renderPreview();
+            renderJson();
+          } catch (err) {
+            document.getElementById("uploadStatus").className =
+              "upload-status error";
+            document.getElementById("uploadStatus").textContent =
+              `❌ خطا: ${err.message}`;
+            document.getElementById("normalizeInfo").style.display = "none";
+          }
+        };
+        reader.readAsText(file);
+      }
+
+      function normalizeThemeJson(themeData) {
+        const changes = { keysTrimmed: [], alphaRemoved: [] };
+        if (!themeData || typeof themeData !== "object")
+          return { data: themeData, changes };
+
+        const result = {};
+        for (const key of Object.keys(themeData)) {
+          const nk = key.trim();
+          if (nk !== key) changes.keysTrimmed.push(`"${key}" → "${nk}"`);
+
+          const value = themeData[key];
+          if (nk === "colors" && typeof value === "object" && value !== null) {
+            const nc = {};
+            for (const ck of Object.keys(value)) {
+              const nck = ck.trim();
+              if (nck !== ck) changes.keysTrimmed.push(`"${ck}" → "${nck}"`);
+              const cv = value[ck];
+              if (typeof cv === "string") {
+                const orig = cv;
+                const ncv = normalizeColorValue(cv);
+                if (ncv !== orig) {
+                  changes.alphaRemoved.push(`${nck}: "${orig}" → "${ncv}"`);
+                }
+                nc[nck] = ncv;
+              } else {
+                nc[nck] = cv;
+              }
+            }
+            result[nk] = nc;
+          } else if (typeof value === "object" && value !== null) {
+            const sub = normalizeThemeJson(value);
+            result[nk] = sub.data;
+            changes.keysTrimmed.push(...sub.changes.keysTrimmed);
+            changes.alphaRemoved.push(...sub.changes.alphaRemoved);
+          } else {
+            result[nk] = value;
+          }
+        }
+        return { data: result, changes };
+      }
+
+      // ============ Actions ============
+      function downloadTheme() {
+        if (!currentTheme) {
+          alert("ابتدا یک پوسته انتخاب کنید");
+          return;
+        }
+        const blob = new Blob([JSON.stringify(currentTheme, null, 1)], {
+          type: "application/json",
+        });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `x-framework-${currentTheme.name}-theme.json`;
+        a.click();
+        URL.revokeObjectURL(url);
+      }
+
+      function copyJson() {
+        if (!currentTheme) {
+          alert("ابتدا یک پوسته انتخاب کنید");
+          return;
+        }
+        let data;
+        if (jsonTab === "light") data = currentTheme.light;
+        else if (jsonTab === "dark") data = currentTheme.dark;
+        else data = currentTheme;
+        navigator.clipboard
+          .writeText(JSON.stringify(data, null, 1))
+          .then(() => alert("✅ JSON در کلیپ‌بورد کپی شد"));
+      }
+
+      function resetToEmpty() {
+        currentTheme = null;
+        selectedPresetIndex = -1;
+        document
+          .querySelectorAll(".theme-card")
+          .forEach((c) => c.classList.remove("selected"));
+        document.getElementById("themeName").value = "MyCustomTheme";
+        document.getElementById("uploadStatus").textContent = "";
+        document.getElementById("normalizeInfo").style.display = "none";
+        document.getElementById("themeFileInput").value = "";
+        renderColorInputs();
+        renderPreview();
+        renderJson();
+      }
+
+      // ============ Init ============
+      renderPresets();
+      renderColorInputs();
+      renderPreview();
+      renderJson();
+
+      // Select first preset by default
+      selectPreset(0);
+    </script>
+  </body>
+</html>
diff --git a/Documents/Themes/x-framework-blue-theme.json b/Documents/Themes/x-framework-blue-theme.json
new file mode 100644
index 0000000..202f503
--- /dev/null
+++ b/Documents/Themes/x-framework-blue-theme.json
@@ -0,0 +1,121 @@
+{
+    "name": "blue",
+    "light": {
+        "type": "light",
+        "colors": {
+            "XColorPrimary": " #3880ff",
+            "XColorPrimaryContrast": " #ffffff",
+            "XColorPrimaryShade": " #3171e0",
+            "XColorPrimaryShadeContrast": " #ffffff",
+            "XColorPrimaryTint": " #4c8dff",
+            "XColorPrimaryTintContrast": " #ffffff",
+            "XColorSecondary": " #0cd1e8",
+            "XColorSecondaryContrast": " #ffffff",
+            "XColorSecondaryShade": " #0bb8cc",
+            "XColorSecondaryShadeContrast": " #ffffff",
+            "XColorSecondaryTint": " #24d6ea",
+            "XColorSecondaryTintContrast": " #ffffff",
+            "XColorTertiary": " #7044ff",
+            "XColorTertiaryContrast": " #ffffff",
+            "XColorTertiaryShade": " #633ce0",
+            "XColorTertiaryShadeContrast": " #ffffff",
+            "XColorTertiaryTint": " #7e57ff",
+            "XColorTertiaryTintContrast": " #ffffff",
+            "XColorSuccess": " #10dc60",
+            "XColorSuccessContrast": " #ffffff",
+            "XColorSuccessShade": " #0ec254",
+            "XColorSuccessShadeContrast": " #ffffff",
+            "XColorSuccessTint": " #28e070",
+            "XColorSuccessTintContrast": " #ffffff",
+            "XColorWarning": " #ffce00",
+            "XColorWarningContrast": " #ffffff",
+            "XColorWarningShade": " #e0b500",
+            "XColorWarningShadeContrast": " #ffffff",
+            "XColorWarningTint": " #ffd31a",
+            "XColorWarningTintContrast": " #ffffff",
+            "XColorDanger": " #f04141",
+            "XColorDangerContrast": " #ffffff",
+            "XColorDangerShade": " #d33939",
+            "XColorDangerShadeContrast": " #ffffff",
+            "XColorDangerTint": " #f25454",
+            "XColorDangerTintContrast": " #ffffff",
+            "XColorDark": " #222428",
+            "XColorDarkContrast": " #ffffff",
+            "XColorDarkShade": " #1e2023",
+            "XColorDarkShadeContrast": " #ffffff",
+            "XColorDarkTint": " #383a3e",
+            "XColorDarkTintContrast": " #ffffff",
+            "XColorMedium": " #989aa2",
+            "XColorMediumContrast": " #ffffff",
+            "XColorMediumShade": " #86888f",
+            "XColorMediumShadeContrast": " #ffffff",
+            "XColorMediumTint": " #a2a4ab",
+            "XColorMediumTintContrast": " #ffffff",
+            "XColorLight": " #f4f5f8",
+            "XColorLightContrast": " #000000",
+            "XColorLightShade": " #d7d8da",
+            "XColorLightShadeContrast": " #000000",
+            "XColorLightTint": " #f5f6f9",
+            "XColorLightTintContrast": " #000000"
+        }
+    },
+    "dark": {
+        "type": "dark",
+        "colors": {
+            "XColorPrimary": " #222428",
+            "XColorPrimaryContrast": " #ffffff",
+            "XColorPrimaryShade": " #1e2023",
+            "XColorPrimaryShadeContrast": " #ffffff",
+            "XColorPrimaryTint": " #383a3e",
+            "XColorPrimaryTintContrast": " #ffffff",
+            "XColorSecondary": " #383a3e",
+            "XColorSecondaryContrast": " #ffffff",
+            "XColorSecondaryShade": " #383a3e",
+            "XColorSecondaryShadeContrast": " #ffffff",
+            "XColorSecondaryTint": " #383a3e",
+            "XColorSecondaryTintContrast": " #ffffff",
+            "XColorTertiary": " #7044ff",
+            "XColorTertiaryContrast": " #ffffff",
+            "XColorTertiaryShade": " #633ce0",
+            "XColorTertiaryShadeContrast": " #ffffff",
+            "XColorTertiaryTint": " #7e57ff",
+            "XColorTertiaryTintContrast": " #ffffff",
+            "XColorSuccess": " #10dc60",
+            "XColorSuccessContrast": " #ffffff",
+            "XColorSuccessShade": " #0ec254",
+            "XColorSuccessShadeContrast": " #ffffff",
+            "XColorSuccessTint": " #28e070",
+            "XColorSuccessTintContrast": " #ffffff",
+            "XColorWarning": " #ffce00",
+            "XColorWarningContrast": " #ffffff",
+            "XColorWarningShade": " #e0b500",
+            "XColorWarningShadeContrast": " #ffffff",
+            "XColorWarningTint": " #ffd31a",
+            "XColorWarningTintContrast": " #ffffff",
+            "XColorDanger": " #f04141",
+            "XColorDangerContrast": " #ffffff",
+            "XColorDangerShade": " #d33939",
+            "XColorDangerShadeContrast": " #ffffff",
+            "XColorDangerTint": " #f25454",
+            "XColorDangerTintContrast": " #ffffff",
+            "XColorDark": " #222428",
+            "XColorDarkContrast": " #ffffff",
+            "XColorDarkShade": " #1e2023",
+            "XColorDarkShadeContrast": " #ffffff",
+            "XColorDarkTint": " #383a3e",
+            "XColorDarkTintContrast": " #ffffff",
+            "XColorMedium": " #989aa2",
+            "XColorMediumContrast": " #ffffff",
+            "XColorMediumShade": " #86888f",
+            "XColorMediumShadeContrast": " #ffffff",
+            "XColorMediumTint": " #a2a4ab",
+            "XColorMediumTintContrast": " #ffffff",
+            "XColorLight": " #f4f5f8",
+            "XColorLightContrast": " #000000",
+            "XColorLightShade": " #d7d8da",
+            "XColorLightShadeContrast": " #000000",
+            "XColorLightTint": " #f5f6f9",
+            "XColorLightTintContrast": " #000000"
+        }
+    }
+}
diff --git a/Documents/Themes/x-framework-brown-theme.json b/Documents/Themes/x-framework-brown-theme.json
new file mode 100644
index 0000000..ccd8281
--- /dev/null
+++ b/Documents/Themes/x-framework-brown-theme.json
@@ -0,0 +1,121 @@
+{
+    "name": "brown",
+    "light": {
+        "type": "light",
+        "colors": {
+            "XColorPrimary": "#5d4037ff",
+            "XColorPrimaryContrast": "#efebe9ff",
+            "XColorPrimaryShade": "#3e2723ff",
+            "XColorPrimaryShadeContrast": "#efebe9ff",
+            "XColorPrimaryTint": "#795548ff",
+            "XColorPrimaryTintContrast": "#efebe9ff",
+            "XColorSecondary": "#512da8ff",
+            "XColorSecondaryContrast": "#ede7f6ff",
+            "XColorSecondaryShade": "#311b92ff",
+            "XColorSecondaryShadeContrast": "#ede7f6ff",
+            "XColorSecondaryTint": "#673ab7ff",
+            "XColorSecondaryTintContrast": "#ede7f6ff",
+            "XColorTertiary": "#a1887fff",
+            "XColorTertiaryContrast": "#efebe9ff",
+            "XColorTertiaryShade": "#8d6e63ff",
+            "XColorTertiaryShadeContrast": "#efebe9ff",
+            "XColorTertiaryTint": "#bcaaa4ff",
+            "XColorTertiaryTintContrast": "#efebe9ff",
+            "XColorSuccess": "#388e3cff",
+            "XColorSuccessContrast": "#e8f5e9ff",
+            "XColorSuccessShade": "#1b5e20ff",
+            "XColorSuccessShadeContrast": "#e8f5e9ff",
+            "XColorSuccessTint": "#4caf50ff",
+            "XColorSuccessTintContrast": "#e8f5e9ff",
+            "XColorWarning": "#ffc400ff",
+            "XColorWarningContrast": "#000000ff",
+            "XColorWarningShade": "#ffab00ff",
+            "XColorWarningShadeContrast": "#000000ff",
+            "XColorWarningTint": "#ffd740ff",
+            "XColorWarningTintContrast": "#000000ff",
+            "XColorDanger": "#d32f2fff",
+            "XColorDangerContrast": "#ffebeeff",
+            "XColorDangerShade": "#b71c1cff",
+            "XColorDangerShadeContrast": "#ffebeeff",
+            "XColorDangerTint": "#f44336ff",
+            "XColorDangerTintContrast": "#ffebeeff",
+            "XColorDark": "#222428ff",
+            "XColorDarkContrast": " #ffffff",
+            "XColorDarkShade": " #1e2023",
+            "XColorDarkShadeContrast": " #ffffff",
+            "XColorDarkTint": " #383a3e",
+            "XColorDarkTintContrast": " #ffffff",
+            "XColorMedium": "#455a64ff",
+            "XColorMediumContrast": "#eceff1ff",
+            "XColorMediumShade": "#263238ff",
+            "XColorMediumShadeContrast": "#eceff1ff",
+            "XColorMediumTint": "#607d8bff",
+            "XColorMediumTintContrast": "#eceff1ff",
+            "XColorLight": " #f4f5f8",
+            "XColorLightContrast": " #000000",
+            "XColorLightShade": " #d7d8da",
+            "XColorLightShadeContrast": " #000000",
+            "XColorLightTint": " #f5f6f9",
+            "XColorLightTintContrast": " #000000"
+        }
+    },
+    "dark": {
+        "type": "dark",
+        "colors": {
+            "XColorPrimary": "#222428ff",
+            "XColorPrimaryContrast": "#ffffffff",
+            "XColorPrimaryShade": "#1e2023ff",
+            "XColorPrimaryShadeContrast": " #ffffff",
+            "XColorPrimaryTint": "#383a3eff",
+            "XColorPrimaryTintContrast": " #ffffff",
+            "XColorSecondary": "#4c4d50ff",
+            "XColorSecondaryContrast": " #ffffff",
+            "XColorSecondaryShade": "#323335ff",
+            "XColorSecondaryShadeContrast": " #ffffff",
+            "XColorSecondaryTint": "#6c6e72ff",
+            "XColorSecondaryTintContrast": " #ffffff",
+            "XColorTertiary": "#4c4d50ff",
+            "XColorTertiaryContrast": " #ffffff",
+            "XColorTertiaryShade": "#323335ff",
+            "XColorTertiaryShadeContrast": " #ffffff",
+            "XColorTertiaryTint": "#6c6e72ff",
+            "XColorTertiaryTintContrast": " #ffffff",
+            "XColorSuccess": "#388e3cff",
+            "XColorSuccessContrast": "#e8f5e9ff",
+            "XColorSuccessShade": "#1b5e20ff",
+            "XColorSuccessShadeContrast": "#e8f5e9ff",
+            "XColorSuccessTint": "#4caf50ff",
+            "XColorSuccessTintContrast": "#e8f5e9ff",
+            "XColorWarning": "#ffc400ff",
+            "XColorWarningContrast": "#000000ff",
+            "XColorWarningShade": "#ffab00ff",
+            "XColorWarningShadeContrast": "#000000ff",
+            "XColorWarningTint": "#ffd740ff",
+            "XColorWarningTintContrast": "#000000ff",
+            "XColorDanger": "#d32f2fff",
+            "XColorDangerContrast": "#ffebeeff",
+            "XColorDangerShade": "#b71c1cff",
+            "XColorDangerShadeContrast": "#ffebeeff",
+            "XColorDangerTint": "#f44336ff",
+            "XColorDangerTintContrast": "#ffebeeff",
+            "XColorDark": "#455a64ff",
+            "XColorDarkContrast": " #ffffff",
+            "XColorDarkShade": " #1e2023",
+            "XColorDarkShadeContrast": " #ffffff",
+            "XColorDarkTint": " #383a3e",
+            "XColorDarkTintContrast": " #ffffff",
+            "XColorMedium": "#455a64ff",
+            "XColorMediumContrast": "#eceff1ff",
+            "XColorMediumShade": "#263238ff",
+            "XColorMediumShadeContrast": "#eceff1ff",
+            "XColorMediumTint": "#607d8bff",
+            "XColorMediumTintContrast": "#eceff1ff",
+            "XColorLight": " #f4f5f8",
+            "XColorLightContrast": " #000000",
+            "XColorLightShade": " #d7d8da",
+            "XColorLightShadeContrast": " #000000",
+            "XColorLightTint": " #f5f6f9",
+            "XColorLightTintContrast": " #000000"
+        }
+    }
+}
\ No newline at end of file
diff --git a/Documents/Themes/x-framework-default-theme.json b/Documents/Themes/x-framework-default-theme.json
new file mode 100644
index 0000000..a3b4d2b
--- /dev/null
+++ b/Documents/Themes/x-framework-default-theme.json
@@ -0,0 +1,121 @@
+{
+    "name": "default",
+    "light": {
+        "type": "light",
+        "colors": {
+            "XColorPrimary": " #3880ff",
+            "XColorPrimaryContrast": " #ffffff",
+            "XColorPrimaryShade": " #3171e0",
+            "XColorPrimaryShadeContrast": " #ffffff",
+            "XColorPrimaryTint": " #4c8dff",
+            "XColorPrimaryTintContrast": " #ffffff",
+            "XColorSecondary": " #0cd1e8",
+            "XColorSecondaryContrast": " #ffffff",
+            "XColorSecondaryShade": " #0bb8cc",
+            "XColorSecondaryShadeContrast": " #ffffff",
+            "XColorSecondaryTint": " #24d6ea",
+            "XColorSecondaryTintContrast": " #ffffff",
+            "XColorTertiary": " #7044ff",
+            "XColorTertiaryContrast": " #ffffff",
+            "XColorTertiaryShade": " #633ce0",
+            "XColorTertiaryShadeContrast": " #ffffff",
+            "XColorTertiaryTint": " #7e57ff",
+            "XColorTertiaryTintContrast": " #ffffff",
+            "XColorSuccess": " #10dc60",
+            "XColorSuccessContrast": " #ffffff",
+            "XColorSuccessShade": " #0ec254",
+            "XColorSuccessShadeContrast": " #ffffff",
+            "XColorSuccessTint": " #28e070",
+            "XColorSuccessTintContrast": " #ffffff",
+            "XColorWarning": " #ffce00",
+            "XColorWarningContrast": " #ffffff",
+            "XColorWarningShade": " #e0b500",
+            "XColorWarningShadeContrast": " #ffffff",
+            "XColorWarningTint": " #ffd31a",
+            "XColorWarningTintContrast": " #ffffff",
+            "XColorDanger": " #f04141",
+            "XColorDangerContrast": " #ffffff",
+            "XColorDangerShade": " #d33939",
+            "XColorDangerShadeContrast": " #ffffff",
+            "XColorDangerTint": " #f25454",
+            "XColorDangerTintContrast": " #ffffff",
+            "XColorDark": " #222428",
+            "XColorDarkContrast": " #ffffff",
+            "XColorDarkShade": " #1e2023",
+            "XColorDarkShadeContrast": " #ffffff",
+            "XColorDarkTint": " #383a3e",
+            "XColorDarkTintContrast": " #ffffff",
+            "XColorMedium": " #989aa2",
+            "XColorMediumContrast": " #ffffff",
+            "XColorMediumShade": " #86888f",
+            "XColorMediumShadeContrast": " #ffffff",
+            "XColorMediumTint": " #a2a4ab",
+            "XColorMediumTintContrast": " #ffffff",
+            "XColorLight": " #f4f5f8",
+            "XColorLightContrast": " #000000",
+            "XColorLightShade": " #d7d8da",
+            "XColorLightShadeContrast": " #000000",
+            "XColorLightTint": " #f5f6f9",
+            "XColorLightTintContrast": " #000000"
+        }
+    },
+    "dark": {
+        "type": "dark",
+        "colors": {
+            "XColorPrimary": " #222428",
+            "XColorPrimaryContrast": " #ffffff",
+            "XColorPrimaryShade": " #1e2023",
+            "XColorPrimaryShadeContrast": " #ffffff",
+            "XColorPrimaryTint": " #383a3e",
+            "XColorPrimaryTintContrast": " #ffffff",
+            "XColorSecondary": " #383a3e",
+            "XColorSecondaryContrast": " #ffffff",
+            "XColorSecondaryShade": " #383a3e",
+            "XColorSecondaryShadeContrast": " #ffffff",
+            "XColorSecondaryTint": " #383a3e",
+            "XColorSecondaryTintContrast": " #ffffff",
+            "XColorTertiary": " #7044ff",
+            "XColorTertiaryContrast": " #ffffff",
+            "XColorTertiaryShade": " #633ce0",
+            "XColorTertiaryShadeContrast": " #ffffff",
+            "XColorTertiaryTint": " #7e57ff",
+            "XColorTertiaryTintContrast": " #ffffff",
+            "XColorSuccess": " #10dc60",
+            "XColorSuccessContrast": " #ffffff",
+            "XColorSuccessShade": " #0ec254",
+            "XColorSuccessShadeContrast": " #ffffff",
+            "XColorSuccessTint": " #28e070",
+            "XColorSuccessTintContrast": " #ffffff",
+            "XColorWarning": " #ffce00",
+            "XColorWarningContrast": " #ffffff",
+            "XColorWarningShade": " #e0b500",
+            "XColorWarningShadeContrast": " #ffffff",
+            "XColorWarningTint": " #ffd31a",
+            "XColorWarningTintContrast": " #ffffff",
+            "XColorDanger": " #f04141",
+            "XColorDangerContrast": " #ffffff",
+            "XColorDangerShade": " #d33939",
+            "XColorDangerShadeContrast": " #ffffff",
+            "XColorDangerTint": " #f25454",
+            "XColorDangerTintContrast": " #ffffff",
+            "XColorDark": " #222428",
+            "XColorDarkContrast": " #ffffff",
+            "XColorDarkShade": " #1e2023",
+            "XColorDarkShadeContrast": " #ffffff",
+            "XColorDarkTint": " #383a3e",
+            "XColorDarkTintContrast": " #ffffff",
+            "XColorMedium": " #989aa2",
+            "XColorMediumContrast": " #ffffff",
+            "XColorMediumShade": " #86888f",
+            "XColorMediumShadeContrast": " #ffffff",
+            "XColorMediumTint": " #a2a4ab",
+            "XColorMediumTintContrast": " #ffffff",
+            "XColorLight": " #f4f5f8",
+            "XColorLightContrast": " #000000",
+            "XColorLightShade": " #d7d8da",
+            "XColorLightShadeContrast": " #000000",
+            "XColorLightTint": " #f5f6f9",
+            "XColorLightTintContrast": " #000000"
+        }
+    }
+}
\ No newline at end of file
diff --git a/Documents/Themes/x-framework-green-theme.json b/Documents/Themes/x-framework-green-theme.json
new file mode 100644
index 0000000..76bea89
--- /dev/null
+++ b/Documents/Themes/x-framework-green-theme.json
@@ -0,0 +1,121 @@
+{
+    "name": "green",
+    "light": {
+        "type": "light",
+        "colors": {
+            "XColorPrimary": "#0f9535ff",
+            "XColorPrimaryContrast": "#e3e3e3ff",
+            "XColorPrimaryShade": "#0b6a26ff",
+            "XColorPrimaryShadeContrast": "#e3e3e3ff",
+            "XColorPrimaryTint": "#11a73cff",
+            "XColorPrimaryTintContrast": "#e3e3e3ff",
+            "XColorSecondary": "#6d950fff",
+            "XColorSecondaryContrast": "#e3e3e3ff",
+            "XColorSecondaryShade": "#52700cff",
+            "XColorSecondaryShadeContrast": "#e3e3e3ff",
+            "XColorSecondaryTint": "#90c416ff",
+            "XColorSecondaryTintContrast": "#e3e3e3ff",
+            "XColorTertiary": "#086fa7ff",
+            "XColorTertiaryContrast": "#e3e3e3ff",
+            "XColorTertiaryShade": "#06486cff",
+            "XColorTertiaryShadeContrast": "#e3e3e3ff",
+            "XColorTertiaryTint": "#0b8ad0ff",
+            "XColorTertiaryTintContrast": "#e3e3e3ff",
+            "XColorSuccess": "#0daeb2ff",
+            "XColorSuccessContrast": "#e3e3e3ff",
+            "XColorSuccessShade": "#097e81ff",
+            "XColorSuccessShadeContrast": "#e3e3e3ff",
+            "XColorSuccessTint": "#10cbd0ff",
+            "XColorSuccessTintContrast": "#e3e3e3ff",
+            "XColorWarning": "#c29d01ff",
+            "XColorWarningContrast": "#e3e3e3ff",
+            "XColorWarningShade": "#937701ff",
+            "XColorWarningShadeContrast": "#e3e3e3ff",
+            "XColorWarningTint": "#e3b801ff",
+            "XColorWarningTintContrast": "#e3e3e3ff",
+            "XColorDanger": " #f04141",
+            "XColorDangerContrast": "#e3e3e3ff",
+            "XColorDangerShade": " #d33939",
+            "XColorDangerShadeContrast": "#e3e3e3ff",
+            "XColorDangerTint": " #f25454",
+            "XColorDangerTintContrast": "#e3e3e3ff",
+            "XColorDark": " #222428",
+            "XColorDarkContrast": "#e3e3e3ff",
+            "XColorDarkShade": " #1e2023",
+            "XColorDarkShadeContrast": "#e3e3e3ff",
+            "XColorDarkTint": " #383a3e",
+            "XColorDarkTintContrast": "#e3e3e3ff",
+            "XColorMedium": " #989aa2",
+            "XColorMediumContrast": " #ffffff",
+            "XColorMediumShade": " #86888f",
+            "XColorMediumShadeContrast": " #ffffff",
+            "XColorMediumTint": " #a2a4ab",
+            "XColorMediumTintContrast": " #ffffff",
+            "XColorLight": " #f4f5f8",
+            "XColorLightContrast": " #000000",
+            "XColorLightShade": " #d7d8da",
+            "XColorLightShadeContrast": " #000000",
+            "XColorLightTint": " #f5f6f9",
+            "XColorLightTintContrast": " #000000"
+        }
+    },
+    "dark": {
+        "type": "dark",
+        "colors": {
+            "XColorPrimary": " #222428",
+            "XColorPrimaryContrast": " #ffffff",
+            "XColorPrimaryShade": " #1e2023",
+            "XColorPrimaryShadeContrast": " #ffffff",
+            "XColorPrimaryTint": " #383a3e",
+            "XColorPrimaryTintContrast": " #ffffff",
+            "XColorSecondary": " #383a3e",
+            "XColorSecondaryContrast": " #ffffff",
+            "XColorSecondaryShade": " #383a3e",
+            "XColorSecondaryShadeContrast": " #ffffff",
+            "XColorSecondaryTint": " #383a3e",
+            "XColorSecondaryTintContrast": " #ffffff",
+            "XColorTertiary": " #7044ff",
+            "XColorTertiaryContrast": " #ffffff",
+            "XColorTertiaryShade": " #633ce0",
+            "XColorTertiaryShadeContrast": " #ffffff",
+            "XColorTertiaryTint": " #7e57ff",
+            "XColorTertiaryTintContrast": " #ffffff",
+            "XColorSuccess": " #10dc60",
+            "XColorSuccessContrast": " #ffffff",
+            "XColorSuccessShade": " #0ec254",
+            "XColorSuccessShadeContrast": " #ffffff",
+            "XColorSuccessTint": " #28e070",
+            "XColorSuccessTintContrast": " #ffffff",
+            "XColorWarning": " #ffce00",
+            "XColorWarningContrast": " #ffffff",
+            "XColorWarningShade": " #e0b500",
+            "XColorWarningShadeContrast": " #ffffff",
+            "XColorWarningTint": " #ffd31a",
+            "XColorWarningTintContrast": " #ffffff",
+            "XColorDanger": " #f04141",
+            "XColorDangerContrast": " #ffffff",
+            "XColorDangerShade": " #d33939",
+            "XColorDangerShadeContrast": " #ffffff",
+            "XColorDangerTint": " #f25454",
+            "XColorDangerTintContrast": " #ffffff",
+            "XColorDark": " #222428",
+            "XColorDarkContrast": " #ffffff",
+            "XColorDarkShade": " #1e2023",
+            "XColorDarkShadeContrast": " #ffffff",
+            "XColorDarkTint": " #383a3e",
+            "XColorDarkTintContrast": " #ffffff",
+            "XColorMedium": " #989aa2",
+            "XColorMediumContrast": " #ffffff",
+            "XColorMediumShade": " #86888f",
+            "XColorMediumShadeContrast": " #ffffff",
+            "XColorMediumTint": " #a2a4ab",
+            "XColorMediumTintContrast": " #ffffff",
+            "XColorLight": " #f4f5f8",
+            "XColorLightContrast": " #000000",
+            "XColorLightShade": " #d7d8da",
+            "XColorLightShadeContrast": " #000000",
+            "XColorLightTint": " #f5f6f9",
+            "XColorLightTintContrast": " #000000"
+        }
+    }
+}
\ No newline at end of file
diff --git a/Documents/Themes/x-framework-mabsut-theme.json b/Documents/Themes/x-framework-mabsut-theme.json
new file mode 100644
index 0000000..a30f4ce
--- /dev/null
+++ b/Documents/Themes/x-framework-mabsut-theme.json
@@ -0,0 +1,121 @@
+{
+  "name": "orange",
+  "light": {
+    "type": "light",
+    "colors": {
+      "XColorPrimary": " #d88e30ff",
+      "XColorPrimaryContrast": " #ffffff",
+      "XColorPrimaryShade": " #b8792aff",
+      "XColorPrimaryShadeContrast": " #ffffff",
+      "XColorPrimaryTint": " #fda639ff",
+      "XColorPrimaryTintContrast": " #ffffff",
+      "XColorSecondary": " #c83adfff",
+      "XColorSecondaryContrast": " #ffffff",
+      "XColorSecondaryShade": " #ab32beff",
+      "XColorSecondaryShadeContrast": " #ffffff",
+      "XColorSecondaryTint": " #e041f9ff",
+      "XColorSecondaryTintContrast": " #ffffff",
+      "XColorTertiary": " #d3dd33ff",
+      "XColorTertiaryContrast": " #ffffff",
+      "XColorTertiaryShade": " #b5be2cff",
+      "XColorTertiaryShadeContrast": " #ffffff",
+      "XColorTertiaryTint": " #f1fd3bff",
+      "XColorTertiaryTintContrast": " #ffffff",
+      "XColorSuccess": " #10dc60ff",
+      "XColorSuccessContrast": " #ffffff",
+      "XColorSuccessShade": " #0ec254",
+      "XColorSuccessShadeContrast": " #ffffff",
+      "XColorSuccessTint": " #28e070",
+      "XColorSuccessTintContrast": " #ffffff",
+      "XColorWarning": " #dc5717ff",
+      "XColorWarningContrast": " #ffffff",
+      "XColorWarningShade": " #aa4514ff",
+      "XColorWarningShadeContrast": " #ffffff",
+      "XColorWarningTint": " #ff651bff",
+      "XColorWarningTintContrast": " #ffffff",
+      "XColorDanger": " #f04141",
+      "XColorDangerContrast": " #ffffff",
+      "XColorDangerShade": " #d33939",
+      "XColorDangerShadeContrast": " #ffffff",
+      "XColorDangerTint": " #f25454",
+      "XColorDangerTintContrast": " #ffffff",
+      "XColorDark": " #222428",
+      "XColorDarkContrast": " #ffffff",
+      "XColorDarkShade": " #1e2023",
+      "XColorDarkShadeContrast": " #ffffff",
+      "XColorDarkTint": " #383a3e",
+      "XColorDarkTintContrast": " #ffffff",
+      "XColorMedium": " #989aa2",
+      "XColorMediumContrast": " #ffffff",
+      "XColorMediumShade": " #86888f",
+      "XColorMediumShadeContrast": " #ffffff",
+      "XColorMediumTint": " #a2a4ab",
+      "XColorMediumTintContrast": " #ffffff",
+      "XColorLight": " #f4f5f8",
+      "XColorLightContrast": " #000000",
+      "XColorLightShade": " #d7d8da",
+      "XColorLightShadeContrast": " #000000",
+      "XColorLightTint": " #f5f6f9",
+      "XColorLightTintContrast": " #000000"
+    }
+  },
+  "dark": {
+    "type": "dark",
+    "colors": {
+      "XColorPrimary": " #222428",
+      "XColorPrimaryContrast": " #ffffff",
+      "XColorPrimaryShade": " #1e2023",
+      "XColorPrimaryShadeContrast": " #ffffff",
+      "XColorPrimaryTint": " #383a3e",
+      "XColorPrimaryTintContrast": " #ffffff",
+      "XColorSecondary": " #383a3e",
+      "XColorSecondaryContrast": " #ffffff",
+      "XColorSecondaryShade": " #383a3e",
+      "XColorSecondaryShadeContrast": " #ffffff",
+      "XColorSecondaryTint": " #383a3e",
+      "XColorSecondaryTintContrast": " #ffffff",
+      "XColorTertiary": " #d3dd33ff",
+      "XColorTertiaryContrast": " #ffffff",
+      "XColorTertiaryShade": " #b5be2cff",
+      "XColorTertiaryShadeContrast": " #ffffff",
+      "XColorTertiaryTint": " #f1fd3bff",
+      "XColorTertiaryTintContrast": " #ffffff",
+      "XColorSuccess": " #10dc60ff",
+      "XColorSuccessContrast": " #ffffff",
+      "XColorSuccessShade": " #0ec254",
+      "XColorSuccessShadeContrast": " #ffffff",
+      "XColorSuccessTint": " #28e070",
+      "XColorSuccessTintContrast": " #ffffff",
+      "XColorWarning": " #dc5717ff",
+      "XColorWarningContrast": " #ffffff",
+      "XColorWarningShade": " #aa4514ff",
+      "XColorWarningShadeContrast": " #ffffff",
+      "XColorWarningTint": " #ff651bff",
+      "XColorWarningTintContrast": " #ffffff",
+      "XColorDanger": " #f04141",
+      "XColorDangerContrast": " #ffffff",
+      "XColorDangerShade": " #d33939",
+      "XColorDangerShadeContrast": " #ffffff",
+      "XColorDangerTint": " #f25454",
+      "XColorDangerTintContrast": " #ffffff",
+      "XColorDark": " #222428",
+      "XColorDarkContrast": " #ffffff",
+      "XColorDarkShade": " #1e2023",
+      "XColorDarkShadeContrast": " #ffffff",
+      "XColorDarkTint": " #383a3e",
+      "XColorDarkTintContrast": " #ffffff",
+      "XColorMedium": " #989aa2",
+      "XColorMediumContrast": " #ffffff",
+      "XColorMediumShade": " #86888f",
+      "XColorMediumShadeContrast": " #ffffff",
+      "XColorMediumTint": " #a2a4ab",
+      "XColorMediumTintContrast": " #ffffff",
+      "XColorLight": " #f4f5f8",
+      "XColorLightContrast": " #000000",
+      "XColorLightShade": " #d7d8da",
+      "XColorLightShadeContrast": " #000000",
+      "XColorLightTint": " #f5f6f9",
+      "XColorLightTintContrast": " #000000"
+    }
+  }
+}
\ No newline at end of file
diff --git a/Documents/Themes/x-framework-maroon-theme.json b/Documents/Themes/x-framework-maroon-theme.json
new file mode 100644
index 0000000..04846c2
--- /dev/null
+++ b/Documents/Themes/x-framework-maroon-theme.json
@@ -0,0 +1,121 @@
+{
+ "name": "maroon",
+ "light": {
+  "type": "light",
+  "colors": {
+   "XColorPrimary": "#800000",
+   "XColorPrimaryContrast": "#ffffff",
+   "XColorPrimaryShade": "#240000",
+   "XColorPrimaryShadeContrast": "#ffffff",
+   "XColorPrimaryTint": "#d60505",
+   "XColorPrimaryTintContrast": "#ffffff",
+   "XColorSecondary": "#8b0000",
+   "XColorSecondaryContrast": "#ffffff",
+   "XColorSecondaryShade": "#2f0000",
+   "XColorSecondaryShadeContrast": "#ffffff",
+   "XColorSecondaryTint": "#e10606",
+   "XColorSecondaryTintContrast": "#ffffff",
+   "XColorTertiary": "#a52a2a",
+   "XColorTertiaryContrast": "#ffffff",
+   "XColorTertiaryShade": "#5f1414",
+   "XColorTertiaryShadeContrast": "#ffffff",
+   "XColorTertiaryTint": "#cf5c5c",
+   "XColorTertiaryTintContrast": "#ffffff",
+   "XColorSuccess": "#10dc60",
+   "XColorSuccessContrast": "#ffffff",
+   "XColorSuccessShade": "#068a3a",
+   "XColorSuccessShadeContrast": "#ffffff",
+   "XColorSuccessTint": "#5aee94",
+   "XColorSuccessTintContrast": "#ffffff",
+   "XColorWarning": "#ffce00",
+   "XColorWarningContrast": "#ffffff",
+   "XColorWarningShade": "#a38400",
+   "XColorWarningShadeContrast": "#ffffff",
+   "XColorWarningTint": "#fbdd60",
+   "XColorWarningTintContrast": "#ffffff",
+   "XColorDanger": "#f04141",
+   "XColorDangerContrast": "#ffffff",
+   "XColorDangerShade": "#cb0a0a",
+   "XColorDangerShadeContrast": "#ffffff",
+   "XColorDangerTint": "#f49999",
+   "XColorDangerTintContrast": "#ffffff",
+   "XColorDark": "#222428",
+   "XColorDarkContrast": "#ffffff",
+   "XColorDarkShade": "#000000",
+   "XColorDarkShadeContrast": "#ffffff",
+   "XColorDarkTint": "#505255",
+   "XColorDarkTintContrast": "#ffffff",
+   "XColorMedium": "#989aa2",
+   "XColorMediumContrast": "#ffffff",
+   "XColorMediumShade": "#64687a",
+   "XColorMediumShadeContrast": "#ffffff",
+   "XColorMediumTint": "#cbcbcb",
+   "XColorMediumTintContrast": "#ffffff",
+   "XColorLight": "#f4f5f8",
+   "XColorLightContrast": "#000000",
+   "XColorLightShade": "#b9c1d7",
+   "XColorLightShadeContrast": "#000000",
+   "XColorLightTint": "#ffffff",
+   "XColorLightTintContrast": "#000000"
+  }
+ },
+ "dark": {
+  "type": "dark",
+  "colors": {
+   "XColorPrimary": "#222428",
+   "XColorPrimaryContrast": "#ffffff",
+   "XColorPrimaryShade": "#000000",
+   "XColorPrimaryShadeContrast": "#ffffff",
+   "XColorPrimaryTint": "#505255",
+   "XColorPrimaryTintContrast": "#ffffff",
+   "XColorSecondary": "#15171b",
+   "XColorSecondaryContrast": "#ffffff",
+   "XColorSecondaryShade": "#0a0b0d",
+   "XColorSecondaryShadeContrast": "#ffffff",
+   "XColorSecondaryTint": "#3d3e40",
+   "XColorSecondaryTintContrast": "#ffffff",
+   "XColorTertiary": "#a52a2a",
+   "XColorTertiaryContrast": "#ffffff",
+   "XColorTertiaryShade": "#5f1414",
+   "XColorTertiaryShadeContrast": "#ffffff",
+   "XColorTertiaryTint": "#cf5c5c",
+   "XColorTertiaryTintContrast": "#ffffff",
+   "XColorSuccess": "#10dc60",
+   "XColorSuccessContrast": "#ffffff",
+   "XColorSuccessShade": "#068a3a",
+   "XColorSuccessShadeContrast": "#ffffff",
+   "XColorSuccessTint": "#5aee94",
+   "XColorSuccessTintContrast": "#ffffff",
+   "XColorWarning": "#ffce00",
+   "XColorWarningContrast": "#ffffff",
+   "XColorWarningShade": "#a38400",
+   "XColorWarningShadeContrast": "#ffffff",
+   "XColorWarningTint": "#fbdd60",
+   "XColorWarningTintContrast": "#ffffff",
+   "XColorDanger": "#f04141",
+   "XColorDangerContrast": "#ffffff",
+   "XColorDangerShade": "#cb0a0a",
+   "XColorDangerShadeContrast": "#ffffff",
+   "XColorDangerTint": "#f49999",
+   "XColorDangerTintContrast": "#ffffff",
+   "XColorDark": "#222428",
+   "XColorDarkContrast": "#ffffff",
+   "XColorDarkShade": "#000000",
+   "XColorDarkShadeContrast": "#ffffff",
+   "XColorDarkTint": "#505255",
+   "XColorDarkTintContrast": "#ffffff",
+   "XColorMedium": "#989aa2",
+   "XColorMediumContrast": "#ffffff",
+   "XColorMediumShade": "#64687a",
+   "XColorMediumShadeContrast": "#ffffff",
+   "XColorMediumTint": "#cbcbcb",
+   "XColorMediumTintContrast": "#ffffff",
+   "XColorLight": "#f4f5f8",
+   "XColorLightContrast": "#000000",
+   "XColorLightShade": "#b9c1d7",
+   "XColorLightShadeContrast": "#000000",
+   "XColorLightTint": "#ffffff",
+   "XColorLightTintContrast": "#000000"
+  }
+ }
+}
\ No newline at end of file
diff --git a/Documents/Themes/x-framework-navy-theme.json b/Documents/Themes/x-framework-navy-theme.json
new file mode 100644
index 0000000..1a0fd68
--- /dev/null
+++ b/Documents/Themes/x-framework-navy-theme.json
@@ -0,0 +1,121 @@
+{
+    "name": "navy",
+    "light": {
+        "type": "light",
+        "colors": {
+            "XColorPrimary": " #33087dff",
+            "XColorPrimaryContrast": " #ffffff",
+            "XColorPrimaryShade": " #1a043fff",
+            "XColorPrimaryShadeContrast": " #ffffff",
+            "XColorPrimaryTint": " #490bb4ff",
+            "XColorPrimaryTintContrast": " #ffffff",
+            "XColorSecondary": " #1046baf8",
+            "XColorSecondaryContrast": " #ffffff",
+            "XColorSecondaryShade": " #0b307ff8",
+            "XColorSecondaryShadeContrast": " #ffffff",
+            "XColorSecondaryTint": " #1458e9f8",
+            "XColorSecondaryTintContrast": " #ffffff",
+            "XColorTertiary": " #7044ff",
+            "XColorTertiaryContrast": " #ffffff",
+            "XColorTertiaryShade": " #633ce0",
+            "XColorTertiaryShadeContrast": " #ffffff",
+            "XColorTertiaryTint": " #7e57ff",
+            "XColorTertiaryTintContrast": " #ffffff",
+            "XColorSuccess": " #0a8339ff",
+            "XColorSuccessContrast": " #ffffff",
+            "XColorSuccessShade": " #075224ff",
+            "XColorSuccessShadeContrast": " #ffffff",
+            "XColorSuccessTint": " #0dac4bff",
+            "XColorSuccessTintContrast": " #ffffff",
+            "XColorWarning": " #9f8001ff",
+            "XColorWarningContrast": " #ffffff",
+            "XColorWarningShade": " #725b01ff",
+            "XColorWarningShadeContrast": " #ffffff",
+            "XColorWarningTint": " #cea601ff",
+            "XColorWarningTintContrast": " #ffffff",
+            "XColorDanger": " #a92e2eff",
+            "XColorDangerContrast": " #ffffff",
+            "XColorDangerShade": " #792222ff",
+            "XColorDangerShadeContrast": " #ffffff",
+            "XColorDangerTint": " #dc3c3cff",
+            "XColorDangerTintContrast": " #ffffff",
+            "XColorDark": " #222428",
+            "XColorDarkContrast": " #ffffff",
+            "XColorDarkShade": " #1e2023",
+            "XColorDarkShadeContrast": " #ffffff",
+            "XColorDarkTint": " #383a3e",
+            "XColorDarkTintContrast": " #ffffff",
+            "XColorMedium": " #989aa2",
+            "XColorMediumContrast": " #ffffff",
+            "XColorMediumShade": " #86888f",
+            "XColorMediumShadeContrast": " #ffffff",
+            "XColorMediumTint": " #a2a4ab",
+            "XColorMediumTintContrast": " #ffffff",
+            "XColorLight": " #f4f5f8",
+            "XColorLightContrast": " #000000",
+            "XColorLightShade": " #d7d8da",
+            "XColorLightShadeContrast": " #000000",
+            "XColorLightTint": " #f5f6f9",
+            "XColorLightTintContrast": " #000000"
+        }
+    },
+    "dark": {
+        "type": "dark",
+        "colors": {
+            "XColorPrimary": " #222428",
+            "XColorPrimaryContrast": " #ffffff",
+            "XColorPrimaryShade": " #1e2023",
+            "XColorPrimaryShadeContrast": " #ffffff",
+            "XColorPrimaryTint": " #383a3e",
+            "XColorPrimaryTintContrast": " #ffffff",
+            "XColorSecondary": " #383a3e",
+            "XColorSecondaryContrast": " #ffffff",
+            "XColorSecondaryShade": " #383a3e",
+            "XColorSecondaryShadeContrast": " #ffffff",
+            "XColorSecondaryTint": " #383a3e",
+            "XColorSecondaryTintContrast": " #ffffff",
+            "XColorTertiary": " #7044ff",
+            "XColorTertiaryContrast": " #ffffff",
+            "XColorTertiaryShade": " #633ce0",
+            "XColorTertiaryShadeContrast": " #ffffff",
+            "XColorTertiaryTint": " #7e57ff",
+            "XColorTertiaryTintContrast": " #ffffff",
+            "XColorSuccess": " #0a8339ff",
+            "XColorSuccessContrast": " #ffffff",
+            "XColorSuccessShade": " #075224ff",
+            "XColorSuccessShadeContrast": " #ffffff",
+            "XColorSuccessTint": " #0dac4bff",
+            "XColorSuccessTintContrast": " #ffffff",
+            "XColorWarning": " #9f8001ff",
+            "XColorWarningContrast": " #ffffff",
+            "XColorWarningShade": " #725b01ff",
+            "XColorWarningShadeContrast": " #ffffff",
+            "XColorWarningTint": " #cea601ff",
+            "XColorWarningTintContrast": " #ffffff",
+            "XColorDanger": " #a92e2eff",
+            "XColorDangerContrast": " #ffffff",
+            "XColorDangerShade": " #792222ff",
+            "XColorDangerShadeContrast": " #ffffff",
+            "XColorDangerTint": " #dc3c3cff",
+            "XColorDangerTintContrast": " #ffffff",
+            "XColorDark": " #222428",
+            "XColorDarkContrast": " #ffffff",
+            "XColorDarkShade": " #1e2023",
+            "XColorDarkShadeContrast": " #ffffff",
+            "XColorDarkTint": " #383a3e",
+            "XColorDarkTintContrast": " #ffffff",
+            "XColorMedium": " #989aa2",
+            "XColorMediumContrast": " #ffffff",
+            "XColorMediumShade": " #86888f",
+            "XColorMediumShadeContrast": " #ffffff",
+            "XColorMediumTint": " #a2a4ab",
+            "XColorMediumTintContrast": " #ffffff",
+            "XColorLight": " #f4f5f8",
+            "XColorLightContrast": " #000000",
+            "XColorLightShade": " #d7d8da",
+            "XColorLightShadeContrast": " #000000",
+            "XColorLightTint": " #f5f6f9",
+            "XColorLightTintContrast": " #000000"
+        }
+    }
+}
\ No newline at end of file
diff --git a/Documents/Themes/x-framework-orange-theme.json b/Documents/Themes/x-framework-orange-theme.json
new file mode 100644
index 0000000..a30f4ce
--- /dev/null
+++ b/Documents/Themes/x-framework-orange-theme.json
@@ -0,0 +1,121 @@
+{
+  "name": "orange",
+  "light": {
+    "type": "light",
+    "colors": {
+      "XColorPrimary": " #d88e30ff",
+      "XColorPrimaryContrast": " #ffffff",
+      "XColorPrimaryShade": " #b8792aff",
+      "XColorPrimaryShadeContrast": " #ffffff",
+      "XColorPrimaryTint": " #fda639ff",
+      "XColorPrimaryTintContrast": " #ffffff",
+      "XColorSecondary": " #c83adfff",
+      "XColorSecondaryContrast": " #ffffff",
+      "XColorSecondaryShade": " #ab32beff",
+      "XColorSecondaryShadeContrast": " #ffffff",
+      "XColorSecondaryTint": " #e041f9ff",
+      "XColorSecondaryTintContrast": " #ffffff",
+      "XColorTertiary": " #d3dd33ff",
+      "XColorTertiaryContrast": " #ffffff",
+      "XColorTertiaryShade": " #b5be2cff",
+      "XColorTertiaryShadeContrast": " #ffffff",
+      "XColorTertiaryTint": " #f1fd3bff",
+      "XColorTertiaryTintContrast": " #ffffff",
+      "XColorSuccess": " #10dc60ff",
+      "XColorSuccessContrast": " #ffffff",
+      "XColorSuccessShade": " #0ec254",
+      "XColorSuccessShadeContrast": " #ffffff",
+      "XColorSuccessTint": " #28e070",
+      "XColorSuccessTintContrast": " #ffffff",
+      "XColorWarning": " #dc5717ff",
+      "XColorWarningContrast": " #ffffff",
+      "XColorWarningShade": " #aa4514ff",
+      "XColorWarningShadeContrast": " #ffffff",
+      "XColorWarningTint": " #ff651bff",
+      "XColorWarningTintContrast": " #ffffff",
+      "XColorDanger": " #f04141",
+      "XColorDangerContrast": " #ffffff",
+      "XColorDangerShade": " #d33939",
+      "XColorDangerShadeContrast": " #ffffff",
+      "XColorDangerTint": " #f25454",
+      "XColorDangerTintContrast": " #ffffff",
+      "XColorDark": " #222428",
+      "XColorDarkContrast": " #ffffff",
+      "XColorDarkShade": " #1e2023",
+      "XColorDarkShadeContrast": " #ffffff",
+      "XColorDarkTint": " #383a3e",
+      "XColorDarkTintContrast": " #ffffff",
+      "XColorMedium": " #989aa2",
+      "XColorMediumContrast": " #ffffff",
+      "XColorMediumShade": " #86888f",
+      "XColorMediumShadeContrast": " #ffffff",
+      "XColorMediumTint": " #a2a4ab",
+      "XColorMediumTintContrast": " #ffffff",
+      "XColorLight": " #f4f5f8",
+      "XColorLightContrast": " #000000",
+      "XColorLightShade": " #d7d8da",
+      "XColorLightShadeContrast": " #000000",
+      "XColorLightTint": " #f5f6f9",
+      "XColorLightTintContrast": " #000000"
+    }
+  },
+  "dark": {
+    "type": "dark",
+    "colors": {
+      "XColorPrimary": " #222428",
+      "XColorPrimaryContrast": " #ffffff",
+      "XColorPrimaryShade": " #1e2023",
+      "XColorPrimaryShadeContrast": " #ffffff",
+      "XColorPrimaryTint": " #383a3e",
+      "XColorPrimaryTintContrast": " #ffffff",
+      "XColorSecondary": " #383a3e",
+      "XColorSecondaryContrast": " #ffffff",
+      "XColorSecondaryShade": " #383a3e",
+      "XColorSecondaryShadeContrast": " #ffffff",
+      "XColorSecondaryTint": " #383a3e",
+      "XColorSecondaryTintContrast": " #ffffff",
+      "XColorTertiary": " #d3dd33ff",
+      "XColorTertiaryContrast": " #ffffff",
+      "XColorTertiaryShade": " #b5be2cff",
+      "XColorTertiaryShadeContrast": " #ffffff",
+      "XColorTertiaryTint": " #f1fd3bff",
+      "XColorTertiaryTintContrast": " #ffffff",
+      "XColorSuccess": " #10dc60ff",
+      "XColorSuccessContrast": " #ffffff",
+      "XColorSuccessShade": " #0ec254",
+      "XColorSuccessShadeContrast": " #ffffff",
+      "XColorSuccessTint": " #28e070",
+      "XColorSuccessTintContrast": " #ffffff",
+      "XColorWarning": " #dc5717ff",
+      "XColorWarningContrast": " #ffffff",
+      "XColorWarningShade": " #aa4514ff",
+      "XColorWarningShadeContrast": " #ffffff",
+      "XColorWarningTint": " #ff651bff",
+      "XColorWarningTintContrast": " #ffffff",
+      "XColorDanger": " #f04141",
+      "XColorDangerContrast": " #ffffff",
+      "XColorDangerShade": " #d33939",
+      "XColorDangerShadeContrast": " #ffffff",
+      "XColorDangerTint": " #f25454",
+      "XColorDangerTintContrast": " #ffffff",
+      "XColorDark": " #222428",
+      "XColorDarkContrast": " #ffffff",
+      "XColorDarkShade": " #1e2023",
+      "XColorDarkShadeContrast": " #ffffff",
+      "XColorDarkTint": " #383a3e",
+      "XColorDarkTintContrast": " #ffffff",
+      "XColorMedium": " #989aa2",
+      "XColorMediumContrast": " #ffffff",
+      "XColorMediumShade": " #86888f",
+      "XColorMediumShadeContrast": " #ffffff",
+      "XColorMediumTint": " #a2a4ab",
+      "XColorMediumTintContrast": " #ffffff",
+      "XColorLight": " #f4f5f8",
+      "XColorLightContrast": " #000000",
+      "XColorLightShade": " #d7d8da",
+      "XColorLightShadeContrast": " #000000",
+      "XColorLightTint": " #f5f6f9",
+      "XColorLightTintContrast": " #000000"
+    }
+  }
+}
\ No newline at end of file
diff --git a/Documents/Themes/x-framework-saher-theme.json b/Documents/Themes/x-framework-saher-theme.json
new file mode 100644
index 0000000..664c455
--- /dev/null
+++ b/Documents/Themes/x-framework-saher-theme.json
@@ -0,0 +1,121 @@
+{
+    "name": "saher",
+    "light": {
+        "type": "light",
+        "colors": {
+            "XColorPrimary": " #3880ff",
+            "XColorPrimaryContrast": " #ffffff",
+            "XColorPrimaryShade": " #3171e0",
+            "XColorPrimaryShadeContrast": " #ffffff",
+            "XColorPrimaryTint": " #4c8dff",
+            "XColorPrimaryTintContrast": " #ffffff",
+            "XColorSecondary": " #0cd1e8",
+            "XColorSecondaryContrast": " #ffffff",
+            "XColorSecondaryShade": " #0bb8cc",
+            "XColorSecondaryShadeContrast": " #ffffff",
+            "XColorSecondaryTint": " #24d6ea",
+            "XColorSecondaryTintContrast": " #ffffff",
+            "XColorTertiary": " #7044ff",
+            "XColorTertiaryContrast": " #ffffff",
+            "XColorTertiaryShade": " #633ce0",
+            "XColorTertiaryShadeContrast": " #ffffff",
+            "XColorTertiaryTint": " #7e57ff",
+            "XColorTertiaryTintContrast": " #ffffff",
+            "XColorSuccess": " #10dc60",
+            "XColorSuccessContrast": " #ffffff",
+            "XColorSuccessShade": " #0ec254",
+            "XColorSuccessShadeContrast": " #ffffff",
+            "XColorSuccessTint": " #28e070",
+            "XColorSuccessTintContrast": " #ffffff",
+            "XColorWarning": " #ffce00",
+            "XColorWarningContrast": " #ffffff",
+            "XColorWarningShade": " #e0b500",
+            "XColorWarningShadeContrast": " #ffffff",
+            "XColorWarningTint": " #ffd31a",
+            "XColorWarningTintContrast": " #ffffff",
+            "XColorDanger": " #f04141",
+            "XColorDangerContrast": " #ffffff",
+            "XColorDangerShade": " #d33939",
+            "XColorDangerShadeContrast": " #ffffff",
+            "XColorDangerTint": " #f25454",
+            "XColorDangerTintContrast": " #ffffff",
+            "XColorDark": " #222428",
+            "XColorDarkContrast": " #ffffff",
+            "XColorDarkShade": " #1e2023",
+            "XColorDarkShadeContrast": " #ffffff",
+            "XColorDarkTint": " #383a3e",
+            "XColorDarkTintContrast": " #ffffff",
+            "XColorMedium": " #989aa2",
+            "XColorMediumContrast": " #ffffff",
+            "XColorMediumShade": " #86888f",
+            "XColorMediumShadeContrast": " #ffffff",
+            "XColorMediumTint": " #a2a4ab",
+            "XColorMediumTintContrast": " #ffffff",
+            "XColorLight": " #f4f5f8",
+            "XColorLightContrast": " #000000",
+            "XColorLightShade": " #d7d8da",
+            "XColorLightShadeContrast": " #000000",
+            "XColorLightTint": " #f5f6f9",
+            "XColorLightTintContrast": " #000000"
+        }
+    },
+    "dark": {
+        "type": "dark",
+        "colors": {
+            "XColorPrimary": " #222428",
+            "XColorPrimaryContrast": " #ffffff",
+            "XColorPrimaryShade": " #1e2023",
+            "XColorPrimaryShadeContrast": " #ffffff",
+            "XColorPrimaryTint": " #383a3e",
+            "XColorPrimaryTintContrast": " #ffffff",
+            "XColorSecondary": " #383a3e",
+            "XColorSecondaryContrast": " #ffffff",
+            "XColorSecondaryShade": " #383a3e",
+            "XColorSecondaryShadeContrast": " #ffffff",
+            "XColorSecondaryTint": " #383a3e",
+            "XColorSecondaryTintContrast": " #ffffff",
+            "XColorTertiary": " #7044ff",
+            "XColorTertiaryContrast": " #ffffff",
+            "XColorTertiaryShade": " #633ce0",
+            "XColorTertiaryShadeContrast": " #ffffff",
+            "XColorTertiaryTint": " #7e57ff",
+            "XColorTertiaryTintContrast": " #ffffff",
+            "XColorSuccess": " #10dc60",
+            "XColorSuccessContrast": " #ffffff",
+            "XColorSuccessShade": " #0ec254",
+            "XColorSuccessShadeContrast": " #ffffff",
+            "XColorSuccessTint": " #28e070",
+            "XColorSuccessTintContrast": " #ffffff",
+            "XColorWarning": " #ffce00",
+            "XColorWarningContrast": " #ffffff",
+            "XColorWarningShade": " #e0b500",
+            "XColorWarningShadeContrast": " #ffffff",
+            "XColorWarningTint": " #ffd31a",
+            "XColorWarningTintContrast": " #ffffff",
+            "XColorDanger": " #f04141",
+            "XColorDangerContrast": " #ffffff",
+            "XColorDangerShade": " #d33939",
+            "XColorDangerShadeContrast": " #ffffff",
+            "XColorDangerTint": " #f25454",
+            "XColorDangerTintContrast": " #ffffff",
+            "XColorDark": " #222428",
+            "XColorDarkContrast": " #ffffff",
+            "XColorDarkShade": " #1e2023",
+            "XColorDarkShadeContrast": " #ffffff",
+            "XColorDarkTint": " #383a3e",
+            "XColorDarkTintContrast": " #ffffff",
+            "XColorMedium": " #989aa2",
+            "XColorMediumContrast": " #ffffff",
+            "XColorMediumShade": " #86888f",
+            "XColorMediumShadeContrast": " #ffffff",
+            "XColorMediumTint": " #a2a4ab",
+            "XColorMediumTintContrast": " #ffffff",
+            "XColorLight": " #f4f5f8",
+            "XColorLightContrast": " #000000",
+            "XColorLightShade": " #d7d8da",
+            "XColorLightShadeContrast": " #000000",
+            "XColorLightTint": " #f5f6f9",
+            "XColorLightTintContrast": " #000000"
+        }
+    }
+}
\ No newline at end of file
diff --git a/Documents/Themes/x-framework-teal-ocean-theme.json b/Documents/Themes/x-framework-teal-ocean-theme.json
new file mode 100644
index 0000000..955b184
--- /dev/null
+++ b/Documents/Themes/x-framework-teal-ocean-theme.json
@@ -0,0 +1,121 @@
+{
+ "name": "teal-ocean",
+ "light": {
+  "type": "light",
+  "colors": {
+   "XColorPrimary": "#008080",
+   "XColorPrimaryContrast": "#ffffff",
+   "XColorPrimaryShade": "#002424",
+   "XColorPrimaryShadeContrast": "#ffffff",
+   "XColorPrimaryTint": "#05d6d6",
+   "XColorPrimaryTintContrast": "#000000",
+   "XColorSecondary": "#20b2aa",
+   "XColorSecondaryContrast": "#ffffff",
+   "XColorSecondaryShade": "#0f6762",
+   "XColorSecondaryShadeContrast": "#ffffff",
+   "XColorSecondaryTint": "#54dad3",
+   "XColorSecondaryTintContrast": "#000000",
+   "XColorTertiary": "#48d1cc",
+   "XColorTertiaryContrast": "#000000",
+   "XColorTertiaryShade": "#219c97",
+   "XColorTertiaryShadeContrast": "#ffffff",
+   "XColorTertiaryTint": "#95e0dd",
+   "XColorTertiaryTintContrast": "#000000",
+   "XColorSuccess": "#10dc60",
+   "XColorSuccessContrast": "#ffffff",
+   "XColorSuccessShade": "#068a3a",
+   "XColorSuccessShadeContrast": "#ffffff",
+   "XColorSuccessTint": "#5aee94",
+   "XColorSuccessTintContrast": "#ffffff",
+   "XColorWarning": "#ffce00",
+   "XColorWarningContrast": "#ffffff",
+   "XColorWarningShade": "#a38400",
+   "XColorWarningShadeContrast": "#ffffff",
+   "XColorWarningTint": "#fbdd60",
+   "XColorWarningTintContrast": "#ffffff",
+   "XColorDanger": "#f04141",
+   "XColorDangerContrast": "#ffffff",
+   "XColorDangerShade": "#cb0a0a",
+   "XColorDangerShadeContrast": "#ffffff",
+   "XColorDangerTint": "#f49999",
+   "XColorDangerTintContrast": "#ffffff",
+   "XColorDark": "#222428",
+   "XColorDarkContrast": "#ffffff",
+   "XColorDarkShade": "#000000",
+   "XColorDarkShadeContrast": "#ffffff",
+   "XColorDarkTint": "#505255",
+   "XColorDarkTintContrast": "#ffffff",
+   "XColorMedium": "#989aa2",
+   "XColorMediumContrast": "#ffffff",
+   "XColorMediumShade": "#64687a",
+   "XColorMediumShadeContrast": "#ffffff",
+   "XColorMediumTint": "#cbcbcb",
+   "XColorMediumTintContrast": "#ffffff",
+   "XColorLight": "#f4f5f8",
+   "XColorLightContrast": "#000000",
+   "XColorLightShade": "#b9c1d7",
+   "XColorLightShadeContrast": "#000000",
+   "XColorLightTint": "#ffffff",
+   "XColorLightTintContrast": "#000000"
+  }
+ },
+ "dark": {
+  "type": "dark",
+  "colors": {
+   "XColorPrimary": "#222428",
+   "XColorPrimaryContrast": "#ffffff",
+   "XColorPrimaryShade": "#000000",
+   "XColorPrimaryShadeContrast": "#ffffff",
+   "XColorPrimaryTint": "#505255",
+   "XColorPrimaryTintContrast": "#ffffff",
+   "XColorSecondary": "#15171b",
+   "XColorSecondaryContrast": "#ffffff",
+   "XColorSecondaryShade": "#0a0b0d",
+   "XColorSecondaryShadeContrast": "#ffffff",
+   "XColorSecondaryTint": "#3d3e40",
+   "XColorSecondaryTintContrast": "#ffffff",
+   "XColorTertiary": "#48d1cc",
+   "XColorTertiaryContrast": "#000000",
+   "XColorTertiaryShade": "#219c97",
+   "XColorTertiaryShadeContrast": "#ffffff",
+   "XColorTertiaryTint": "#95e0dd",
+   "XColorTertiaryTintContrast": "#000000",
+   "XColorSuccess": "#10dc60",
+   "XColorSuccessContrast": "#ffffff",
+   "XColorSuccessShade": "#068a3a",
+   "XColorSuccessShadeContrast": "#ffffff",
+   "XColorSuccessTint": "#5aee94",
+   "XColorSuccessTintContrast": "#ffffff",
+   "XColorWarning": "#ffce00",
+   "XColorWarningContrast": "#ffffff",
+   "XColorWarningShade": "#a38400",
+   "XColorWarningShadeContrast": "#ffffff",
+   "XColorWarningTint": "#fbdd60",
+   "XColorWarningTintContrast": "#ffffff",
+   "XColorDanger": "#f04141",
+   "XColorDangerContrast": "#ffffff",
+   "XColorDangerShade": "#cb0a0a",
+   "XColorDangerShadeContrast": "#ffffff",
+   "XColorDangerTint": "#f49999",
+   "XColorDangerTintContrast": "#ffffff",
+   "XColorDark": "#222428",
+   "XColorDarkContrast": "#ffffff",
+   "XColorDarkShade": "#000000",
+   "XColorDarkShadeContrast": "#ffffff",
+   "XColorDarkTint": "#505255",
+   "XColorDarkTintContrast": "#ffffff",
+   "XColorMedium": "#989aa2",
+   "XColorMediumContrast": "#ffffff",
+   "XColorMediumShade": "#64687a",
+   "XColorMediumShadeContrast": "#ffffff",
+   "XColorMediumTint": "#cbcbcb",
+   "XColorMediumTintContrast": "#ffffff",
+   "XColorLight": "#f4f5f8",
+   "XColorLightContrast": "#000000",
+   "XColorLightShade": "#b9c1d7",
+   "XColorLightShadeContrast": "#000000",
+   "XColorLightTint": "#ffffff",
+   "XColorLightTintContrast": "#000000"
+  }
+ }
+}
\ No newline at end of file
diff --git a/Documents/Themes/x-framework-test-theme.json b/Documents/Themes/x-framework-test-theme.json
new file mode 100644
index 0000000..8856de2
--- /dev/null
+++ b/Documents/Themes/x-framework-test-theme.json
@@ -0,0 +1,121 @@
+{
+    "name": "test",
+    "light": {
+        "type": "light",
+        "colors": {
+            "XColorPrimary": " #3880ff",
+            "XColorPrimaryContrast": " #ffffff",
+            "XColorPrimaryShade": " #3171e0",
+            "XColorPrimaryShadeContrast": " #ffffff",
+            "XColorPrimaryTint": " #4c8dff",
+            "XColorPrimaryTintContrast": " #ffffff",
+            "XColorSecondary": " #0cd1e8",
+            "XColorSecondaryContrast": " #ffffff",
+            "XColorSecondaryShade": " #0bb8cc",
+            "XColorSecondaryShadeContrast": " #ffffff",
+            "XColorSecondaryTint": " #24d6ea",
+            "XColorSecondaryTintContrast": " #ffffff",
+            "XColorTertiary": " #7044ff",
+            "XColorTertiaryContrast": " #ffffff",
+            "XColorTertiaryShade": " #633ce0",
+            "XColorTertiaryShadeContrast": " #ffffff",
+            "XColorTertiaryTint": " #7e57ff",
+            "XColorTertiaryTintContrast": " #ffffff",
+            "XColorSuccess": " #10dc60",
+            "XColorSuccessContrast": " #ffffff",
+            "XColorSuccessShade": " #0ec254",
+            "XColorSuccessShadeContrast": " #ffffff",
+            "XColorSuccessTint": " #28e070",
+            "XColorSuccessTintContrast": " #ffffff",
+            "XColorWarning": " #ffce00",
+            "XColorWarningContrast": " #ffffff",
+            "XColorWarningShade": " #e0b500",
+            "XColorWarningShadeContrast": " #ffffff",
+            "XColorWarningTint": " #ffd31a",
+            "XColorWarningTintContrast": " #ffffff",
+            "XColorDanger": " #f04141",
+            "XColorDangerContrast": " #ffffff",
+            "XColorDangerShade": " #d33939",
+            "XColorDangerShadeContrast": " #ffffff",
+            "XColorDangerTint": " #f25454",
+            "XColorDangerTintContrast": " #ffffff",
+            "XColorDark": " #222428",
+            "XColorDarkContrast": " #ffffff",
+            "XColorDarkShade": " #1e2023",
+            "XColorDarkShadeContrast": " #ffffff",
+            "XColorDarkTint": " #383a3e",
+            "XColorDarkTintContrast": " #ffffff",
+            "XColorMedium": " #989aa2",
+            "XColorMediumContrast": " #ffffff",
+            "XColorMediumShade": " #86888f",
+            "XColorMediumShadeContrast": " #ffffff",
+            "XColorMediumTint": " #a2a4ab",
+            "XColorMediumTintContrast": " #ffffff",
+            "XColorLight": " #f4f5f8",
+            "XColorLightContrast": " #000000",
+            "XColorLightShade": " #d7d8da",
+            "XColorLightShadeContrast": " #000000",
+            "XColorLightTint": " #f5f6f9",
+            "XColorLightTintContrast": " #000000"
+        }
+    },
+    "dark": {
+        "type": "dark",
+        "colors": {
+            "XColorPrimary": " #222428",
+            "XColorPrimaryContrast": " #ffffff",
+            "XColorPrimaryShade": " #1e2023",
+            "XColorPrimaryShadeContrast": " #ffffff",
+            "XColorPrimaryTint": " #383a3e",
+            "XColorPrimaryTintContrast": " #ffffff",
+            "XColorSecondary": " #383a3e",
+            "XColorSecondaryContrast": " #ffffff",
+            "XColorSecondaryShade": " #383a3e",
+            "XColorSecondaryShadeContrast": " #ffffff",
+            "XColorSecondaryTint": " #383a3e",
+            "XColorSecondaryTintContrast": " #ffffff",
+            "XColorTertiary": " #7044ff",
+            "XColorTertiaryContrast": " #ffffff",
+            "XColorTertiaryShade": " #633ce0",
+            "XColorTertiaryShadeContrast": " #ffffff",
+            "XColorTertiaryTint": " #7e57ff",
+            "XColorTertiaryTintContrast": " #ffffff",
+            "XColorSuccess": " #10dc60",
+            "XColorSuccessContrast": " #ffffff",
+            "XColorSuccessShade": " #0ec254",
+            "XColorSuccessShadeContrast": " #ffffff",
+            "XColorSuccessTint": " #28e070",
+            "XColorSuccessTintContrast": " #ffffff",
+            "XColorWarning": " #ffce00",
+            "XColorWarningContrast": " #ffffff",
+            "XColorWarningShade": " #e0b500",
+            "XColorWarningShadeContrast": " #ffffff",
+            "XColorWarningTint": " #ffd31a",
+            "XColorWarningTintContrast": " #ffffff",
+            "XColorDanger": " #f04141",
+            "XColorDangerContrast": " #ffffff",
+            "XColorDangerShade": " #d33939",
+            "XColorDangerShadeContrast": " #ffffff",
+            "XColorDangerTint": " #f25454",
+            "XColorDangerTintContrast": " #ffffff",
+            "XColorDark": " #222428",
+            "XColorDarkContrast": " #ffffff",
+            "XColorDarkShade": " #1e2023",
+            "XColorDarkShadeContrast": " #ffffff",
+            "XColorDarkTint": " #383a3e",
+            "XColorDarkTintContrast": " #ffffff",
+            "XColorMedium": " #989aa2",
+            "XColorMediumContrast": " #ffffff",
+            "XColorMediumShade": " #86888f",
+            "XColorMediumShadeContrast": " #ffffff",
+            "XColorMediumTint": " #a2a4ab",
+            "XColorMediumTintContrast": " #ffffff",
+            "XColorLight": " #f4f5f8",
+            "XColorLightContrast": " #000000",
+            "XColorLightShade": " #d7d8da",
+            "XColorLightShadeContrast": " #000000",
+            "XColorLightTint": " #f5f6f9",
+            "XColorLightTintContrast": " #000000"
+        }
+    }
+}
\ No newline at end of file
diff --git a/Documents/Themes/x-framework-xappmanager-theme.json b/Documents/Themes/x-framework-xappmanager-theme.json
new file mode 100644
index 0000000..92b04f3
--- /dev/null
+++ b/Documents/Themes/x-framework-xappmanager-theme.json
@@ -0,0 +1,121 @@
+{
+   "name":"xappmanager",
+   "light":{
+      "type":"light",
+      "colors":{
+         "XColorPrimary":"#33087dff",
+         "XColorPrimaryContrast":" #ffffff",
+         "XColorPrimaryShade":"#1a043fff",
+         "XColorPrimaryShadeContrast":" #ffffff",
+         "XColorPrimaryTint":"#490bb4ff",
+         "XColorPrimaryTintContrast":" #ffffff",
+         "XColorSecondary":"#1046baf8",
+         "XColorSecondaryContrast":" #ffffff",
+         "XColorSecondaryShade":"#0b307ff8",
+         "XColorSecondaryShadeContrast":" #ffffff",
+         "XColorSecondaryTint":"#1458e9f8",
+         "XColorSecondaryTintContrast":" #ffffff",
+         "XColorTertiary":" #7044ff",
+         "XColorTertiaryContrast":" #ffffff",
+         "XColorTertiaryShade":" #633ce0",
+         "XColorTertiaryShadeContrast":" #ffffff",
+         "XColorTertiaryTint":" #7e57ff",
+         "XColorTertiaryTintContrast":" #ffffff",
+         "XColorSuccess":"#0a8339ff",
+         "XColorSuccessContrast":" #ffffff",
+         "XColorSuccessShade":"#075224ff",
+         "XColorSuccessShadeContrast":" #ffffff",
+         "XColorSuccessTint":"#0dac4bff",
+         "XColorSuccessTintContrast":" #ffffff",
+         "XColorWarning":"#9f8001ff",
+         "XColorWarningContrast":" #ffffff",
+         "XColorWarningShade":"#725b01ff",
+         "XColorWarningShadeContrast":" #ffffff",
+         "XColorWarningTint":"#cea601ff",
+         "XColorWarningTintContrast":" #ffffff",
+         "XColorDanger":"#a92e2eff",
+         "XColorDangerContrast":" #ffffff",
+         "XColorDangerShade":"#792222ff",
+         "XColorDangerShadeContrast":" #ffffff",
+         "XColorDangerTint":"#dc3c3cff",
+         "XColorDangerTintContrast":" #ffffff",
+         "XColorDark":" #222428",
+         "XColorDarkContrast":" #ffffff",
+         "XColorDarkShade":" #1e2023",
+         "XColorDarkShadeContrast":" #ffffff",
+         "XColorDarkTint":" #383a3e",
+         "XColorDarkTintContrast":" #ffffff",
+         "XColorMedium":" #989aa2",
+         "XColorMediumContrast":" #ffffff",
+         "XColorMediumShade":" #86888f",
+         "XColorMediumShadeContrast":" #ffffff",
+         "XColorMediumTint":" #a2a4ab",
+         "XColorMediumTintContrast":" #ffffff",
+         "XColorLight":" #f4f5f8",
+         "XColorLightContrast":" #000000",
+         "XColorLightShade":" #d7d8da",
+         "XColorLightShadeContrast":" #000000",
+         "XColorLightTint":" #f5f6f9",
+         "XColorLightTintContrast":" #000000"
+      }
+   },
+   "dark":{
+      "type":"dark",
+      "colors":{
+         "XColorPrimary":" #222428",
+         "XColorPrimaryContrast":" #ffffff",
+         "XColorPrimaryShade":" #1e2023",
+         "XColorPrimaryShadeContrast":" #ffffff",
+         "XColorPrimaryTint":" #383a3e",
+         "XColorPrimaryTintContrast":" #ffffff",
+         "XColorSecondary":" #383a3e",
+         "XColorSecondaryContrast":" #ffffff",
+         "XColorSecondaryShade":" #383a3e",
+         "XColorSecondaryShadeContrast":" #ffffff",
+         "XColorSecondaryTint":" #383a3e",
+         "XColorSecondaryTintContrast":" #ffffff",
+         "XColorTertiary":" #7044ff",
+         "XColorTertiaryContrast":" #ffffff",
+         "XColorTertiaryShade":" #633ce0",
+         "XColorTertiaryShadeContrast":" #ffffff",
+         "XColorTertiaryTint":" #7e57ff",
+         "XColorTertiaryTintContrast":" #ffffff",
+         "XColorSuccess":"#0a8339ff",
+         "XColorSuccessContrast":" #ffffff",
+         "XColorSuccessShade":"#075224ff",
+         "XColorSuccessShadeContrast":" #ffffff",
+         "XColorSuccessTint":"#0dac4bff",
+         "XColorSuccessTintContrast":" #ffffff",
+         "XColorWarning":"#9f8001ff",
+         "XColorWarningContrast":" #ffffff",
+         "XColorWarningShade":"#725b01ff",
+         "XColorWarningShadeContrast":" #ffffff",
+         "XColorWarningTint":"#cea601ff",
+         "XColorWarningTintContrast":" #ffffff",
+         "XColorDanger":"#a92e2eff",
+         "XColorDangerContrast":" #ffffff",
+         "XColorDangerShade":"#792222ff",
+         "XColorDangerShadeContrast":" #ffffff",
+         "XColorDangerTint":"#dc3c3cff",
+         "XColorDangerTintContrast":" #ffffff",
+         "XColorDark":" #222428",
+         "XColorDarkContrast":" #ffffff",
+         "XColorDarkShade":" #1e2023",
+         "XColorDarkShadeContrast":" #ffffff",
+         "XColorDarkTint":" #383a3e",
+         "XColorDarkTintContrast":" #ffffff",
+         "XColorMedium":" #989aa2",
+         "XColorMediumContrast":" #ffffff",
+         "XColorMediumShade":" #86888f",
+         "XColorMediumShadeContrast":" #ffffff",
+         "XColorMediumTint":" #a2a4ab",
+         "XColorMediumTintContrast":" #ffffff",
+         "XColorLight":" #f4f5f8",
+         "XColorLightContrast":" #000000",
+         "XColorLightShade":" #d7d8da",
+         "XColorLightShadeContrast":" #000000",
+         "XColorLightTint":" #f5f6f9",
+         "XColorLightTintContrast":" #000000"
+      }
+   }
+}
\ No newline at end of file