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

docs/themes/v2/source/css/codemirror.css

@@ -25,8 +25,8 @@
 /* GUTTER */
 
 .CodeMirror-gutters {
-  border-right: 1px solid #ddd;
-  background-color: #f7f7f7;
+  border-right: 1px solid var(--color-neutral-border);
+  background-color: var(--color-neutral-surface);
   white-space: nowrap;
 }
 .CodeMirror-linenumbers {
@@ -43,13 +43,13 @@
   color: black;
 }
 .CodeMirror-guttermarker-subtle {
-  color: #999;
+  color: var(--color-neutral-content-subtlest);
 }
 
 /* CURSOR */
 
 .CodeMirror-cursor {
-  border-left: 1px solid black;
+  border-left: 1px solid var(--color-neutral-inverted-content);
   border-right: none;
   width: 0;
 }
@@ -134,16 +134,16 @@
 /* DEFAULT THEME */
 
 .cm-s-default .cm-header {
-  color: #617ADA;
+  color: var(--color-accent-grape-bold);
 }
 .cm-s-default .cm-quote {
-  color: #34988D;
+  color: var(--color-accent-kale-bold);
 }
 .cm-negative {
-  color: #E6694E;
+  color: var(--color-negative-content);
 }
 .cm-positive {
-  color: #34988D;
+  color: var(--color-positive-content);
 }
 .cm-header,
 .cm-strong {
@@ -181,16 +181,16 @@
 }
 .cm-s-default .cm-variable-3,
 .cm-s-default .cm-type {
-  color: #34988D;
+  color: var(--color-accent-kale-bold);
 }
 .cm-s-default .cm-comment {
-  color: #E69559;
+  color: var(--color-accent-canteloupe-bold);
 }
 .cm-s-default .cm-string {
-  color: #CC6FBE;
+  color: var(--color-accent-plum-bold);
 }
 .cm-s-default .cm-string-2 {
-  color: #E6694E;
+  color: var(--color-accent-persimmon-bold);
 }
 .cm-s-default .cm-meta {
   color: #6B6860;
@@ -218,10 +218,10 @@
 }
 
 .cm-s-default .cm-error {
-  color: #E6694E;
+  color: var(--color-negative-content);
 }
 .cm-invalidchar {
-  color: #E6694E;
+  color: var(--color-negative-content);
 }
 
 .CodeMirror-composing {
@@ -231,10 +231,10 @@
 /* Default styles for common addons */
 
 div.CodeMirror span.CodeMirror-matchingbracket {
-  color: #0b0;
+  color: var(--color-positive-content);
 }
 div.CodeMirror span.CodeMirror-nonmatchingbracket {
-  color: #a22;
+  color: var(--color-negative-content);
 }
 .CodeMirror-matchingtag {
   background: rgba(255, 150, 0, 0.3);
@@ -251,7 +251,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 .CodeMirror {
   position: relative;
   overflow: hidden;
-  background: white;
+  background: var(--color-neutral-background);
 }
 
 .CodeMirror-scroll {

label_studio/core/static/css/error.css

@@ -1,20 +1,44 @@
-/* Compiled from App.styl */
 .ls-global-error {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding-top: 15vh;
 }
+
+.ls-global-error__header {
+  position: relative;
+  width: 812px;
+}
+
+.ls-global-error__code {
+  font-size: 380px;
+  font-weight: 700;
+  color: var(--color-neutral-content);
+  user-select: none;
+  -webkit-user-select: none;
+  line-height: 1em;
+  text-align: center;
+}
+
 .ls-global-error__heidi {
   width: 812px;
+  position: absolute;
+  top: -22px;
+  left: -22px;
+  height: 100%;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .ls-global-error h1 {
   font-size: 48px;
+  color: var(--color-neutral-content);
 }
 
 .ls-global-error h2 {
   font-size: 16px;
+  color: var(--color-neutral-content);
+  font-weight: 500;
 }
 
 .ls-global-error__actions {
@@ -34,25 +58,28 @@ body > .ls-global-error .button {
   cursor: pointer;
   padding: 0 16px;
   display: inline-flex;
-  background-color: #fff;
+  background-color: var(--color-neutral-background);
   align-items: center;
   border-radius: 5px;
   text-align: center;
   text-decoration: none;
   justify-content: center;
-  color: #333;
-  box-shadow: inset 0px -1px 0px rgba(0,0,0,0.1), inset 0px 0px 0px 1px rgba(0,0,0,0.15);
+  color: var(--color-neutral-content);
+  border: 1px solid var(--color-neutral-border);
   font-weight: 500;
+  transition: all 150ms ease-out;
 }
 
 body > .ls-global-error button:hover {
-  box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px, rgba(0, 0, 0, 0.1) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px 0px 0px 1px inset;
+  border-color: var(--color-neutral-border-bold);
 }
 
 body > .ls-global-error button.ls-global-error__primary_button {
-  background-color: #566fcf;
-  color: #fff;
+  background-color: var(--color-primary-surface);
+  color: var(--color-primary-surface-content);
+  transition: all 150ms ease-out;
 }
+
 body > .ls-global-error button.ls-global-error__primary_button:hover {
-  background-color: #4C5FA9;
+  background-color: var(--color-primary-surface-hover);
 }

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);
 }