How to use the @tinacms/styles.color.primary function in @tinacms/styles
To help you get started, we’ve selected a few @tinacms/styles examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
tinacms / tinacms / packages / tinacms / src / components / ActionsMenu.tsx View on Github 
export const ActionButton: StyledComponent<'button', {}, {}> = styled.button`
position: relative;
text-align: center;
font-size: ${font.size(0)};
padding: 0 0.75rem;
height: 2.5rem;
font-weight: 500;
width: 100%;
background: none;
cursor: pointer;
outline: none;
border: 0;
transition: all 85ms ease-out;
&:hover {
color: ${color.primary()};
background-color: #f6f6f9;
}
&:not(:last-child) {
border-bottom: 1px solid #efefef;
}
`display: flex;
align-items: center;
justify-content: center;
fill: white;
text-align: center;
background-color: ${color.primary()};
background-repeat: no-repeat;
background-position: center;
transition: all 150ms ease-out;
cursor: pointer;
animation: ${SidebarToggleAnimation} 200ms 300ms ease-out 1 both;
&:hover {
background-color: ${color.primary('light')};
}
&:active {
background-color: ${color.primary('dark')};
}
`
const SidebarWrapper = styled.div<{ open: boolean }>`
margin: 0;
padding: 0;
border: 0;
z-index: 1;
background-color: white;
position: fixed;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
width: ${SIDEBAR_WIDTH}px;
overflow: visible;
height: 100%;height: 2.75rem;
border: 0;
outline: none;
display: flex;
align-items: center;
justify-content: center;
fill: white;
text-align: center;
background-color: ${color.primary()};
background-repeat: no-repeat;
background-position: center;
transition: all 150ms ease-out;
cursor: pointer;
animation: ${SidebarToggleAnimation} 200ms 300ms ease-out 1 both;
&:hover {
background-color: ${color.primary('light')};
}
&:active {
background-color: ${color.primary('dark')};
}
`
const SidebarWrapper = styled.div<{ open: boolean }>`
margin: 0;
padding: 0;
border: 0;
z-index: 1;
background-color: white;
position: fixed;
display: flex;
flex-direction: column;
flex-wrap: nowrap;`
const BlockOption = styled.button`
position: relative;
text-align: center;
font-size: ${font.size(0)};
padding: ${padding('small')};
font-weight: 500;
width: 100%;
background: none;
cursor: pointer;
outline: none;
border: 0;
transition: all 85ms ease-out;
&:hover {
color: ${color.primary()};
background-color: #f6f6f9;
}
&:not(:last-child) {
border-bottom: 1px solid #efefef;
}
`
const ItemClickTarget = styled.div`
flex: 1 1 0;
min-width: 0;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
`const CreateButton = styled.button`
position: relative;
text-align: center;
font-size: ${font.size(0)};
padding: 0 0.75rem;
height: 2.5rem;
font-weight: 500;
width: 100%;
background: none;
cursor: pointer;
outline: none;
border: 0;
transition: all 85ms ease-out;
&:hover {
color: ${color.primary()};
background-color: #f6f6f9;
}
&:not(:last-child) {
border-bottom: 1px solid #efefef;
}
`padding: 0.5rem 1rem;
transition: all 85ms ease-out;
cursor: pointer;
&:first-child {
padding-top: ${padding('small')};
}
&:last-child {
padding-bottom: ${padding('small')};
}
&:hover {
background-color: ${color.grey(1)};
color: ${color.primary()};
}
&:active {
color: ${color.primary()};
fill: ${color.primary()};
background-color: rgba(53, 50, 50, 0.05);
}
`
`
const AuthorOption = styled.button`
position: relative;
text-align: center;
font-size: ${font.size(0)};
padding: ${padding("small")};
font-weight: 500;
width: 100%;
background: none;
cursor: pointer;
outline: none;
border: 0;
transition: all 85ms ease-out;
&:hover {
color: ${color.primary()};
background-color: #f6f6f9;
}
&:not(:last-child) {
border-bottom: 1px solid #efefef;
}
`
background: ${p => (p.checked ? color.primary() : color.grey(3))};
transform: translate3d(${p => (p.checked ? '1.25rem' : '0')}, -50%, 0); box-shadow: 0 0 0 2px ${p => (p.error ? color.error() : color.primary())};
}span {
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
svg {
flex: 0 0 auto;
width: 1.5rem;
fill: ${color.grey(3)};
height: auto;
transform: translate3d(-4px, 0, 0);
transition: transform 150ms ease-out;
}
:hover {
color: ${color.primary()};
svg {
fill: ${color.grey(8)};
transform: translate3d(-7px, 0, 0);
transition: transform 250ms ease;
}
}
`
export const FormBody = styled.div`
position: relative;
flex: 1 1 auto;
display: flex;
flex-direction: column;
scrollbar-width: none;
width: 100%;
overflow: hidden;
