danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2024-11-26 20:14:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

add Playground tags to better match prism

Browse Source
This commit is contained in:
Stacy Kvernmo 2023-06-14 12:00:06 -05:00
parent 6d515ce72f
commit ddd5e2b36f
2 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
source/assets/js/playground/theme.ts
View File

@ -4,12 +4,28 @@ import { tags } from '@lezer/highlight';
const playgroundHighlightStyle = HighlightStyle.define([
{
tag: [tags.special(tags.variableName), tags.tagName],
color: '#445588',
fontWeight: '600',
color: 'var(--sl-color--code-base)'
},
{ tag: tags.keyword,
color: 'var(--sl-color--code-bright-dark)',
fontWeight: '600'
},
{ tag: tags.definitionKeyword,
color: 'var(--sl-color--code-dark)',
fontWeight: '600'
},
{ tag: tags.comment,
color: 'var(--sl-color--code-muted)',
fontStyle: 'italic'
},
{ tag: tags.propertyName,
color: 'var(--sl-color--code-warm)',
fontWeight: '600'
},
{ tag: tags.className,
color: 'var(--sl-color--code-cool)',
fontWeight: '600'
},
{ tag: tags.definitionKeyword, fontWeight: '600' },
{ tag: tags.comment, color: '#006666', fontStyle: 'italic' },
{ tag: tags.propertyName, color: '#990000' },
]);
export { playgroundHighlightStyle };

6
source/assets/sass/components/_playground.scss
View File

@ -118,7 +118,7 @@
height: 100%;
font-size: var(--sl-font-size--x-small);
background-color: var(--sl-color-editor-background);
color: var(--sl-color--code-text);
color: var(--sl-color--code-base, var(--sl-color--code-text));
&.cm-focused {
// override focus style
@ -221,12 +221,10 @@
}
.sl-c-playground__tabbar-title {
text-transform: uppercase;
// For nested caps in tab title, reset a few styles
.caps {
--sl-font-size--caps: var(--sl-font-size--medium);
font-weight: normal;
letter-spacing: 0;
}