Skip to content

Commit 294aa4e

Browse files
pimterrypimterry
committed
Extract global styles out of styled components
1 parent be0b851 commit 294aa4e

6 files changed

Lines changed: 275 additions & 286 deletions

File tree

‎src/app/layout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import '@/styles/globals.css';
12
import dynamic from 'next/dynamic';
23
import { DM_Sans } from 'next/font/google';
34
import type { Metadata, Viewport } from 'next/types';

‎src/components/layout/styled-layout.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,13 @@
22

33
import { ThemeProvider as NextThemeProvider } from 'next-themes';
44

5-
import { GlobalStyles } from '@/styles';
6-
75
interface MainLayoutProps {
86
children: React.ReactNode;
97
}
108

119
export const StyledLayout = ({ children }: MainLayoutProps) => {
1210
return (
1311
<NextThemeProvider>
14-
<GlobalStyles />
1512
{children}
1613
</NextThemeProvider>
1714
);

‎src/components/modules/site-search/index.tsx‎

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

33
import '@docsearch/css';
4+
import '@/styles/algolia.css';
45
import dynamic from 'next/dynamic';
56

6-
import { AlgoliaGlobalStyles } from './algolia-global-styles';
77
import { StyledAlgoliaSearchWrapper } from './site-search.styles';
88
import { Input } from '../input';
99

@@ -19,7 +19,6 @@ export const SiteSearch = () => {
1919
return (
2020
<StyledAlgoliaSearchWrapper>
2121
<DocSearch appId={appId} indexName={indexName} apiKey={apiKey} placeholder="Search" />
22-
<AlgoliaGlobalStyles />
2322
</StyledAlgoliaSearchWrapper>
2423
);
2524
};

src/components/modules/site-search/algolia-global-styles.ts renamed to src/styles/algolia.css

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
import { createGlobalStyle } from '@/styles';
2-
3-
export const AlgoliaGlobalStyles = createGlobalStyle`
41
:root {
52
--docsearch-key-gradient: var(--ink-grey);
63
--docsearch-key-shadow: none;
@@ -61,7 +58,6 @@ html[data-theme='dark'] {
6158
@media (max-width: 768px) {
6259
.DocSearch-SearchBar {
6360
border-bottom: 1px solid var(--button-border);
64-
;
6561
}
6662
}
6763

@@ -71,4 +67,3 @@ html[data-theme='dark'] {
7167
background: transparent;
7268
border-top: 1px solid var(--button-border);
7369
}
74-
`;

‎src/styles/globals.css‎

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
/* Reset (minified from styled-reset) */
2+
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}[hidden]{display:none}body{line-height:1}menu,ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
3+
4+
:root {
5+
--theme: dark;
6+
--ink-black: #16181E;
7+
--ink-grey: #1E2028;
8+
--dark-grey: #32343B;
9+
--darkish-grey: #53565e;
10+
--medium-grey: #818490;
11+
--light-grey: #E6E8F2;
12+
--white: #ffffff;
13+
--electric-blue: #5175F2;
14+
--electric-light-blue: #6284FA;
15+
--cinnabar-red-light: #F2522E;
16+
--cinnabar-red: #E1421F;
17+
--cinnabar-red-dark: #D93E1C;
18+
--orange-gradient: linear-gradient(to bottom, #F65430, #D93815);
19+
--blue-gradient: linear-gradient(to bottom, #4064E2, #3556CA);
20+
--dark-gradient: linear-gradient(to bottom, #1E2028, #30333E 70%);
21+
--circle-gradient: rgba(163, 105, 190, 1);
22+
--ellipse-gradient: rgba(31, 74, 255, 1);
23+
--border-gradient: rgba(255, 255, 255, 0.1);
24+
--border-always-gradient: rgba(255, 255, 255, 0.1);
25+
--border-dark: rgba(255, 255, 255, 0.2);
26+
--text-light-grey: #E6E8F2;
27+
--text-dark-grey: #C5C6CA;
28+
--text-cinnabar-red: #E1421F;
29+
--text-white: #ffffff;
30+
--text-always-white: #ffffff;
31+
--text-always-light-grey: #E6E8F2;
32+
--text-electric-light-blue: #6284FA;
33+
--text-gradient: linear-gradient(to bottom,rgba(230,232,242,1), rgba(231,235,253,0.7));
34+
--text-orange-gradient: linear-gradient(to top, #D93815 10.67%, #F65430 89.91%);
35+
--button-secondary-default: #16181E;
36+
--button-secondary-section: #16181E;
37+
--button-border: rgba(255, 255, 255, 4%);
38+
--shadow-default: rgba(230, 232, 242, 0.05);
39+
--shadow-box: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0 0 8px rgba(230, 232, 242, 0.05);
40+
--shadow-inner-box: rgba(128, 130, 137, 0.1);
41+
--moving-border-dark: rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.4);
42+
--background-dots: url('/images/backgrounds/dots_dark.png');
43+
--background-dots-card: url('/images/backgrounds/dots_dark.svg');
44+
--background-always-dark-dots: url('/images/backgrounds/dots_dark.svg');
45+
--background-gradient: url('/images/backgrounds/gradient_dark.svg');
46+
--background-func-gradient: url('/images/backgrounds/func_gradient_dark.png');
47+
--hero-box-shadow: 0 0 20px 52px inset rgb(30 32 40 / 55%);
48+
49+
--prism-bg: var(--ink-black);
50+
--prism-comment: #999;
51+
--prism-punctuation: #ccc;
52+
--prism-tag: #e2777a;
53+
--prism-function-name: #6196cc;
54+
--prism-boolean: #f08d49;
55+
--prism-property: #f8c555;
56+
--prism-selector: #cc99cd;
57+
--prism-string: #7ec699;
58+
--prism-operator: #67cdcc;
59+
--prism-inserted: green;
60+
}
61+
62+
[data-theme="light"] {
63+
--theme: light;
64+
--ink-black: #FBFAF9;
65+
--ink-grey: #ffffff;
66+
--dark-grey: #f2f2f2;
67+
--darkish-grey: #e4e8ed;
68+
--medium-grey: #9a9da8;
69+
--light-grey: #333333;
70+
--white: #16181E;
71+
--electric-blue: #5175F2;
72+
--electric-light-blue: #6284FA;
73+
--cinnabar-red-light: #D93E1C;
74+
--cinnabar-red: #E1421F;
75+
--cinnabar-red-dark: #F2522E;
76+
--orange-gradient: linear-gradient(to bottom, #F65430, #D93815);
77+
--blue-gradient: linear-gradient(to bottom, #3556CA, #4064E2);
78+
--dark-gradient: linear-gradient(to bottom, #30333E, #1E2028 70%);
79+
--circle-gradient: rgba(182, 99, 248, 1);
80+
--ellipse-gradient: rgba(0, 183, 241, 1);
81+
--border-gradient: transparent;
82+
--border-always-gradient: rgba(255, 255, 255, 0.1);
83+
--border-dark: rgba(103, 108, 129, 0.2);
84+
--text-light-grey: #16181E;
85+
--text-dark-grey: #595D68;
86+
--text-cinnabar-red: #D43D1B;
87+
--text-white: #000000;
88+
--text-always-white: #ffffff;
89+
--text-always-light-grey: #E6E8F2;
90+
--text-electric-light-blue: #5175F2;
91+
--text-gradient: linear-gradient(to bottom,rgba(30, 32, 40, 1),rgba(48, 51, 62, 0.7));
92+
--button-secondary-default: #F2F2F2;
93+
--button-secondary-section: #ffffff;
94+
--button-border: rgba(103, 108, 129, 20%);
95+
--shadow-default: rgba(0, 0, 0, 0.05);
96+
--shadow-box: 0px 2px 2px 0px rgba(0, 0, 0, 0.07);
97+
--moving-border-dark: rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0.1), rgba(51, 60, 255, 0.4);
98+
--background-dots: url('/images/backgrounds/dots_light.png');
99+
--background-dots-card: url('/images/backgrounds/dots-light.svg');
100+
--background-gradient: url('/images/backgrounds/gradient_light.svg');
101+
--background-func-gradient: url('/images/backgrounds/func-gradient-dark.png');
102+
--hero-box-shadow: transparent;
103+
104+
--prism-bg: var(--ink-black);
105+
--prism-comment: #7d8b99;
106+
--prism-punctuation: #5f6364;
107+
--prism-tag: #c4432b;
108+
--prism-function-name: #2c5ea0;
109+
--prism-boolean: #b35e14;
110+
--prism-property: #986801;
111+
--prism-selector: #8839a0;
112+
--prism-string: #2f7e31;
113+
--prism-operator: #0e7676;
114+
--prism-inserted: #2f7e31;
115+
}
116+
117+
[data-theme='dark'] [data-hide-on-theme='dark'],
118+
[data-theme='light'] [data-hide-on-theme='light'] {
119+
display: none;
120+
padding-top: 0;
121+
visibility: hidden;
122+
}
123+
124+
* {
125+
box-sizing: border-box;
126+
}
127+
128+
a {
129+
color: var(--text-light-grey);
130+
text-decoration: none;
131+
}
132+
133+
strong {
134+
font-weight: bold;
135+
}
136+
137+
h1, h2, h3, h4, h5, h6 {
138+
line-height: 0;
139+
}
140+
141+
button, textarea, input {
142+
font-family: var(--font-dmSans);
143+
}
144+
145+
html {
146+
scroll-behavior: smooth;
147+
}
148+
149+
body {
150+
background-color: var(--ink-grey);
151+
font-family: var(--font-dmSans);
152+
color: var(--text-light-grey);
153+
font-size: 16px;
154+
line-height: 1.5;
155+
/* -webkit-font-smoothing: antialiased; */
156+
}
157+
158+
main {
159+
overflow-x: clip;
160+
}
161+
162+
em {
163+
font-style: italic;
164+
}
165+
166+
.skip-button {
167+
position: absolute!important;
168+
left: 7px;
169+
top: -16rem;
170+
transform: translateX(-50%);
171+
transition: top 400ms ease-in;
172+
}
173+
174+
.skip-button:focus-within,
175+
.skip-button:focus {
176+
left: 50%;
177+
top: 1rem;
178+
transform: translateX(-50%);
179+
}
180+
181+
.visually-hidden {
182+
border: 0;
183+
padding: 0;
184+
margin: 0;
185+
position: absolute !important;
186+
height: 1px;
187+
width: 1px;
188+
overflow: hidden;
189+
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
190+
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
191+
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
192+
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
193+
}
194+
195+
/* PrismJS syntax highlighting, based on prism-tomorrow but linked to vars */
196+
pre[class*="language-"] {
197+
background: var(--prism-bg);
198+
color: var(--prism-text);
199+
}
200+
201+
.token.comment,
202+
.token.block-comment,
203+
.token.prolog,
204+
.token.doctype,
205+
.token.cdata {
206+
color: var(--prism-comment);
207+
}
208+
209+
.token.punctuation {
210+
color: var(--prism-punctuation);
211+
}
212+
213+
.token.tag,
214+
.token.attr-name,
215+
.token.namespace,
216+
.token.deleted {
217+
color: var(--prism-tag);
218+
}
219+
220+
.token.function-name {
221+
color: var(--prism-function-name);
222+
}
223+
224+
.token.boolean,
225+
.token.number,
226+
.token.function {
227+
color: var(--prism-boolean);
228+
}
229+
230+
.token.property,
231+
.token.class-name,
232+
.token.constant,
233+
.token.symbol {
234+
color: var(--prism-property);
235+
}
236+
237+
.token.selector,
238+
.token.important,
239+
.token.atrule,
240+
.token.keyword,
241+
.token.builtin {
242+
color: var(--prism-selector);
243+
}
244+
245+
.token.string,
246+
.token.char,
247+
.token.attr-value,
248+
.token.regex,
249+
.token.variable {
250+
color: var(--prism-string);
251+
}
252+
253+
.token.operator,
254+
.token.entity,
255+
.token.url {
256+
color: var(--prism-operator);
257+
}
258+
259+
.token.inserted {
260+
color: var(--prism-inserted);
261+
}
262+
263+
.token.important,
264+
.token.bold {
265+
font-weight: bold;
266+
}
267+
268+
.token.italic {
269+
font-style: italic;
270+
}

0 commit comments

Comments
 (0)