Skip to content

Commit a8af628

Browse files
pimterrypimterry
committed
Migrate just <Section> to Linaria as a test
1 parent 37aaae8 commit a8af628

7 files changed

Lines changed: 362 additions & 182 deletions

File tree

‎next.config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
const withLinaria = require('next-with-linaria');
12
const withBundleAnalyzer = require('@next/bundle-analyzer')({
23
enabled: process.env.ANALYZE === 'true',
34
});
@@ -45,4 +46,4 @@ const nextConfig = {
4546
},
4647
};
4748

48-
module.exports = withBundleAnalyzer(nextConfig);
49+
module.exports = withBundleAnalyzer(withLinaria(nextConfig));

‎package-lock.json‎

Lines changed: 257 additions & 91 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,14 @@
2828
"@docsearch/react": "^3.6.0",
2929
"@httptoolkit/accounts": "^3.0.1",
3030
"@httptoolkit/util": "^0.1.5",
31+
"@linaria/core": "^7.0.0",
32+
"@linaria/react": "^7.0.1",
3133
"@phosphor-icons/react": "^2.1.4",
3234
"@radix-ui/react-accordion": "^1.1.2",
3335
"@radix-ui/react-dropdown-menu": "^2.0.6",
3436
"@radix-ui/react-tooltip": "^1.0.7",
37+
"@wyw-in-js/babel-preset": "^1.0.6",
38+
"@wyw-in-js/transform": "^1.0.6",
3539
"core-js": "^3.47.0",
3640
"date-fns": "^1.29.0",
3741
"fs-extra": "^6.0.0",
@@ -45,6 +49,7 @@
4549
"next-mdx-remote": "^4.4.1",
4650
"next-sitemap": "^4.2.3",
4751
"next-themes": "^0.2.1",
52+
"next-with-linaria": "^1.3.0",
4853
"posthog-js": "^1.188.1",
4954
"prismjs": "^1.27.0",
5055
"react": "^18.2.0",

‎src/components/elements/section/index.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,17 @@
1-
import { StyledSection } from './section.styles';
1+
import { styled } from '@linaria/react';
2+
3+
import { screens } from '@/styles/tokens';
4+
5+
const StyledSection = styled.section`
6+
position: relative;
7+
padding-top: 32px;
8+
padding-bottom: 32px;
9+
10+
@media (min-width: ${screens['2xl']}) {
11+
padding-top: 96px;
12+
padding-bottom: 96px;
13+
}
14+
`;
215

316
export const Section = ({ children, className }: Component) => {
417
return <StyledSection className={className}>{children}</StyledSection>;

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

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎src/styles/index.ts‎

Lines changed: 9 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@ import styled, { createGlobalStyle, css, keyframes } from 'styled-components';
22

33
export { createGlobalStyle, css, keyframes, styled };
44

5-
export const screens = {
6-
content: '662px',
7-
sm: '640px',
8-
md: '768px',
9-
lg: '1024px',
10-
xl: '1280px',
11-
'2xl': '1440px',
12-
};
5+
export {
6+
screens,
7+
textColors,
8+
fontWeight,
9+
fontSizes,
10+
lineHeight,
11+
letterSpacing,
12+
} from './tokens';
13+
export type { TextColor, FontWeight, FontSize } from './tokens';
1314

1415
export const textGradientMixin = css`
1516
background: var(--text-gradient);
@@ -23,73 +24,6 @@ export const textOrangeGradientMixin = css`
2324
-webkit-text-fill-color: transparent;
2425
`;
2526

26-
export const textColors = {
27-
lightGrey: 'var(--text-light-grey)',
28-
darkGrey: 'var(--text-dark-grey)',
29-
cinnabarRed: 'var(--text-cinnabar-red)',
30-
white: 'var(--text-white)',
31-
alwaysWhite: 'var(--text-always-white)',
32-
alwaysLightGrey: 'var(--text-always-light-grey)',
33-
electricLightBlue: 'var(--text-electric-light-blue)',
34-
} as const;
35-
36-
export const fontWeight = {
37-
light: '300',
38-
normal: '400',
39-
medium: '500',
40-
semibold: '600',
41-
bold: '700',
42-
} as const;
43-
44-
export const fontSizes = {
45-
heading: {
46-
mobile: {
47-
xl: '3rem', // 48px / 16px = 3rem
48-
l: '2.5rem', // 40px / 16px = 2.5rem
49-
m: '2rem', // 32px / 16px = 2rem
50-
s: '1.5rem', // 24px / 16px = 1.5rem
51-
xs: '1.25rem', // 20px / 16px = 1.25rem
52-
},
53-
desktop: {
54-
xl: '5rem', // 80px / 16px = 5rem
55-
l: '3.5rem', // 56px / 16px = 3.5rem
56-
m: '2rem', // 32px / 16px = 2rem
57-
s: '1.5rem', // 24px / 16px = 1.5rem
58-
xs: '1.25rem', // 20px / 16px = 1.25rem
59-
},
60-
},
61-
text: {
62-
xll: '1.5rem', // 24px / 16px = 1.5rem
63-
xl: '1.25rem', // 20px / 16px = 1.25rem
64-
l: '1.125rem', // 18px / 16px = 1.125.5rem
65-
m: '1rem', // 16px / 16px = 1rem
66-
s: '0.875rem', // 14px / 16px = 0.875
67-
xs: '0.75rem', // 12px / 16px = 0.875
68-
},
69-
button: {
70-
large: '1.5rem',
71-
default: '1.125rem', // 18px / 16px = 1.125.5rem
72-
small: '1rem', // 16px / 16px = 1rem
73-
},
74-
label: {
75-
xl: '1.5rem', // 24px / 16px = 1.5rem
76-
l: '1rem', // 16px / 16px = 1rem
77-
m: '0.875rem', // 14px / 16px = 0.875
78-
},
79-
} as const;
80-
81-
export const lineHeight = {
82-
label: '1.1',
83-
} as const;
84-
85-
export const letterSpacing = {
86-
label: '0.06em',
87-
} as const;
88-
89-
export type TextColor = keyof typeof textColors | 'textGradient' | 'textOrangeGradient';
90-
export type FontWeight = keyof typeof fontWeight;
91-
export type FontSize = keyof (typeof fontSizes)['text'];
92-
9327
export const Keyframes = {
9428
rotate: keyframes`
9529
from {

‎src/styles/tokens.ts‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
export const screens = {
2+
content: '662px',
3+
sm: '640px',
4+
md: '768px',
5+
lg: '1024px',
6+
xl: '1280px',
7+
'2xl': '1440px',
8+
};
9+
10+
export const textColors = {
11+
lightGrey: 'var(--text-light-grey)',
12+
darkGrey: 'var(--text-dark-grey)',
13+
cinnabarRed: 'var(--text-cinnabar-red)',
14+
white: 'var(--text-white)',
15+
alwaysWhite: 'var(--text-always-white)',
16+
alwaysLightGrey: 'var(--text-always-light-grey)',
17+
electricLightBlue: 'var(--text-electric-light-blue)',
18+
} as const;
19+
20+
export const fontWeight = {
21+
light: '300',
22+
normal: '400',
23+
medium: '500',
24+
semibold: '600',
25+
bold: '700',
26+
} as const;
27+
28+
export const fontSizes = {
29+
heading: {
30+
mobile: {
31+
xl: '3rem', // 48px / 16px = 3rem
32+
l: '2.5rem', // 40px / 16px = 2.5rem
33+
m: '2rem', // 32px / 16px = 2rem
34+
s: '1.5rem', // 24px / 16px = 1.5rem
35+
xs: '1.25rem', // 20px / 16px = 1.25rem
36+
},
37+
desktop: {
38+
xl: '5rem', // 80px / 16px = 5rem
39+
l: '3.5rem', // 56px / 16px = 3.5rem
40+
m: '2rem', // 32px / 16px = 2rem
41+
s: '1.5rem', // 24px / 16px = 1.5rem
42+
xs: '1.25rem', // 20px / 16px = 1.25rem
43+
},
44+
},
45+
text: {
46+
xll: '1.5rem', // 24px / 16px = 1.5rem
47+
xl: '1.25rem', // 20px / 16px = 1.25rem
48+
l: '1.125rem', // 18px / 16px = 1.125.5rem
49+
m: '1rem', // 16px / 16px = 1rem
50+
s: '0.875rem', // 14px / 16px = 0.875
51+
xs: '0.75rem', // 12px / 16px = 0.875
52+
},
53+
button: {
54+
large: '1.5rem',
55+
default: '1.125rem', // 18px / 16px = 1.125.5rem
56+
small: '1rem', // 16px / 16px = 1rem
57+
},
58+
label: {
59+
xl: '1.5rem', // 24px / 16px = 1.5rem
60+
l: '1rem', // 16px / 16px = 1rem
61+
m: '0.875rem', // 14px / 16px = 0.875
62+
},
63+
} as const;
64+
65+
export const lineHeight = {
66+
label: '1.1',
67+
} as const;
68+
69+
export const letterSpacing = {
70+
label: '0.06em',
71+
} as const;
72+
73+
export type TextColor = keyof typeof textColors | 'textGradient' | 'textOrangeGradient';
74+
export type FontWeight = keyof typeof fontWeight;
75+
export type FontSize = keyof (typeof fontSizes)['text'];

0 commit comments

Comments
 (0)