microboard-ui-temp 0.9.7 → 0.9.9

package/dist/{chunk-ne64pvg3.css → chunk-dr0g41aw.css}

@@ -2851,8 +2851,8 @@ a.link_jFMnzg {
 /* src/features/UserPlan/PlanCard.module.css */
 .card_s5OnKw {
   background-color: var(--bg-color);
+  border: 1px solid var(--border-action-normal);
   display: flex;
-  border: 1px solid #0a0f2914;
   border-radius: 24px;
   flex-direction: column;
   align-items: stretch;
@@ -2864,7 +2864,7 @@ a.link_jFMnzg {
 }
 
 .basic_s5OnKw {
-  --bg-color: #fff;
+  --bg-color: var(--background-surface-default);
 }
 
 .plus_s5OnKw {
@@ -2887,13 +2887,13 @@ a.link_jFMnzg {
 }
 
 .price_s5OnKw {
-  color: #14151a;
+  color: var(--text-base-primary);
   font-size: 36px;
   font-weight: 500;
 }
 
 .models_s5OnKw {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   font-size: 16px;
 }
 
@@ -2908,7 +2908,7 @@ a.link_jFMnzg {
 }
 
 .feature_s5OnKw {
-  color: #14151a;
+  color: var(--text-base-primary);
   position: relative;
   display: flex;
   align-items:  center;
@@ -2934,9 +2934,9 @@ a.link_jFMnzg {
 }
 
 .unlimited_s5OnKw {
+  background-color: var(--background-surface-default);
   display: flex;
-  color: #14151a;
-  background-color: #fff;
+  color: var(--text-base-primary);
   border-radius: 360px;
   align-items:  center;
   gap: 4px;
@@ -2958,7 +2958,7 @@ a.link_jFMnzg {
 }
 
 .priceValue_s5OnKw {
-  color: #14151a;
+  color: var(--text-base-primary);
 }
 
 .priceWrapper2_s5OnKw {
@@ -2996,7 +2996,7 @@ a.link_jFMnzg {
 }
 
 .tooltipIcon_s5OnKw {
-  color: #0f132499;
+  color: var(--text-base-secondary);
 }
 
 .tooltip_s5OnKw {
@@ -3260,7 +3260,7 @@ a.link_jFMnzg {
 
 .downgradeConfirmation_eT4yLw {
   display: flex;
-  color: #14151a;
+  color: var(--text-base-primary);
   text-align: left;
   flex-direction: column;
   align-items:  flex-start;
@@ -3306,12 +3306,12 @@ a.link_jFMnzg {
 
 .card_SckGZA {
   cursor: pointer;
-  color: #14151a;
+  color: var(--text-base-primary);
+  background: var(--background-surface-default);
+  border: 1px solid var(--border-action-normal);
   box-sizing: border-box;
   display: flex;
   isolation: isolate;
-  background: #fff;
-  border: 1px solid #dee0e3;
   border-radius: 16px;
   flex-direction: column;
   justify-content: space-between;
@@ -3384,7 +3384,7 @@ a.link_jFMnzg {
 }
 
 .description_SckGZA {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   font-family: Manrope, sans-serif;
   font-size: 16px;
   font-weight: 400;
@@ -3430,8 +3430,8 @@ a.link_jFMnzg {
 .coin_SckGZA {
   box-sizing: border-box;
   display: flex;
-  background: #fff;
-  border: 1px solid #dee0e3;
+  background: var(--background-surface-default);
+  border: 1px solid var(--border-action-normal);
   border-radius: 10px;
   flex-direction: column;
   flex: none;
@@ -5603,12 +5603,12 @@ a.link_jFMnzg {
 
 .cardsScroll_tVQJew::-webkit-scrollbar-thumb {
   display: block;
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 2px;
 }
 
 .back_tVQJew {
-  color: #14151a;
+  color: var(--text-base-primary);
   flex: 1;
   align-self:  flex-start;
   width: auto;
@@ -5618,7 +5618,7 @@ a.link_jFMnzg {
 }
 
 .plansBtn_tVQJew {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   display: flex;
   cursor: pointer;
   align-self:  flex-start;
@@ -5670,7 +5670,7 @@ a.link_jFMnzg {
 
 .downgradeConfirmation_tVQJew {
   display: flex;
-  color: #14151a;
+  color: var(--text-base-primary);
   text-align: left;
   flex-direction: column;
   align-items:  flex-start;
@@ -5687,7 +5687,7 @@ a.link_jFMnzg {
 }
 
 .badge_tVQJew {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
   border-radius: 8px;
   padding: 2px 6px;
   transition: all .3s;
@@ -5712,7 +5712,7 @@ a.link_jFMnzg {
 }
 
 .row_0VfwRg {
-  border-bottom: 1px solid #e9eaec;
+  border-bottom: 1px solid var(--border-action-normal);
 }
 
 .limit_0VfwRg {
@@ -5729,7 +5729,7 @@ a.link_jFMnzg {
 
 .table_0VfwRg th {
   text-align: left;
-  border-right: 1px solid #e9eaec;
+  border-right: 1px solid var(--border-action-normal);
   font-weight: 400;
 }
 
@@ -5738,7 +5738,7 @@ a.link_jFMnzg {
 }
 
 .header_0VfwRg {
-  background-color: #f7f7f8;
+  background-color: var(--background-button-tertiary);
 }
 
 td.currentTariff_0VfwRg {
@@ -5756,18 +5756,18 @@ td.currentTariff_0VfwRg {
 }
 
 .modelName_0VfwRg {
-  color: #14151a;
+  color: var(--text-base-primary);
   font-weight: 500;
 }
 
 .modelDescription_0VfwRg {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   font-size: 12px;
   font-weight: 400;
 }
 
 .modelDisabled_0VfwRg {
-  color: #0a0f2940;
+  color: var(--text-base-quaternary);
 }
 
 .modelDisabled_0VfwRg.currentTariff_0VfwRg {
@@ -5775,7 +5775,7 @@ td.currentTariff_0VfwRg {
 }
 
 .modelLimitReached_0VfwRg {
-  color: #0d112666;
+  color: var(--text-base-secondary);
 }
 
 .limits_0VfwRg {
@@ -5832,7 +5832,7 @@ td.currentTariff_0VfwRg {
 
 /* src/features/UserPlan/UserPlanUsage.module.css */
 .planUsage_kgooGA {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   text-align: left;
   width: 100%;
   font-size: 16px;
@@ -5843,7 +5843,7 @@ td.currentTariff_0VfwRg {
 }
 
 .basicPlan_kgooGA {
-  color: #14151a;
+  color: var(--text-base-primary);
 }
 
 .plusPlan_kgooGA {
@@ -5863,7 +5863,7 @@ td.currentTariff_0VfwRg {
 }
 
 .paymentActions_kgooGA {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   text-align: center;
   display: flex;
   justify-content: center;
@@ -5880,7 +5880,7 @@ td.currentTariff_0VfwRg {
 
 .link_kgooGA {
   position: relative;
-  color: #0f132499;
+  color: var(--text-base-secondary);
   text-decoration: none;
   font-family: Manrope, Arial;
   font-size: 16px;
@@ -5893,7 +5893,7 @@ td.currentTariff_0VfwRg {
 .link_kgooGA:after {
   content: "";
   position: absolute;
-  background-color: #0a0f2914;
+  background-color: var(--background-hover-subtle-strong);
   width: 100%;
   height: 2px;
   bottom: -3px;
@@ -5926,7 +5926,7 @@ td.currentTariff_0VfwRg {
 }
 
 .cancel_kgooGA {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   cursor: pointer;
   text-decoration: underline;
   font-size: 16px;
@@ -10281,7 +10281,7 @@ input.rename_i3VZwA {
 
 .wrapper_jjcYzw {
   display: flex;
-  color: #14151a;
+  color: var(--text-base-primary);
   touch-action: auto;
   -webkit-overflow-scrolling: touch;
   gap: 16px;
@@ -10291,7 +10291,7 @@ input.rename_i3VZwA {
 }
 
 .sidebar_jjcYzw {
-  border-right: 1px solid #e9eaec;
+  border-right: 1px solid var(--border-action-normal);
   width: 280px;
   padding: 16px 0;
 }
@@ -10369,7 +10369,7 @@ input.rename_i3VZwA {
 }
 
 .noTemplatesText_jjcYzw {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   letter-spacing: -.014em;
   margin-top: 12px;
   font-family: Manrope;
@@ -10403,14 +10403,14 @@ input.rename_i3VZwA {
   }
 
   .burgerMenuContainer_jjcYzw > button:hover {
-    background-color: #0a0f290a;
+    background-color: var(--background-hover-subtle);
   }
 
   .burgerMenu_jjcYzw {
     display: none;
     position: absolute;
     z-index: 5;
-    border: 1px solid #e9eaec;
+    border: 1px solid var(--border-action-normal);
     border-radius: 10px;
     min-width: 200px;
     padding: 0 8px 12px 16px;
@@ -10419,7 +10419,7 @@ input.rename_i3VZwA {
 
   .activeBurgerMenu_jjcYzw {
     display: block;
-    background-color: #fff;
+    background-color: var(--background-surface-default);
   }
 }
 
@@ -10449,7 +10449,7 @@ input.rename_i3VZwA {
 
 .scrollContainer_sz3AqQ::-webkit-scrollbar-thumb {
   display: block;
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 4px;
 }
 
@@ -10462,7 +10462,7 @@ input.rename_i3VZwA {
 .backBtn_sz3AqQ {
   display: flex;
   letter-spacing: -.005em;
-  color: #0f132499;
+  color: var(--text-base-secondary);
   cursor: pointer;
   align-items:  center;
   gap: 4px;
@@ -10475,7 +10475,7 @@ input.rename_i3VZwA {
 
 .mainSection_sz3AqQ {
   display: flex;
-  border: 1px solid #e9eaec;
+  border: 1px solid var(--border-action-normal);
   border-radius: 16px;
   flex-wrap: nowrap;
   justify-content: center;
@@ -10507,7 +10507,7 @@ input.rename_i3VZwA {
 }
 
 .description_sz3AqQ {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   letter-spacing: -.01em;
   word-break: break-word;
   display: inline-block;
@@ -10531,7 +10531,7 @@ input.rename_i3VZwA {
 
 .description_sz3AqQ::-webkit-scrollbar-thumb {
   display: block;
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 4px;
 }
 
@@ -10610,7 +10610,7 @@ input.rename_i3VZwA {
 
 .templatesGrid_2qNmAA::-webkit-scrollbar-thumb {
   display: block;
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 4px;
 }
 
@@ -10632,10 +10632,10 @@ input.rename_i3VZwA {
 /* src/features/Templates/SelectTemplateModal/TemplateItemsGrid/TemplateItem/templateItem.module.css */
 .card_DKl9Ew {
   display: flex;
-  color: #14151a;
+  border: 1px solid var(--border-action-normal);
+  color: var(--text-base-primary);
   touch-action: auto;
   -webkit-tap-highlight-color: transparent;
-  border: 1px solid #e9eaec;
   border-radius: 16px;
   flex-flow: column wrap;
   gap: 16px;
@@ -10706,7 +10706,7 @@ input.rename_i3VZwA {
 }
 
 .categoryName_BAXXOA {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   font-size: 12px;
   font-weight: 500;
   line-height: 16px;
@@ -10735,7 +10735,7 @@ input.rename_i3VZwA {
 }
 
 .categoryItem_BAXXOA:hover, .activeCategoryItem_BAXXOA {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
 }
 
 @media (max-width: 768px) {
@@ -10749,12 +10749,12 @@ input.rename_i3VZwA {
   position: relative;
   display: inline-block;
   text-align: left;
-  color: #0f132499;
+  color: var(--text-base-secondary);
 }
 
 .dropdownButton_GA2Vsw {
   display: flex;
-  color: #0f132499;
+  color: var(--text-base-secondary);
   letter-spacing: -.005em;
   background: none;
   border: none;
@@ -10771,14 +10771,14 @@ input.rename_i3VZwA {
 }
 
 .dropdownButton_GA2Vsw:hover {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
 }
 
 .dropdownMenu_GA2Vsw {
   position: absolute;
+  background-color: var(--background-surface-default);
   z-index: 1;
-  background-color: #fff;
-  border: 1px solid #dee0e3;
+  border: 1px solid var(--border-action-normal);
   border-radius: 8px;
   width: 180px;
   padding: 4px;
@@ -10799,7 +10799,7 @@ input.rename_i3VZwA {
 }
 
 .dropdownItemActive_GA2Vsw, .dropdownItem_GA2Vsw:hover {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
 }
 
 /* src/features/ToolsPanel/Buttons/EventList/EventList.module.css */

package/dist/example.html

@@ -31,8 +31,20 @@
       rel="stylesheet"
     />
     
-  <link rel="stylesheet" crossorigin href="/chunk-ne64pvg3.css"><script src="/env.js"></script>
-<script type="module" crossorigin src="/chunk-zfnz46n9.js"></script></head>
+    <script src="/env.js"></script>
+<script>
+      (function () {
+        var s = localStorage.getItem("ui-theme");
+        var t =
+          s === "light" || s === "dark"
+            ? s
+            : window.matchMedia("(prefers-color-scheme: dark)").matches
+              ? "dark"
+              : "light";
+        document.documentElement.setAttribute("data-theme", t);
+      })();
+    </script>
+  <link rel="stylesheet" crossorigin href="/chunk-dr0g41aw.css"><script type="module" crossorigin src="/chunk-zfnz46n9.js"></script></head>
 
   <body
     style="

package/dist/index.css

@@ -2616,8 +2616,8 @@ a.link_jFMnzg {
 /* src/features/UserPlan/PlanCard.module.css */
 .card_s5OnKw {
   background-color: var(--bg-color);
+  border: 1px solid var(--border-action-normal);
   display: flex;
-  border: 1px solid #0a0f2914;
   border-radius: 24px;
   flex-direction: column;
   align-items: stretch;
@@ -2629,7 +2629,7 @@ a.link_jFMnzg {
 }
 
 .basic_s5OnKw {
-  --bg-color: #fff;
+  --bg-color: var(--background-surface-default);
 }
 
 .plus_s5OnKw {
@@ -2652,13 +2652,13 @@ a.link_jFMnzg {
 }
 
 .price_s5OnKw {
-  color: #14151a;
+  color: var(--text-base-primary);
   font-size: 36px;
   font-weight: 500;
 }
 
 .models_s5OnKw {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   font-size: 16px;
 }
 
@@ -2673,7 +2673,7 @@ a.link_jFMnzg {
 }
 
 .feature_s5OnKw {
-  color: #14151a;
+  color: var(--text-base-primary);
   position: relative;
   display: flex;
   align-items:  center;
@@ -2699,9 +2699,9 @@ a.link_jFMnzg {
 }
 
 .unlimited_s5OnKw {
+  background-color: var(--background-surface-default);
   display: flex;
-  color: #14151a;
-  background-color: #fff;
+  color: var(--text-base-primary);
   border-radius: 360px;
   align-items:  center;
   gap: 4px;
@@ -2723,7 +2723,7 @@ a.link_jFMnzg {
 }
 
 .priceValue_s5OnKw {
-  color: #14151a;
+  color: var(--text-base-primary);
 }
 
 .priceWrapper2_s5OnKw {
@@ -2761,7 +2761,7 @@ a.link_jFMnzg {
 }
 
 .tooltipIcon_s5OnKw {
-  color: #0f132499;
+  color: var(--text-base-secondary);
 }
 
 .tooltip_s5OnKw {
@@ -3025,7 +3025,7 @@ a.link_jFMnzg {
 
 .downgradeConfirmation_eT4yLw {
   display: flex;
-  color: #14151a;
+  color: var(--text-base-primary);
   text-align: left;
   flex-direction: column;
   align-items:  flex-start;
@@ -3071,12 +3071,12 @@ a.link_jFMnzg {
 
 .card_SckGZA {
   cursor: pointer;
-  color: #14151a;
+  color: var(--text-base-primary);
+  background: var(--background-surface-default);
+  border: 1px solid var(--border-action-normal);
   box-sizing: border-box;
   display: flex;
   isolation: isolate;
-  background: #fff;
-  border: 1px solid #dee0e3;
   border-radius: 16px;
   flex-direction: column;
   justify-content: space-between;
@@ -3149,7 +3149,7 @@ a.link_jFMnzg {
 }
 
 .description_SckGZA {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   font-family: Manrope, sans-serif;
   font-size: 16px;
   font-weight: 400;
@@ -3195,8 +3195,8 @@ a.link_jFMnzg {
 .coin_SckGZA {
   box-sizing: border-box;
   display: flex;
-  background: #fff;
-  border: 1px solid #dee0e3;
+  background: var(--background-surface-default);
+  border: 1px solid var(--border-action-normal);
   border-radius: 10px;
   flex-direction: column;
   flex: none;
@@ -5368,12 +5368,12 @@ a.link_jFMnzg {
 
 .cardsScroll_tVQJew::-webkit-scrollbar-thumb {
   display: block;
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 2px;
 }
 
 .back_tVQJew {
-  color: #14151a;
+  color: var(--text-base-primary);
   flex: 1;
   align-self:  flex-start;
   width: auto;
@@ -5383,7 +5383,7 @@ a.link_jFMnzg {
 }
 
 .plansBtn_tVQJew {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   display: flex;
   cursor: pointer;
   align-self:  flex-start;
@@ -5435,7 +5435,7 @@ a.link_jFMnzg {
 
 .downgradeConfirmation_tVQJew {
   display: flex;
-  color: #14151a;
+  color: var(--text-base-primary);
   text-align: left;
   flex-direction: column;
   align-items:  flex-start;
@@ -5452,7 +5452,7 @@ a.link_jFMnzg {
 }
 
 .badge_tVQJew {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
   border-radius: 8px;
   padding: 2px 6px;
   transition: all .3s;
@@ -5477,7 +5477,7 @@ a.link_jFMnzg {
 }
 
 .row_0VfwRg {
-  border-bottom: 1px solid #e9eaec;
+  border-bottom: 1px solid var(--border-action-normal);
 }
 
 .limit_0VfwRg {
@@ -5494,7 +5494,7 @@ a.link_jFMnzg {
 
 .table_0VfwRg th {
   text-align: left;
-  border-right: 1px solid #e9eaec;
+  border-right: 1px solid var(--border-action-normal);
   font-weight: 400;
 }
 
@@ -5503,7 +5503,7 @@ a.link_jFMnzg {
 }
 
 .header_0VfwRg {
-  background-color: #f7f7f8;
+  background-color: var(--background-button-tertiary);
 }
 
 td.currentTariff_0VfwRg {
@@ -5521,18 +5521,18 @@ td.currentTariff_0VfwRg {
 }
 
 .modelName_0VfwRg {
-  color: #14151a;
+  color: var(--text-base-primary);
   font-weight: 500;
 }
 
 .modelDescription_0VfwRg {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   font-size: 12px;
   font-weight: 400;
 }
 
 .modelDisabled_0VfwRg {
-  color: #0a0f2940;
+  color: var(--text-base-quaternary);
 }
 
 .modelDisabled_0VfwRg.currentTariff_0VfwRg {
@@ -5540,7 +5540,7 @@ td.currentTariff_0VfwRg {
 }
 
 .modelLimitReached_0VfwRg {
-  color: #0d112666;
+  color: var(--text-base-secondary);
 }
 
 .limits_0VfwRg {
@@ -5597,7 +5597,7 @@ td.currentTariff_0VfwRg {
 
 /* src/features/UserPlan/UserPlanUsage.module.css */
 .planUsage_kgooGA {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   text-align: left;
   width: 100%;
   font-size: 16px;
@@ -5608,7 +5608,7 @@ td.currentTariff_0VfwRg {
 }
 
 .basicPlan_kgooGA {
-  color: #14151a;
+  color: var(--text-base-primary);
 }
 
 .plusPlan_kgooGA {
@@ -5628,7 +5628,7 @@ td.currentTariff_0VfwRg {
 }
 
 .paymentActions_kgooGA {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   text-align: center;
   display: flex;
   justify-content: center;
@@ -5645,7 +5645,7 @@ td.currentTariff_0VfwRg {
 
 .link_kgooGA {
   position: relative;
-  color: #0f132499;
+  color: var(--text-base-secondary);
   text-decoration: none;
   font-family: Manrope, Arial;
   font-size: 16px;
@@ -5658,7 +5658,7 @@ td.currentTariff_0VfwRg {
 .link_kgooGA:after {
   content: "";
   position: absolute;
-  background-color: #0a0f2914;
+  background-color: var(--background-hover-subtle-strong);
   width: 100%;
   height: 2px;
   bottom: -3px;
@@ -5691,7 +5691,7 @@ td.currentTariff_0VfwRg {
 }
 
 .cancel_kgooGA {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   cursor: pointer;
   text-decoration: underline;
   font-size: 16px;
@@ -10046,7 +10046,7 @@ input.rename_i3VZwA {
 
 .wrapper_jjcYzw {
   display: flex;
-  color: #14151a;
+  color: var(--text-base-primary);
   touch-action: auto;
   -webkit-overflow-scrolling: touch;
   gap: 16px;
@@ -10056,7 +10056,7 @@ input.rename_i3VZwA {
 }
 
 .sidebar_jjcYzw {
-  border-right: 1px solid #e9eaec;
+  border-right: 1px solid var(--border-action-normal);
   width: 280px;
   padding: 16px 0;
 }
@@ -10134,7 +10134,7 @@ input.rename_i3VZwA {
 }
 
 .noTemplatesText_jjcYzw {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   letter-spacing: -.014em;
   margin-top: 12px;
   font-family: Manrope;
@@ -10168,14 +10168,14 @@ input.rename_i3VZwA {
   }
 
   .burgerMenuContainer_jjcYzw > button:hover {
-    background-color: #0a0f290a;
+    background-color: var(--background-hover-subtle);
   }
 
   .burgerMenu_jjcYzw {
     display: none;
     position: absolute;
     z-index: 5;
-    border: 1px solid #e9eaec;
+    border: 1px solid var(--border-action-normal);
     border-radius: 10px;
     min-width: 200px;
     padding: 0 8px 12px 16px;
@@ -10184,7 +10184,7 @@ input.rename_i3VZwA {
 
   .activeBurgerMenu_jjcYzw {
     display: block;
-    background-color: #fff;
+    background-color: var(--background-surface-default);
   }
 }
 
@@ -10214,7 +10214,7 @@ input.rename_i3VZwA {
 
 .scrollContainer_sz3AqQ::-webkit-scrollbar-thumb {
   display: block;
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 4px;
 }
 
@@ -10227,7 +10227,7 @@ input.rename_i3VZwA {
 .backBtn_sz3AqQ {
   display: flex;
   letter-spacing: -.005em;
-  color: #0f132499;
+  color: var(--text-base-secondary);
   cursor: pointer;
   align-items:  center;
   gap: 4px;
@@ -10240,7 +10240,7 @@ input.rename_i3VZwA {
 
 .mainSection_sz3AqQ {
   display: flex;
-  border: 1px solid #e9eaec;
+  border: 1px solid var(--border-action-normal);
   border-radius: 16px;
   flex-wrap: nowrap;
   justify-content: center;
@@ -10272,7 +10272,7 @@ input.rename_i3VZwA {
 }
 
 .description_sz3AqQ {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   letter-spacing: -.01em;
   word-break: break-word;
   display: inline-block;
@@ -10296,7 +10296,7 @@ input.rename_i3VZwA {
 
 .description_sz3AqQ::-webkit-scrollbar-thumb {
   display: block;
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 4px;
 }
 
@@ -10375,7 +10375,7 @@ input.rename_i3VZwA {
 
 .templatesGrid_2qNmAA::-webkit-scrollbar-thumb {
   display: block;
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 4px;
 }
 
@@ -10397,10 +10397,10 @@ input.rename_i3VZwA {
 /* src/features/Templates/SelectTemplateModal/TemplateItemsGrid/TemplateItem/templateItem.module.css */
 .card_DKl9Ew {
   display: flex;
-  color: #14151a;
+  border: 1px solid var(--border-action-normal);
+  color: var(--text-base-primary);
   touch-action: auto;
   -webkit-tap-highlight-color: transparent;
-  border: 1px solid #e9eaec;
   border-radius: 16px;
   flex-flow: column wrap;
   gap: 16px;
@@ -10471,7 +10471,7 @@ input.rename_i3VZwA {
 }
 
 .categoryName_BAXXOA {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   font-size: 12px;
   font-weight: 500;
   line-height: 16px;
@@ -10500,7 +10500,7 @@ input.rename_i3VZwA {
 }
 
 .categoryItem_BAXXOA:hover, .activeCategoryItem_BAXXOA {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
 }
 
 @media (max-width: 768px) {
@@ -10514,12 +10514,12 @@ input.rename_i3VZwA {
   position: relative;
   display: inline-block;
   text-align: left;
-  color: #0f132499;
+  color: var(--text-base-secondary);
 }
 
 .dropdownButton_GA2Vsw {
   display: flex;
-  color: #0f132499;
+  color: var(--text-base-secondary);
   letter-spacing: -.005em;
   background: none;
   border: none;
@@ -10536,14 +10536,14 @@ input.rename_i3VZwA {
 }
 
 .dropdownButton_GA2Vsw:hover {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
 }
 
 .dropdownMenu_GA2Vsw {
   position: absolute;
+  background-color: var(--background-surface-default);
   z-index: 1;
-  background-color: #fff;
-  border: 1px solid #dee0e3;
+  border: 1px solid var(--border-action-normal);
   border-radius: 8px;
   width: 180px;
   padding: 4px;
@@ -10564,7 +10564,7 @@ input.rename_i3VZwA {
 }
 
 .dropdownItemActive_GA2Vsw, .dropdownItem_GA2Vsw:hover {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
 }
 
 /* src/features/ToolsPanel/Buttons/EventList/EventList.module.css */

package/dist/index.html

@@ -31,8 +31,20 @@
       rel="stylesheet"
     />
     
-  <link rel="stylesheet" crossorigin href="/chunk-ne64pvg3.css"><script src="/env.js"></script>
-<script type="module" crossorigin src="/chunk-zfnz46n9.js"></script></head>
+    <script src="/env.js"></script>
+<script>
+      (function () {
+        var s = localStorage.getItem("ui-theme");
+        var t =
+          s === "light" || s === "dark"
+            ? s
+            : window.matchMedia("(prefers-color-scheme: dark)").matches
+              ? "dark"
+              : "light";
+        document.documentElement.setAttribute("data-theme", t);
+      })();
+    </script>
+  <link rel="stylesheet" crossorigin href="/chunk-dr0g41aw.css"><script type="module" crossorigin src="/chunk-zfnz46n9.js"></script></head>
 
   <body
     style="

package/dist/spa.css

@@ -2619,8 +2619,8 @@ a.link_jFMnzg {
 /* src/features/UserPlan/PlanCard.module.css */
 .card_s5OnKw {
   background-color: var(--bg-color);
+  border: 1px solid var(--border-action-normal);
   display: flex;
-  border: 1px solid #0a0f2914;
   border-radius: 24px;
   flex-direction: column;
   align-items: stretch;
@@ -2632,7 +2632,7 @@ a.link_jFMnzg {
 }
 
 .basic_s5OnKw {
-  --bg-color: #fff;
+  --bg-color: var(--background-surface-default);
 }
 
 .plus_s5OnKw {
@@ -2655,13 +2655,13 @@ a.link_jFMnzg {
 }
 
 .price_s5OnKw {
-  color: #14151a;
+  color: var(--text-base-primary);
   font-size: 36px;
   font-weight: 500;
 }
 
 .models_s5OnKw {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   font-size: 16px;
 }
 
@@ -2676,7 +2676,7 @@ a.link_jFMnzg {
 }
 
 .feature_s5OnKw {
-  color: #14151a;
+  color: var(--text-base-primary);
   position: relative;
   display: flex;
   align-items:  center;
@@ -2702,9 +2702,9 @@ a.link_jFMnzg {
 }
 
 .unlimited_s5OnKw {
+  background-color: var(--background-surface-default);
   display: flex;
-  color: #14151a;
-  background-color: #fff;
+  color: var(--text-base-primary);
   border-radius: 360px;
   align-items:  center;
   gap: 4px;
@@ -2726,7 +2726,7 @@ a.link_jFMnzg {
 }
 
 .priceValue_s5OnKw {
-  color: #14151a;
+  color: var(--text-base-primary);
 }
 
 .priceWrapper2_s5OnKw {
@@ -2764,7 +2764,7 @@ a.link_jFMnzg {
 }
 
 .tooltipIcon_s5OnKw {
-  color: #0f132499;
+  color: var(--text-base-secondary);
 }
 
 .tooltip_s5OnKw {
@@ -3028,7 +3028,7 @@ a.link_jFMnzg {
 
 .downgradeConfirmation_eT4yLw {
   display: flex;
-  color: #14151a;
+  color: var(--text-base-primary);
   text-align: left;
   flex-direction: column;
   align-items:  flex-start;
@@ -3074,12 +3074,12 @@ a.link_jFMnzg {
 
 .card_SckGZA {
   cursor: pointer;
-  color: #14151a;
+  color: var(--text-base-primary);
+  background: var(--background-surface-default);
+  border: 1px solid var(--border-action-normal);
   box-sizing: border-box;
   display: flex;
   isolation: isolate;
-  background: #fff;
-  border: 1px solid #dee0e3;
   border-radius: 16px;
   flex-direction: column;
   justify-content: space-between;
@@ -3152,7 +3152,7 @@ a.link_jFMnzg {
 }
 
 .description_SckGZA {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   font-family: Manrope, sans-serif;
   font-size: 16px;
   font-weight: 400;
@@ -3198,8 +3198,8 @@ a.link_jFMnzg {
 .coin_SckGZA {
   box-sizing: border-box;
   display: flex;
-  background: #fff;
-  border: 1px solid #dee0e3;
+  background: var(--background-surface-default);
+  border: 1px solid var(--border-action-normal);
   border-radius: 10px;
   flex-direction: column;
   flex: none;
@@ -5371,12 +5371,12 @@ a.link_jFMnzg {
 
 .cardsScroll_tVQJew::-webkit-scrollbar-thumb {
   display: block;
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 2px;
 }
 
 .back_tVQJew {
-  color: #14151a;
+  color: var(--text-base-primary);
   flex: 1;
   align-self:  flex-start;
   width: auto;
@@ -5386,7 +5386,7 @@ a.link_jFMnzg {
 }
 
 .plansBtn_tVQJew {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   display: flex;
   cursor: pointer;
   align-self:  flex-start;
@@ -5438,7 +5438,7 @@ a.link_jFMnzg {
 
 .downgradeConfirmation_tVQJew {
   display: flex;
-  color: #14151a;
+  color: var(--text-base-primary);
   text-align: left;
   flex-direction: column;
   align-items:  flex-start;
@@ -5455,7 +5455,7 @@ a.link_jFMnzg {
 }
 
 .badge_tVQJew {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
   border-radius: 8px;
   padding: 2px 6px;
   transition: all .3s;
@@ -5480,7 +5480,7 @@ a.link_jFMnzg {
 }
 
 .row_0VfwRg {
-  border-bottom: 1px solid #e9eaec;
+  border-bottom: 1px solid var(--border-action-normal);
 }
 
 .limit_0VfwRg {
@@ -5497,7 +5497,7 @@ a.link_jFMnzg {
 
 .table_0VfwRg th {
   text-align: left;
-  border-right: 1px solid #e9eaec;
+  border-right: 1px solid var(--border-action-normal);
   font-weight: 400;
 }
 
@@ -5506,7 +5506,7 @@ a.link_jFMnzg {
 }
 
 .header_0VfwRg {
-  background-color: #f7f7f8;
+  background-color: var(--background-button-tertiary);
 }
 
 td.currentTariff_0VfwRg {
@@ -5524,18 +5524,18 @@ td.currentTariff_0VfwRg {
 }
 
 .modelName_0VfwRg {
-  color: #14151a;
+  color: var(--text-base-primary);
   font-weight: 500;
 }
 
 .modelDescription_0VfwRg {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   font-size: 12px;
   font-weight: 400;
 }
 
 .modelDisabled_0VfwRg {
-  color: #0a0f2940;
+  color: var(--text-base-quaternary);
 }
 
 .modelDisabled_0VfwRg.currentTariff_0VfwRg {
@@ -5543,7 +5543,7 @@ td.currentTariff_0VfwRg {
 }
 
 .modelLimitReached_0VfwRg {
-  color: #0d112666;
+  color: var(--text-base-secondary);
 }
 
 .limits_0VfwRg {
@@ -5600,7 +5600,7 @@ td.currentTariff_0VfwRg {
 
 /* src/features/UserPlan/UserPlanUsage.module.css */
 .planUsage_kgooGA {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   text-align: left;
   width: 100%;
   font-size: 16px;
@@ -5611,7 +5611,7 @@ td.currentTariff_0VfwRg {
 }
 
 .basicPlan_kgooGA {
-  color: #14151a;
+  color: var(--text-base-primary);
 }
 
 .plusPlan_kgooGA {
@@ -5631,7 +5631,7 @@ td.currentTariff_0VfwRg {
 }
 
 .paymentActions_kgooGA {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   text-align: center;
   display: flex;
   justify-content: center;
@@ -5648,7 +5648,7 @@ td.currentTariff_0VfwRg {
 
 .link_kgooGA {
   position: relative;
-  color: #0f132499;
+  color: var(--text-base-secondary);
   text-decoration: none;
   font-family: Manrope, Arial;
   font-size: 16px;
@@ -5661,7 +5661,7 @@ td.currentTariff_0VfwRg {
 .link_kgooGA:after {
   content: "";
   position: absolute;
-  background-color: #0a0f2914;
+  background-color: var(--background-hover-subtle-strong);
   width: 100%;
   height: 2px;
   bottom: -3px;
@@ -5694,7 +5694,7 @@ td.currentTariff_0VfwRg {
 }
 
 .cancel_kgooGA {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   cursor: pointer;
   text-decoration: underline;
   font-size: 16px;
@@ -10049,7 +10049,7 @@ input.rename_i3VZwA {
 
 .wrapper_jjcYzw {
   display: flex;
-  color: #14151a;
+  color: var(--text-base-primary);
   touch-action: auto;
   -webkit-overflow-scrolling: touch;
   gap: 16px;
@@ -10059,7 +10059,7 @@ input.rename_i3VZwA {
 }
 
 .sidebar_jjcYzw {
-  border-right: 1px solid #e9eaec;
+  border-right: 1px solid var(--border-action-normal);
   width: 280px;
   padding: 16px 0;
 }
@@ -10137,7 +10137,7 @@ input.rename_i3VZwA {
 }
 
 .noTemplatesText_jjcYzw {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   letter-spacing: -.014em;
   margin-top: 12px;
   font-family: Manrope;
@@ -10171,14 +10171,14 @@ input.rename_i3VZwA {
   }
 
   .burgerMenuContainer_jjcYzw > button:hover {
-    background-color: #0a0f290a;
+    background-color: var(--background-hover-subtle);
   }
 
   .burgerMenu_jjcYzw {
     display: none;
     position: absolute;
     z-index: 5;
-    border: 1px solid #e9eaec;
+    border: 1px solid var(--border-action-normal);
     border-radius: 10px;
     min-width: 200px;
     padding: 0 8px 12px 16px;
@@ -10187,7 +10187,7 @@ input.rename_i3VZwA {
 
   .activeBurgerMenu_jjcYzw {
     display: block;
-    background-color: #fff;
+    background-color: var(--background-surface-default);
   }
 }
 
@@ -10217,7 +10217,7 @@ input.rename_i3VZwA {
 
 .scrollContainer_sz3AqQ::-webkit-scrollbar-thumb {
   display: block;
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 4px;
 }
 
@@ -10230,7 +10230,7 @@ input.rename_i3VZwA {
 .backBtn_sz3AqQ {
   display: flex;
   letter-spacing: -.005em;
-  color: #0f132499;
+  color: var(--text-base-secondary);
   cursor: pointer;
   align-items:  center;
   gap: 4px;
@@ -10243,7 +10243,7 @@ input.rename_i3VZwA {
 
 .mainSection_sz3AqQ {
   display: flex;
-  border: 1px solid #e9eaec;
+  border: 1px solid var(--border-action-normal);
   border-radius: 16px;
   flex-wrap: nowrap;
   justify-content: center;
@@ -10275,7 +10275,7 @@ input.rename_i3VZwA {
 }
 
 .description_sz3AqQ {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   letter-spacing: -.01em;
   word-break: break-word;
   display: inline-block;
@@ -10299,7 +10299,7 @@ input.rename_i3VZwA {
 
 .description_sz3AqQ::-webkit-scrollbar-thumb {
   display: block;
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 4px;
 }
 
@@ -10378,7 +10378,7 @@ input.rename_i3VZwA {
 
 .templatesGrid_2qNmAA::-webkit-scrollbar-thumb {
   display: block;
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 4px;
 }
 
@@ -10400,10 +10400,10 @@ input.rename_i3VZwA {
 /* src/features/Templates/SelectTemplateModal/TemplateItemsGrid/TemplateItem/templateItem.module.css */
 .card_DKl9Ew {
   display: flex;
-  color: #14151a;
+  border: 1px solid var(--border-action-normal);
+  color: var(--text-base-primary);
   touch-action: auto;
   -webkit-tap-highlight-color: transparent;
-  border: 1px solid #e9eaec;
   border-radius: 16px;
   flex-flow: column wrap;
   gap: 16px;
@@ -10474,7 +10474,7 @@ input.rename_i3VZwA {
 }
 
 .categoryName_BAXXOA {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   font-size: 12px;
   font-weight: 500;
   line-height: 16px;
@@ -10503,7 +10503,7 @@ input.rename_i3VZwA {
 }
 
 .categoryItem_BAXXOA:hover, .activeCategoryItem_BAXXOA {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
 }
 
 @media (max-width: 768px) {
@@ -10517,12 +10517,12 @@ input.rename_i3VZwA {
   position: relative;
   display: inline-block;
   text-align: left;
-  color: #0f132499;
+  color: var(--text-base-secondary);
 }
 
 .dropdownButton_GA2Vsw {
   display: flex;
-  color: #0f132499;
+  color: var(--text-base-secondary);
   letter-spacing: -.005em;
   background: none;
   border: none;
@@ -10539,14 +10539,14 @@ input.rename_i3VZwA {
 }
 
 .dropdownButton_GA2Vsw:hover {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
 }
 
 .dropdownMenu_GA2Vsw {
   position: absolute;
+  background-color: var(--background-surface-default);
   z-index: 1;
-  background-color: #fff;
-  border: 1px solid #dee0e3;
+  border: 1px solid var(--border-action-normal);
   border-radius: 8px;
   width: 180px;
   padding: 4px;
@@ -10567,7 +10567,7 @@ input.rename_i3VZwA {
 }
 
 .dropdownItemActive_GA2Vsw, .dropdownItem_GA2Vsw:hover {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
 }
 
 /* src/features/ToolsPanel/Buttons/EventList/EventList.module.css */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "microboard-ui-temp",
-  "version": "0.9.7",
+  "version": "0.9.9",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "type": "module",