Skip to content

Commit ab7be18

Browse files
pimterrypimterry
committed
Replace unnecessary SC abstraction for colors with CSS vars
1 parent a016cfb commit ab7be18

File tree

92 files changed

+731
-799
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

92 files changed

+731
-799
lines changed

‎src/app/(thank-you-pages)/web-purchase-thank-you/thank-you.styles.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@ export const StyledGradientBottom = styled.div`
6565
right: 0;
6666
width: 100%;
6767
height: auto;
68-
background: radial-gradient(circle at left, ${({ theme }) => theme.colors.circleGradient} 0%, transparent 30%),
69-
radial-gradient(ellipse 70% 45% at left, ${({ theme }) => theme.colors.ellipseGradient} 0%, transparent 70%);
68+
background: radial-gradient(circle at left, var(--circle-gradient) 0%, transparent 30%),
69+
radial-gradient(ellipse 70% 45% at left, var(--ellipse-gradient) 0%, transparent 70%);
7070
background-size: contain;
7171
opacity: 0.22;
7272
}
@@ -108,4 +108,4 @@ export const StyledTextContent = styled.div`
108108
@media (min-width: ${screens['lg']}) {
109109
text-align: left;
110110
}
111-
`;
111+
`;

‎src/app/alternatives/alternatives.styles.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { screens, styled } from '@/styles';
3+
import { screens, styled, fontSizes } from '@/styles';
44

55
export const StyledAlternativesPageColumns = styled.div`
66
display: grid;
@@ -49,12 +49,12 @@ export const StyledAlternativeList = styled.ul`
4949
export const StyledAlternativeHeadingTag = styled.h2`
5050
display: inline-block;
5151
52-
font-size: ${({ theme }) => theme.fontSizes.heading.mobile.m};
53-
color: ${({ theme }) => theme.colors.text.lightGrey};
52+
font-size: ${fontSizes.heading.mobile.m};
53+
color: var(--text-light-grey);
5454
line-height: 1.5;
5555
5656
@media (min-width: ${screens.lg}) {
57-
font-size: ${({ theme }) => theme.fontSizes.heading.desktop.m};
57+
font-size: ${fontSizes.heading.desktop.m};
5858
}
5959
6060
&:hover {

‎src/app/download/download.styles.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@ export const StyledGradientBottom = styled.div`
7474
right: 0;
7575
width: 100%;
7676
height: auto;
77-
background: radial-gradient(circle at left, ${({ theme }) => theme.colors.circleGradient} 0%, transparent 30%),
78-
radial-gradient(ellipse 70% 45% at left, ${({ theme }) => theme.colors.ellipseGradient} 0%, transparent 70%);
77+
background: radial-gradient(circle at left, var(--circle-gradient) 0%, transparent 30%),
78+
radial-gradient(ellipse 70% 45% at left, var(--ellipse-gradient) 0%, transparent 70%);
7979
background-size: contain;
8080
opacity: 0.22;
8181
}
@@ -105,4 +105,4 @@ export const StyledGradientMobile = styled.div`
105105
display: none;
106106
visibility: hidden;
107107
}
108-
`;
108+
`;

‎src/app/frida-scripts/frida.styles.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@ export const StyledGradientBottom = styled.div`
6565
right: 0;
6666
width: 100%;
6767
height: auto;
68-
background: radial-gradient(circle at left, ${({ theme }) => theme.colors.circleGradient} 0%, transparent 30%),
69-
radial-gradient(ellipse 70% 45% at left, ${({ theme }) => theme.colors.ellipseGradient} 0%, transparent 70%);
68+
background: radial-gradient(circle at left, var(--circle-gradient) 0%, transparent 30%),
69+
radial-gradient(ellipse 70% 45% at left, var(--ellipse-gradient) 0%, transparent 70%);
7070
background-size: contain;
7171
opacity: 0.22;
7272
}
@@ -110,4 +110,4 @@ export const StyledTextContent = styled.div`
110110
@media (min-width: ${screens['lg']}) {
111111
text-align: left;
112112
}
113-
`;
113+
`;

‎src/app/will-it-cors/will-it-cors.styles.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { screens, styled } from '@/styles';
44

55
export const StyledWillItCorsWrapper = styled.section`
6-
box-shadow: ${({ theme }) => theme.shadow.hero};
6+
box-shadow: var(--hero-box-shadow);
77
padding: 32px 20px;
88
99
@media (min-width: ${screens['md']}) {
@@ -23,7 +23,7 @@ export const StyledWillItCorsWrapper = styled.section`
2323
position: absolute;
2424
inset: 0;
2525
pointer-events: none;
26-
background-image: radial-gradient(ellipse at center, transparent 60%, ${({ theme }) => theme.colors.inkGrey});
26+
background-image: radial-gradient(ellipse at center, transparent 60%, var(--ink-grey));
2727
}
2828
}
2929
`;
@@ -40,7 +40,7 @@ export const StyledWillItCorsContainer = styled.div`
4040
text-shadow: var(--ink-grey) 0 0 20px, var(--ink-grey) 1px 1px 1px;
4141
4242
& a {
43-
color: ${({ theme }) => theme.colors.electricLightBlue};
43+
color: var(--electric-light-blue);
4444
text-decoration: underline;
4545
}
46-
`;
46+
`;

‎src/components/common-sections/statistics/stadistics.styles.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import { Container } from '@/components/elements/container';
4-
import { styled } from '@/styles';
4+
import { styled, screens } from '@/styles';
55

66
export const StyledStatisticsGradient = styled.div`
77
position: absolute;
@@ -23,7 +23,7 @@ export const StyledStatisticsWrapper = styled(Container)`
2323
padding: 96px 48px;
2424
position: relative;
2525
26-
@media (max-width: ${({ theme }) => theme.screens.lg}) {
26+
@media (max-width: ${screens.lg}) {
2727
flex-direction: column;
2828
padding: 16px 0;
2929
@@ -37,4 +37,4 @@ export const StyledStatisticsWrapper = styled(Container)`
3737
}
3838
}
3939
}
40-
`;
40+
`;

‎src/components/common-sections/testimonials/testimonials.styles.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { styled } from '@/styles';
3+
import { styled, screens, fontWeight } from '@/styles';
44

55
export const StyledTestimonialsWrapper = styled.section`
66
display: flex;
@@ -12,7 +12,7 @@ export const StyledTestimonialsWrapper = styled.section`
1212
padding-bottom: 0;
1313
gap: 32px;
1414
15-
@media (min-width: ${({ theme }) => theme.screens.lg}) {
15+
@media (min-width: ${screens.lg}) {
1616
padding: 96px 0;
1717
padding-bottom: 0;
1818
gap: 61px;
@@ -21,8 +21,8 @@ export const StyledTestimonialsWrapper = styled.section`
2121
`;
2222

2323
export const StyledTestimonialCard = styled.blockquote`
24-
background: ${({ theme }) => theme.colors.inkBlack};
25-
box-shadow: 0 0 0 1px ${({ theme }) => theme.colors.button.border};
24+
background: var(--ink-black);
25+
box-shadow: 0 0 0 1px var(--button-border);
2626
border-radius: 12px;
2727
padding: 24px;
2828
height: fit-content;
@@ -36,7 +36,7 @@ export const StyledTestimonialCard = styled.blockquote`
3636
text-wrap: wrap;
3737
}
3838
39-
@media (min-width: ${({ theme }) => theme.screens.lg}) {
39+
@media (min-width: ${screens.lg}) {
4040
max-width: 480px;
4141
padding: 32px;
4242
margin-bottom: 16px;
@@ -67,7 +67,7 @@ export const StyledTestimonialGrid = styled.div<{
6767
margin-right: 16px;
6868
padding: 1px 16px;
6969
70-
@media (min-width: ${({ theme }) => theme.screens.lg}) {
70+
@media (min-width: ${screens.lg}) {
7171
padding: 1px 0;
7272
grid-template-columns: repeat(var(--grid-items), 1fr);
7373
/* Apply padding to every 9th item */
@@ -83,12 +83,12 @@ export const StyledQuote = styled.div`
8383
gap: 16px;
8484
8585
& p {
86-
color: ${({ theme }) => theme.colors.text.darkGrey};
87-
font-weight: ${({ theme }) => theme.fontWeight.normal};
86+
color: var(--text-dark-grey);
87+
font-weight: ${fontWeight.normal};
8888
8989
& strong {
90-
color: ${({ theme }) => theme.colors.text.white};
91-
font-weight: ${({ theme }) => theme.fontWeight.bold};
90+
color: var(--text-white);
91+
font-weight: ${fontWeight.bold};
9292
}
9393
}
94-
`;
94+
`;

‎src/components/elements/badge/badge.styles.ts‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import type { StyledBadgeProps } from './badge.types';
44

5-
import { css, styled } from '@/styles';
5+
import { css, styled, fontSizes, fontWeight, letterSpacing, lineHeight } from '@/styles';
66

77
export const BadgeWrapper = styled.div`
88
display: flex;
@@ -12,21 +12,21 @@ export const BadgeWrapper = styled.div`
1212
`;
1313

1414
export const AdditionalText = styled.span`
15-
color: ${({ theme }) => theme.colors.lightGrey};
16-
font-size: ${({ theme }) => theme.fontSizes.label.l};
17-
font-weight: ${({ theme }) => theme.fontWeight.bold};
18-
letter-spacing: ${({ theme }) => theme.letterSpacing.label};
15+
color: var(--light-grey);
16+
font-size: ${fontSizes.label.l};
17+
font-weight: ${fontWeight.bold};
18+
letter-spacing: ${letterSpacing.label};
1919
text-transform: uppercase;
2020
`;
2121

2222
export const StyledBadge = styled.p<StyledBadgeProps>`
2323
display: flex;
2424
align-items: center;
2525
gap: 6px;
26-
font-size: ${({ theme }) => theme.fontSizes.label.m};
27-
font-weight: ${({ theme }) => theme.fontWeight.bold};
28-
line-height: ${({ theme }) => theme.lineHeight.label};
29-
letter-spacing: ${({ theme }) => theme.letterSpacing.label};
26+
font-size: ${fontSizes.label.m};
27+
font-weight: ${fontWeight.bold};
28+
line-height: ${lineHeight.label};
29+
letter-spacing: ${letterSpacing.label};
3030
text-transform: uppercase;
3131
3232
${({ $variant }) => {
@@ -35,21 +35,21 @@ export const StyledBadge = styled.p<StyledBadgeProps>`
3535
return css`
3636
border-radius: 16px;
3737
padding: 6px 10px;
38-
color: ${({ theme }) => theme.colors.text.lightGrey};
39-
background-color: ${({ theme }) => theme.colors.darkGrey};
40-
box-shadow: 0 0 0 1px ${({ theme }) => theme.colors.borderDark} inset;
38+
color: var(--text-light-grey);
39+
background-color: var(--dark-grey);
40+
box-shadow: 0 0 0 1px var(--border-dark) inset;
4141
`;
4242
4343
case 'secondary':
4444
return css`
4545
border-radius: 24px;
4646
padding: 8px 12px;
47-
color: ${({ theme }) => theme.colors.text.alwayLightGrey};
48-
background: ${({ theme }) => theme.colors.blueGradient};
47+
color: var(--text-always-light-grey);
48+
background: var(--blue-gradient);
4949
box-shadow:
5050
0 0 0 1px rgba(255, 255, 255, 0.1) inset,
5151
0px 1.66px 0.83px 0px rgba(201, 212, 251, 0.1) inset;
5252
`;
5353
}
5454
}}
55-
`;
55+
`;

‎src/components/elements/button/button.styles.ts‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import type { StyledButtonProps } from './button.types';
44

55
import { Link } from '@/components/elements/link';
6-
import { css, screens, styled } from '@/styles';
6+
import { css, screens, styled, fontSizes, fontWeight } from '@/styles';
77

88
const base = css<StyledButtonProps>`
99
position: relative;
@@ -13,8 +13,8 @@ const base = css<StyledButtonProps>`
1313
height: fit-content;
1414
outline: none;
1515
border: 0;
16-
font-size: ${({ theme, $small }) => theme.fontSizes.button[$small ? 'small' : 'default']};
17-
font-weight: ${({ theme }) => theme.fontWeight.medium};
16+
font-size: ${({ $small }) => fontSizes.button[$small ? 'small' : 'default']};
17+
font-weight: ${fontWeight.medium};
1818
text-decoration: none;
1919
line-height: 1;
2020
border-radius: 12px;
@@ -39,9 +39,9 @@ const base = css<StyledButtonProps>`
3939
switch (props.$variant) {
4040
case 'primary':
4141
return css`
42-
color: ${({ theme }) => theme.colors.text.alwayWhite};
43-
background: ${({ theme }) => theme.colors.orangeGradient};
44-
border: 1px solid ${({ theme }) => theme.colors.cinnarbarRed};
42+
color: var(--text-always-white);
43+
background: var(--orange-gradient);
44+
border: 1px solid var(--cinnabar-red);
4545
padding: ${props.$small ? '16px 24px' : '19px 24px'};
4646
box-shadow:
4747
0px 2px 1px 0px rgba(255, 255, 255, 0.15) inset,
@@ -59,7 +59,7 @@ const base = css<StyledButtonProps>`
5959
${() =>
6060
!props.$withBorder &&
6161
`
62-
border: 1px solid ${props.theme.colors.text.white};
62+
border: 1px solid var(--text-white);
6363
`}
6464
}
6565
}
@@ -90,11 +90,11 @@ const base = css<StyledButtonProps>`
9090
9191
case 'secondary':
9292
return css`
93-
color: ${({ theme }) => theme.colors.text.lightGrey};
94-
background-color: ${({ theme }) => theme.colors.button.secondaryDefault};
93+
color: var(--text-light-grey);
94+
background-color: var(--button-secondary-default);
9595
padding: ${props.$small ? '16px 24px' : '20px 24px'};
9696
box-shadow:
97-
0 0 0 1px ${({ theme }) => theme.colors.button.border},
97+
0 0 0 1px var(--button-border),
9898
0px 0px 8px 0px rgba(230, 232, 242, 0.05);
9999
100100
@media (min-width: ${screens.md}) {
@@ -103,7 +103,7 @@ const base = css<StyledButtonProps>`
103103
${() =>
104104
!props.$isDropdown &&
105105
`
106-
box-shadow: 0 0 0 1px ${props.theme.colors.text.lightGrey};
106+
box-shadow: 0 0 0 1px var(--text-light-grey);
107107
`}
108108
}
109109
}
@@ -112,19 +112,19 @@ const base = css<StyledButtonProps>`
112112
${() =>
113113
!props.$isDropdown &&
114114
`
115-
border: 1px solid ${props.theme.colors.text.lightGrey};
115+
border: 1px solid var(--text-light-grey);
116116
box-shadow:
117117
0px 0px 8px 0px rgba(230, 232, 242, 0.05),
118118
0px 0px 0px 8px rgba(50, 52, 59, 0.6);
119119
`}
120120
}
121121
122122
&:active {
123-
background-color: ${({ theme }) => theme.colors.inkGrey};
123+
background-color: var(--ink-grey);
124124
${() =>
125125
!props.$isDropdown &&
126126
`
127-
border: 1px solid ${props.theme.colors.text.lightGrey};
127+
border: 1px solid var(--text-light-grey);
128128
`}
129129
}
130130
}
@@ -154,4 +154,4 @@ export const StyledButtonWrapper = styled.div`
154154
justify-content: start;
155155
width: fit-content;
156156
}
157-
`;
157+
`;

‎src/components/elements/check-icon/check-icon.styles.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ export const StyledCheckIcon = styled.div<CheckIconProps>`
1010
display: flex;
1111
align-items: center;
1212
justify-content: center;
13-
background: ${({ theme }) => theme.colors.blueGradient};
13+
background: var(--blue-gradient);
1414
width: ${({ $small }) => ($small ? '17px' : '20px')};
1515
height: ${({ $small }) => ($small ? '17px' : '20px')};
16-
color: ${({ theme }) => theme.colors.text.alwayWhite};
16+
color: var(--text-always-white);
1717
box-shadow:
1818
0px 1.66px 0.83px 0px rgba(201, 212, 251, 0.1) inset,
1919
0px -0.83px 0.83px 0px rgba(16, 46, 151, 0.1) inset,
20-
0 0 0 1px ${({ theme }) => theme.colors.borderAlwaysGradient} inset;
21-
`;
20+
0 0 0 1px var(--border-always-gradient) inset;
21+
`;

0 commit comments

Comments
 (0)