microboard-ui-temp 0.8.1 → 0.9.0

package/dist/{chunk-2qjdhnz5.css → chunk-zxdsfc4g.css}

@@ -96,6 +96,25 @@
   --absolute-position-panel-padding: 12px;
 }
 
+[data-theme="dark"] {
+  --background-surface-default: #1e1f26;
+  --background-button-secondary: #1e1f26;
+  --background-button-secondary-hover: #2a2b34;
+  --background-badge-purple-disabled: #281c3c;
+  --background-badge-gray: #2d2e37;
+  --background-accent-purple: #924fe8;
+  --border-action-normal: #34353e;
+  --border-action-focus: #924fe8;
+  --border-select-primary: #924fe8;
+  --text-base-primary: #e8e9f0;
+  --text-base-secondary: #e8e9f099;
+  --text-base-quaternary: #e8e9f040;
+  --text-accent-purple: #ac78f5;
+  --icon-base-primary: #e8e9f0;
+  --icon-base-secondary: #9496a5;
+  --icon-accent-purple: #924fe8;
+}
+
 * {
   box-sizing: border-box;
   background: none;
@@ -115,6 +134,7 @@ html {
 
 body {
   color: var(--text-base-primary);
+  background-color: var(--background-surface-default);
   font-optical-sizing: auto;
   font-family: Manrope, sans-serif;
   font-size: 1.6rem;
@@ -142,6 +162,26 @@ input:-webkit-autofill:active {
   -webkit-box-shadow: inset 0 0 0 30px #fff !important;
 }
 
+[data-theme="dark"] input:-webkit-autofill {
+  -webkit-text-fill-color: #e8e9f0 !important;
+  -webkit-box-shadow: inset 0 0 0 30px #1e1f26 !important;
+}
+
+[data-theme="dark"] input:-webkit-autofill:hover {
+  -webkit-text-fill-color: #e8e9f0 !important;
+  -webkit-box-shadow: inset 0 0 0 30px #1e1f26 !important;
+}
+
+[data-theme="dark"] input:-webkit-autofill:focus {
+  -webkit-text-fill-color: #e8e9f0 !important;
+  -webkit-box-shadow: inset 0 0 0 30px #1e1f26 !important;
+}
+
+[data-theme="dark"] input:-webkit-autofill:active {
+  -webkit-text-fill-color: #e8e9f0 !important;
+  -webkit-box-shadow: inset 0 0 0 30px #1e1f26 !important;
+}
+
 /* src/shared/ui-lib/Icon/Icon.module.css */
 .icon_zNwsNQ {
   max-width: 24px;
@@ -232,7 +272,7 @@ input:-webkit-autofill:active {
 /* src/entities/account/AuthForm.module.css */
 .wrapper_nFyDWw {
   display: flex;
-  background-color: #fff;
+  background-color: var(--background-surface-default);
   flex-direction: column;
   justify-content: center;
   align-items: stretch;
@@ -251,7 +291,7 @@ input:-webkit-autofill:active {
 
 .link_nFyDWw {
   text-decoration: none;
-  color: #6c7173;
+  color: var(--text-base-secondary);
   display: flex;
   justify-content: center;
   align-self:  flex-start;
@@ -267,7 +307,7 @@ input:-webkit-autofill:active {
 }
 
 .link_nFyDWw:visited {
-  color: #6c7173;
+  color: var(--text-base-secondary);
 }
 
 .title_nFyDWw {
@@ -282,13 +322,13 @@ input:-webkit-autofill:active {
 }
 
 .button_nFyDWw {
-  color: #fff;
   cursor: pointer;
   outline-color: #0000;
   box-sizing: border-box;
   display: flex;
-  background-color: #14151a;
-  border: 1px solid #14151a;
+  border: 1px solid var(--text-base-primary);
+  background-color: var(--text-base-primary);
+  color: var(--background-surface-default);
   border-radius: 12px;
   justify-content: center;
   align-items:  center;
@@ -302,16 +342,16 @@ input:-webkit-autofill:active {
 }
 
 .button_nFyDWw:disabled {
-  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);
 }
 
 .button_nFyDWw:disabled:hover {
   cursor: not-allowed;
-  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);
 }
 
 .button_nFyDWw:active {
@@ -319,7 +359,7 @@ input:-webkit-autofill:active {
 }
 
 .button_nFyDWw:hover {
-  background-color: #1f2228;
+  opacity: .88;
 }
 
 .forgot_nFyDWw {
@@ -630,6 +670,103 @@ 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;
+}
+
+[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;
+}
+
 .loader_XNHIwg {
   display: flex;
   animation: rotate 2s linear infinite;
@@ -1826,23 +1963,24 @@ body {
 }
 
 .inputLabel_2Ex0qA.disabled_2Ex0qA {
-  color: #0a0f2940;
+  color: var(--text-base-quaternary);
 }
 
 .input_2Ex0qA {
   outline: none;
-  color: #0f1324;
+  color: var(--text-base-primary);
+  background-color: #0000;
   width: 100%;
   font-family: Manrope, Arial;
   font-size: 14px;
 }
 
 .input_2Ex0qA:disabled, .input_2Ex0qA:disabled::placeholder {
-  color: #0a0f2940;
+  color: var(--text-base-quaternary);
 }
 
 .input_2Ex0qA::placeholder {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   font-family: Manrope, Arial;
 }
 
@@ -1851,7 +1989,7 @@ body {
 }
 
 .inputHelperText_2Ex0qA {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   font-size: 14px;
 }
 
@@ -1867,7 +2005,8 @@ body {
 
 .inputContainer_2Ex0qA {
   display: flex;
-  border: 1px solid #dee0e3;
+  border: 1px solid var(--border-action-normal);
+  background-color: var(--background-button-secondary);
   border-radius: 12px;
   width: 100%;
   padding: 10px 12px;
@@ -1920,7 +2059,8 @@ body {
   outline: none;
   resize: none;
   overflow: hidden;
-  color: #0f1324;
+  color: var(--text-base-primary);
+  background-color: #0000;
   width: 100%;
   height: 20px;
   font-family: Manrope, Arial;
@@ -13450,7 +13590,7 @@ audio::-webkit-media-controls-enclosure {
 .NavbarWrapper .Logo {
   display: flex;
   text-decoration: none;
-  color: #14151a;
+  color: var(--text-base-primary);
   align-items:  center;
   gap: 4px;
   height: 48px;
@@ -13460,7 +13600,7 @@ audio::-webkit-media-controls-enclosure {
 }
 
 .NavbarWrapper .Logo:visited {
-  color: #14151a;
+  color: var(--text-base-primary);
 }
 
 .NavbarWrapper .Link {
@@ -13487,10 +13627,11 @@ audio::-webkit-media-controls-enclosure {
 
 .NavbarWrapper .LinkActive {
   box-sizing: border-box;
-  color: #14151a;
+  background-color: var(--background-button-secondary);
+  border: 1px solid #0000;
+  border: 1px solid var(--border-action-normal);
+  color: var(--text-base-primary);
   text-decoration: none;
-  background-color: #fff;
-  border: 1px solid #dee0e3;
   border-radius: 10px;
   height: 32px;
   padding: 6px 10px;
@@ -13499,13 +13640,13 @@ audio::-webkit-media-controls-enclosure {
 }
 
 .NavbarWrapper .LinkActive:hover {
-  color: #14151a;
-  background-color: #f7f7f8;
+  background-color: var(--background-button-secondary-hover);
+  color: var(--text-base-primary);
 }
 
 .NavbarWrapper .LinkActive:active {
+  background-color: var(--background-button-secondary);
   outline: 2px solid #c8b2ff80;
-  background-color: #fff;
   border: 1px solid #b78af0;
 }
 
@@ -13528,6 +13669,28 @@ audio::-webkit-media-controls-enclosure {
   gap: 16px;
 }
 
+.NavbarActions {
+  display: flex;
+  align-items:  center;
+  gap: 8px;
+}
+
+.ThemeToggle {
+  display: flex;
+  cursor: pointer;
+  color: var(--icon-base-primary);
+  border-radius: 8px;
+  justify-content: center;
+  align-items:  center;
+  width: 32px;
+  height: 32px;
+  transition: background-color .15s;
+}
+
+.ThemeToggle:hover {
+  background-color: var(--background-button-secondary-hover);
+}
+
 .Link.Back {
   color: var(--icon-base-secondary);
   display: flex;
@@ -13550,7 +13713,7 @@ audio::-webkit-media-controls-enclosure {
 
 @media screen and (max-width: 640px) {
   .NavbarWrapper {
-    border-bottom: 1px solid #dee0e3;
+    border-bottom: 1px solid var(--border-action-normal);
   }
 
   .NavbarWrapper .Links {
@@ -13604,7 +13767,7 @@ audio::-webkit-media-controls-enclosure {
 }
 
 .policy_hbU_PQ {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   text-align: center;
   margin-top: auto;
   margin-bottom: 40px;
@@ -13614,14 +13777,14 @@ audio::-webkit-media-controls-enclosure {
 
 .policyLink_hbU_PQ {
   position: relative;
-  color: #0f132499;
+  color: var(--text-base-secondary);
   text-decoration: none;
 }
 
 .policyLink_hbU_PQ:after {
   content: "";
   position: absolute;
-  background-color: #0a0f2914;
+  background-color: var(--border-action-normal);
   width: 100%;
   height: 2px;
   bottom: -3px;

package/dist/example.html

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