Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
height: ${tokens.counter.small};
line-height: 15px;
min-width: ${tokens.counter.small};
`,
medium: `
font-size: 12px; // This is an exception that is missing from the font-scale
height: ${tokens.counter.medium};
line-height: ${tokens.counter.small};
min-width: ${tokens.counter.medium};
`,
};
const counterColorStyles = {
grey: `
background: ${tokens.color.blackLighten80};
border-radius: ${tokens.border.radius};
border: 1px solid ${tokens.border.color};
color: ${tokens.textColor.subtle};
`,
red: `
border-radius: 50px;
color: ${tokens.color.white};
padding: 0 ${tokens.spaceSm};
background: ${tokens.color.orangeDarken10};
border: 1px solid ${tokens.color.orangeDarken10};
`,
blue: `
border-radius: 50px;
color: ${tokens.color.white};
import tokens from "@paprika/tokens";
export const disabledFormStyles = `
background-color: ${tokens.color.white};
border-color: ${tokens.color.blackLighten70};
color: ${tokens.color.blackLighten60};
cursor: not-allowed;
`;
export const readOnlyFormStyles = `
background-color: ${tokens.color.blackLighten70};
box-shadow: none;
color: ${tokens.color.black};
cursor: text;
&,
&:focus {
border-color: ${tokens.color.blackLighten60};
}
`;
${({ isDisabled }) => {
return `
[data-pka-anchor="collapsible.heading"] {
align-items: center;
background-color: ${tokens.color.cremeLighten5};
border-bottom: 1px solid ${tokens.color.blackLighten60};
display: flex;
padding: ${tokens.spaceSm};
input[type="checkbox"] {
margin-right: ${tokens.space};
}
label {
align-items: center;
display: flex;
}
${isDisabled ? disabledStyle : ""};
}
`;
}}
import styled from "styled-components";
import tokens from "@paprika/tokens";
import stylers from "@paprika/stylers";
const defaultStyles = `
background-color: ${tokens.color.white};
border: 1px solid ${tokens.border.color};
border-radius: ${tokens.card.borderRadius};
box-shadow: ${tokens.shadow};
color: ${tokens.textColor.default};
padding: ${tokens.space} ${tokens.spaceLg};
`;
const darkStyles = `
background-color: ${tokens.color.black};
border: 1px solid ${tokens.color.black};
border-radius: ${tokens.border.radius};
color: ${tokens.color.white};
padding: ${tokens.spaceSm} ${tokens.space};
`;
const CardStyled = styled.div`
${props => {
return props.isDisabled
? ` color: ${tokens.color.blackLighten60}; background: ${tokens.color.blackLighten60};`
: "";
}}
`;
import { css } from "styled-components";
import tokens from "@paprika/tokens";
import stylers from "@paprika/stylers";
const pseudoElement = css`
background: ${tokens.color.blackLighten60};
content: "";
display: inline-block;
flex-grow: 1;
height: 1px;
`;
const textDividerStyles = css`
&:after {
${pseudoElement}
margin-left: ${tokens.space};
}
`;
export const dividerCSS = css`
align-items: center;
color: ${tokens.color.blackLighten20};
import { css } from "styled-components";
import tokens from "@paprika/tokens";
import stylers from "@paprika/stylers";
const collapsibleStyles = css`
&, * {
box-sizing: border-box;
}
${stylers.fontSize()}
color: ${tokens.color.black};
display: block;
line-height: ${stylers.spacer(3)};
width: 100%;
.collapsible__label {
display: inline-block;
border-radius: ${tokens.border.radius};
margin-left: -${tokens.spaceSm};
margin-right: -${tokens.spaceSm};
padding-left: ${tokens.spaceSm};
padding-right: ${tokens.spaceSm};
width: calc(100% + ${tokens.space});
}
.collapsible__icon--left {
margin-right: ${tokens.spaceSm};
position: relative;
transition: border-color 0.3s ease;
${({ isDisabled }) => (isDisabled ? disabledStyles : null)}
${({ isSelected }) => (isSelected ? activeStyles : null)}
&:first-child {
margin-left: 0;
}
&:focus {
${stylers.z(1)}
}
&:hover {
border-color: ${tokens.color.creme};
}
&.tab-link {
color: ${tokens.color.black};
text-decoration: none;
}
`;
width: ${stylers.spacer(4)};
`,
[ShirtSizes.LARGE]: css`
font-size: 22px;
height: ${stylers.spacer(5)};
line-height: ${Number.parseInt(tokens.space, 10) * 5 - 2}px;
padding: 0;
width: ${stylers.spacer(5)};
`,
};
const minorStyles = css`
transition: background-color 0.2s ease-out;
&:hover {
background-color: ${stylers.alpha(tokens.color.black, 0.1)};
}
&:active {
background-color: ${stylers.alpha(tokens.color.black, 0.2)};
}
`;
const iconButtonStyles = css`
${({ size }) => iconButtonSizes[size]}
${({ kind }) => (kind === Button.Kinds.MINOR ? minorStyles : "")}
.button__icon {
color: inherit;
margin: 0;
}
`;