From eaca8addf34f474b500618bd7814d2aaf394e373 Mon Sep 17 00:00:00 2001
From: Martina <martinalong10@gmail.com>
Date: Wed, 7 Jul 2021 14:44:13 -0700
Subject: [PATCH] converted colors to new scheme

---
 components/core/ApplicationHeader.js        | 2 +-
 components/core/ApplicationLayout.js        | 6 +++---
 components/core/Link/LinkCard.js            | 6 +++---
 components/core/Link/LinkLoading.js         | 2 +-
 components/sidebars/ModalAddFileToBucket.js | 8 ++++----
 components/system/ThemeProvider.js          | 1 +
 components/system/components/Input.js       | 6 +++---
 components/system/components/Loaders.js     | 2 +-
 components/system/components/RadioGroup.js  | 6 +++---
 9 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/components/core/ApplicationHeader.js b/components/core/ApplicationHeader.js
index 7b8f3e9a..ff7a04a3 100644
--- a/components/core/ApplicationHeader.js
+++ b/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;
diff --git a/components/core/ApplicationLayout.js b/components/core/ApplicationLayout.js
index 4e759e4c..caec7e68 100644
--- a/components/core/ApplicationLayout.js
+++ b/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};
   }
 `;
 
diff --git a/components/core/Link/LinkCard.js b/components/core/Link/LinkCard.js
index 0d9ab9ac..5e769765 100644
--- a/components/core/Link/LinkCard.js
+++ b/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>
diff --git a/components/core/Link/LinkLoading.js b/components/core/Link/LinkLoading.js
index baffbb9d..23ebca9d 100644
--- a/components/core/Link/LinkLoading.js
+++ b/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",
             }}
diff --git a/components/sidebars/ModalAddFileToBucket.js b/components/sidebars/ModalAddFileToBucket.js
index 84df29dc..5899fcdb 100644
--- a/components/sidebars/ModalAddFileToBucket.js
+++ b/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",
             }}
diff --git a/components/system/ThemeProvider.js b/components/system/ThemeProvider.js
index 0a1cdbbb..512236b7 100644
--- a/components/system/ThemeProvider.js
+++ b/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]
diff --git a/components/system/components/Input.js b/components/system/components/Input.js
index dadd69b0..8b61fd5d 100644
--- a/components/system/components/Input.js
+++ b/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};
   }
 `;
 
diff --git a/components/system/components/Loaders.js b/components/system/components/Loaders.js
index 9ed7c8fd..6b70c8b7 100644
--- a/components/system/components/Loaders.js
+++ b/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;
diff --git a/components/system/components/RadioGroup.js b/components/system/components/RadioGroup.js
index 4879abf5..a954a50e 100644
--- a/components/system/components/RadioGroup.js
+++ b/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};
-  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
+  background-color: ${Constants.system.gray};
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.6);
   height: 16px;
   width: 16px;
   border-radius: 16px;