Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tidy up frontend CSS #2987

Merged
merged 7 commits into from
Aug 11, 2024
Merged

Tidy up frontend CSS #2987

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
edbfdc7
Move font files
savq Jul 15, 2024
bf13310
Move themes files
savq Jul 15, 2024
61aff12
Organize style tags
savq Aug 6, 2024
eed33ea
Organize style tags for css, html and markdown
savq Aug 11, 2024
0a63c3d
Comment differences between light and dark themes
savq Aug 11, 2024
bf71a19
Rename codemirror color variables
savq Aug 11, 2024
3c43964
fix typescript error
fonsp Aug 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
290 changes: 81 additions & 209 deletions frontend/components/CellInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,231 +94,103 @@ window.PLUTO_TOGGLE_CM_AUTOCOMPLETE_ON_TYPE = (val = !ENABLE_CM_AUTOCOMPLETE_ON_
window.location.reload()
}

export const pluto_syntax_colors = HighlightStyle.define(
[
/* The following three need a specific version of the julia parser, will add that later (still messing with it 😈) */
// Symbol
// { tag: tags.controlKeyword, color: "var(--cm-keyword-color)", fontWeight: 700 },

{ tag: tags.propertyName, color: "var(--cm-property-color)" },
{ tag: tags.unit, color: "var(--cm-tag-color)" },
{ tag: tags.literal, color: "var(--cm-builtin-color)", fontWeight: 700 },
{ tag: tags.macroName, color: "var(--cm-macro-color)", fontWeight: 700 },

// I (ab)use `special(brace)` for interpolations.
// lang-javascript does the same so I figure it is "best practice" 😅
{ tag: tags.special(tags.brace), color: "var(--cm-macro-color)", fontWeight: 700 },

// `nothing` I guess... Any others?
{
tag: tags.standard(tags.variableName),
color: "var(--cm-builtin-color)",
fontWeight: 700,
},

{ tag: tags.bool, color: "var(--cm-builtin-color)", fontWeight: 700 },

{ tag: tags.keyword, color: "var(--cm-keyword-color)" },
{ tag: tags.comment, color: "var(--cm-comment-color)", fontStyle: "italic" },
{ tag: tags.atom, color: "var(--cm-atom-color)" },
{ tag: tags.number, color: "var(--cm-number-color)" },
// { tag: tags.property, color: "#48b685" },
// { tag: tags.attribute, color: "#48b685" },
{ tag: tags.keyword, color: "var(--cm-keyword-color)" },
{ tag: tags.string, color: "var(--cm-string-color)" },
{ tag: tags.variableName, color: "var(--cm-var-color)", fontWeight: 700 },
// { tag: tags.variable2, color: "#06b6ef" },
{ tag: tags.typeName, color: "var(--cm-type-color)", fontStyle: "italic" },
{ tag: tags.typeOperator, color: "var(--cm-type-color)", fontStyle: "italic" },
{ tag: tags.bracket, color: "var(--cm-bracket-color)" },
{ tag: tags.brace, color: "var(--cm-bracket-color)" },
{ tag: tags.tagName, color: "var(--cm-tag-color)" },
{ tag: tags.link, color: "var(--cm-link-color)" },
{
tag: tags.invalid,
color: "var(--cm-error-color)",
background: "var(--cm-error-bg-color)",
},
],
const common_style_tags = [
{ tag: tags.comment, color: "var(--cm-color-comment)", fontStyle: "italic", filter: "none" },
{ tag: tags.keyword, color: "var(--cm-color-keyword)" },
{ tag: tags.variableName, color: "var(--cm-color-var)", fontWeight: 700 },
{ tag: tags.typeName, color: "var(--cm-color-type)", fontStyle: "italic" },
{ tag: tags.typeOperator, color: "var(--cm-color-type)", fontStyle: "italic" },
{ tag: tags.tagName, color: "var(--cm-color-tag)" }, // JS
{ tag: tags.propertyName, color: "var(--cm-color-property)" },
// TODO: tags.labelName
{ tag: tags.macroName, color: "var(--cm-color-macro)", fontWeight: 700 },
{ tag: tags.string, color: "var(--cm-color-string)" },
// TODO: tags.character
{ tag: tags.number, color: "var(--cm-color-number)" },
{ tag: tags.bool, color: "var(--cm-color-builtin)", fontWeight: 700 },
// TODO: tags.escape
// TODO: tags.self, tags.null
{ tag: tags.atom, color: "var(--cm-color-atom)" },
{ tag: tags.unit, color: "var(--cm-color-tag)" }, // TODO: Remove
// TODO? tags.operator
{ tag: tags.bracket, color: "var(--cm-color-bracket)" },
{ tag: tags.special(tags.brace), color: "var(--cm-color-macro)", fontWeight: 700 }, // interp
]

export const pluto_syntax_colors_julia = HighlightStyle.define(
common_style_tags,
{
all: { color: `var(--cm-editor-text-color)` },
all: { color: `var(--cm-color-editor-text)` },
scope: julia_andrey().language,
}
)

export const pluto_syntax_colors_javascript = HighlightStyle.define(
[
// SAME AS JULIA:
{ tag: tags.propertyName, color: "var(--cm-property-color)" },
{ tag: tags.unit, color: "var(--cm-tag-color)" },
{ tag: tags.literal, color: "var(--cm-builtin-color)", fontWeight: 700 },
{ tag: tags.macroName, color: "var(--cm-macro-color)", fontWeight: 700 },

// `nothing` I guess... Any others?
{
tag: tags.standard(tags.variableName),
color: "var(--cm-builtin-color)",
fontWeight: 700,
},

{ tag: tags.bool, color: "var(--cm-builtin-color)", fontWeight: 700 },

{ tag: tags.keyword, color: "var(--cm-keyword-color)" },
{ tag: tags.atom, color: "var(--cm-atom-color)" },
{ tag: tags.number, color: "var(--cm-number-color)" },
// { tag: tags.property, color: "#48b685" },
// { tag: tags.attribute, color: "#48b685" },
{ tag: tags.keyword, color: "var(--cm-keyword-color)" },
{ tag: tags.string, color: "var(--cm-string-color)" },
{ tag: tags.variableName, color: "var(--cm-var-color)", fontWeight: 700 },
// { tag: tags.variable2, color: "#06b6ef" },
{ tag: tags.typeName, color: "var(--cm-type-color)", fontStyle: "italic" },
{ tag: tags.typeOperator, color: "var(--cm-type-color)", fontStyle: "italic" },
{ tag: tags.bracket, color: "var(--cm-bracket-color)" },
{ tag: tags.brace, color: "var(--cm-bracket-color)" },
{ tag: tags.tagName, color: "var(--cm-tag-color)" },
{ tag: tags.link, color: "var(--cm-link-color)" },
{
tag: tags.invalid,
color: "var(--cm-error-color)",
background: "var(--cm-error-bg-color)",
},

// JAVASCRIPT SPECIFIC
{ tag: tags.comment, color: "var(--cm-comment-color)", fontStyle: "italic", filter: "none" },
],
common_style_tags,
{
all: { color: `var(--cm-color-editor-text)`, filter: `contrast(0.5)` },
scope: javascriptLanguage,
all: {
color: `var(--cm-editor-text-color)`,
filter: `contrast(0.5)`,
},
}
)

export const pluto_syntax_colors_python = HighlightStyle.define(
[
// SAME AS JULIA:
{ tag: tags.propertyName, color: "var(--cm-property-color)" },
{ tag: tags.unit, color: "var(--cm-tag-color)" },
{ tag: tags.literal, color: "var(--cm-builtin-color)", fontWeight: 700 },
{ tag: tags.macroName, color: "var(--cm-macro-color)", fontWeight: 700 },

// `nothing` I guess... Any others?
{
tag: tags.standard(tags.variableName),
color: "var(--cm-builtin-color)",
fontWeight: 700,
},

{ tag: tags.bool, color: "var(--cm-builtin-color)", fontWeight: 700 },

{ tag: tags.keyword, color: "var(--cm-keyword-color)" },
{ tag: tags.comment, color: "var(--cm-comment-color)", fontStyle: "italic" },
{ tag: tags.atom, color: "var(--cm-atom-color)" },
{ tag: tags.number, color: "var(--cm-number-color)" },
// { tag: tags.property, color: "#48b685" },
// { tag: tags.attribute, color: "#48b685" },
{ tag: tags.keyword, color: "var(--cm-keyword-color)" },
{ tag: tags.string, color: "var(--cm-string-color)" },
{ tag: tags.variableName, color: "var(--cm-var-color)", fontWeight: 700 },
// { tag: tags.variable2, color: "#06b6ef" },
{ tag: tags.typeName, color: "var(--cm-type-color)", fontStyle: "italic" },
{ tag: tags.typeOperator, color: "var(--cm-type-color)", fontStyle: "italic" },
{ tag: tags.bracket, color: "var(--cm-bracket-color)" },
{ tag: tags.brace, color: "var(--cm-bracket-color)" },
{ tag: tags.tagName, color: "var(--cm-tag-color)" },
{ tag: tags.link, color: "var(--cm-link-color)" },
{
tag: tags.invalid,
color: "var(--cm-error-color)",
background: "var(--cm-error-bg-color)",
},

// PYTHON SPECIFIC
],
common_style_tags,
{
all: { color: `var(--cm-color-editor-text)`, filter: `contrast(0.5)` },
scope: pythonLanguage,
all: {
color: "var(--cm-editor-text-color)",
filter: `contrast(0.5)`,
},
}
)

export const pluto_syntax_colors_css = HighlightStyle.define(
[
{ tag: tags.propertyName, color: "var(--cm-css-accent-color)", fontWeight: 700 },
{ tag: tags.variableName, color: "var(--cm-css-accent-color)", fontWeight: 700 },
{ tag: tags.definitionOperator, color: "var(--cm-css-color)" },
{ tag: tags.keyword, color: "var(--cm-css-color)" },
{ tag: tags.modifier, color: "var(--cm-css-accent-color)" },
{ tag: tags.punctuation, opacity: 0.5 },
{ tag: tags.literal, color: "var(--cm-css-color)" },
// { tag: tags.unit, color: "var(--cm-css-accent-color)" },
{ tag: tags.tagName, color: "var(--cm-css-color)", fontWeight: 700 },
{ tag: tags.className, color: "var(--cm-css-why-doesnt-codemirror-highlight-all-the-text-aaa)" },
{ tag: tags.constant(tags.className), color: "var(--cm-css-why-doesnt-codemirror-highlight-all-the-text-aaa)" },

// Comment from julia
{ tag: tags.comment, color: "var(--cm-comment-color)", fontStyle: "italic" },
],
{
scope: cssLanguage,
all: { color: "var(--cm-css-color)" },
}
)

export const pluto_syntax_colors_html = HighlightStyle.define(
[
{ tag: tags.tagName, color: "var(--cm-html-accent-color)", fontWeight: 600 },
{ tag: tags.attributeName, color: "var(--cm-html-accent-color)", fontWeight: 600 },
{ tag: tags.attributeValue, color: "var(--cm-html-accent-color)" },
{ tag: tags.angleBracket, color: "var(--cm-html-accent-color)", fontWeight: 600, opacity: 0.7 },
{ tag: tags.content, color: "var(--cm-html-color)", fontWeight: 400 },
{ tag: tags.documentMeta, color: "var(--cm-html-accent-color)" },
{ tag: tags.comment, color: "var(--cm-comment-color)", fontStyle: "italic" },
],
{
scope: htmlLanguage,
all: {
color: "var(--cm-html-color)",
},
}
)

// https://github.com/codemirror/lang-markdown/blob/main/src/markdown.ts
export const pluto_syntax_colors_markdown = HighlightStyle.define(
[
{ tag: tags.content, color: "var(--cm-md-color)" },
{ tag: tags.quote, color: "var(--cm-md-color)" },
{ tag: tags.link, textDecoration: "underline" },
{ tag: tags.url, color: "var(--cm-md-color)", textDecoration: "none" },
{ tag: tags.emphasis, fontStyle: "italic" },
{ tag: tags.strong, fontWeight: "bolder" },

{ tag: tags.heading, color: "var(--cm-md-color)", fontWeight: 700 },
{
tag: tags.comment,
color: "var(--cm-comment-color)",
fontStyle: "italic",
},
{
// These are all the things you won't see in the result:
// `-` bullet points, the `#` for headers, the `>` with quoteblocks.
tag: tags.processingInstruction,
color: "var(--cm-md-accent-color) !important",
opacity: "0.5",
},
{ tag: tags.monospace, color: "var(--cm-md-accent-color)" },
],
{
scope: markdownLanguage,
all: {
color: "var(--cm-md-color)",
},
}
)
export const pluto_syntax_colors_css = HighlightStyle.define([
{ tag: tags.comment, color: "var(--cm-color-comment)", fontStyle: "italic" },
{ tag: tags.variableName, color: "var(--cm-color-css-accent)", fontWeight: 700 },
{ tag: tags.propertyName, color: "var(--cm-color-css-accent)", fontWeight: 700 },
{ tag: tags.tagName, color: "var(--cm-color-css)", fontWeight: 700 },
//{ tag: tags.className, color: "var(--cm-css-why-doesnt-codemirror-highlight-all-the-text-aaa)" },
//{ tag: tags.constant(tags.className), color: "var(--cm-css-why-doesnt-codemirror-highlight-all-the-text-aaa)" },
{ tag: tags.definitionOperator, color: "var(--cm-color-css)" },
{ tag: tags.keyword, color: "var(--cm-color-css)" },
{ tag: tags.modifier, color: "var(--cm-color-css-accent)" },
{ tag: tags.literal, color: "var(--cm-color-css)" },
// { tag: tags.unit, color: "var(--cm-color-css-accent)" },
{ tag: tags.punctuation, opacity: 0.5 },
], {
scope: cssLanguage,
all: { color: "var(--cm-color-css)" },
})

export const pluto_syntax_colors_html = HighlightStyle.define([
{ tag: tags.comment, color: "var(--cm-color-comment)", fontStyle: "italic" },
{ tag: tags.content, color: "var(--cm-color-html)", fontWeight: 400 },
{ tag: tags.tagName, color: "var(--cm-color-html-accent)", fontWeight: 600 },
{ tag: tags.documentMeta, color: "var(--cm-color-html-accent)" },
{ tag: tags.attributeName, color: "var(--cm-color-html-accent)", fontWeight: 600 },
{ tag: tags.attributeValue, color: "var(--cm-color-html-accent)" },
{ tag: tags.angleBracket, color: "var(--cm-color-html-accent)", fontWeight: 600, opacity: 0.7 },
], {
all: { color: "var(--cm-color-html)" },
scope: htmlLanguage,
})

// https://github.com/lezer-parser/markdown/blob/d4de2b03180ced4610bad9cef0ad3a805c43b63a/src/markdown.ts#L1890
export const pluto_syntax_colors_markdown = HighlightStyle.define([
{ tag: tags.comment, color: "var(--cm-color-comment)", fontStyle: "italic" },
{ tag: tags.content, color: "var(--cm-color-md)" },
{ tag: tags.heading, color: "var(--cm-color-md)", fontWeight: 700 },
// TODO? tags.list
{ tag: tags.quote, color: "var(--cm-color-md)" },
{ tag: tags.emphasis, fontStyle: "italic" },
{ tag: tags.strong, fontWeight: "bolder" },
{ tag: tags.link, textDecoration: "underline" },
{ tag: tags.url, color: "var(--cm-color-md)", textDecoration: "none" },
{ tag: tags.monospace, color: "var(--cm-color-md-accent)" },

// Marks: `-` for lists, `#` for headers, etc.
{ tag: tags.processingInstruction, color: "var(--cm-color-md-accent) !important", opacity: "0.5" },
], {
all: { color: "var(--cm-color-md)" },
scope: markdownLanguage,
})

const getValue6 = (/** @type {EditorView} */ cm) => cm.state.doc.toString()
const setValue6 = (/** @type {EditorView} */ cm, value) =>
Expand Down Expand Up @@ -699,7 +571,7 @@ export const CellInput = ({

pkgBubblePlugin({ pluto_actions, notebook_id_ref }),
ScopeStateField,
syntaxHighlighting(pluto_syntax_colors),
syntaxHighlighting(pluto_syntax_colors_julia),
syntaxHighlighting(pluto_syntax_colors_html),
syntaxHighlighting(pluto_syntax_colors_markdown),
syntaxHighlighting(pluto_syntax_colors_javascript),
Expand Down
6 changes: 3 additions & 3 deletions frontend/components/CellOutput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ import register from "../imports/PreactCustomElement.js"

import { EditorState, EditorView, defaultHighlightStyle, syntaxHighlighting } from "../imports/CodemirrorPlutoSetup.js"

import { pluto_syntax_colors, ENABLE_CM_MIXED_PARSER } from "./CellInput.js"
import { pluto_syntax_colors_julia, ENABLE_CM_MIXED_PARSER } from "./CellInput.js"

import hljs from "../imports/highlightjs.js"
import { julia_mixed } from "./CellInput/mixedParsers.js"
import { julia_andrey } from "../imports/CodemirrorPlutoSetup.js"
import { SafePreviewSanitizeMessage } from "./SafePreviewUI.js"

const prettyAssignee = (assignee) =>
assignee && assignee.startsWith("const ") ? html`<span style="color: var(--cm-keyword-color)">const</span> ${assignee.slice(6)}` : assignee
assignee && assignee.startsWith("const ") ? html`<span style="color: var(--cm-color-keyword)">const</span> ${assignee.slice(6)}` : assignee

export class CellOutput extends Component {
constructor() {
Expand Down Expand Up @@ -676,7 +676,7 @@ export let highlight = (code_element, language) => {
.replace(/Main.workspace#(\d+)/, 'Main.var"workspace#$1"'),

extensions: [
syntaxHighlighting(pluto_syntax_colors),
syntaxHighlighting(pluto_syntax_colors_julia),
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
EditorState.tabSize.of(4),
// TODO Other languages possibly?
Expand Down
4 changes: 1 addition & 3 deletions frontend/components/ErrorMessage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import { cl } from "../common/ClassTable.js"
import { PlutoActionsContext } from "../common/PlutoContext.js"
import { EditorState, EditorView, julia_andrey, lineNumbers, syntaxHighlighting } from "../imports/CodemirrorPlutoSetup.js"
import { html, useContext, useEffect, useLayoutEffect, useRef, useState } from "../imports/Preact.js"
import { pluto_syntax_colors } from "./CellInput.js"
import { highlight } from "./CellOutput.js"
import { Editor } from "./Editor.js"
import { PkgTerminalView } from "./PkgTerminalView.js"
import _ from "../imports/lodash.js"

const extract_cell_id = (/** @type {string} */ file) => {
const sep_index = file.indexOf("#==#")
Expand Down
Loading
Loading