starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-29 05:31:51 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Use new theme vars (#63)

Browse Source 
This PR swaps the theme to use the new stuff from the Theme Studio
This commit is contained in:
Gregory Schier
2024-08-13 07:44:28 -07:00
committed by GitHub
parent ecc7192bde
commit c9b4e6181c
79 changed files with 1113 additions and 1004 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src-web/components/core/Editor/Editor.css
View File

@@ -5,7 +5,7 @@
@apply w-full block text-base;
.cm-cursor {
@apply border-fg !important;
@apply border-text !important;
/* Widen the cursor */
@apply border-l-[2px];
}
@@ -20,11 +20,11 @@
.cm-line {
@apply w-full; /* Important! Ensure it spans the entire width */
@apply w-full text-fg pl-1 pr-1.5;
@apply w-full text-text pl-1 pr-1.5;
}
.cm-placeholder {
@apply text-placeholder;
@apply text-text-subtlest;
}
.cm-scroller {
@@ -50,7 +50,10 @@
/* Style gutters */
.cm-gutters {
@apply border-0 text-fg-subtler bg-transparent;
@apply border-0 text-text-subtlest bg-surface;
/* Not sure why, but there's a tiny gap left of the gutter that you can see text
through. Move left slightly to fix that. */
@apply -left-[1px];
.cm-gutterElement {
@apply cursor-default;
@@ -59,8 +62,8 @@
.placeholder {
/* Colors */
@apply bg-background text-fg-subtle border-background-highlight-secondary;
@apply hover:border-background-highlight hover:text-fg hover:bg-background-highlight-secondary;
@apply bg-surface text-text-subtle border-border-subtle;
@apply hover:border-border-subtle hover:text-text hover:bg-surface-highlight;
@apply border px-1 mx-[0.5px] rounded cursor-default dark:shadow;
@@ -147,12 +150,12 @@
}
.cm-editor .fold-gutter-icon:hover {
@apply text-fg bg-background-highlight;
@apply text-text bg-surface-highlight;
}
.cm-editor .cm-foldPlaceholder {
@apply px-2 border border-fg-subtler bg-background-highlight;
@apply hover:text-fg hover:border-fg-subtle text-fg;
@apply px-2 border border-border-subtle bg-surface-highlight;
@apply hover:text-text hover:border-border-subtle text-text;
@apply cursor-default !important;
}
@@ -162,13 +165,13 @@
.cm-wrapper:not(.cm-readonly) .cm-editor {
&.cm-focused .cm-activeLineGutter {
@apply text-fg-subtle;
@apply text-text-subtle;
}
}
.cm-wrapper.cm-readonly .cm-editor {
.cm-cursor {
@apply border-fg-danger !important;
@apply border-danger !important;
}
}
@@ -187,18 +190,18 @@
}
.cm-tooltip.cm-tooltip-hover {
@apply shadow-lg bg-background rounded text-fg-subtle border border-fg-subtler z-50 pointer-events-auto text-sm;
@apply shadow-lg bg-surface rounded text-text-subtle border border-border-subtle z-50 pointer-events-auto text-sm;
@apply px-2 py-1;
a {
@apply text-fg;
@apply text-text;
&:hover {
@apply underline;
}
&::after {
@apply text-fg bg-fg-secondary h-3 w-3 ml-1;
@apply text-text bg-surface-highlight h-3 w-3 ml-1;
content: '';
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='black' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
@@ -210,7 +213,7 @@
/* NOTE: Extra selector required to override default styles */
.cm-tooltip.cm-tooltip-autocomplete,
.cm-tooltip.cm-completionInfo {
@apply shadow-lg bg-background rounded text-fg-subtle border border-background-highlight z-50 pointer-events-auto text-editor;
@apply shadow-lg bg-surface rounded text-text-subtle border border-border-subtle z-50 pointer-events-auto text-editor;
.cm-completionIcon {
@apply italic font-mono;
@@ -288,11 +291,11 @@
}
& > ul > li {
@apply cursor-default px-2 h-[2em] rounded-sm text-fg flex items-center;
@apply cursor-default px-2 h-[2em] rounded-sm text-text flex items-center;
}
& > ul > li[aria-selected] {
@apply bg-background-highlight-secondary text-fg;
@apply bg-surface-highlight text-text;
}
.cm-completionIcon {
@@ -300,17 +303,17 @@
}
.cm-completionLabel {
@apply text-fg;
@apply text-text;
}
.cm-completionDetail {
@apply ml-auto pl-6 text-fg-subtle;
@apply ml-auto pl-6 text-text-subtle;
}
}
}
.cm-editor .cm-panels {
@apply bg-background-highlight-secondary backdrop-blur-sm p-1 mb-1 text-fg z-20 rounded-md;
@apply bg-surface-highlight backdrop-blur-sm p-1 mb-1 text-text z-20 rounded-md;
input,
button {
@@ -318,21 +321,21 @@
}
button {
@apply border-fg-subtler bg-background-highlight text-fg hover:border-fg-info;
@apply border-border-subtle bg-surface-highlight text-text hover:border-info;
@apply appearance-none bg-none cursor-default;
}
button[name='close'] {
@apply text-fg-subtle hocus:text-fg px-2 -mr-1.5 !important;
@apply text-text-subtle hocus:text-text px-2 -mr-1.5 !important;
}
input {
@apply bg-background border-background-highlight focus:border-border-focus;
@apply bg-surface border-border-subtle focus:border-border-focus;
@apply border outline-none cursor-text;
}
label {
@apply focus-within:text-fg;
@apply focus-within:text-text;
}
/* Hide the "All" button */

13
src-web/components/core/Editor/Editor.tsx
View File

@@ -162,12 +162,6 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
view.dispatch({ effects: languageCompartment.reconfigure(ext) });
}, [contentType, autocomplete, useTemplating, environment, workspace]);
const classList = className?.split(/\s+/) ?? [];
const bgClassList = classList
.filter((c) => c.match(/(^|:)?bg-.+/)) // Find bg-* classes
.map((c) => c.replace(/^bg-/, '!bg-')) // !important
.map((c) => c.replace(/^dark:bg-/, 'dark:!bg-')); // !important
// Initialize the editor when ref mounts
const initEditorRef = useCallback(
(container: HTMLDivElement | null) => {
@@ -230,8 +224,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
const decoratedActions = useMemo(() => {
const results = [];
const actionClassName = classNames(
'transition-opacity opacity-0 group-hover:opacity-80 hover:!opacity-100 shadow',
bgClassList,
'bg-surface transition-opacity opacity-0 group-hover:opacity-100 hover:!opacity-100 shadow',
);
if (format) {
@@ -269,7 +262,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
}),
);
return results;
}, [actions, bgClassList, format, onChange]);
}, [actions, format, onChange]);
const cmContainer = (
<div
@@ -290,7 +283,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
}
return (
<div className="group relative h-full w-full x-theme-editor bg-background">
<div className="group relative h-full w-full x-theme-editor bg-surface">
{cmContainer}
{decoratedActions && (
<HStack

18
src-web/components/core/Editor/extensions.ts
View File

@@ -43,23 +43,23 @@ import { url } from './url/extension';
export const syntaxHighlightStyle = HighlightStyle.define([
{
tag: [t.documentMeta, t.blockComment, t.lineComment, t.docComment, t.comment],
color: 'var(--fg-subtler)',
color: 'var(--textSubtlest)',
fontStyle: 'italic',
},
{
tag: [t.paren, t.bracket, t.brace],
color: 'var(--fg)',
color: 'var(--textSubtle)',
},
{
tag: [t.link, t.name, t.tagName, t.angleBracket, t.docString, t.number],
color: 'var(--fg-info)',
color: 'var(--info)',
},
{ tag: [t.variableName], color: 'var(--fg-success)' },
{ tag: [t.bool], color: 'var(--fg-warning)' },
{ tag: [t.attributeName, t.propertyName], color: 'var(--fg-primary)' },
{ tag: [t.attributeValue], color: 'var(--fg-warning)' },
{ tag: [t.string], color: 'var(--fg-notice)' },
{ tag: [t.atom, t.meta, t.operator, t.bool, t.null, t.keyword], color: 'var(--fg-danger)' },
{ tag: [t.variableName], color: 'var(--success)' },
{ tag: [t.bool], color: 'var(--warning)' },
{ tag: [t.attributeName, t.propertyName], color: 'var(--primary)' },
{ tag: [t.attributeValue], color: 'var(--warning)' },
{ tag: [t.string], color: 'var(--notice)' },
{ tag: [t.atom, t.meta, t.operator, t.bool, t.null, t.keyword], color: 'var(--danger)' },
]);
const syntaxTheme = EditorView.theme({}, { dark: true });