microboard-ui-temp 0.9.0 → 0.9.1

package/dist/spa.css

@@ -489,101 +489,113 @@
   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;
+.button_XNHIwg.secondary_XNHIwg {
+  background-color: var(--background-button-secondary);
+  color: var(--text-base-primary);
 }
 
-[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;
+@media (hover: hover) {
+  .button_XNHIwg.secondary_XNHIwg:hover:not(:disabled) {
+    background-color: var(--background-button-secondary-hover);
+    color: var(--text-base-primary);
+  }
 }
 
-[data-theme="dark"] .primary_XNHIwg {
-  color: #14151a;
-  background-color: #e8e9f0;
-  border-color: #34353e;
+.button_XNHIwg.secondary_XNHIwg:active:not([disabled]), .button_XNHIwg.secondary_XNHIwg.active_XNHIwg:not([disabled]) {
+  background-color: var(--background-button-secondary-hover);
+  color: var(--border-action-focus);
 }
 
-[data-theme="dark"] .primary_XNHIwg:hover:not(:disabled) {
-  color: #14151a;
-  background-color: #d2d4de;
+.button_XNHIwg.secondary_XNHIwg:disabled {
+  background-color: var(--background-button-secondary);
+  color: var(--text-disabled);
 }
 
-[data-theme="dark"] .primary_XNHIwg:disabled {
-  color: #e8e9f040;
-  background-color: #34353e;
-  border-color: #34353e;
+.button_XNHIwg.tertiary_XNHIwg {
+  background-color: var(--background-button-tertiary);
+  color: var(--text-base-primary);
+  border: 1px solid var(--border-action-normal);
 }
 
-[data-theme="dark"] .tertiary_XNHIwg {
-  border-color: var(--border-action-normal);
-  color: var(--text-base-primary);
-  background-color: #2a2b34;
+@media (hover: hover) {
+  .button_XNHIwg.tertiary_XNHIwg:hover:not(:disabled) {
+    background-color: var(--background-button-tertiary-hover);
+  }
 }
 
-[data-theme="dark"] .tertiary_XNHIwg:hover:not(:disabled) {
-  color: var(--text-base-primary);
-  background-color: #373842;
+.button_XNHIwg.tertiary_XNHIwg:disabled {
+  background-color: var(--background-button-tertiary);
+  color: var(--text-disabled);
 }
 
-[data-theme="dark"] .ghost_XNHIwg {
+.button_XNHIwg.ghost_XNHIwg {
   color: var(--text-base-secondary);
+  background-color: #0000;
 }
 
-[data-theme="dark"] .ghost_XNHIwg:hover {
-  color: var(--text-base-secondary);
-  background-color: #e8e9f00f;
+@media (hover: hover) {
+  .button_XNHIwg.ghost_XNHIwg:hover {
+    color: var(--text-base-secondary);
+    background-color: var(--background-hover-subtle);
+  }
 }
 
-[data-theme="dark"] .ghost_XNHIwg:disabled {
-  color: #e8e9f040;
+.button_XNHIwg.ghost_XNHIwg:disabled {
+  color: var(--text-base-quaternary);
 }
 
-[data-theme="dark"] .ghostFilled_XNHIwg {
+.button_XNHIwg.ghostFilled_XNHIwg {
   color: var(--text-base-secondary);
-  background-color: #e8e9f00f;
+  background-color: var(--background-hover-subtle);
 }
 
-[data-theme="dark"] .ghostFilled_XNHIwg:disabled {
-  color: #e8e9f040;
+.button_XNHIwg.ghostFilled_XNHIwg:disabled {
+  color: var(--text-base-quaternary);
 }
 
-[data-theme="dark"] .quaternary_XNHIwg {
+.button_XNHIwg.quaternary_XNHIwg, .button_XNHIwg.quaternary_XNHIwg:disabled {
   color: var(--text-base-primary);
-  background-color: #e8e9f00f;
+  background-color: var(--background-hover-subtle);
 }
 
-[data-theme="dark"] .quaternary_XNHIwg:disabled {
-  color: var(--text-base-primary);
-  background-color: #e8e9f00f;
+.button_XNHIwg.quaternary_XNHIwg:disabled {
+  color: var(--text-base-quaternary);
 }
 
-[data-theme="dark"] .quaternary_XNHIwg:disabled {
-  color: #e8e9f040;
+@media (hover: hover) {
+  .button_XNHIwg.quaternary_XNHIwg:hover:not(:disabled) {
+    color: var(--text-base-primary);
+    background-color: var(--background-hover-subtle-strong);
+  }
 }
 
-[data-theme="dark"] .quaternary_XNHIwg:hover:not(:disabled) {
-  color: var(--text-base-primary);
-  background-color: #e8e9f01a;
+.button_XNHIwg.primary_XNHIwg {
+  border: 1px solid var(--background-button-primary);
+  background-color: var(--background-button-primary);
+  color: var(--color-button-primary);
 }
 
-[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;
+.button_XNHIwg.primary_XNHIwg:hover:not(:disabled) {
+  background-color: var(--background-button-primary-hover);
+  color: var(--color-button-primary);
+}
+
+.button_XNHIwg.primary_XNHIwg:disabled {
+  border-color: var(--border-action-normal);
+  background-color: var(--border-action-normal);
+  color: var(--text-base-quaternary);
+}
+
+.button_XNHIwg.black_XNHIwg {
+  background-color: var(--background-button-primary);
+  color: var(--color-button-primary);
+}
+
+@media (hover: hover) {
+  .button_XNHIwg.black_XNHIwg:hover {
+    background-color: var(--background-button-primary-hover);
+    color: var(--color-button-primary);
+  }
 }
 
 .loader_XNHIwg {
@@ -1900,7 +1912,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 +1995,7 @@ body {
 
 .unauthRights_jFMnzg {
   padding: 8px 10px;
-  color: #000 !important;
+  color: var(--text-base-primary) !important;
 }
 
 .unauthBtns_jFMnzg {
@@ -2037,18 +2049,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 +2070,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 +2127,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 +2137,7 @@ body {
 }
 
 .iconActive_jFMnzg {
-  background-color: #f7f7f8;
+  background-color: var(--background-button-secondary-hover);
 }
 
 .icon_jFMnzg:first-child {
@@ -2134,7 +2146,7 @@ body {
 
 .icon_jFMnzg:hover {
   cursor: pointer;
-  background-color: #f7f7f8;
+  background-color: var(--background-button-secondary-hover);
 }
 
 .icon_jFMnzg svg {
@@ -2150,14 +2162,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 +2180,7 @@ body {
 }
 
 .userPic_jFMnzg {
-  color: #696b76;
+  color: var(--icon-base-secondary);
   display: flex;
   position: relative;
   border-radius: 50%;
@@ -2216,8 +2228,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 +2376,7 @@ body {
 }
 
 .userDropDownButton_jFMnzg {
-  color: #14151a;
+  color: var(--text-base-primary);
   font-size: 14px;
   font-weight: 400;
 }
@@ -7238,7 +7250,7 @@ td.currentTariff_0VfwRg {
 }
 
 .list_Jwe-NQ::-webkit-scrollbar-thumb {
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 2px;
 }
 
@@ -7283,7 +7295,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 +7401,7 @@ td.currentTariff_0VfwRg {
 
 .folders_5QMOig::-webkit-scrollbar-thumb {
   display: block;
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 2px;
 }
 
@@ -7418,8 +7430,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 +7497,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;
@@ -11577,7 +11589,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 +11601,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 +11612,7 @@ input.rename_i3VZwA {
 
 .icon_MRZoRw:hover {
   cursor: pointer;
-  background-color: #f7f7f8;
+  background-color: var(--background-button-secondary-hover);
 }
 
 .icon_MRZoRw svg {
@@ -11612,7 +11624,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 +13672,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 +13713,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 +13745,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 +13760,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 +13770,7 @@ audio::-webkit-media-controls-enclosure {
 }
 
 .search_Ft-RRw input::placeholder {
-  color: #9ca3af;
+  color: var(--text-base-secondary);
   font-weight: 200;
 }
 
@@ -13788,17 +13801,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 +13860,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 +13907,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 +14624,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 +14643,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 +14655,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 +14674,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;
 }
 
 * {