feat: OPTIC-1217: Implement Color design tokens as CSS variables and Dark Mode

label_studio/core/static/css/login.css

@@ -7,6 +7,8 @@ html, body {
   font-weight: 400;
   height: 100%;
   font-family: 'Hellix', sans-serif;
+  background-color: var(--color-neutral-background-bold);
+  color: var(--color-neutral-content);
 }
 
 .login_page_new_ui .left {
@@ -31,6 +33,18 @@ html, body {
   background-size: contain;
 }
 
+.login_page_new_ui .ls-logo {
+  width: 414px;
+  height: 64px;
+  color: var(--color-neutral-content);
+}
+
+.login_page_new_ui .hs-logo {
+  width: 152px;
+  height: 22px;
+  color: var(--color-neutral-content);
+}
+
 .login_page_new_ui .left h2 {
   font-size: 24px;
   font-weight: 500;
@@ -48,7 +62,7 @@ html, body {
   margin: 8px 0 0 0;
 }
 
-.login_page_new_ui .left .logo_humansignal{
+.login_page_new_ui .left .by {
   position: absolute;
   bottom: 60px;
   left: 60px;
@@ -60,12 +74,16 @@ html, body {
   line-height: 28px;
 }
 
+.login_page_new_ui .left img {
+  color: var(--color-neutral-content);
+}
+
 .login_page_new_ui .tips {
   max-width: 520px;
   border-radius: 8px;
-  border: 1px solid var(--sand_300);
-  background: var(--sand_0);
-  box-shadow: 0 2px 6px 0 var(--sand_300);
+  border: 1px solid var(--color-neutral-border);
+  background: var(--color-neutral-surface);
+  box-shadow: 0 2px 6px 0 rgb(var(--color-neutral-shadow) / 20%);
   padding: 16px;
   margin:18vh 60px 0 60px;
   position: relative;
@@ -79,6 +97,7 @@ html, body {
   position: absolute;
   bottom: -72px;
   left: 16px;
+  fill: var(--color-neutral-border);
   background: url('../images/heidi-tip.svg') no-repeat center center;
 }
 
@@ -100,7 +119,7 @@ html, body {
 }
 
 .login_page_new_ui .tips .description a {
-  color: var(--primary_link);
+  color: var(--color-primary-content);
   font-size: .875rem;
   font-style: normal;
   font-weight: 500;
@@ -134,22 +153,23 @@ html, body {
   text-align: center;
   padding: .75rem 0;
   font-size: 1rem;
-  color: var(--sand_500);
+  color: var(--color-neutral-border);
   border-top: 2px solid transparent;
+  transition: all 150ms ease-out;
 }
 .login_page_new_ui .toggle > *.active {
-  border-color: var(--primary_link); 
-  color: var(--primary_link);
+  border-color: var(--color-primary-surface); 
+  color: var(--color-primary-content);
 }
 .login_page_new_ui .toggle > *:hover {
-  color: var(--grape_700);
-  border-color: var(--grape_700);
+  color: var(--color-primary-surface-hover);
+  border-color: var(--color-primary-surface-hover);
 }
 .form-wrapper{
   position: relative;
-  background: #FDFDFC;
+  background: var(--color-neutral-surface);
   margin-top: 1.5rem;
-  border: 1px solid #E1DED5;
+  border: 1px solid var(--color-neutral-border);
   padding: 2rem;
   border-radius: 1rem;
   box-shadow: 0px 0px 12px rgba(23, 20, 13, 0.16);
@@ -177,7 +197,7 @@ html, body {
   margin: 0;
 }
 .login_page_new_ui form .error {
-  color: var(--red_7);
+  color: var(--color-negative-content);
   font-size: .875rem;
 }
 .login_page_new_ui form input,
@@ -187,9 +207,10 @@ html, body {
   font-family: 'Hellix', sans-serif;
 }
 
-.login_page_new_ui form button {
+.login_page_new_ui form .lsf-button-ls.lsf-button-ls_look_primary {
+  --button-color: var(--color-neutral-inverted-content);
   border-radius: 4rem;
-  background: var(--sand_900);
+  background: var(--color-neutral-inverted-surface);
 }
 
 .login_page_new_ui .field_errors {
@@ -199,7 +220,7 @@ html, body {
   text-align: left;
   font-size: .875rem;
   line-height: 16px;
-  color: var(--red_7);
+  color: var(--color-negative-content);
 }
 .login_page_new_ui .field_errors li {
   margin-top: .25rem;
@@ -214,10 +235,10 @@ html, body {
 .auto-generated form input {
   height: 40px;
   min-height: 40px;
-  background: var(--sand_0);
+  background: var(--color-neutral-surface);
   font-size: 1rem;
   line-height: 22px;
-  border: 1px solid var(--sand_300);
+  border: 1px solid var(--color-neutral-border);
   box-sizing: border-box;
   border-radius: 5px;
   padding: 0 16px;
@@ -298,11 +319,11 @@ label{
   content: '';
   display: block;
   position: absolute;
-  top: 1px;
+  top: 2px;
   left: 8px;
   width: 5px;
-  height: 12px;
-  border: solid var(--sand_0);
+  height: 10px;
+  border: solid var(--color-primary-surface-content);
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
 }