mirror of
https://github.com/filecoin-project/slate.git
synced 2024-11-23 05:54:49 +03:00
converted colors to new scheme
This commit is contained in:
parent
6cb68d14a3
commit
eaca8addf3
@ -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;
|
||||
|
@ -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};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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",
|
||||
}}
|
||||
|
@ -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",
|
||||
}}
|
||||
|
@ -27,6 +27,7 @@ export default function ThemeProvider({ children }) {
|
||||
zindex: Constants.zindex,
|
||||
font: Constants.font,
|
||||
typescale: Constants.typescale,
|
||||
semantic: Constants.semantic,
|
||||
...theme,
|
||||
}),
|
||||
[theme]
|
||||
|
@ -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};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user