Skip to content

Commit 8f14fff

Browse files
dimaMachinadimaMachina
authored
add graphiql.css, CSS file without importing fonts and monaco-editor styles (#4061)
* add `graphiql.css`, CSS file without CSS without importing fonts and monaco-editor styles * add `graphiql.css`, CSS file without CSS without importing fonts and monaco-editor styles * Update .changeset/dry-vans-tell.md
1 parent a4382bf commit 8f14fff

File tree

6 files changed

+349
-331
lines changed

6 files changed

+349
-331
lines changed

‎.changeset/dry-vans-tell.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'graphiql': patch
3+
---
4+
5+
add `graphiql.css`, CSS file without importing fonts and monaco-editor styles

‎packages/graphiql/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"exports": {
3434
"./package.json": "./package.json",
3535
"./style.css": "./dist/style.css",
36-
"./graphiql.css": "./dist/style.css",
36+
"./graphiql.css": "./dist/graphiql.css",
3737
".": "./dist/index.js",
3838
"./setup-workers/*": {
3939
"types": "./dist/setup-workers/*.d.ts",

‎packages/graphiql/src/graphiql.css‎

Lines changed: 330 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,330 @@
1+
/* Everything */
2+
.graphiql-container {
3+
background-color: hsl(var(--color-base));
4+
display: flex;
5+
height: 100%;
6+
margin: 0;
7+
overflow: hidden;
8+
width: 100%;
9+
}
10+
11+
/* The sidebar */
12+
.graphiql-container .graphiql-sidebar {
13+
display: flex;
14+
flex-direction: column;
15+
padding: var(--px-8);
16+
width: var(--sidebar-width);
17+
gap: var(--px-8);
18+
overflow-y: auto;
19+
}
20+
21+
.graphiql-container .graphiql-sidebar > button {
22+
display: flex;
23+
align-items: center;
24+
justify-content: center;
25+
color: hsla(var(--color-neutral), var(--alpha-secondary));
26+
height: calc(var(--sidebar-width) - (2 * var(--px-8)));
27+
width: calc(var(--sidebar-width) - (2 * var(--px-8)));
28+
flex-shrink: 0;
29+
}
30+
31+
.graphiql-container .graphiql-sidebar button.active {
32+
color: hsl(var(--color-neutral));
33+
}
34+
35+
.graphiql-container .graphiql-sidebar button > svg {
36+
height: var(--px-20);
37+
width: var(--px-20);
38+
}
39+
40+
/* The main content, i.e. everything except the sidebar */
41+
.graphiql-container .graphiql-main {
42+
display: flex;
43+
flex: 1;
44+
min-width: 0;
45+
}
46+
47+
/* The current session and tabs */
48+
.graphiql-container .graphiql-sessions {
49+
background-color: hsla(var(--color-neutral), var(--alpha-background-light));
50+
/* Adding the 8px of padding to the inner border radius of the operation editor */
51+
border-radius: calc(var(--border-radius-12) + var(--px-8));
52+
display: flex;
53+
flex-direction: column;
54+
flex: 1;
55+
max-height: 100%;
56+
margin: var(--px-16);
57+
margin-left: 0;
58+
min-width: 0;
59+
}
60+
61+
/* The session header containing tabs and the logo */
62+
.graphiql-container .graphiql-session-header {
63+
height: var(--session-header-height);
64+
align-items: center;
65+
display: flex;
66+
padding: var(--px-8) var(--px-8) 0;
67+
gap: var(--px-8);
68+
}
69+
70+
/* The button to add a new tab */
71+
button.graphiql-tab-add {
72+
padding: var(--px-4);
73+
74+
& > svg {
75+
color: hsla(var(--color-neutral), var(--alpha-secondary));
76+
display: block;
77+
height: var(--px-16);
78+
width: var(--px-16);
79+
}
80+
}
81+
82+
/* The GraphiQL logo */
83+
.graphiql-container .graphiql-logo {
84+
margin-left: auto;
85+
color: hsla(var(--color-neutral), var(--alpha-secondary));
86+
font-size: var(--font-size-h4);
87+
font-weight: var(--font-weight-medium);
88+
}
89+
90+
/* Undo default link styling for the default GraphiQL logo link */
91+
.graphiql-container .graphiql-logo .graphiql-logo-link {
92+
color: hsla(var(--color-neutral), var(--alpha-secondary));
93+
text-decoration: none;
94+
95+
&:focus {
96+
outline: hsla(var(--color-neutral), var(--alpha-background-heavy)) auto 1px;
97+
}
98+
}
99+
100+
/* The editor of the session */
101+
.graphiql-container #graphiql-session {
102+
display: flex;
103+
flex: 1;
104+
padding: 0 var(--px-8) var(--px-8);
105+
}
106+
107+
/* All editors (operation, variable, request headers) */
108+
.graphiql-container .graphiql-editors {
109+
background-color: hsl(var(--color-base));
110+
border-radius: 0 0 var(--border-radius-12) var(--border-radius-12);
111+
box-shadow: var(--popover-box-shadow);
112+
display: flex;
113+
flex: 1;
114+
flex-direction: column;
115+
}
116+
117+
/* The operation editor and the toolbar */
118+
.graphiql-container .graphiql-query-editor {
119+
border-bottom: 1px solid
120+
hsla(var(--color-neutral), var(--alpha-background-heavy));
121+
padding: var(--px-16);
122+
column-gap: var(--px-16);
123+
display: flex;
124+
width: 100%;
125+
}
126+
127+
/* The vertical toolbar next to the operation editor */
128+
.graphiql-container .graphiql-toolbar {
129+
width: var(--toolbar-width);
130+
display: flex;
131+
flex-direction: column;
132+
gap: var(--px-8);
133+
}
134+
135+
.graphiql-container .graphiql-toolbar > button {
136+
flex-shrink: 0;
137+
}
138+
139+
/* The toolbar icons */
140+
.graphiql-toolbar-icon {
141+
color: hsla(var(--color-neutral), var(--alpha-tertiary));
142+
display: block;
143+
height: calc(var(--toolbar-width) - (var(--px-8) * 2));
144+
width: calc(var(--toolbar-width) - (var(--px-8) * 2));
145+
}
146+
147+
/* The tab bar for editor tools */
148+
.graphiql-container .graphiql-editor-tools {
149+
cursor: row-resize;
150+
display: flex;
151+
width: 100%;
152+
column-gap: var(--px-8);
153+
padding: var(--px-8);
154+
}
155+
156+
.graphiql-container .graphiql-editor-tools button {
157+
color: hsla(var(--color-neutral), var(--alpha-secondary));
158+
}
159+
160+
.graphiql-container .graphiql-editor-tools button.active {
161+
color: hsl(var(--color-neutral));
162+
}
163+
164+
/* The tab buttons to switch between editor tools */
165+
.graphiql-container
166+
.graphiql-editor-tools
167+
> button:not(.graphiql-toggle-editor-tools) {
168+
padding: var(--px-8) var(--px-12);
169+
}
170+
171+
.graphiql-container .graphiql-editor-tools .graphiql-toggle-editor-tools {
172+
margin-left: auto;
173+
}
174+
175+
/* An editor tool, e.g. variables or request headers editor */
176+
.graphiql-container .graphiql-editor-tool {
177+
flex: 1;
178+
padding: var(--px-16);
179+
}
180+
181+
/**
182+
* The way CodeMirror editors are styled they overflow their containing
183+
* element. For some OS-browser-combinations this might cause overlap issues,
184+
* setting the position of this to `relative` makes sure this element will
185+
* always be on top of any editors.
186+
*/
187+
.graphiql-container .graphiql-toolbar,
188+
.graphiql-container .graphiql-editor-tools,
189+
.graphiql-container .graphiql-editor-tool {
190+
position: relative;
191+
}
192+
193+
/* The response view */
194+
.graphiql-container .graphiql-response {
195+
/* Add some padding so it doesn’t touch the tabs */
196+
padding-top: var(--px-16);
197+
display: flex;
198+
width: 100%;
199+
flex-direction: column;
200+
}
201+
202+
/* The results editor wrapping container */
203+
.graphiql-container .graphiql-response .result-window {
204+
position: relative;
205+
flex: 1;
206+
}
207+
208+
/* The footer below the response view */
209+
.graphiql-container .graphiql-footer {
210+
border-top: 1px solid
211+
hsla(var(--color-neutral), var(--alpha-background-heavy));
212+
}
213+
214+
/* The plugin container */
215+
.graphiql-container .graphiql-plugin {
216+
border-left: 1px solid
217+
hsla(var(--color-neutral), var(--alpha-background-heavy));
218+
flex: 1;
219+
overflow-y: auto;
220+
padding: var(--px-16);
221+
}
222+
223+
/* Generic drag bar for horizontal resizing */
224+
.graphiql-horizontal-drag-bar {
225+
width: var(--px-12);
226+
cursor: col-resize;
227+
}
228+
229+
.graphiql-horizontal-drag-bar:hover::after {
230+
border: var(--px-2) solid
231+
hsla(var(--color-neutral), var(--alpha-background-heavy));
232+
border-radius: var(--border-radius-2);
233+
content: '';
234+
display: block;
235+
height: 25%;
236+
margin: 0 auto;
237+
position: relative;
238+
/* (100% - 25%) / 2 = 37.5% */
239+
top: 37.5%;
240+
width: 0;
241+
}
242+
243+
.graphiql-container .graphiql-chevron-icon {
244+
color: hsla(var(--color-neutral), var(--alpha-tertiary));
245+
display: block;
246+
height: var(--px-12);
247+
margin: var(--px-12);
248+
width: var(--px-12);
249+
}
250+
251+
/* Generic spin animation */
252+
.graphiql-spin {
253+
animation: spin 0.8s linear 0s infinite;
254+
}
255+
256+
@keyframes spin {
257+
from {
258+
transform: rotate(0deg);
259+
}
260+
to {
261+
transform: rotate(360deg);
262+
}
263+
}
264+
265+
/* The header of the settings dialog */
266+
.graphiql-dialog .graphiql-dialog-header {
267+
align-items: center;
268+
display: flex;
269+
justify-content: space-between;
270+
padding: var(--px-24);
271+
}
272+
273+
/* The title of the settings dialog */
274+
.graphiql-dialog .graphiql-dialog-title {
275+
font-size: var(--font-size-h3);
276+
font-weight: var(--font-weight-medium);
277+
margin: 0;
278+
}
279+
280+
/* A section inside the settings dialog */
281+
.graphiql-dialog .graphiql-dialog-section {
282+
align-items: center;
283+
border-top: 1px solid
284+
hsla(var(--color-neutral), var(--alpha-background-heavy));
285+
display: flex;
286+
justify-content: space-between;
287+
padding: var(--px-24);
288+
}
289+
290+
.graphiql-dialog .graphiql-dialog-section > :not(:first-child) {
291+
margin-left: var(--px-24);
292+
}
293+
294+
/* The section title in the settings dialog */
295+
.graphiql-dialog .graphiql-dialog-section-title {
296+
font-size: var(--font-size-h4);
297+
font-weight: var(--font-weight-medium);
298+
}
299+
300+
/* The section caption in the settings dialog */
301+
.graphiql-dialog .graphiql-dialog-section-caption {
302+
color: hsla(var(--color-neutral), var(--alpha-secondary));
303+
}
304+
305+
.graphiql-dialog .graphiql-warning-text {
306+
color: hsl(var(--color-warning));
307+
font-weight: var(--font-weight-medium);
308+
}
309+
310+
.graphiql-dialog .graphiql-table {
311+
border-collapse: collapse;
312+
width: 100%;
313+
}
314+
315+
.graphiql-dialog .graphiql-table :is(th, td) {
316+
border: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
317+
padding: var(--px-8) var(--px-12);
318+
}
319+
320+
/* A single key the short-key dialog */
321+
.graphiql-dialog .graphiql-key {
322+
background-color: hsla(var(--color-neutral), var(--alpha-background-medium));
323+
border-radius: var(--border-radius-4);
324+
padding: var(--px-4);
325+
}
326+
327+
/* Avoid showing native tooltips for icons with titles */
328+
.graphiql-container svg {
329+
pointer-events: none;
330+
}

‎packages/graphiql/src/index.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,14 @@
66
* This source code is licensed under the MIT license found in the
77
* LICENSE file in the root directory of this source tree.
88
*/
9+
import './graphiql.css';
910
import './style.css';
1011

11-
export { GraphiQL, GraphiQLInterface, type GraphiQLProps } from './GraphiQL';
12+
export {
13+
GraphiQL,
14+
// https://github.com/graphql/graphiql/issues/4057
15+
GraphiQLInterface,
16+
type GraphiQLProps,
17+
} from './GraphiQL';
1218

1319
export { HISTORY_PLUGIN } from '@graphiql/plugin-history';

0 commit comments

Comments
 (0)