converted colors to new scheme

components/core/ApplicationHeader.js

@@ -115,7 +115,7 @@ const STYLES_BACKGROUND = css`
 `;
 
 const STYLES_UPLOAD_BUTTON = css`
-  background-color: ${Constants.system.bgGrayLight};
+  background-color: ${Constants.semantic.bgGrayLight};
   border-radius: 8px;
   width: 24px;
   height: 24px;

components/core/ApplicationLayout.js

@@ -137,20 +137,20 @@ const STYLES_BLOCK = css`
   justify-content: center;
   transition: 200ms ease all;
   cursor: pointer;
-  color: ${Constants.system.textGray};
+  color: ${Constants.semantic.textGray};
 `;
 
 const STYLES_DISMISS = css`
   ${Styles.ICON_CONTAINER}
 
-  color: ${Constants.system.textGray};
+  color: ${Constants.semantic.textGray};
 
   :focus {
     outline: none;
   }
 
   :hover {
-    color: ${Constants.system.brand};
+    color: ${Constants.system.blue};
   }
 `;
 

components/core/Link/LinkCard.js

@@ -21,7 +21,7 @@ const STYLES_CARD = css`
   border-radius: 8px;
   overflow: hidden;
   box-shadow: ${Constants.shadow.large};
-  background-color: ${Constants.system.bgGrayLight};
+  background-color: ${Constants.semantic.bgGrayLight};
 `;
 
 const STYLES_IMAGE_CONTAINER = css`
@@ -56,7 +56,7 @@ const STYLES_BODY = css`
   -webkit-line-clamp: 3; /* number of lines to show */
   -webkit-box-orient: vertical;
   margin-bottom: 8px;
-  color: ${Constants.system.textGrayDark};
+  color: ${Constants.semantic.textGrayDark};
 `;
 
 export default function LinkCard({ file }) {
@@ -77,7 +77,7 @@ export default function LinkCard({ file }) {
           <div css={STYLES_BODY}>
             <System.P1>{body}</System.P1>
           </div>
-          <LinkTag url={url} style={{ color: Constants.system.textGray }} />
+          <LinkTag url={url} style={{ color: Constants.semantic.textGray }} />
         </div>
       </div>
     </a>

components/core/Link/LinkLoading.js

@@ -36,7 +36,7 @@ export default function LinkLoading({ file }) {
           <LinkTag
             url={url}
             containerStyle={{
-              backgroundColor: Constants.system.brand,
+              backgroundColor: Constants.system.blue,
               borderRadius: 8,
               padding: "8px 16px",
             }}

components/sidebars/ModalAddFileToBucket.js

@@ -197,7 +197,7 @@ export default class ModalAddFileToBucket extends React.Component {
                           ) : file.loaded === file.total ? (
                             <SVG.CheckBox
                               height="24px"
-                              style={{ color: Constants.system.darkGray }}
+                              style={{ color: Constants.system.grayLight2 }}
                             />
                           ) : (
                             <System.LoaderSpinner
@@ -264,7 +264,7 @@ export default class ModalAddFileToBucket extends React.Component {
             value={this.state.url}
             style={{
               height: 48,
-              backgroundColor: Constants.system.bgLight,
+              backgroundColor: Constants.semantic.bgLight,
               boxShadow: this.state.urlError ? `0 0 0 1px ${Constants.system.red} inset` : "none",
             }}
             containerStyle={{ maxWidth: 540 }}
@@ -279,7 +279,7 @@ export default class ModalAddFileToBucket extends React.Component {
 
           <System.H4
             style={{
-              color: Constants.system.textGrayDark,
+              color: Constants.semantic.textGrayDark,
               textAlign: "center",
               marginBottom: 8,
             }}
@@ -289,7 +289,7 @@ export default class ModalAddFileToBucket extends React.Component {
           </System.H4>
           <System.P3
             style={{
-              color: Constants.system.textGray,
+              color: Constants.semantic.textGray,
               maxWidth: 456,
               textAlign: "center",
             }}

components/system/ThemeProvider.js

@@ -27,6 +27,7 @@ export default function ThemeProvider({ children }) {
       zindex: Constants.zindex,
       font: Constants.font,
       typescale: Constants.typescale,
+      semantic: Constants.semantic,
       ...theme,
     }),
     [theme]

components/system/components/Input.js

@@ -29,18 +29,18 @@ const INPUT_STYLES = css`
 
   ::placeholder {
     /* Chrome, Firefox, Opera, Safari 10.1+ */
-    color: ${Constants.system.darkGray};
+    color: ${Constants.system.grayLight2};
     opacity: 1; /* Firefox */
   }
 
   :-ms-input-placeholder {
     /* Internet Explorer 10-11 */
-    color: ${Constants.system.darkGray};
+    color: ${Constants.system.grayLight2};
   }
 
   ::-ms-input-placeholder {
     /* Microsoft Edge */
-    color: ${Constants.system.darkGray};
+    color: ${Constants.system.grayLight2};
   }
 `;
 

components/system/components/Loaders.js

@@ -189,7 +189,7 @@ const STYLES_LOADER_PROGRESS = css`
 //   display: inline-block;
 //   width: 48px;
 //   height: 48px;
-//   border: 2px solid ${Constants.system.brand};
+//   border: 2px solid ${Constants.system.blue};
 //   border-radius: 50%;
 //   border-top-color: ${Constants.semantic.bgLight};
 //   animation: slate-client-animation-spin 1s ease-in-out infinite;

components/system/components/RadioGroup.js

@@ -38,7 +38,7 @@ const STYLES_RADIO_INPUT = css`
 
 const STYLES_RADIO_CUSTOM = css`
   box-sizing: border-box;
-  background-color: ${Constants.semantic.bgLight};
+  background-color: ${Constants.system.grayLight5};
   cursor: pointer;
   height: 24px;
   width: 24px;
@@ -52,8 +52,8 @@ const STYLES_RADIO_CUSTOM = css`
 
 const STYLES_RADIO_CUSTOM_SELECTED = css`
   box-sizing: border-box;
-  background-color: ${Constants.semantic.bgGrayLight};
+  background-color: ${Constants.system.gray};
-  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.6);
   height: 16px;
   width: 16px;
   border-radius: 16px;