microboard-ui-temp 0.9.0 → 0.9.1

package/dist/{chunk-zxdsfc4g.css → chunk-t7qyvg3g.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;
 }
 
 * {
@@ -670,101 +692,113 @@ input:-webkit-autofill:active {
   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 {
@@ -2081,7 +2115,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 +2198,7 @@ body {
 
 .unauthRights_jFMnzg {
   padding: 8px 10px;
-  color: #000 !important;
+  color: var(--text-base-primary) !important;
 }
 
 .unauthBtns_jFMnzg {
@@ -2218,18 +2252,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 +2273,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 +2330,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 +2340,7 @@ body {
 }
 
 .iconActive_jFMnzg {
-  background-color: #f7f7f8;
+  background-color: var(--background-button-secondary-hover);
 }
 
 .icon_jFMnzg:first-child {
@@ -2315,7 +2349,7 @@ body {
 
 .icon_jFMnzg:hover {
   cursor: pointer;
-  background-color: #f7f7f8;
+  background-color: var(--background-button-secondary-hover);
 }
 
 .icon_jFMnzg svg {
@@ -2331,14 +2365,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 +2383,7 @@ body {
 }
 
 .userPic_jFMnzg {
-  color: #696b76;
+  color: var(--icon-base-secondary);
   display: flex;
   position: relative;
   border-radius: 50%;
@@ -2397,8 +2431,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 +2579,7 @@ body {
 }
 
 .userDropDownButton_jFMnzg {
-  color: #14151a;
+  color: var(--text-base-primary);
   font-size: 14px;
   font-weight: 400;
 }
@@ -7419,7 +7453,7 @@ td.currentTariff_0VfwRg {
 }
 
 .list_Jwe-NQ::-webkit-scrollbar-thumb {
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 2px;
 }
 
@@ -7464,7 +7498,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 +7604,7 @@ td.currentTariff_0VfwRg {
 
 .folders_5QMOig::-webkit-scrollbar-thumb {
   display: block;
-  background-color: #dee1e8;
+  background-color: var(--scrollbar-thumb);
   border-radius: 2px;
 }
 
@@ -7599,8 +7633,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 +7700,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;
@@ -11758,7 +11792,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 +11804,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 +11815,7 @@ input.rename_i3VZwA {
 
 .icon_MRZoRw:hover {
   cursor: pointer;
-  background-color: #f7f7f8;
+  background-color: var(--background-button-secondary-hover);
 }
 
 .icon_MRZoRw svg {
@@ -11793,7 +11827,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 +13875,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 +13916,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 +13948,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 +13963,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 +13973,7 @@ audio::-webkit-media-controls-enclosure {
 }
 
 .search_Ft-RRw input::placeholder {
-  color: #9ca3af;
+  color: var(--text-base-secondary);
   font-weight: 200;
 }
 
@@ -13969,17 +14004,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 +14063,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 +14110,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;
 }

package/dist/example.html

@@ -31,8 +31,8 @@
       rel="stylesheet"
     />
     
-  <link rel="stylesheet" crossorigin href="/chunk-zxdsfc4g.css"><script src="/env.js"></script>
-<script type="module" crossorigin src="/chunk-jhg35595.js"></script></head>
+  <link rel="stylesheet" crossorigin href="/chunk-t7qyvg3g.css"><script src="/env.js"></script>
+<script type="module" crossorigin src="/chunk-b5xd0djw.js"></script></head>
 
   <body
     style="