converted colors to new scheme

This commit is contained in:
Martina 2021-07-07 14:44:13 -07:00
parent 6cb68d14a3
commit eaca8addf3
9 changed files with 20 additions and 19 deletions

View File

@ -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;

View File

@ -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};
}
`;

View File

@ -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>

View File

@ -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",
}}

View File

@ -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",
}}

View File

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

View File

@ -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};
}
`;

View File

@ -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;

View File

@ -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;