microboard-ui-temp 0.9.0 → 0.9.2

package/dist/spa.css

@@ -246,21 +246,21 @@
 }
 
 .secondary_XNHIwg {
-  --background-color: #fff;
-  --background-hover-color: #f7f7f8;
-  --background-active-color: #f7f7f8;
-  --background-disabled-color: #fff;
-  --content-color: #14151a;
-  --content-hover-color: #14151a;
+  --background-color: var(--background-button-secondary);
+  --background-hover-color: var(--background-button-secondary-hover);
+  --background-active-color: var(--background-button-secondary-hover);
+  --background-disabled-color: var(--background-button-secondary);
+  --content-color: var(--text-base-primary);
+  --content-hover-color: var(--text-base-primary);
   --content-active-color: #924fe8;
-  --content-disabled-color: #b1b3bb;
+  --content-disabled-color: var(--text-disabled);
   --focus-outline-color: #e3d9ff;
 }
 
 .tertiary_XNHIwg {
-  --background-color: #f5f6f7;
-  --background-hover-color: #ececee;
-  --background-active-color: #ececee;
+  --background-color: var(--background-button-tertiary);
+  --background-hover-color: var(--background-button-tertiary-hover);
+  --background-active-color: var(--background-button-tertiary-hover);
   --content-color: var(--text-base-primary);
   --content-hover-color: var(--text-base-primary);
   --content-active-color: var(--text-base-primary);
@@ -269,13 +269,13 @@
 }
 
 .black_XNHIwg {
-  --background-color: #14151a;
-  --background-hover-color: #1f2228;
-  --background-active-color: #ececee;
-  --background-disabled-color: #e9eaec;
-  --content-color: #fff;
-  --content-hover-color: var(--text-base-primary);
-  --content-active-color: var(--text-base-primary);
+  --background-color: var(--background-button-primary);
+  --background-hover-color: var(--background-button-primary-hover);
+  --background-active-color: var(--background-button-primary-hover);
+  --background-disabled-color: var(--border-action-normal);
+  --content-color: var(--color-button-primary);
+  --content-hover-color: var(--color-button-primary);
+  --content-active-color: var(--color-button-primary);
   --content-disabled-color: var(--text-base-quaternary);
   --focus-outline-color: #e3d9ff;
 }
@@ -398,15 +398,15 @@
 }
 
 .primary_XNHIwg {
-  color: #fff;
-  background-color: #14151a;
-  border: 1px solid #14151a;
+  border: 1px solid var(--background-button-primary);
+  background-color: var(--background-button-primary);
+  color: var(--color-button-primary);
   box-shadow: 0 1px 2px #14151a0d;
 }
 
 .primary_XNHIwg:hover:not(:disabled) {
-  color: #fff;
-  background-color: #1f2228;
+  background-color: var(--background-button-primary-hover);
+  color: var(--color-button-primary);
 }
 
 .primary_XNHIwg:active:not(:disabled) {
@@ -414,29 +414,29 @@
 }
 
 .primary_XNHIwg:disabled, .primary_XNHIwg:disabled:hover {
-  color: #0a0f2940;
-  background-color: #e9eaec;
-  border-color: #e9eaec;
+  border-color: var(--border-action-normal);
+  background-color: var(--border-action-normal);
+  color: var(--text-base-quaternary);
 }
 
 .primary_XNHIwg.loading_XNHIwg {
-  color: #fff;
-  background-color: #14151a;
-  border-color: #14151a;
+  border-color: var(--background-button-primary);
+  background-color: var(--background-button-primary);
+  color: var(--color-button-primary);
 }
 
 .quaternary_XNHIwg, .quaternary_XNHIwg:disabled {
-  color: #14151a;
-  background-color: #0a0f290a;
+  color: var(--text-base-primary);
+  background-color: var(--background-hover-subtle);
 }
 
 .quaternary_XNHIwg:disabled {
-  color: #0a0f2940;
+  color: var(--text-disabled);
 }
 
 .quaternary_XNHIwg:hover:not(:disabled) {
-  color: #14151a;
-  background-color: #0a0f2914;
+  color: var(--text-base-primary);
+  background-color: var(--background-hover-subtle-strong);
 }
 
 .quaternary_XNHIwg:active:not(:disabled), .tertiary_XNHIwg:active:not(:disabled) {
@@ -445,24 +445,24 @@
 }
 
 .tertiary_XNHIwg {
-  color: #14151a;
-  background-color: #fff;
-  border: 1px solid #dee0e3;
+  color: var(--text-base-primary);
+  background-color: var(--background-button-tertiary);
+  border: 1px solid var(--border-action-normal);
 }
 
 .tertiary_XNHIwg:hover:not(:disabled) {
-  background-color: #f7f7f8;
+  background-color: var(--background-button-tertiary-hover);
 }
 
 .ghost_XNHIwg {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   background-color: #0000;
   font-weight: 600;
 }
 
 .ghost_XNHIwg:hover {
-  color: #0a0f2999;
-  background-color: #0a0f290a;
+  color: var(--text-base-secondary);
+  background-color: var(--background-hover-subtle);
 }
 
 .ghost_XNHIwg:active {
@@ -471,12 +471,12 @@
 }
 
 .ghost_XNHIwg:disabled {
-  color: #0a0f2940;
+  color: var(--text-disabled);
 }
 
 .ghostFilled_XNHIwg {
-  color: #0a0f2999;
-  background-color: #0a0f290a;
+  color: var(--text-base-secondary);
+  background-color: var(--background-hover-subtle);
   font-weight: 600;
 }
 
@@ -486,104 +486,7 @@
 }
 
 .ghostFilled_XNHIwg:disabled {
-  color: #0a0f2940;
-}
-
-[data-theme="dark"] .secondary_XNHIwg {
-  --background-color: var(--background-button-secondary);
-  --background-hover-color: var(--background-button-secondary-hover);
-  --background-active-color: var(--background-button-secondary-hover);
-  --background-disabled-color: var(--background-button-secondary);
-  --content-color: var(--text-base-primary);
-  --content-hover-color: var(--text-base-primary);
-  --content-disabled-color: #e8e9f04d;
-}
-
-[data-theme="dark"] .tertiary_XNHIwg {
-  --background-color: #2a2b34;
-  --background-hover-color: #373842;
-  --background-active-color: #373842;
-  --content-color: var(--text-base-primary);
-  --content-hover-color: var(--text-base-primary);
-  --content-disabled-color: #e8e9f040;
-}
-
-[data-theme="dark"] .primary_XNHIwg {
-  color: #14151a;
-  background-color: #e8e9f0;
-  border-color: #34353e;
-}
-
-[data-theme="dark"] .primary_XNHIwg:hover:not(:disabled) {
-  color: #14151a;
-  background-color: #d2d4de;
-}
-
-[data-theme="dark"] .primary_XNHIwg:disabled {
-  color: #e8e9f040;
-  background-color: #34353e;
-  border-color: #34353e;
-}
-
-[data-theme="dark"] .tertiary_XNHIwg {
-  border-color: var(--border-action-normal);
-  color: var(--text-base-primary);
-  background-color: #2a2b34;
-}
-
-[data-theme="dark"] .tertiary_XNHIwg:hover:not(:disabled) {
-  color: var(--text-base-primary);
-  background-color: #373842;
-}
-
-[data-theme="dark"] .ghost_XNHIwg {
-  color: var(--text-base-secondary);
-}
-
-[data-theme="dark"] .ghost_XNHIwg:hover {
-  color: var(--text-base-secondary);
-  background-color: #e8e9f00f;
-}
-
-[data-theme="dark"] .ghost_XNHIwg:disabled {
-  color: #e8e9f040;
-}
-
-[data-theme="dark"] .ghostFilled_XNHIwg {
-  color: var(--text-base-secondary);
-  background-color: #e8e9f00f;
-}
-
-[data-theme="dark"] .ghostFilled_XNHIwg:disabled {
-  color: #e8e9f040;
-}
-
-[data-theme="dark"] .quaternary_XNHIwg {
-  color: var(--text-base-primary);
-  background-color: #e8e9f00f;
-}
-
-[data-theme="dark"] .quaternary_XNHIwg:disabled {
-  color: var(--text-base-primary);
-  background-color: #e8e9f00f;
-}
-
-[data-theme="dark"] .quaternary_XNHIwg:disabled {
-  color: #e8e9f040;
-}
-
-[data-theme="dark"] .quaternary_XNHIwg:hover:not(:disabled) {
-  color: var(--text-base-primary);
-  background-color: #e8e9f01a;
-}
-
-[data-theme="dark"] .black_XNHIwg {
-  --background-color: #e8e9f0;
-  --background-hover-color: #d2d4de;
-  --background-active-color: #d2d4de;
-  --content-color: #14151a;
-  --content-hover-color: #14151a;
-  --content-active-color: #14151a;
+  color: var(--text-disabled);
 }
 
 .loader_XNHIwg {
@@ -1900,7 +1803,7 @@ body {
   object-position: center;
   overflow: hidden;
   display: flex;
-  background-color: #e9eaec;
+  background-color: var(--background-badge-gray);
   border-radius: 50%;
   justify-content: center;
   align-items:  center;
@@ -1983,7 +1886,7 @@ body {
 
 .unauthRights_jFMnzg {
   padding: 8px 10px;
-  color: #000 !important;
+  color: var(--text-base-primary) !important;
 }
 
 .unauthBtns_jFMnzg {
@@ -2037,18 +1940,18 @@ body {
 }
 
 .logInBtn_jFMnzg {
-  color: #14151a;
+  background-color: var(--background-button-secondary);
+  border: 1px solid var(--border-action-normal);
+  color: var(--text-base-primary);
   white-space: nowrap;
-  background-color: #fff;
-  border: 1px solid #dee0e3;
   border-radius: 10px;
   padding: 6px 16px;
 }
 
 @media screen and (hover: hover) {
   .logInBtn_jFMnzg:hover {
-    color: #fff;
-    background-color: #1f2228;
+    background-color: var(--background-button-primary);
+    color: var(--color-button-primary);
   }
 }
 
@@ -2058,11 +1961,11 @@ body {
 
 .dropdownWrapper_jFMnzg {
   position: absolute;
+  border: 1px solid var(--border-action-normal);
+  background-color: var(--background-surface-default);
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  background-color: #fff;
-  border: 1px solid #dee0e3;
   border-radius: 12px;
   min-width: 240px;
   max-width: 250px;
@@ -2115,7 +2018,7 @@ body {
 
 .icon_jFMnzg {
   display: flex;
-  background-color: #fff;
+  background-color: var(--background-button-secondary);
   flex-direction: column;
   justify-content: center;
   align-items:  center;
@@ -2125,7 +2028,7 @@ body {
 }
 
 .iconActive_jFMnzg {
-  background-color: #f7f7f8;
+  background-color: var(--background-button-secondary-hover);
 }
 
 .icon_jFMnzg:first-child {
@@ -2134,7 +2037,7 @@ body {
 
 .icon_jFMnzg:hover {
   cursor: pointer;
-  background-color: #f7f7f8;
+  background-color: var(--background-button-secondary-hover);
 }
 
 .icon_jFMnzg svg {
@@ -2150,14 +2053,14 @@ body {
 }
 
 .icon_jFMnzg:not(:last-child) {
-  border-right: 1px solid #e9eaec;
+  border-right: 1px solid var(--border-action-normal);
 }
 
 .userPicWrapper_jFMnzg {
   display: flex;
+  background-color: var(--background-badge-gray);
   cursor: pointer;
   position: relative;
-  background-color: #e9eaec;
   border-radius: 50%;
   flex-direction: column;
   justify-content: center;
@@ -2168,7 +2071,7 @@ body {
 }
 
 .userPic_jFMnzg {
-  color: #696b76;
+  color: var(--icon-base-secondary);
   display: flex;
   position: relative;
   border-radius: 50%;
@@ -2216,8 +2119,8 @@ body {
 }
 
 .modal_jFMnzg {
+  background-color: var(--background-surface-default);
   display: flex;
-  background-color: #fff;
   border-radius: 24px;
   flex-direction: column;
   gap: 32px;
@@ -2364,7 +2267,7 @@ body {
 }
 
 .userDropDownButton_jFMnzg {
-  color: #14151a;
+  color: var(--text-base-primary);
   font-size: 14px;
   font-weight: 400;
 }
@@ -7238,7 +7141,7 @@ td.currentTariff_0VfwRg {
 }
 
 .list_Jwe-NQ::-webkit-scrollbar-thumb {
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 2px;
 }
 
@@ -7283,7 +7186,7 @@ td.currentTariff_0VfwRg {
 }
 
 .chevronBtn_Jwe-NQ:hover, .item_Jwe-NQ:hover {
-  background-color: var(--bg-action-secondary-hover, #0000000d);
+  background-color: var(--bg-action-secondary-hover);
 }
 
 .typeIcon_Jwe-NQ {
@@ -7389,7 +7292,7 @@ td.currentTariff_0VfwRg {
 
 .folders_5QMOig::-webkit-scrollbar-thumb {
   display: block;
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 2px;
 }
 
@@ -7418,8 +7321,8 @@ td.currentTariff_0VfwRg {
 
 .itemsSearch_5QMOig {
   display: flex;
-  border: 1px solid var(--border-action-normal, #0000001f);
-  background: var(--bg-action-secondary, #f5f5f7);
+  border: 1px solid var(--border-action-normal);
+  background: var(--bg-action-secondary);
   border-radius: 8px;
   flex-shrink: 0;
   align-items:  center;
@@ -7485,8 +7388,8 @@ td.currentTariff_0VfwRg {
 .add_5QMOig {
   display: flex;
   cursor: pointer;
+  border: 1px solid var(--border-action-normal);
   background: none;
-  border: 1px solid #dedfe3;
   border-radius: 10px;
   flex: 1 0;
   justify-content: center;
@@ -7544,7 +7447,7 @@ td.currentTariff_0VfwRg {
 
 .header_iZlcpA {
   display: flex;
-  color: #14151a;
+  color: var(--text-base-primary);
   cursor: pointer;
   border-radius: 10px;
   align-items:  center;
@@ -7558,24 +7461,24 @@ td.currentTariff_0VfwRg {
 }
 
 .header_iZlcpA.over_iZlcpA {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
 }
 
 @media screen and (hover: hover) {
   .header_iZlcpA:hover {
-    background-color: #0a0f290a;
+    background-color: var(--background-hover-subtle);
   }
 }
 
 .icon_iZlcpA {
-  color: #696b75;
+  color: var(--icon-base-secondary);
   display: flex;
   align-items:  center;
   gap: 4px;
 }
 
 .noContent_iZlcpA {
-  color: #0a0f2940;
+  color: var(--text-disabled);
   font-size: 14px;
   font-weight: 500;
 }
@@ -7585,8 +7488,8 @@ td.currentTariff_0VfwRg {
 }
 
 .content_iZlcpA {
+  border-left: 1px solid var(--border-action-normal);
   display: flex;
-  border-left: 1px solid #dee0e3;
   flex-direction: column;
   gap: 2px;
   padding-left: 6px;
@@ -7617,7 +7520,7 @@ td.currentTariff_0VfwRg {
 .contextMenuBtn_iZlcpA {
   position: absolute;
   cursor: pointer;
-  color: #696b76;
+  color: var(--icon-base-secondary);
   z-index: 5;
   display: none;
   border-radius: 4px;
@@ -7631,11 +7534,11 @@ td.currentTariff_0VfwRg {
 
 @media screen and (hover: hover) {
   .header_iZlcpA:hover, .contextMenuBtn_iZlcpA:hover ~ .header_iZlcpA {
-    background-color: #0a0f290a;
+    background-color: var(--background-hover-subtle);
   }
 
   .contextMenuBtn_iZlcpA:hover {
-    background-color: #0a0f2914;
+    background-color: var(--background-hover-subtle-strong);
   }
 
   .wrapper_iZlcpA:hover .contextMenuBtn_iZlcpA, .contextMenuBtn_iZlcpA:hover {
@@ -7646,14 +7549,14 @@ td.currentTariff_0VfwRg {
 /* src/entities/Folder/FolderItem.module.css */
 .wrapper_IZQRBA {
   position: relative;
-  background-color: #fff;
+  background-color: var(--background-surface-default);
 }
 
 .item_IZQRBA {
   display: flex;
   position: relative;
   overflow: visible;
-  color: #0f132499;
+  color: var(--text-base-secondary);
   cursor: pointer;
   position: relative;
   border-radius: 10px;
@@ -7668,13 +7571,13 @@ td.currentTariff_0VfwRg {
 }
 
 .icon_IZQRBA {
-  color: #696b76;
+  color: var(--icon-base-secondary);
   display: grid;
   place-items:  center;
 }
 
 .active_IZQRBA, .dragging_IZQRBA {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
 }
 
 .active_IZQRBA:before {
@@ -7692,7 +7595,7 @@ td.currentTariff_0VfwRg {
 .contextMenuBtn_IZQRBA {
   position: absolute;
   cursor: pointer;
-  color: #696b76;
+  color: var(--icon-base-secondary);
   z-index: 5;
   display: none;
   border-radius: 4px;
@@ -7706,11 +7609,11 @@ td.currentTariff_0VfwRg {
 
 @media screen and (hover: hover) {
   .item_IZQRBA:hover:not(.disableHover_IZQRBA), .contextMenuBtn_IZQRBA:hover ~ .item_IZQRBA:not(.disableHover_IZQRBA) {
-    background-color: #0a0f290a;
+    background-color: var(--background-hover-subtle);
   }
 
   .contextMenuBtn_IZQRBA:hover {
-    background-color: #0a0f2914;
+    background-color: var(--background-hover-subtle-strong);
   }
 
   .wrapper_IZQRBA:hover .contextMenuBtn_IZQRBA, .contextMenuBtn_IZQRBA:hover {
@@ -7726,7 +7629,7 @@ td.currentTariff_0VfwRg {
 }
 
 .placeholder_IZQRBA {
-  background-color: #c8cacf;
+  background-color: var(--border-action-normal);
   width: 100%;
   height: 2px;
 }
@@ -9035,10 +8938,10 @@ input.rename_i3VZwA {
 .exportDropdown_i3VZwA {
   position: absolute;
   top: calc(100% + var(--absolute-position-panel-padding));
+  background-color: var(--background-surface-default);
+  border: 1px solid var(--border-action-normal);
   display: flex;
   z-index: 100;
-  background-color: #fff;
-  border: 1px solid #cccccc80;
   border-radius: 8px;
   flex-direction: column;
   gap: 5px;
@@ -9057,7 +8960,7 @@ input.rename_i3VZwA {
 }
 
 .exportDropdown_i3VZwA > div:hover {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
 }
 
 .exportDropdownItemTitle_i3VZwA {
@@ -9075,7 +8978,7 @@ input.rename_i3VZwA {
 }
 
 .exportDropdown_i3VZwA p {
-  color: #14151a;
+  color: var(--text-base-primary);
   margin: 0;
   font-size: 14px;
   line-height: 20px;
@@ -11577,7 +11480,7 @@ input.rename_i3VZwA {
 /* src/features/UserPanel/Buttons/TogglePresenceRender/TogglePresenceRender.module.css */
 .icon_MRZoRw {
   display: flex;
-  background-color: #fff;
+  background-color: var(--background-button-secondary);
   border-left: 1px solid #0000;
   border-right: 1px solid #0000;
   flex-direction: column;
@@ -11589,9 +11492,9 @@ input.rename_i3VZwA {
 }
 
 .iconActive_MRZoRw {
+  background-color: var(--background-button-secondary-hover);
   color: #924fe8;
-  background-color: #f7f7f8;
-  border-color: #e9eaec;
+  border-color: var(--border-action-normal);
 }
 
 .icon_MRZoRw:first-child {
@@ -11600,7 +11503,7 @@ input.rename_i3VZwA {
 
 .icon_MRZoRw:hover {
   cursor: pointer;
-  background-color: #f7f7f8;
+  background-color: var(--background-button-secondary-hover);
 }
 
 .icon_MRZoRw svg {
@@ -11612,7 +11515,7 @@ input.rename_i3VZwA {
 }
 
 .icon_MRZoRw:not(:last-child) {
-  border-right: 1px solid #e9eaec;
+  border-right: 1px solid var(--border-action-normal);
 }
 
 /* src/features/UserPanel/ActionButtons/ActionButtons.module.css */
@@ -13660,7 +13563,7 @@ audio::-webkit-media-controls-enclosure {
 /* src/pages/SelectBoardPage/SelectBoardPage.module.css */
 .container_Ft-RRw {
   display: flex;
-  background-color: #fff;
+  background-color: var(--background-surface-default);
   border-radius: 8px;
   flex-direction: column;
   gap: 12px;
@@ -13701,7 +13604,7 @@ audio::-webkit-media-controls-enclosure {
 
 .folders_Ft-RRw::-webkit-scrollbar-thumb {
   display: block;
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 2px;
 }
 
@@ -13733,9 +13636,9 @@ audio::-webkit-media-controls-enclosure {
 
 .search_Ft-RRw {
   display: flex;
+  border: 1px solid var(--border-action-normal);
+  background-color: var(--background-button-secondary);
   cursor: text;
-  background-color: #fff;
-  border: 1px solid #dee0e3;
   border-radius: 8px;
   align-items:  center;
   padding-right: 10px;
@@ -13748,6 +13651,7 @@ audio::-webkit-media-controls-enclosure {
 
 .search_Ft-RRw input {
   outline: none;
+  color: var(--text-base-primary);
   background: none;
   border: none;
   flex: 1;
@@ -13757,7 +13661,7 @@ audio::-webkit-media-controls-enclosure {
 }
 
 .search_Ft-RRw input::placeholder {
-  color: #9ca3af;
+  color: var(--text-base-secondary);
   font-weight: 200;
 }
 
@@ -13788,17 +13692,17 @@ audio::-webkit-media-controls-enclosure {
 }
 
 .header_Ft-RRw h1 {
-  color: #111827;
+  color: var(--text-base-primary);
   font-size: 1.5rem;
   font-weight: 600;
 }
 
 .header_Ft-RRw .profile_Ft-RRw {
-  color: #696b76;
+  background-color: var(--background-badge-gray);
+  color: var(--icon-base-secondary);
   display: flex;
   overflow: hidden;
   cursor: pointer;
-  background-color: #e9eaec;
   border-radius: 50%;
   flex-direction: column;
   justify-content: center;
@@ -13847,21 +13751,21 @@ audio::-webkit-media-controls-enclosure {
 
 .button_Ft-RRw.primary_Ft-RRw {
   background: var(--text-base-primary);
-  color: #fff;
+  color: var(--background-surface-default);
   box-shadow: 0 1px 2px #14151a0d;
 }
 
 .button_Ft-RRw.secondary_Ft-RRw {
-  color: #111827;
-  background-color: #f3f4f6;
+  background-color: var(--background-button-tertiary);
+  color: var(--text-base-primary);
 }
 
 .button_Ft-RRw.primary_Ft-RRw:hover {
-  background-color: #333;
+  opacity: .88;
 }
 
 .button_Ft-RRw.secondary_Ft-RRw:hover {
-  background-color: #e5e7eb;
+  background-color: var(--background-button-tertiary-hover);
 }
 
 .infoMessage_Ft-RRw {
@@ -13894,14 +13798,14 @@ audio::-webkit-media-controls-enclosure {
 
 .selected_Ft-RRw {
   display: flex;
-  background-color: #f6f1fc;
+  background-color: var(--background-badge-purple-disabled);
   border-radius: 10px;
   gap: 6px;
   padding: 6px 8px;
 }
 
 .selectedIcon_Ft-RRw {
-  color: #696b75;
+  color: var(--icon-base-secondary);
   display: grid;
   place-items:  center;
 }
@@ -14611,9 +14515,18 @@ audio::-webkit-media-controls-enclosure {
   --background-surface-default: #fff;
   --background-button-secondary: #fff;
   --background-button-secondary-hover: #f7f7f8;
+  --background-button-tertiary: #f5f6f7;
+  --background-button-tertiary-hover: #ececee;
+  --background-button-primary: #14151a;
+  --background-button-primary-hover: #1f2228;
+  --color-button-primary: #fff;
   --background-badge-purple-disabled: #f7f1fd;
   --background-badge-gray: #e9eaec;
   --background-accent-purple: #924fe8;
+  --background-hover-subtle: #0a0f290a;
+  --background-hover-subtle-strong: #0a0f2914;
+  --bg-action-secondary: #f5f6f7;
+  --bg-action-secondary-hover: #0a0f290f;
   --border-action-normal: #dedfe3;
   --border-action-focus: #924fe8;
   --border-select-primary: #924fe8;
@@ -14621,9 +14534,11 @@ audio::-webkit-media-controls-enclosure {
   --text-base-secondary: #0f132499;
   --text-base-quaternary: #0a0f2940;
   --text-accent-purple: #9859e9;
+  --text-disabled: #b1b3bb;
   --icon-base-primary: #14151a;
   --icon-base-secondary: #696b76;
   --icon-accent-purple: #924fe8;
+  --scrollbar-thumb: #dee1e8;
   --absolute-position-panel-padding: 12px;
 }
 
@@ -14631,9 +14546,18 @@ audio::-webkit-media-controls-enclosure {
   --background-surface-default: #1e1f26;
   --background-button-secondary: #1e1f26;
   --background-button-secondary-hover: #2a2b34;
+  --background-button-tertiary: #2a2b34;
+  --background-button-tertiary-hover: #373842;
+  --background-button-primary: #e8e9f0;
+  --background-button-primary-hover: #d2d4de;
+  --color-button-primary: #14151a;
   --background-badge-purple-disabled: #281c3c;
   --background-badge-gray: #2d2e37;
   --background-accent-purple: #924fe8;
+  --background-hover-subtle: #e8e9f00f;
+  --background-hover-subtle-strong: #e8e9f01a;
+  --bg-action-secondary: #26272f;
+  --bg-action-secondary-hover: #e8e9f014;
   --border-action-normal: #34353e;
   --border-action-focus: #924fe8;
   --border-select-primary: #924fe8;
@@ -14641,9 +14565,11 @@ audio::-webkit-media-controls-enclosure {
   --text-base-secondary: #e8e9f099;
   --text-base-quaternary: #e8e9f040;
   --text-accent-purple: #ac78f5;
+  --text-disabled: #e8e9f04d;
   --icon-base-primary: #e8e9f0;
   --icon-base-secondary: #9496a5;
   --icon-accent-purple: #924fe8;
+  --scrollbar-thumb: #50525f;
 }
 
 * {