Skip to content

Commit 200c80e

Browse files
jvaclavikjvaclavik
committed
feat(suite): Add palette and semantic tokens for v2
1 parent 8ddf478 commit 200c80e

File tree

17 files changed

+1393
-381
lines changed

17 files changed

+1393
-381
lines changed

‎packages/components/src/components/RadioCard/RadioCard.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
22

33
import styled, { css } from 'styled-components';
44

5-
import { Elevation, borders, mapElevationToBorder, palette, spacingsPx } from '@trezor/theme';
5+
import { Elevation, borders, mapElevationToBorder, paletteV1, spacingsPx } from '@trezor/theme';
66

77
import {
88
FrameProps,
@@ -71,7 +71,7 @@ export const RadioCard = ({ isActive, onClick, children, ...rest }: RadioCardPro
7171
{isActive && (
7272
<Box position={{ type: 'absolute', top: '-3px', right: '-3px' }}>
7373
<IconWrapper>
74-
<Icon name="check" size="small" color={palette.lightWhiteAlpha1000} />
74+
<Icon name="check" size="small" color={paletteV1.lightWhiteAlpha1000} />
7575
</IconWrapper>
7676
</Box>
7777
)}

‎packages/components/src/components/Tooltip/TooltipArrow.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { FloatingArrow } from '@floating-ui/react';
22

3-
import { palette } from '@trezor/theme';
3+
import { paletteV1 } from '@trezor/theme';
44

55
import { TOOLTIP_BORDER_RADIUS } from './TooltipBox';
66
import { ArrowProps } from './TooltipFloatingUi';
@@ -9,8 +9,8 @@ export const TooltipArrow = ({ ref, context }: ArrowProps) => (
99
<FloatingArrow
1010
ref={ref}
1111
context={context}
12-
fill={palette.darkGray300}
13-
stroke={palette.darkGray100}
12+
fill={paletteV1.darkGray300}
13+
stroke={paletteV1.darkGray100}
1414
staticOffset={TOOLTIP_BORDER_RADIUS}
1515
strokeWidth={0}
1616
tipRadius={1}

‎packages/components/src/components/Tooltip/TooltipBox.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { ReactElement, ReactNode } from 'react';
22

33
import styled from 'styled-components';
44

5-
import { borders, palette, spacings, spacingsPx, typography } from '@trezor/theme';
5+
import { borders, paletteV1, spacings, spacingsPx, typography } from '@trezor/theme';
66

77
import { Icon, IconName } from '../Icon/Icon';
88

@@ -27,7 +27,7 @@ type TooltipContainerStyledProps = {
2727
};
2828

2929
const TooltipContainerStyled = styled.div<TooltipContainerStyledProps>`
30-
background: ${palette.darkGray300};
30+
background: ${paletteV1.darkGray300};
3131
color: ${({ theme }) => theme.textDefault};
3232
border-radius: ${TOOLTIP_BORDER_RADIUS};
3333
text-align: left;

‎packages/suite/src/components/suite/QrCode.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { QRCodeSVG } from 'qrcode.react';
22
import styled, { css } from 'styled-components';
33

4-
import { borders, palette, spacingsPx } from '@trezor/theme';
4+
import { borders, paletteV1, spacingsPx } from '@trezor/theme';
55

66
const Wrapper = styled.div`
77
display: flex;
@@ -15,7 +15,7 @@ const Wrapper = styled.div`
1515
css`
1616
padding: ${spacingsPx.xs};
1717
border-radius: ${borders.radii.xs};
18-
background-color: ${palette.lightWhiteAlpha1000};
18+
background-color: ${paletteV1.lightWhiteAlpha1000};
1919
`}
2020
`;
2121

@@ -27,7 +27,7 @@ export const QrCode = ({ value }: QrCodeProps) => (
2727
<Wrapper>
2828
<QRCodeSVG
2929
bgColor="transparent"
30-
fgColor={palette.lightGray1000}
30+
fgColor={paletteV1.lightGray1000}
3131
level="Q"
3232
value={value}
3333
style={{ width: '100%', height: '100%', objectFit: 'contain' }}

‎packages/suite/src/components/suite/graph/TransactionsGraph/TransactionsGraph.tsx

+5-42
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const Description = styled.div`
5353
justify-content: center;
5454
align-items: center;
5555
text-align: center;
56-
color: ${({ theme }) => theme.legacy.TYPE_LIGHT_GREY};
56+
color: ${({ theme }) => theme.textSubdued};
5757
flex: 1;
5858
`;
5959

@@ -239,49 +239,12 @@ export const TransactionsGraph = memo(
239239
? Number(balanceValueFn(data)) || yDomain[0]
240240
: Number(balanceValueFn(data))
241241
}
242-
stroke={theme.legacy.TYPE_ORANGE}
242+
stroke={theme.baseBorderWarning}
243243
dot={false}
244244
activeDot={false}
245245
/>
246246
)}
247-
<defs>
248-
<linearGradient
249-
id="greenGradient"
250-
x1="0"
251-
y1="0"
252-
x2="0"
253-
y2="100%"
254-
spreadMethod="reflect"
255-
>
256-
<stop
257-
offset="0"
258-
stopColor={theme.legacy.GRADIENT_GREEN_START}
259-
/>
260-
<stop
261-
offset="1"
262-
stopColor={theme.legacy.GRADIENT_GREEN_END}
263-
/>
264-
</linearGradient>
265-
</defs>
266-
<defs>
267-
<linearGradient
268-
id="redGradient"
269-
x1="0"
270-
y1="0"
271-
x2="0"
272-
y2="100%"
273-
spreadMethod="reflect"
274-
>
275-
<stop
276-
offset="0"
277-
stopColor={theme.legacy.GRADIENT_RED_START}
278-
/>
279-
<stop
280-
offset="1"
281-
stopColor={theme.legacy.GRADIENT_RED_END}
282-
/>
283-
</linearGradient>
284-
</defs>
247+
285248
<defs>
286249
<filter id="shadow" x="-2" y="-10" width="50" height="50">
287250
<feGaussianBlur in="SourceAlpha" stdDeviation="5" />
@@ -305,7 +268,7 @@ export const TransactionsGraph = memo(
305268
filter={isBarColored(index) ? 'url(#shadow)' : ''}
306269
fill={
307270
isBarColored(index)
308-
? 'url(#greenGradient)'
271+
? theme.baseBorderBrand
309272
: '#aeaeae'
310273
}
311274
/>
@@ -322,7 +285,7 @@ export const TransactionsGraph = memo(
322285
filter={isBarColored(index) ? 'url(#shadow)' : ''}
323286
fill={
324287
isBarColored(index)
325-
? 'url(#redGradient)'
288+
? theme.baseBorderNegative
326289
: '#dfdfdf'
327290
}
328291
/>

‎packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/TradeActions.tsx

+16-16
Original file line numberDiff line numberDiff line change
@@ -77,23 +77,23 @@ export const TradeActions = ({
7777
>
7878
<Translation id="TR_TRADING_BUY_AND_SELL" />
7979
</HeaderActionButton>
80+
{!hasBitcoinOnlyFirmware(device) && (
81+
<HeaderActionButton
82+
icon="arrowsLeftRight"
83+
onClick={() => {
84+
goToWithAnalytics('wallet-trading-exchange', {
85+
preserveParams: true,
86+
});
87+
}}
88+
data-testid="@wallet/menu/wallet-trading-exchange"
89+
variant="tertiary"
90+
size="small"
91+
isDisabled={isAccountLoading}
92+
>
93+
<Translation id="TR_TRADING_SWAP" />
94+
</HeaderActionButton>
95+
)}
8096
</ShowOnLargeDesktopWrapper>
81-
{!hasBitcoinOnlyFirmware(device) && (
82-
<HeaderActionButton
83-
icon="arrowsLeftRight"
84-
onClick={() => {
85-
goToWithAnalytics('wallet-trading-exchange', {
86-
preserveParams: true,
87-
});
88-
}}
89-
data-testid="@wallet/menu/wallet-trading-exchange"
90-
variant="tertiary"
91-
size="small"
92-
isDisabled={isAccountLoading}
93-
>
94-
<Translation id="TR_TRADING_SWAP" />
95-
</HeaderActionButton>
96-
)}
9797
</AppNavigationTooltip>
9898
</Row>
9999
);

‎packages/suite/src/views/settings/SettingsGeneral/DesktopSuiteBanner.tsx

+7-10
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const Container = styled(motion.div)`
3030
width: 100%;
3131
padding: 12px 20px;
3232
border-radius: 12px;
33-
background: ${({ theme }) => theme.legacy.BG_GREEN};
33+
background: ${({ theme }) => theme.baseFillSurfaceBrandDark};
3434
overflow: hidden;
3535
`;
3636

@@ -52,7 +52,7 @@ const TextContainer = styled.div`
5252
grid-column: 1/3;
5353
5454
* {
55-
color: ${({ theme }) => theme.legacy.TYPE_WHITE};
55+
color: ${({ theme }) => theme.baseContentPrimaryInverse};
5656
}
5757
`;
5858

@@ -62,10 +62,6 @@ const OSIcons = styled.div`
6262
align-items: center;
6363
gap: 6px;
6464
opacity: 0.7;
65-
66-
path {
67-
fill: ${({ theme }) => theme.legacy.BG_WHITE};
68-
}
6965
`;
7066

7167
export const DesktopSuiteBanner = () => {
@@ -110,6 +106,7 @@ export const DesktopSuiteBanner = () => {
110106
onClick={handleClose}
111107
data-testid="@banner/install-desktop-suite/close-button"
112108
size="small"
109+
variant="tertiary"
113110
/>
114111
</Box>
115112

@@ -128,7 +125,7 @@ export const DesktopSuiteBanner = () => {
128125
</TextContainer>
129126

130127
<Button
131-
variant="tertiary"
128+
variant="primary"
132129
href={href}
133130
onClick={() =>
134131
analytics.report({
@@ -140,9 +137,9 @@ export const DesktopSuiteBanner = () => {
140137
</Button>
141138

142139
<OSIcons>
143-
<Icon name="osMac" />
144-
<Icon name="osLinux" />
145-
<Icon name="osWindows" size={20} />
140+
<Icon name="osMac" variant="primary" />
141+
<Icon name="osLinux" variant="primary" />
142+
<Icon name="osWindows" variant="primary" size={20} />
146143
</OSIcons>
147144
</Content>
148145
</Container>

‎packages/suite/src/views/view-only/ViewOnlyTooltip.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled, { useTheme } from 'styled-components';
22

33
import { Button, Icon, Text, Tooltip } from '@trezor/components';
4-
import { borders, palette, spacingsPx, zIndices } from '@trezor/theme';
4+
import { borders, paletteV1, spacingsPx, zIndices } from '@trezor/theme';
55

66
import { setFlag } from 'src/actions/suite/suiteActions';
77
import { Translation } from 'src/components/suite';
@@ -18,8 +18,8 @@ const Icons = styled.div`
1818
`;
1919

2020
const IconContainer = styled.div`
21-
border: solid 1px ${palette.lightWhiteAlpha400};
22-
background-color: ${palette.darkGray300};
21+
border: solid 1px ${paletteV1.lightWhiteAlpha400};
22+
background-color: ${paletteV1.darkGray300};
2323
border-radius: ${borders.radii.full};
2424
padding: 4px;
2525

‎packages/suite/src/views/wallet/send/Options/BitcoinOptions/CoinControl/CoinControl.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ export const CoinControl = ({ close }: CoinControlProps) => {
218218
<Translation id="TR_PRIVATE_DESCRIPTION" values={{ targetAnonymity }} />
219219
}
220220
icon="shieldCheck"
221-
iconColor={theme.legacy.BG_GREEN}
221+
iconColor={theme.iconPrimaryDefault}
222222
utxos={spendableUtxosOnPage}
223223
/>
224224
)}

‎packages/suite/src/views/wallet/trading/DCA/TradingDCALanding.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
Text,
1616
} from '@trezor/components';
1717
import { variables } from '@trezor/components/src/config';
18-
import { borders, palette, spacings, spacingsPx } from '@trezor/theme';
18+
import { borders, paletteV1, spacings, spacingsPx } from '@trezor/theme';
1919
import { TRADING_DOWNLOAD_INVITY_APP_URL } from '@trezor/urls';
2020

2121
import { Translation, TrezorLink } from 'src/components/suite';
@@ -31,7 +31,7 @@ const IconWrapper = styled.div`
3131
width: 40px;
3232
height: 40px;
3333
border-radius: 50%;
34-
background: ${palette.lightSecondaryLime500};
34+
background: ${paletteV1.lightSecondaryLime500};
3535
margin-right: ${spacingsPx.sm};
3636
`;
3737

@@ -55,9 +55,9 @@ const DCAColumn = styled.div`
5555

5656
const Column1 = styled(DCAColumn)`
5757
gap: ${spacingsPx.xxl};
58-
background-color: ${palette.lightPrimaryForest800};
58+
background-color: ${paletteV1.lightPrimaryForest800};
5959
border-radius: ${borders.radii.md};
60-
color: ${palette.lightWhiteAlpha1000};
60+
color: ${paletteV1.lightWhiteAlpha1000};
6161
`;
6262

6363
const Column2 = styled(DCAColumn)`
@@ -88,14 +88,14 @@ interface FeatureItemProps {
8888
const FeatureItem = ({ icon, featureNumber }: FeatureItemProps) => (
8989
<Row>
9090
<IconWrapper>
91-
<Icon name={icon} size={20} color={palette.lightPrimaryForest800} />
91+
<Icon name={icon} size={20} color={paletteV1.lightPrimaryForest800} />
9292
</IconWrapper>
9393
<div>
94-
<Text typographyStyle="highlight" color={palette.lightSecondaryLime500}>
94+
<Text typographyStyle="highlight" color={paletteV1.lightSecondaryLime500}>
9595
<Translation id={`TR_TRADING_DCA_FEATURE_${featureNumber}_SUBHEADING`} />
9696
</Text>
9797
<Paragraph>
98-
<Text color={palette.lightWhiteAlpha1000}>
98+
<Text color={paletteV1.lightWhiteAlpha1000}>
9999
<Translation id={`TR_TRADING_DCA_FEATURE_${featureNumber}_DESCRIPTION`} />
100100
</Text>
101101
</Paragraph>

0 commit comments

Comments
 (0)