This commit is contained in:
James Stuckey Weber 2023-06-15 16:22:00 -04:00
parent 00062ef8dc
commit 8ae9bfd6b1
3 changed files with 51 additions and 39 deletions

View File

@ -4,54 +4,52 @@ import { tags } from '@lezer/highlight';
const playgroundHighlightStyle = HighlightStyle.define([
{
tag: [tags.special(tags.variableName), tags.tagName],
color: 'var(--sl-color--code-base)'
color: 'var(--sl-color--code-base)',
},
{ tag: tags.className,
{
tag: tags.className,
color: 'var(--sl-color--code-cool)',
fontWeight: '600'
fontWeight: '600',
},
{ tag: tags.comment,
{
tag: tags.comment,
color: 'var(--sl-color--code-muted)',
fontStyle: 'italic'
fontStyle: 'italic',
},
{ tag: tags.keyword,
{
tag: tags.keyword,
color: 'var(--sl-color--code-bright-dark)',
fontWeight: '600'
fontWeight: '600',
},
{ tag: tags.controlKeyword,
{
tag: tags.controlKeyword,
color: 'var(--sl-color--code-dark)',
fontWeight: '600'
fontWeight: '600',
},
{ tag: tags.definitionKeyword,
{
tag: tags.definitionKeyword,
color: 'var(--sl-color--code-dark)',
fontWeight: '600'
fontWeight: '600',
},
{ tag: tags.moduleKeyword,
color: 'green'
},
{ tag: tags.operator,
{ tag: tags.moduleKeyword, color: 'green' },
{
tag: tags.operator,
color: 'var(--sl-color--code-muted-dark)',
fontWeight: '600'
fontWeight: '600',
},
{ tag: tags.propertyName,
{
tag: tags.propertyName,
color: 'var(--sl-color--code-warm)',
fontWeight: '600'
fontWeight: '600',
},
{ tag: tags.punctuation,
color: 'var(--sl-color--code-muted-dark)'
},
{ tag: tags.string,
color: 'var(--sl-color--code-bright)'
},
{ tag: tags.unit,
color: 'var(--sl-color--code-base)'
},
{ tag: tags.atom,
color: 'var(--sl-color--code-base)'
},
{ tag: tags.labelName,
{ tag: tags.punctuation, color: 'var(--sl-color--code-muted-dark)' },
{ tag: tags.string, color: 'var(--sl-color--code-bright)' },
{ tag: tags.unit, color: 'var(--sl-color--code-base)' },
{ tag: tags.atom, color: 'var(--sl-color--code-base)' },
{
tag: tags.labelName,
color: 'var(--sl-color--code-dark)',
fontWeight: '600'
}
fontWeight: '600',
},
]);
export { playgroundHighlightStyle };

View File

@ -46,16 +46,26 @@
}
&--tab {
--color-button-background: var(--color-tab-background, var(--sl-color--code-background-darker));
--color-button-text: var(--color-button-tab-active, var(--sl-color--highlight));
--color-button-background: var(
--color-tab-background,
var(--sl-color--code-background-darker)
);
--color-button-text: var(
--color-button-tab-active,
var(--sl-color--highlight)
);
--font-weight-button: #{typography.$sl-font-weight--bold};
--radius-button: 0;
box-shadow: none;
box-shadow: none;
&:hover {
background: var(--color-tab-background-hover, transparent);
--color-button-text: var(--color-tab-hover, var(--sl-color--midnight-blue));
--color-button-text: var(
--color-tab-hover,
var(--sl-color--midnight-blue)
);
}
&:focus {
@ -63,6 +73,7 @@
--color-tab-background,
--sl-color--code-background
);
color: var(--color-tab-focus, var(--sl-color--highlight));
}
}

View File

@ -17,8 +17,11 @@ $sl-color--code-muted: #656556;
$sl-color--code-base: #066;
$sl-color--code-cool: #458;
$sl-color--code-dark: black;
$sl-color--border-blush: color.adjust(brand.$sl-color--hopbush, $lightness: 27%);
$sl-color--border-blush: color.adjust(
brand.$sl-color--hopbush,
$lightness: 27%
);
$sl-color--highlight-blush: rgba($sl-color--border-blush, 0.2);
$sl-color--error: #CF0254;
$sl-color--error: #cf0254;
$sl-color--warn: #c14e00;
$sl-color--success: #168073;