stepzen-graphiql 2.0.1-experimental.3 → 2.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +37 -0
- package/dist/style.css +8 -4
- package/package.json +1 -3
package/README.md
CHANGED
|
@@ -72,3 +72,40 @@ export default App;
|
|
|
72
72
|
| `theme` | `string` | Theme configuration for the GraphiQL interface ('white', 'g10', 'g90', 'g100') |
|
|
73
73
|
| `onEditQuery` | `function` | Callback triggered when the query is edited |
|
|
74
74
|
| `onFetchResult` | `function` | Callback triggered when the query result is fetched |
|
|
75
|
+
|
|
76
|
+
## Styling and Fonts
|
|
77
|
+
|
|
78
|
+
### Custom Font Configuration
|
|
79
|
+
|
|
80
|
+
This package uses a custom font setup to replace GraphiQL's default fonts (Roboto and Fira Code) with IBM Plex Sans.
|
|
81
|
+
|
|
82
|
+
#### `src/styles/graphiql-no-fonts.css`
|
|
83
|
+
|
|
84
|
+
This file contains the complete GraphiQL styles **without** the embedded font definitions. It's a modified version of the original GraphiQL stylesheet where the `@font-face` declarations for Roboto and Fira Code have been removed.
|
|
85
|
+
|
|
86
|
+
**Purpose:**
|
|
87
|
+
- Reduces bundle size by excluding font files
|
|
88
|
+
- Allows custom font substitution
|
|
89
|
+
- Maintains all GraphiQL styling and layout
|
|
90
|
+
|
|
91
|
+
#### `src/styles/font-override.css`
|
|
92
|
+
|
|
93
|
+
This file overrides the font family references to use IBM Plex Sans instead of Roboto:
|
|
94
|
+
|
|
95
|
+
```css
|
|
96
|
+
* {
|
|
97
|
+
font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
|
|
98
|
+
}
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
**Why this approach?**
|
|
102
|
+
- Provides consistent branding with IBM Plex Sans
|
|
103
|
+
- Falls back to system fonts if IBM Plex Sans is unavailable
|
|
104
|
+
- Ensures all GraphiQL components use the same font family
|
|
105
|
+
|
|
106
|
+
**Note:** Make sure IBM Plex Sans fonts are available in your project. You can install them via:
|
|
107
|
+
```bash
|
|
108
|
+
npm install @ibm/plex
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
And import them in your application's entry point or global styles.
|