Skip to content

Commit

Permalink
feat: palette progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@fairlighteth
fairlighteth committed Nov 23, 2023
1 parent 314d55d commit 4f0837f
Show file tree
Hide file tree
Showing 127 changed files with 733 additions and 440 deletions.
9 changes: 5 additions & 4 deletions apps/cowswap-frontend/src/common/constants/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,14 @@ export enum UI {
COLOR_PAPER_DARKER = '--cow-color-paper-darker',
COLOR_PAPER_DARKEST = '--cow-color-paper-darkest',

COLOR_PRIMARY_TEXT = '--cow-color-primary-text',
COLOR_PRIMARY_TEXT_OPACITY_70 = '--cow-color-primary-text-opacity-70',
COLOR_PRIMARY_TEXT_OPACITY_25 = '--cow-color-primary-text-opacity-25',
COLOR_PRIMARY_TEXT_OPACITY_10 = '--cow-color-primary-text-opacity-10',
COLOR_TEXT = '--cow-color-text',
COLOR_TEXT_OPACITY_70 = '--cow-color-text-opacity-70',
COLOR_TEXT_OPACITY_25 = '--cow-color-text-opacity-25',
COLOR_TEXT_OPACITY_10 = '--cow-color-text-opacity-10',

COLOR_SECONDARY_TEXT = '--cow-color-secondary-text',
COLOR_DISABLED_TEXT = '--cow-color-disabled-text',
COLOR_BUTTON_TEXT = '--cow-color-button-text',

COLOR_WARNING = '--cow-color-warning',
COLOR_WARNING_BG = '--cow-color-warning-bg',
Expand Down
2 changes: 1 addition & 1 deletion apps/cowswap-frontend/src/common/pure/ConfirmationModal/ConfirmationModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const Description = styled.p`
`

const Warning = styled.strong`
color: var(${UI.COLOR_PRIMARY_TEXT});
color: ${`var(${UI.COLOR_TEXT})`};
`

export interface ConfirmationModalProps {
Expand Down
4 changes: 2 additions & 2 deletions apps/cowswap-frontend/src/common/pure/ConfirmationModal/ConfirmationModalHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Container = styled.header`
padding: 0 0 16px;
margin: 0 0 24px;
border-bottom: 1px solid ${({ theme }) => theme.grey1};
color: var(${UI.COLOR_PRIMARY_TEXT});
color: ${`var(${UI.COLOR_TEXT})`};
`

const Title = styled.b`
Expand All @@ -32,7 +32,7 @@ const Close = styled(CloseIcon)`
}
> line {
stroke: var(${UI.COLOR_PRIMARY_TEXT});
stroke: var(${UI.COLOR_TEXT});
}
`

Expand Down
14 changes: 7 additions & 7 deletions apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/styled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ export const ButtonCustom = styled.button`
border-radius: 16px;
min-height: 52px;
border: 1px solid ${({ theme }) => theme.border2};
color: var(${UI.COLOR_PRIMARY_TEXT});
color: ${`var(${UI.COLOR_TEXT})`};
background: transparent;
outline: 0;
padding: 8px 16px;
Expand Down Expand Up @@ -240,7 +240,7 @@ export const StepsIconWrapper = styled.div`
height: 100%;
width: 100%;
padding: 18px;
stroke: var(${UI.COLOR_PRIMARY_TEXT});
stroke: var(${UI.COLOR_TEXT});
}
@keyframes spin {
Expand Down Expand Up @@ -298,7 +298,7 @@ export const StepsWrapper = styled.div`
flex: 1 1 auto;
height: 2px;
border: 0;
background: var(${UI.COLOR_PRIMARY_TEXT});
background: var(${UI.COLOR_TEXT});
margin: auto;
position: absolute;
width: 100%;
Expand Down Expand Up @@ -403,7 +403,7 @@ export const CompareItem = styled.div<{ highlight?: boolean; recommended?: boole
font-size: 13px;
background: ${({ theme, highlight }) =>
highlight ? (theme.darkMode ? transparentize(0.8, theme.text3) : transparentize(0.9, theme.text3)) : theme.bg1};
border: 1px solid ${({ highlight }) => (highlight ? 'none' : transparentize(0.8, `var(${UI.COLOR_PRIMARY_TEXT})`))};
border: 1px solid ${({ highlight }) => (highlight ? 'none' : transparentize(0.8, `var(${UI.COLOR_TEXT})`))};
position: relative;
&::before {
Expand Down Expand Up @@ -439,7 +439,7 @@ export const ItemList = styled.div<{ listIconAlert?: boolean }>`
padding: 0;
list-style: none;
font-size: inherit;
color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
gap: 6px;
display: flex;
flex-flow: column wrap;
Expand Down Expand Up @@ -477,7 +477,7 @@ export const ItemList = styled.div<{ listIconAlert?: boolean }>`
listIconAlert &&
css`
> path {
fill: ${transparentize(0.6, theme.primaryText)};
fill: ${transparentize(0.6, theme.text)};
}
`}
}
Expand All @@ -502,7 +502,7 @@ export const ApproveFooter = styled.div`
padding: 0;
list-style: none;
font-size: inherit;
color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
gap: 6px;
display: flex;
flex-flow: column wrap;
Expand Down
2 changes: 1 addition & 1 deletion apps/cowswap-frontend/src/common/pure/ConfirmedButton/ConfirmedButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const Input = styled.input`
padding: 10px;
border-radius: 4px;
background: ${({ theme }) => theme.bg3};
color: var(${UI.COLOR_PRIMARY_TEXT});
color: ${`var(${UI.COLOR_TEXT})`};
outline: none;
font-size: 15px;
Expand Down
6 changes: 3 additions & 3 deletions apps/cowswap-frontend/src/common/pure/CurrencyArrowSeparator/styled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ export const LoadingWrapper = styled.div<{ isLoading: boolean; border?: boolean
transform-origin: center right;
transition: transform 0.25s;
border: ${({ border, theme }) => (border ? `1px solid ${theme.grey1}` : '0')};
box-shadow: 0px 0px 0px 3px ${({ theme }) => theme.bg1};
background: var(${UI.COLOR_GREY});
box-shadow: 0 0 0 3px ${({ theme }) => theme.paper};
background: var(${UI.COLOR_PAPER_DARKER});
border-radius: 8px;
width: var(--size);
margin: auto;
Expand All @@ -59,7 +59,7 @@ export const LoadingWrapper = styled.div<{ isLoading: boolean; border?: boolean
export const ArrowDownIcon = styled(ArrowDown)`
display: block;
margin: auto;
stroke: var(${UI.COLOR_PRIMARY_TEXT});
stroke: var(${UI.COLOR_TEXT});
stroke-width: 3px;
padding: 0;
height: 100%;
Expand Down
10 changes: 5 additions & 5 deletions apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/styled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const CurrencyInputBox = styled.div`
margin: 0;
font-weight: 400;
font-size: 13px;
color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_70})`};
color: ${`var(${UI.COLOR_TEXT_OPACITY_70})`};
${({ theme }) => theme.mediaWidth.upToSmall`
gap: 8px;
Expand All @@ -62,7 +62,7 @@ export const CurrencyTopLabel = styled.div`
font-size: 13px;
font-weight: 400;
margin: auto 0;
color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_70})`};
color: ${`var(${UI.COLOR_TEXT_OPACITY_70})`};
`

export const NumericalInput = styled(Input)<{ $loading: boolean }>`
Expand All @@ -73,10 +73,10 @@ export const NumericalInput = styled(Input)<{ $loading: boolean }>`
background: none;
font-size: 28px;
font-weight: 500;
color: var(${UI.COLOR_PRIMARY_TEXT});
color: ${`var(${UI.COLOR_TEXT})`};
&::placeholder {
color: ${({ theme }) => transparentize(0.3, theme.primaryText)};
color: ${({ theme }) => transparentize(0.3, theme.text)};
}
${({ theme }) => theme.mediaWidth.upToSmall`
Expand All @@ -89,7 +89,7 @@ export const NumericalInput = styled(Input)<{ $loading: boolean }>`
export const TokenAmountStyled = styled(TokenAmount)`
font-size: 28px;
font-weight: 500;
color: var(${UI.COLOR_PRIMARY_TEXT});
color: ${`var(${UI.COLOR_TEXT})`};
${({ theme }) => theme.mediaWidth.upToSmall`
font-size: 26px;
Expand Down
10 changes: 4 additions & 6 deletions apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,9 @@ export const CurrencySelectWrapper = styled.button<{ isLoading: boolean; $stubbe
border: ${({ theme }) => (theme.darkMode ? `1px solid ${transparentize(0.5, theme.grey1)}` : 0)};
outline: none;
background-color: ${({ $stubbed, theme }) => ($stubbed ? lighten(0.1, theme.primary) : `var(${UI.COLOR_PAPER})`)};
color: ${({ $stubbed }) => ($stubbed ? `var(${UI.COLOR_PRIMARY_TEXT})` : `var(${UI.COLOR_PRIMARY_TEXT})`)};
color: ${({ $stubbed }) => ($stubbed ? `var(${UI.COLOR_TEXT})` : `var(${UI.COLOR_TEXT})`)};
box-shadow: ${({ theme }) =>
theme.darkMode
? `0px 4px 8px ${transparentize(0.32, theme.black)}`
: `0px 4px 8px ${`var(${UI.COLOR_PRIMARY_TEXT})`}`};
theme.darkMode ? `0px 4px 8px ${transparentize(0.32, theme.black)}` : `0px 4px 8px ${`var(${UI.COLOR_TEXT})`}`};
opacity: ${({ isLoading }) => (isLoading ? 0.6 : 1)};
pointer-events: ${({ readonlyMode }) => (readonlyMode ? 'none' : '')};
border-radius: var(${UI.BORDER_RADIUS_NORMAL});
Expand All @@ -41,7 +39,7 @@ export const ArrowDown = styled(DropDown)<{ $stubbed?: boolean }>`
min-height: 7px;
> path {
stroke: ${({ $stubbed, theme }) => ($stubbed ? theme.white : `var(${UI.COLOR_PRIMARY_TEXT})`)};
stroke: ${({ $stubbed, theme }) => ($stubbed ? theme.white : `var(${UI.COLOR_TEXT})`)};
stroke-width: 2px;
}
Expand All @@ -54,7 +52,7 @@ export const CurrencySymbol = styled.div<{ $stubbed: boolean }>`
font-size: 19px;
font-weight: 500;
text-align: left;
color: ${({ $stubbed, theme }) => ($stubbed ? theme.white : `var(${UI.COLOR_PRIMARY_TEXT})`)};
color: ${({ $stubbed, theme }) => ($stubbed ? theme.white : `var(${UI.COLOR_TEXT})`)};
${({ theme }) => theme.mediaWidth.upToSmall`
font-size: 16px;
Expand Down
6 changes: 3 additions & 3 deletions apps/cowswap-frontend/src/common/pure/ExpertModeModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const ModalContentWrapper = styled.div`
}
> p > strong {
color: var(${UI.COLOR_PRIMARY_TEXT});
color: ${`var(${UI.COLOR_TEXT})`};
}
`

Expand All @@ -34,7 +34,7 @@ const Header = styled.div`
padding: 0 0 16px;
margin: 0 0 24px;
border-bottom: 1px solid ${({ theme }) => theme.grey1};
color: var(${UI.COLOR_PRIMARY_TEXT});
color: ${`var(${UI.COLOR_TEXT})`};
> b {
font-size: 21px;
Expand All @@ -54,7 +54,7 @@ const StyledCloseIcon = styled(X)`
}
> line {
stroke: var(${UI.COLOR_PRIMARY_TEXT});
stroke: var(${UI.COLOR_TEXT});
}
`

Expand Down
2 changes: 1 addition & 1 deletion apps/cowswap-frontend/src/common/pure/FiatValue/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { PriceImpactIndicator } from '../PriceImpactIndicator'
const FiatValueWrapper = styled.div<{ hasValue$: boolean }>`
display: inline-block;
font-size: 14px;
color: ${({ theme, hasValue$ }) => (hasValue$ ? `var(${UI.COLOR_PRIMARY_TEXT})` : theme.text4)};
color: ${({ theme, hasValue$ }) => (hasValue$ ? `var(${UI.COLOR_TEXT})` : theme.text4)};
`

export function FiatValue({
Expand Down
2 changes: 1 addition & 1 deletion apps/cowswap-frontend/src/common/pure/Icon/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const Wrapper = styled.div<Omit<IconProps, 'image'>>`
}
> svg > path {
fill: ${({ color = UI.COLOR_TEXT1 }) => `var(${color})`};
fill: ${({ color = UI.COLOR_TEXT }) => `var(${color})`};
}
`

Expand Down
2 changes: 1 addition & 1 deletion apps/cowswap-frontend/src/common/pure/Modal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export const CowModal = styled(Modal)<{
border-radius: var(${UI.BORDER_RADIUS_NORMAL});
> [data-reach-dialog-content] {
color: var(${UI.COLOR_PRIMARY_TEXT});
color: ${`var(${UI.COLOR_TEXT})`};
width: 100%;
max-width: ${({ maxWidth = 500 }) => `${maxWidth}px`};
border: ${({ border = 'inherit' }) => `${border}`};
Expand Down
2 changes: 1 addition & 1 deletion apps/cowswap-frontend/src/common/pure/Modal/styled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const CloseIcon = styled.div`

export const HoverText = styled.div`
text-decoration: none;
color: var(${UI.COLOR_PRIMARY_TEXT});
color: ${`var(${UI.COLOR_TEXT})`};
display: flex;
align-items: center;
Expand Down
6 changes: 3 additions & 3 deletions apps/cowswap-frontend/src/common/pure/NetworksList/styled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const ActiveRowLinkList = styled.div`
& > a {
align-items: center;
color: var(${UI.COLOR_PRIMARY_TEXT});
color: ${`var(${UI.COLOR_TEXT})`};
display: flex;
flex-direction: row;
font-size: 14px;
Expand Down Expand Up @@ -51,11 +51,11 @@ export const FlyoutRow = styled.div<{ active: boolean }>`
padding: 6px 8px;
text-align: left;
width: 100%;
color: ${({ active, theme }) => (active ? theme.white : `var(${UI.COLOR_PRIMARY_TEXT})`)};
color: ${({ active, theme }) => (active ? theme.white : `var(${UI.COLOR_TEXT})`)};
&:hover {
color: ${({ theme, active }) => !active && theme.text1};
background: ${({ theme, active }) => !active && transparentize(0.9, theme.primaryText)};
background: ${({ theme, active }) => !active && transparentize(0.9, theme.text)};
}
transition: background 0.13s ease-in-out;
Expand Down
2 changes: 1 addition & 1 deletion apps/cowswap-frontend/src/common/pure/OrderExecutionStatusList/RateTooltipHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const Content = styled.div`
line-height: 1.5;
padding: 0;
margin: 0;
color: var(${UI.COLOR_PRIMARY_TEXT});
color: ${`var(${UI.COLOR_TEXT})`};
}
> h3 {
Expand Down
2 changes: 1 addition & 1 deletion apps/cowswap-frontend/src/common/pure/OrderExecutionStatusList/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const ExecuteIndicator = styled.div<{ status?: OrderExecutionStatus }>`
return theme.text3
case 'notClose':
default:
return transparentize(0.5, `var(${UI.COLOR_PRIMARY_TEXT})`)
return transparentize(0.5, `var(${UI.COLOR_TEXT})`)
}
}};
`
Expand Down
2 changes: 1 addition & 1 deletion apps/cowswap-frontend/src/common/pure/PriceImpactIndicator/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ function getPriceImpactColor(theme: DefaultTheme, priceImpact: Percent): string
const severity = warningSeverity(priceImpact)

if (severity === -1) return theme.success
if (severity < 1) return theme.primaryText
if (severity < 1) return theme.text
if (severity < 3) return theme.danger

return theme.danger
Expand Down
10 changes: 5 additions & 5 deletions apps/cowswap-frontend/src/common/pure/RateInfo/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,18 +55,18 @@ const RateLabel = styled.div`
gap: 5px;
text-align: left;
transition: color 0.15s ease-in-out;
color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_70})`};
color: ${`var(${UI.COLOR_TEXT_OPACITY_70})`};
&:hover {
color: var(${UI.COLOR_PRIMARY_TEXT});
color: ${`var(${UI.COLOR_TEXT})`};
}
`

const InvertIcon = styled.div`
--size: 17px;
cursor: pointer;
background: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_10})`};
color: var(${UI.COLOR_PRIMARY_TEXT});
background: ${`var(${UI.COLOR_TEXT_OPACITY_10})`};
color: ${`var(${UI.COLOR_TEXT})`};
width: var(--size);
height: var(--size);
min-width: var(--size);
Expand Down Expand Up @@ -107,7 +107,7 @@ export const RateWrapper = styled.button`
`

export const FiatRate = styled.span`
color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_70})`};
color: ${`var(${UI.COLOR_TEXT_OPACITY_70})`};
font-weight: 400;
text-align: right;
`
Expand Down
14 changes: 7 additions & 7 deletions apps/cowswap-frontend/src/common/pure/Stepper/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,16 @@ interface StepStyles {
}

const stateStyles: Record<StepState, StepStyles> = {
active: { dotBackground: UI.COLOR_LINK, dotColor: UI.COLOR_PAPER, labelColor: UI.COLOR_TEXT1 },
finished: { dotBackground: UI.COLOR_LINK_OPACITY_10, dotColor: UI.COLOR_LINK, labelColor: UI.COLOR_TEXT1 },
active: { dotBackground: UI.COLOR_LINK, dotColor: UI.COLOR_PAPER, labelColor: UI.COLOR_TEXT },
finished: { dotBackground: UI.COLOR_LINK_OPACITY_10, dotColor: UI.COLOR_LINK, labelColor: UI.COLOR_TEXT },
disabled: {
dotBackground: UI.COLOR_TEXT1_OPACITY_25,
dotColor: UI.COLOR_TEXT1_OPACITY_25,
labelColor: UI.COLOR_TEXT1_OPACITY_25,
dotBackground: UI.COLOR_TEXT_OPACITY_25,
dotColor: UI.COLOR_TEXT_OPACITY_25,
labelColor: UI.COLOR_TEXT_OPACITY_25,
},
error: { dotBackground: UI.COLOR_DANGER_BG, dotColor: UI.COLOR_DANGER, labelColor: UI.COLOR_DANGER },
loading: { dotBackground: UI.COLOR_LINK, dotColor: UI.COLOR_PAPER, labelColor: UI.COLOR_LINK },
open: { dotBackground: UI.COLOR_TEXT1_OPACITY_10, dotColor: UI.COLOR_TEXT2, labelColor: UI.COLOR_TEXT2 },
open: { dotBackground: UI.COLOR_TEXT_OPACITY_10, dotColor: UI.COLOR_TEXT2, labelColor: UI.COLOR_TEXT2 },
}

const Step = styled.div<StepProps>`
Expand Down Expand Up @@ -90,7 +90,7 @@ const Step = styled.div<StepProps>`
? `var(${stateStyles['error'].dotBackground})`
: stepState === 'finished'
? `var(${stateStyles['finished'].dotBackground})`
: `var(${UI.COLOR_TEXT1_OPACITY_25})`};
: `var(${UI.COLOR_TEXT_OPACITY_25})`};
border-radius: var(${UI.BORDER_RADIUS_NORMAL});
}
Expand Down
2 changes: 1 addition & 1 deletion apps/cowswap-frontend/src/common/pure/TransactionSubmittedContent/styled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const ButtonCustom = styled.button`
border-radius: 16px;
min-height: 52px;
border: 1px solid ${({ theme }) => theme.border2};
color: var(${UI.COLOR_PRIMARY_TEXT});
color: ${`var(${UI.COLOR_TEXT})`};
background: transparent;
outline: 0;
padding: 8px 16px;
Expand Down
Loading

0 comments on commit 4f0837f

Please sign in to comment.