roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-06-17 09:59:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix all linting issues, upgrade most packages

Browse source
This commit is contained in:
41666 2022-01-30 04:53:13 -05:00
parent c7774ddca3
commit 3c3af304f7
45 changed files with 1148 additions and 1848 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/design-system/atoms/avatar/Avatar.styled.ts
View file

@ -16,7 +16,7 @@ export const Container = styled.div<ContainerProps>`
color: ${palette.grey100};
position: relative;
background-color: ${palette.grey500};
font-weight: bold;
font-weight: 700;
text-align: center;
line-height: 1;
overflow: hidden;
@ -24,7 +24,7 @@ export const Container = styled.div<ContainerProps>`
${(props) =>
props.deliberatelyEmpty &&
css`
border: 4px solid rgba(0, 0, 0, 0.25);
border: 4px solid rgb(0 0 0 / 25%);
background-color: ${palette.taupe400};
color: ${palette.taupe600};
`}

12
packages/design-system/atoms/button/Button.styled.ts
View file

@ -25,7 +25,7 @@ const base = css`
background-color: ${palette.taupe300};
color: ${palette.grey500};
border-radius: 3px;
border: 2px solid rgba(0, 0, 0, 0.55);
border: 2px solid rgb(0 0 0 / 55%);
transition: all 0.15s ease-in-out;
outline: 0;
position: relative;
@ -41,20 +41,20 @@ const base = css`
left: 0;
right: 0;
background-color: #000;
opacity: 0;
opacity: 0%;
transition: all 0.15s ease-in-out;
}
:hover {
transform: translateY(-1px);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
}
:active {
transform: translateY(1px);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 2px rgb(0 0 0 / 25%);
::after {
opacity: 0.1;
opacity: 10%;
}
}
`;
@ -70,7 +70,7 @@ const colors = {
border: 2px solid ${palette.discord200};
`,
muted: css`
border: 2px solid rgba(0, 0, 0, 0.15);
border: 2px solid rgb(0 0 0 / 15%);
background: none;
:hover {
background-color: ${palette.taupe200};

2
packages/design-system/atoms/colors/colors.stories.tsx
View file

@ -15,7 +15,7 @@ export default {
};
const Swatch = styled.div`
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
box-shadow: 1px 1px 2px rgb(0 0 0 / 25%);
width: 250px;
height: 100px;
margin: 10px;

2
packages/design-system/atoms/dot-overlay/DotOverlay.tsx
View file

@ -3,7 +3,7 @@ import * as React from 'react';
import styled from 'styled-components';
const dotOverlayBase = styled.div`
opacity: 0.6;
opacity: 60%;
pointer-events: none;
position: fixed;
top: 0;

2
packages/design-system/atoms/fader/Fader.tsx
View file

@ -7,7 +7,7 @@ export type FaderProps = {
};
const FaderOpacityStyled = styled.div<Pick<FaderProps, 'isVisible'>>`
opacity: ${(props) => (props.isVisible ? 1 : 0)};
opacity: ${(props) => (props.isVisible ? '100%' : '0%')};
pointer-events: ${(props) => (props.isVisible ? 'unset' : 'none')};
transition: opacity 0.35s ease-in-out;
`;

4
packages/design-system/atoms/hero/Hero.stories.tsx
View file

@ -41,7 +41,7 @@ const StoryWrapper = ({ topSpacing, bottomSpacing, ...props }: WrapperProps) =>
<div
style={{
height: topSpacing,
backgroundColor: 'rgba(255,0,0,0.25)',
backgroundColor: 'rgb(255 0 0 / 25%)',
top: 0,
left: 0,
right: 0,
@ -54,7 +54,7 @@ const StoryWrapper = ({ topSpacing, bottomSpacing, ...props }: WrapperProps) =>
<div
style={{
height: bottomSpacing,
backgroundColor: 'rgba(0,0,255,0.25)',
backgroundColor: 'rgb(0 0 255 / 25%)',
bottom: 0,
left: 0,
right: 0,

4
packages/design-system/atoms/placeholder/Placeholder.tsx
View file

@ -41,10 +41,10 @@ export const PlaceholderBox = styled.div<PlaceholderProps>`
export const opacityInOut = keyframes`
from {
opacity: 0.6;
opacity: 60%;
}
to {
opacity: 0.3;
opacity: 30%;
}
`;

10
packages/design-system/atoms/popover/Popover.styled.ts
View file

@ -13,7 +13,7 @@ export const PopoverBase = styled.div<PopoverStyledProps>`
position: absolute;
background-color: ${palette.taupe100};
padding: 5px;
border: 2px solid rgba(0, 0, 0, 0.15);
border: 2px solid rgb(0 0 0 / 15%);
border-radius: 3px;
z-index: 10;
transition: opacity ${transitions.out2in}s ease-in,
@ -24,7 +24,7 @@ export const PopoverBase = styled.div<PopoverStyledProps>`
!props.active &&
css`
transform: translateY(-2vh);
opacity: 0;
opacity: 0%;
pointer-events: none;
`}
${onSmallScreen(
@ -40,11 +40,11 @@ export const PopoverBase = styled.div<PopoverStyledProps>`
z-index: 200;
margin: 0 !important;
`
)};
)}
`;
export const DefocusHandler = styled.div<PopoverStyledProps>`
background-color: rgba(0, 0, 0, 0.01);
background-color: rgb(0 0 0 / 1%);
position: fixed;
z-index: 0;
top: 0;
@ -82,7 +82,7 @@ export const PopoverHeadCloser = styled.div`
)}
&:hover {
background: rgba(0, 0, 0, 0.1);
background: rgb(0 0 0 / 10%);
}
`;

4
packages/design-system/atoms/role/Role.styled.tsx
View file

@ -62,7 +62,7 @@ export const Outer = styled.div<StyledProps>`
? onTablet(css`
&:hover {
transform: translateY(-2px);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
${Circle} svg {
fill-opacity: 1;
}
@ -73,7 +73,7 @@ export const Outer = styled.div<StyledProps>`
box-shadow: 0 0 0 transparent;
}
`)
: null};
: null}
`;
export const Text = styled.div`

2
packages/design-system/atoms/tab-view/TabView.styled.ts
View file

@ -65,7 +65,7 @@ export const TabContent = styled.div`
export const TabContentTitle = styled.div`
${text500}
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgb(0 0 0 / 10%);
padding: 0.5em 7px;
`;

10
packages/design-system/atoms/text-input/TextInput.tsx
View file

@ -21,13 +21,13 @@ const common = css`
:focus {
outline: none;
border-color: ${palette.grey100};
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 3px rgb(0 0 0 / 25%);
}
[disabled],
:disabled {
cursor: not-allowed;
color: rgba(255, 255, 255, 0.75);
color: rgb(255 255 255 / 75%);
font-style: italic;
}
@ -41,7 +41,7 @@ const common = css`
`;
export const StyledTextInput = styled.input`
${common};
${common}
`;
type TextInputProps<T extends HTMLInputElement | HTMLTextAreaElement> =
@ -87,8 +87,8 @@ export const TextInputWithIcon = (props: TextInputWithIconProps) => {
};
const StyledTextarea = styled.textarea`
${common};
${fontCSS};
${common}
${fontCSS}
margin: 0.5em 0;
`;

2
packages/design-system/atoms/toggle/Toggle.styled.tsx
View file

@ -24,7 +24,7 @@ export const ToggleSwitch = styled.div<{ state: boolean }>`
width: 2.675rem;
border-radius: 1.375rem;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.1);
border: 1px solid rgb(0 0 0 / 10%);
top: 0.23em;
transition: background-color ${transitions.in2in}s ease-in-out;
cursor: pointer;

2
packages/design-system/atoms/typography/typography.stories.tsx
View file

@ -87,7 +87,7 @@ const SpacingHead = styled.p`
const SpacingSection = styled(Section)`
max-width: 50vw;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
border-bottom: 1px solid rgb(0 0 0 / 25%);
`;
export const Spacing = () => (

9
packages/design-system/atoms/typography/typography.tsx
View file

@ -14,55 +14,46 @@ const reset = css`
export const text900 = css`
${reset}
font-size: 2.3rem;
`;
export const text800 = css`
${reset}
font-size: 2rem;
`;
export const text700 = css`
${reset}
font-size: 1.7rem;
`;
export const text600 = css`
${reset}
font-size: 1.4rem;
`;
export const text500 = css`
${reset}
font-size: 1.2rem;
`;
export const text400 = css`
${reset}
font-size: 1rem;
`;
export const text300 = css`
${reset}
font-size: 0.9rem;
`;
export const text200 = css`
${reset}
font-size: 0.7rem;
`;
export const text100 = css`
${reset}
font-size: 0.5rem;
`;