Skip to content

Commit 6c36da0

Browse files
rcalicdanrcalicdan
committed
improve PHPDoc styling for better readability
1 parent 2620c01 commit 6c36da0

5 files changed

Lines changed: 81 additions & 23 deletions

File tree

‎docs/.vitepress/theme/components/PlaygroundEditor.vue‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { ref, onMounted, onUnmounted, watch } from 'vue';
1212
import { EditorView, basicSetup } from 'codemirror';
1313
import { EditorState, Compartment, Prec } from '@codemirror/state';
1414
import { php } from '@codemirror/lang-php';
15-
import { oneDark } from '@codemirror/theme-one-dark';
15+
import { oneDark } from './theme-one-dark';
1616
import { oneLight } from './theme-one-light';
1717
import { keymap } from '@codemirror/view';
1818
import { useData } from 'vitepress';
@@ -41,8 +41,8 @@ const { isDark } = useData();
4141
4242
const baseTheme = EditorView.theme({
4343
'&': { height: '100%', fontSize: 'var(--playground-font-size, 13.5px)' },
44-
'.cm-scroller': {
45-
overflow: 'auto',
44+
'.cm-scroller': {
45+
overflow: 'auto',
4646
fontFamily: 'var(--vp-font-family-mono)',
4747
scrollbarWidth: 'thin',
4848
scrollbarColor: 'var(--vp-c-divider) transparent'
@@ -52,7 +52,7 @@ const baseTheme = EditorView.theme({
5252
'.cm-phpdoc-generic-bracket, .cm-phpdoc-generic-bracket *': { color: '#e06c75 !important', fontWeight: '700 !important', fontStyle: 'normal !important' },
5353
'.cm-phpdoc-generic-type, .cm-phpdoc-generic-type *': { color: '#56b6c2 !important', fontStyle: 'italic !important', fontWeight: '600 !important' },
5454
'.cm-phpdoc-variance, .cm-phpdoc-variance *': { color: '#d19a66 !important', fontStyle: 'italic !important' },
55-
'.cm-phpdoc-var, .cm-phpdoc-var *': { color: '#e06c75 !important', fontWeight: '600 !important', fontStyle: 'normal !important' },
55+
'.cm-phpdoc-var, .cm-phpdoc-var *': { color: '#cbd3dd !important', fontWeight: '500 !important', fontStyle: 'normal !important' },
5656
'.cm-phpdoc-shape-key, .cm-phpdoc-shape-key *': { color: '#61afef !important', fontWeight: '600 !important', fontStyle: 'normal !important' },
5757
'.cm-phpdoc-operator, .cm-phpdoc-operator *': { color: '#abb2bf !important' },
5858
'.cm-phpdoc-string, .cm-phpdoc-string *': { color: '#98c379 !important' },
@@ -62,7 +62,7 @@ const baseTheme = EditorView.theme({
6262
'.cm-php-func, .cm-php-func *': { color: '#61afef !important' },
6363
'.cm-php-this, .cm-php-this *': { color: '#c678dd !important', fontStyle: 'italic !important', fontWeight: '600 !important' },
6464
'.cm-php-self-static, .cm-php-self-static *': { color: '#e5c07b !important', fontStyle: 'italic !important', fontWeight: '600 !important' },
65-
'.cm-php-property, .cm-php-property *': { color: '#56b6c2 !important', fontWeight: '500 !important' },
65+
'.cm-php-property, .cm-php-property *': { color: '#cbd3dd !important', fontWeight: '500 !important' },
6666
'.cm-phpdoc-primitive, .cm-phpdoc-primitive *': { color: '#56b6c2 !important', fontWeight: '600 !important', fontStyle: 'normal !important' },
6767
});
6868
@@ -256,8 +256,8 @@ defineExpose({
256256
257257
:root:not(.dark) .playground-editor-wrapper :deep(.cm-phpdoc-var),
258258
:root:not(.dark) .playground-editor-wrapper :deep(.cm-phpdoc-var) * {
259-
color: #e45649 !important;
260-
font-weight: 600 !important;
259+
color: #141619 !important;
260+
font-weight: 500 !important;
261261
}
262262
263263
:root:not(.dark) .playground-editor-wrapper :deep(.cm-phpdoc-shape-key),
@@ -314,10 +314,10 @@ defineExpose({
314314
font-weight: 500 !important;
315315
}
316316
317-
:root:not(.dark) .playground-editor-wrapper :deep(.cm-phpdoc-primitive),
318-
:root:not(.dark) .playground-editor-wrapper :deep(.cm-phpdoc-primitive) * {
319-
color: #0184bc !important;
320-
font-weight: 600 !important;
317+
:root:not(.dark) .playground-editor-wrapper :deep(.cm-php-property),
318+
:root:not(.dark) .playground-editor-wrapper :deep(.cm-php-property) * {
319+
color: #020202 !important;
320+
font-weight: 500 !important;
321321
}
322322
323323
@media (max-width: 768px) {

‎docs/.vitepress/theme/components/PlaygroundOutput.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -982,6 +982,12 @@ defineExpose({
982982
border-left-color: #d97706;
983983
}
984984
985+
:root:not(.dark) .stderr-stream.is-error {
986+
color: #b91c1c;
987+
background: rgba(239, 68, 68, 0.08);
988+
border-left-color: #dc2626;
989+
}
990+
985991
.empty-state {
986992
display: flex;
987993
align-items: center;

‎docs/.vitepress/theme/components/theme-one-dark.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { EditorView } from '@codemirror/view';
2+
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
3+
import { tags as t } from '@lezer/highlight';
4+
5+
export const oneDarkTheme = EditorView.theme({
6+
'&': {
7+
color: '#cbd3dd',
8+
backgroundColor: 'var(--vp-c-bg, #1e1e20)',
9+
},
10+
'.cm-content': {
11+
caretColor: '#528bff',
12+
},
13+
'.cm-cursor, .cm-dropCursor': {
14+
borderLeftColor: '#528bff',
15+
},
16+
'&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
17+
backgroundColor: '#3e4451 !important',
18+
},
19+
'.cm-activeLine': {
20+
backgroundColor: 'rgba(255, 255, 255, 0.04)',
21+
},
22+
'.cm-gutters': {
23+
backgroundColor: 'var(--vp-c-bg, #1e1e20)',
24+
color: '#5c6370',
25+
borderRight: '1px solid var(--vp-c-divider, #2e2e32)',
26+
},
27+
'.cm-activeLineGutter': {
28+
backgroundColor: 'rgba(255, 255, 255, 0.05)',
29+
color: '#cbd3dd',
30+
},
31+
}, { dark: true });
32+
33+
export const oneDarkHighlightStyle = HighlightStyle.define([
34+
{ tag: [t.keyword, t.modifier], color: '#c678dd', fontWeight: 'bold' },
35+
{ tag: [t.variableName, t.definition(t.variableName)], color: '#cbd3dd' },
36+
{ tag: [t.propertyName], color: '#cbd3dd' },
37+
{ tag: [t.function(t.variableName), t.function(t.propertyName)], color: '#61afef' },
38+
{ tag: [t.typeName, t.className], color: '#e5c07b', fontWeight: '600' },
39+
{ tag: [t.string, t.special(t.string)], color: '#98c379' },
40+
{ tag: [t.number], color: '#d19a66' },
41+
{ tag: [t.comment, t.lineComment, t.blockComment], color: '#5c6370', fontStyle: 'italic' },
42+
{ tag: [t.operator, t.punctuation], color: '#abb2bf' },
43+
{ tag: [t.bool, t.null, t.constant(t.name)], color: '#d19a66', fontWeight: '600' },
44+
]);
45+
46+
export const oneDark = [
47+
oneDarkTheme,
48+
syntaxHighlighting(oneDarkHighlightStyle),
49+
];

‎docs/.vitepress/theme/components/theme-one-light.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { EditorView } from 'codemirror';
1+
import { EditorView } from '@codemirror/view';
22
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
33
import { tags as t } from '@lezer/highlight';
44

55
export const oneLightTheme = EditorView.theme({
66
'&': {
7-
color: '#383a42',
7+
color: '#1d2023',
88
backgroundColor: 'var(--vp-c-bg, #ffffff)',
99
},
1010
'.cm-content': {
@@ -26,14 +26,14 @@ export const oneLightTheme = EditorView.theme({
2626
},
2727
'.cm-activeLineGutter': {
2828
backgroundColor: 'rgba(0, 0, 0, 0.04)',
29-
color: '#383a42',
29+
color: '#1d2023',
3030
},
3131
}, { dark: false });
3232

3333
export const oneLightHighlightStyle = HighlightStyle.define([
34-
{ tag: t.keyword, color: '#a626a4', fontWeight: 'bold' },
35-
{ tag: [t.variableName, t.definition(t.variableName)], color: '#e45649' },
36-
{ tag: [t.propertyName], color: '#0184bc' },
34+
{ tag: [t.keyword, t.modifier], color: '#a626a4', fontWeight: 'bold' },
35+
{ tag: [t.variableName, t.definition(t.variableName)], color: '#1d2023' },
36+
{ tag: [t.propertyName], color: '#1d2023' },
3737
{ tag: [t.function(t.variableName), t.function(t.propertyName)], color: '#4078f2' },
3838
{ tag: [t.typeName, t.className], color: '#c18401', fontWeight: '600' },
3939
{ tag: [t.string, t.special(t.string)], color: '#50a14f' },

‎docs/.vitepress/theme/styles/docblocks.css‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,11 @@ html.dark .cm-phpdoc-variance {
4242
html.dark .tok-phpdoc-var,
4343
html.dark .cm-phpdoc-var,
4444
html.dark .tok-var,
45+
html.dark .cm-php-property,
4546
html.dark .vp-doc div[class*='language-php'] .token.variable,
46-
html.dark .vp-doc div[class*='language-php'] span[style*='color:#E06C75'] {
47-
color: #e06c75 !important;
48-
font-weight: 600 !important;
47+
html.dark .vp-doc div[class*='language-php'] .token.property {
48+
color: #cbd3dd !important;
49+
font-weight: 500 !important;
4950
font-style: normal !important;
5051
}
5152

@@ -133,9 +134,11 @@ html:not(.dark) .cm-phpdoc-variance {
133134
html:not(.dark) .tok-phpdoc-var,
134135
html:not(.dark) .cm-phpdoc-var,
135136
html:not(.dark) .tok-var,
136-
html:not(.dark) .vp-doc div[class*='language-php'] .token.variable {
137-
color: #e45649 !important;
138-
font-weight: 600 !important;
137+
html:not(.dark) .cm-php-property,
138+
html:not(.dark) .vp-doc div[class*='language-php'] .token.variable,
139+
html:not(.dark) .vp-doc div[class*='language-php'] .token.property {
140+
color: #1d2023 !important;
141+
font-weight: 500 !important;
139142
font-style: normal !important;
140143
}
141144

0 commit comments

Comments
 (0)