mirror of
https://github.com/yldio/copilot.git
synced 2024-11-13 06:40:06 +02:00
continuing to update color object names in ui kit
This commit is contained in:
parent
f88808fc26
commit
12717c26cf
@ -17,7 +17,7 @@ const {
|
||||
|
||||
const StyledDescription = styled.p`
|
||||
margin: 0;
|
||||
color: ${colors.base.secondary};
|
||||
color: ${colors.base.text};
|
||||
`;
|
||||
|
||||
const Description = (props) => (
|
||||
|
@ -33,7 +33,7 @@ const StyledTile = styled.div`
|
||||
width: ${remcalc(300)};
|
||||
height: ${remcalc(247)};
|
||||
box-shadow: ${boxes.bottomShaddow};
|
||||
border: ${remcalc(1)} solid ${colors.base.greyLight};
|
||||
border: ${remcalc(1)} solid ${colors.base.grey};
|
||||
background-color: ${colors.base.white};
|
||||
|
||||
${breakpoints.small`
|
||||
|
@ -39,19 +39,19 @@ const background = match({
|
||||
}, base.primary);
|
||||
|
||||
const backgroundHover = match({
|
||||
secondary: base.grey,
|
||||
secondary: base.whiteHover,
|
||||
disabled: inactive.default
|
||||
}, base.primaryLight);
|
||||
}, base.primaryHover);
|
||||
|
||||
const backgroundActive = match({
|
||||
secondary: base.greyDarker,
|
||||
secondary: base.whiteActive,
|
||||
disabled: inactive.default
|
||||
}, base.primaryDark);
|
||||
}, base.primaryHover);
|
||||
|
||||
const border = match({
|
||||
secondary: base.greyLight,
|
||||
disabled: inactive.greyLight
|
||||
}, base.primary);
|
||||
secondary: base.grey,
|
||||
disabled: inactive.grey
|
||||
}, base.primaryDesaturated);
|
||||
|
||||
const borderHover = match({
|
||||
secondary: base.grey,
|
||||
@ -59,9 +59,9 @@ const borderHover = match({
|
||||
}, base.primaryDark);
|
||||
|
||||
const borderActive = match({
|
||||
secondary: base.greyDarker,
|
||||
secondary: base.grey,
|
||||
disabled: inactive.default
|
||||
}, base.primaryDark);
|
||||
}, base.primaryDesaturatedHover);
|
||||
|
||||
const color = match({
|
||||
secondary: base.secondary,
|
||||
|
@ -27,6 +27,10 @@ const color = (props) => props.defaultValue
|
||||
? colorWithDefaultValue(props)
|
||||
: colorWithDisabled(props);
|
||||
|
||||
const border = (props) => props.error
|
||||
? boxes.border.error
|
||||
: boxes.border.unchecked;
|
||||
|
||||
const height = (props) => !props.multiple
|
||||
? remcalc(48)
|
||||
: 'auto';
|
||||
@ -48,10 +52,10 @@ const Outlet = css`
|
||||
border-radius: ${boxes.borderRadius};
|
||||
background-color: ${colors.base.white};
|
||||
box-shadow: ${boxes.insetShaddow};
|
||||
border: ${boxes.border.unchecked};
|
||||
border: ${border};
|
||||
|
||||
font-size: ${remcalc(16)};
|
||||
line-height: normal !important;
|
||||
line-height: normal;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
|
@ -27,7 +27,7 @@ const Li = styled.li`
|
||||
}
|
||||
|
||||
& a {
|
||||
color: ${colors.base.secondaryDark};
|
||||
color: ${colors.base.text};
|
||||
text-decoration: none;
|
||||
padding-bottom: ${remcalc(6)};
|
||||
|
||||
|
@ -41,7 +41,7 @@ const StyledTitle = styled(Title)`
|
||||
padding-top: 0;
|
||||
`}
|
||||
|
||||
font-weight: normal !important;
|
||||
font-weight: normal;
|
||||
flex-grow: 2;
|
||||
`;
|
||||
|
||||
|
@ -25,9 +25,9 @@ const {
|
||||
|
||||
const paper = `
|
||||
0 ${remcalc(8)} 0 ${remcalc(-5)} ${colors.base.grey},
|
||||
0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.base.greyDarker},
|
||||
0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.base.grey},
|
||||
0 ${remcalc(16)} 0 ${remcalc(-10)} ${colors.base.grey},
|
||||
0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.base.greyDarker};
|
||||
0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.base.grey};
|
||||
`;
|
||||
|
||||
const height = (props) => props.collapsed
|
||||
@ -56,7 +56,7 @@ const Item = styled(Row)`
|
||||
height: ${height};
|
||||
min-height: ${minHeight};
|
||||
box-shadow: ${shadow};
|
||||
border: ${remcalc(1)} solid ${colors.base.greyDark};
|
||||
border: ${remcalc(1)} solid ${colors.base.grey};
|
||||
background-color: ${colors.base.white};
|
||||
margin-bottom: ${marginBottom};
|
||||
`;
|
||||
|
@ -27,7 +27,7 @@ const height = (props) => props.collapsed
|
||||
: remcalc(124);
|
||||
|
||||
const borderLeftColor = (props) => !props.fromHeader
|
||||
? colors.base.greyLight
|
||||
? colors.base.grey
|
||||
: colors.base.primary;
|
||||
|
||||
const Nav = styled.nav`
|
||||
|
@ -30,10 +30,10 @@ const StyledButton = styled.button`
|
||||
margin: 0;
|
||||
padding: ${remcalc(18)} ${remcalc(24)};
|
||||
float: right;
|
||||
background-color: ${colors.base.primaryDark};
|
||||
background-color: ${colors.base.primaryDesaturated};
|
||||
line-height: 1.5;
|
||||
border: none;
|
||||
border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
|
||||
border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturated};
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
|
@ -27,8 +27,8 @@ const StyledHeader = styled.div`
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
background-color: ${colors.base.primaryDark};
|
||||
border: solid ${remcalc(1)} ${colors.base.primaryDark};
|
||||
background-color: ${colors.base.primaryDesaturated};
|
||||
border: solid ${remcalc(1)} ${colors.base.primaryDesaturated};
|
||||
`;
|
||||
|
||||
const Header = (props) => (
|
||||
|
@ -46,9 +46,9 @@ const StyledSelect = styled.select`
|
||||
text-align: right !important;
|
||||
border-radius: 0;
|
||||
color: ${colors.base.white};
|
||||
background-color: ${colors.base.primaryDark};
|
||||
background-color: ${colors.base.primaryDesaturated};
|
||||
border: none;
|
||||
border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
|
||||
border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturated};
|
||||
-webkit-appearance: none;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
@ -32,10 +32,10 @@ const StyledButton = styled(Button)`
|
||||
padding: ${remcalc(18)} ${remcalc(24)};
|
||||
color: ${colors.base.white};
|
||||
float: right;
|
||||
background-color: ${colors.base.primaryDark};
|
||||
background-color: ${colors.base.primaryDesaturated};
|
||||
line-height: 1.5;
|
||||
border: none;
|
||||
border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
|
||||
border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturated};
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
@ -44,7 +44,7 @@ const StyledButton = styled(Button)`
|
||||
&:active:focus {
|
||||
background-color: ${colors.base.primaryLight};
|
||||
border: none;
|
||||
border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
|
||||
border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturatedHover};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -29,7 +29,7 @@ const Container = styled.div`
|
||||
width: 100%;
|
||||
max-width: ${remcalc(940)};
|
||||
box-shadow: ${boxes.bottomShaddow};
|
||||
border: 1px solid ${colors.base.greyLight};
|
||||
border: 1px solid ${colors.base.grey};
|
||||
`;
|
||||
|
||||
const View = (props) => (
|
||||
|
@ -32,8 +32,8 @@ const StyledModal = styled.div`
|
||||
padding: ${remcalc(20)};
|
||||
z-index: 1;
|
||||
|
||||
background: ${colors.brandSecondary};
|
||||
border: ${remcalc(1)} solid ${colors.borderSecondary};
|
||||
background: ${colors.secondary};
|
||||
border: ${remcalc(1)} solid ${colors.secondaryHover};
|
||||
`;
|
||||
|
||||
const StyledOverlay = styled.div`
|
||||
|
@ -45,9 +45,9 @@ const sizes = {
|
||||
const Card = styled.div`
|
||||
box-sizing: border-box;
|
||||
box-shadow: ${boxes.bottomShaddow};
|
||||
border: ${remcalc(1)} solid ${colors.borderSecondary};
|
||||
border: ${remcalc(1)} solid ${colors.base.grey};
|
||||
border-radius: ${boxes.borderRadius};
|
||||
background-color: ${colors.brandSecondary};
|
||||
background-color: ${colors.base.white};
|
||||
`;
|
||||
|
||||
const SmallCard = styled(Card)`
|
||||
|
@ -26,10 +26,10 @@ const StyledInput = styled.input`
|
||||
|
||||
&:disabled + span::before,
|
||||
&:checked + span::before {
|
||||
background-color: #646464;
|
||||
background-color: ${colors.base.secondary};
|
||||
}
|
||||
&:disabled + span {
|
||||
background-color: ${colors.backgroundInactive};
|
||||
background-color: ${colors.inactive.default};
|
||||
}
|
||||
&:disabled + span::before {
|
||||
opacity: 0.3;
|
||||
@ -52,8 +52,8 @@ const StyledSpan = styled.span`
|
||||
position: absolute;
|
||||
width: ${remcalc(10)};
|
||||
height: ${remcalc(10)};
|
||||
box-shadow: 0 0 0 ${remcalc(1)} #646464;
|
||||
border: ${remcalc(8)} solid ${colors.brandInactive};
|
||||
box-shadow: 0 0 0 ${remcalc(1)} ${colors.base.secondary};
|
||||
border: ${remcalc(8)} solid ${colors.inactive.default};
|
||||
top: ${remcalc(5)};
|
||||
left: ${remcalc(5)};
|
||||
border-radius: 100%;
|
||||
|
@ -23,7 +23,7 @@ const {
|
||||
} = Styled;
|
||||
|
||||
const rangeTrack = css`
|
||||
background: ${colors.brandPrimary};
|
||||
background: ${colors.base.primary};
|
||||
cursor: pointer;
|
||||
height: ${remcalc(6)};
|
||||
width: 100%;
|
||||
@ -35,7 +35,7 @@ const rangeTrack = css`
|
||||
|
||||
const rangeThumb = css`
|
||||
-webkit-appearance: none;
|
||||
background: #FFFFFF;
|
||||
background: ${colors.base.white};
|
||||
cursor: pointer;
|
||||
height: ${remcalc(24)};
|
||||
position: relative;
|
||||
@ -46,7 +46,7 @@ const rangeThumb = css`
|
||||
`;
|
||||
|
||||
const rangeLower = css`
|
||||
background: ${colors.brandPrimary};
|
||||
background: ${colors.base.primary};
|
||||
height: ${remcalc(6)};
|
||||
|
||||
${baseBox({
|
||||
@ -118,7 +118,7 @@ const StyledRange = styled.input`
|
||||
}
|
||||
|
||||
&:focus::-webkit-slider-runnable-track {
|
||||
background: ${colors.brandPrimary};
|
||||
background: ${colors.primary};
|
||||
}
|
||||
|
||||
&:focus::-ms-fill-lower {
|
||||
|
@ -35,7 +35,7 @@ const StyledTableHeadItem = styled.td`
|
||||
const StyledTableHead = styled.thead`
|
||||
background: #fafafa;
|
||||
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
|
||||
border: solid ${remcalc(1)} ${colors.base.greyDark};
|
||||
border: solid ${remcalc(1)} ${colors.base.grey};
|
||||
|
||||
${breakpoints.smallOnly`
|
||||
display: none;
|
||||
|
@ -23,7 +23,8 @@ const {
|
||||
} = composers;
|
||||
|
||||
const StyledRow = styled.tr`
|
||||
border: solid ${remcalc(1)} ${colors.base.greyDark};
|
||||
border: solid ${remcalc(1)} ${colors.base.grey};
|
||||
};
|
||||
|
||||
${breakpoints.smallOnly`
|
||||
display: block;
|
||||
|
@ -2,7 +2,6 @@ module.exports = {
|
||||
Table: require('./table'),
|
||||
TableHead: require('./table-head'),
|
||||
TableBody: require('./table-body'),
|
||||
TableCell: require('./table-cell'),
|
||||
TableRow: require('./table-row'),
|
||||
TableItem: require('./table-item'),
|
||||
};
|
||||
|
@ -27,7 +27,7 @@ const StyledTableRow = styled.div`
|
||||
${clearfix}
|
||||
|
||||
padding: ${remcalc(24)} 0;
|
||||
border-bottom: solid 1px ${colors.base.greyDark};
|
||||
border-bottom: solid 1px ${colors.base.grey};
|
||||
|
||||
& > .table-item {
|
||||
text-align: center;
|
||||
|
@ -17,7 +17,7 @@ const {
|
||||
} = composers;
|
||||
|
||||
const StyledTableWrapper = styled.section`
|
||||
border: solid 1px ${colors.base.greyDark}
|
||||
border: solid 1px ${colors.base.grey}
|
||||
font-family: 'LibreFranklin', sans-serif;
|
||||
font-style: normal;
|
||||
`;
|
||||
|
@ -46,7 +46,7 @@ const StyledRadio = styled.input`
|
||||
|
||||
&:checked {
|
||||
& + .${classNames.label} {
|
||||
background: ${colors.brandInactive};
|
||||
background: ${colors.inactive.default};
|
||||
border-bottom-width: 0;
|
||||
|
||||
${moveZ({
|
||||
@ -62,7 +62,7 @@ const StyledRadio = styled.input`
|
||||
|
||||
const StyledLabel = styled.label`
|
||||
background: transparent;
|
||||
border: ${remcalc(1)} solid ${colors.greyDark};
|
||||
border: ${remcalc(1)} solid ${colors.base.grey};
|
||||
display: inline-block;
|
||||
font-size: ${remcalc(20)};
|
||||
padding: ${remcalc('12 25')};
|
||||
@ -79,7 +79,7 @@ const StyledPanel = styled.div`
|
||||
`;
|
||||
|
||||
const StyledContent = styled.div`
|
||||
background: ${colors.brandInactive};
|
||||
background: ${colors.inactive.default};
|
||||
border: ${boxes.border.unchecked};
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 ${remcalc(-1)} ${remcalc(26)} 0 rgba(0, 0, 0, 0.2);
|
||||
|
@ -24,12 +24,12 @@ const {
|
||||
} = Styled;
|
||||
|
||||
const Label = styled.label`
|
||||
color: ${props => props.error ? colors.alert : colors.fonts.regular}
|
||||
color: ${props => props.error ? colors.base.red : colors.fonts.regular}
|
||||
`;
|
||||
|
||||
const InputField = styled.textarea`
|
||||
background: ${colors.brandSecondary};
|
||||
color: ${props => props.error ? colors.alert : colors.fonts.semibold}
|
||||
background: ${colors.secondary};
|
||||
color: ${props => props.error ? colors.base.red : colors.fonts.semibold}
|
||||
display: block;
|
||||
font-size: ${remcalc(16)};
|
||||
padding: ${remcalc('15 18')};
|
||||
@ -37,7 +37,7 @@ const InputField = styled.textarea`
|
||||
width: 100%;
|
||||
min-height: ${remcalc(96)};
|
||||
${baseBox()};
|
||||
border-color: ${props => props.error ? colors.alert : ''};
|
||||
border-color: ${props => props.error ? colors.base.red : ''};
|
||||
|
||||
&:focus {
|
||||
border-color: ${boxes.border.checked};
|
||||
|
@ -49,7 +49,7 @@ const StyledList = styled.ul`
|
||||
padding: ${remcalc(ItemPadder)} ${remcalc(WrapperPadder)};
|
||||
|
||||
&:hover {
|
||||
background: ${colors.borderSecondaryDarkest};
|
||||
background: ${colors.base.grey};
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -48,7 +48,7 @@ const StyledContent = styled.div`
|
||||
border: ${boxes.border.unchecked};
|
||||
border-radius: ${remcalc(4)};
|
||||
cursor: pointer;
|
||||
padding: remcalc(36);
|
||||
padding: ${remcalc(36)};
|
||||
|
||||
& img {
|
||||
max-width: 100%;
|
||||
|
@ -16,7 +16,8 @@ module.exports = {
|
||||
insetShaddow: `inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)`,
|
||||
border: {
|
||||
checked: `${remcalc(1)} solid ${base.primary}`,
|
||||
unchecked: `${remcalc(1)} solid ${base.greyLight}`,
|
||||
confirmed: `${remcalc(1)} solid ${base.greyLight}`
|
||||
unchecked: `${remcalc(1)} solid ${base.grey}`,
|
||||
confirmed: `${remcalc(1)} solid ${base.grey}`,
|
||||
error: `${remcalc(1)} solid ${base.red}`,
|
||||
}
|
||||
};
|
||||
|
@ -20,9 +20,9 @@ const primary = {
|
||||
primary: '#3B47CC',
|
||||
primaryHover: '#1838C0',
|
||||
primaryActive: '#12279F',
|
||||
primaryDestaurated: '#3B4AAF',
|
||||
primaryDesaturated: '#3B4AAF',
|
||||
primaryDesaturatedHover: '#34429D',
|
||||
primaryDestauratedActive: '#2D3884',
|
||||
primaryDesaturatedActive: '#2D3884',
|
||||
primaryDark: '#2D3884',
|
||||
primaryDarkHover: '#34429D',
|
||||
primaryDarkActive: '#2D3884',
|
||||
|
Loading…
Reference in New Issue
Block a user