microboard-ui-temp 0.8.1 → 0.9.0

package/dist/spa.css

@@ -91,7 +91,7 @@
 /* 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;
@@ -110,7 +110,7 @@
 
 .link_nFyDWw {
   text-decoration: none;
-  color: #6c7173;
+  color: var(--text-base-secondary);
   display: flex;
   justify-content: center;
   align-self:  flex-start;
@@ -126,7 +126,7 @@
 }
 
 .link_nFyDWw:visited {
-  color: #6c7173;
+  color: var(--text-base-secondary);
 }
 
 .title_nFyDWw {
@@ -141,13 +141,13 @@
 }
 
 .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;
@@ -161,16 +161,16 @@
 }
 
 .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 {
@@ -178,7 +178,7 @@
 }
 
 .button_nFyDWw:hover {
-  background-color: #1f2228;
+  opacity: .88;
 }
 
 .forgot_nFyDWw {
@@ -489,6 +489,103 @@
   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;
@@ -1685,23 +1782,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;
 }
 
@@ -1710,7 +1808,7 @@ body {
 }
 
 .inputHelperText_2Ex0qA {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   font-size: 14px;
 }
 
@@ -1726,7 +1824,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;
@@ -1779,7 +1878,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;
@@ -13309,7 +13409,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;
@@ -13319,7 +13419,7 @@ audio::-webkit-media-controls-enclosure {
 }
 
 .NavbarWrapper .Logo:visited {
-  color: #14151a;
+  color: var(--text-base-primary);
 }
 
 .NavbarWrapper .Link {
@@ -13346,10 +13446,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;
@@ -13358,13 +13459,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;
 }
 
@@ -13387,6 +13488,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;
@@ -13409,7 +13532,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 {
@@ -13463,7 +13586,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;
@@ -13473,14 +13596,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;
@@ -14504,6 +14627,25 @@ audio::-webkit-media-controls-enclosure {
   --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;
@@ -14523,6 +14665,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;
@@ -14549,3 +14692,23 @@ input:-webkit-autofill:focus {
 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;
+}