microboard-ui-temp 0.9.0 → 0.9.2

package/dist/{chunk-zxdsfc4g.css → chunk-ra6rxe11.css}

@@ -80,9 +80,18 @@
   --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;
@@ -90,9 +99,11 @@
   --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;
 }
 
@@ -100,9 +111,18 @@
   --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;
@@ -110,9 +130,11 @@
   --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;
 }
 
 * {
@@ -427,21 +449,21 @@ input:-webkit-autofill:active {
 }
 
 .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);
@@ -450,13 +472,13 @@ input:-webkit-autofill:active {
 }
 
 .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;
 }
@@ -579,15 +601,15 @@ input:-webkit-autofill:active {
 }
 
 .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) {
@@ -595,29 +617,29 @@ input:-webkit-autofill:active {
 }
 
 .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) {
@@ -626,24 +648,24 @@ input:-webkit-autofill:active {
 }
 
 .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 {
@@ -652,12 +674,12 @@ input:-webkit-autofill:active {
 }
 
 .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;
 }
 
@@ -667,104 +689,7 @@ input:-webkit-autofill:active {
 }
 
 .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 {
@@ -2081,7 +2006,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;
@@ -2164,7 +2089,7 @@ body {
 
 .unauthRights_jFMnzg {
   padding: 8px 10px;
-  color: #000 !important;
+  color: var(--text-base-primary) !important;
 }
 
 .unauthBtns_jFMnzg {
@@ -2218,18 +2143,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);
   }
 }
 
@@ -2239,11 +2164,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;
@@ -2296,7 +2221,7 @@ body {
 
 .icon_jFMnzg {
   display: flex;
-  background-color: #fff;
+  background-color: var(--background-button-secondary);
   flex-direction: column;
   justify-content: center;
   align-items:  center;
@@ -2306,7 +2231,7 @@ body {
 }
 
 .iconActive_jFMnzg {
-  background-color: #f7f7f8;
+  background-color: var(--background-button-secondary-hover);
 }
 
 .icon_jFMnzg:first-child {
@@ -2315,7 +2240,7 @@ body {
 
 .icon_jFMnzg:hover {
   cursor: pointer;
-  background-color: #f7f7f8;
+  background-color: var(--background-button-secondary-hover);
 }
 
 .icon_jFMnzg svg {
@@ -2331,14 +2256,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;
@@ -2349,7 +2274,7 @@ body {
 }
 
 .userPic_jFMnzg {
-  color: #696b76;
+  color: var(--icon-base-secondary);
   display: flex;
   position: relative;
   border-radius: 50%;
@@ -2397,8 +2322,8 @@ body {
 }
 
 .modal_jFMnzg {
+  background-color: var(--background-surface-default);
   display: flex;
-  background-color: #fff;
   border-radius: 24px;
   flex-direction: column;
   gap: 32px;
@@ -2545,7 +2470,7 @@ body {
 }
 
 .userDropDownButton_jFMnzg {
-  color: #14151a;
+  color: var(--text-base-primary);
   font-size: 14px;
   font-weight: 400;
 }
@@ -7419,7 +7344,7 @@ td.currentTariff_0VfwRg {
 }
 
 .list_Jwe-NQ::-webkit-scrollbar-thumb {
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 2px;
 }
 
@@ -7464,7 +7389,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 {
@@ -7570,7 +7495,7 @@ td.currentTariff_0VfwRg {
 
 .folders_5QMOig::-webkit-scrollbar-thumb {
   display: block;
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 2px;
 }
 
@@ -7599,8 +7524,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;
@@ -7666,8 +7591,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;
@@ -7725,7 +7650,7 @@ td.currentTariff_0VfwRg {
 
 .header_iZlcpA {
   display: flex;
-  color: #14151a;
+  color: var(--text-base-primary);
   cursor: pointer;
   border-radius: 10px;
   align-items:  center;
@@ -7739,24 +7664,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;
 }
@@ -7766,8 +7691,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;
@@ -7798,7 +7723,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;
@@ -7812,11 +7737,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 {
@@ -7827,14 +7752,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;
@@ -7849,13 +7774,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 {
@@ -7873,7 +7798,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;
@@ -7887,11 +7812,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 {
@@ -7907,7 +7832,7 @@ td.currentTariff_0VfwRg {
 }
 
 .placeholder_IZQRBA {
-  background-color: #c8cacf;
+  background-color: var(--border-action-normal);
   width: 100%;
   height: 2px;
 }
@@ -9216,10 +9141,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;
@@ -9238,7 +9163,7 @@ input.rename_i3VZwA {
 }
 
 .exportDropdown_i3VZwA > div:hover {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
 }
 
 .exportDropdownItemTitle_i3VZwA {
@@ -9256,7 +9181,7 @@ input.rename_i3VZwA {
 }
 
 .exportDropdown_i3VZwA p {
-  color: #14151a;
+  color: var(--text-base-primary);
   margin: 0;
   font-size: 14px;
   line-height: 20px;
@@ -11758,7 +11683,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;
@@ -11770,9 +11695,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 {
@@ -11781,7 +11706,7 @@ input.rename_i3VZwA {
 
 .icon_MRZoRw:hover {
   cursor: pointer;
-  background-color: #f7f7f8;
+  background-color: var(--background-button-secondary-hover);
 }
 
 .icon_MRZoRw svg {
@@ -11793,7 +11718,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 */
@@ -13841,7 +13766,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;
@@ -13882,7 +13807,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;
 }
 
@@ -13914,9 +13839,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;
@@ -13929,6 +13854,7 @@ audio::-webkit-media-controls-enclosure {
 
 .search_Ft-RRw input {
   outline: none;
+  color: var(--text-base-primary);
   background: none;
   border: none;
   flex: 1;
@@ -13938,7 +13864,7 @@ audio::-webkit-media-controls-enclosure {
 }
 
 .search_Ft-RRw input::placeholder {
-  color: #9ca3af;
+  color: var(--text-base-secondary);
   font-weight: 200;
 }
 
@@ -13969,17 +13895,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;
@@ -14028,21 +13954,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 {
@@ -14075,14 +14001,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;
 }