diff --git a/extension/dep/prism.css b/extension/dep/prism.css deleted file mode 100644 index ca50890..0000000 --- a/extension/dep/prism.css +++ /dev/null @@ -1,275 +0,0 @@ -/* PrismJS 1.23.0 -https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+abap+abnf+actionscript+ada+agda+al+antlr4+apacheconf+apex+apl+applescript+aql+arduino+arff+asciidoc+aspnet+asm6502+autohotkey+autoit+bash+basic+batch+bbcode+birb+bison+bnf+brainfuck+brightscript+bro+bsl+c+csharp+cpp+cfscript+chaiscript+cil+clojure+cmake+cobol+coffeescript+concurnas+csp+coq+crystal+css-extras+csv+cypher+d+dart+dataweave+dax+dhall+diff+django+dns-zone-file+docker+dot+ebnf+editorconfig+eiffel+ejs+elixir+elm+etlua+erb+erlang+excel-formula+fsharp+factor+false+firestore-security-rules+flow+fortran+ftl+gml+gcode+gdscript+gedcom+gherkin+git+glsl+go+graphql+groovy+haml+handlebars+haskell+haxe+hcl+hlsl+http+hpkp+hsts+ichigojam+icon+icu-message-format+idris+ignore+inform7+ini+io+j+java+javadoc+javadoclike+javastacktrace+jexl+jolie+jq+jsdoc+js-extras+json+json5+jsonp+jsstacktrace+js-templates+julia+keyman+kotlin+kumir+latex+latte+less+lilypond+liquid+lisp+livescript+llvm+log+lolcode+lua+makefile+markdown+markup-templating+matlab+mel+mizar+mongodb+monkey+moonscript+n1ql+n4js+nand2tetris-hdl+naniscript+nasm+neon+nevod+nginx+nim+nix+nsis+objectivec+ocaml+opencl+openqasm+oz+parigp+parser+pascal+pascaligo+psl+pcaxis+peoplecode+perl+php+phpdoc+php-extras+plsql+powerquery+powershell+processing+prolog+promql+properties+protobuf+pug+puppet+pure+purebasic+purescript+python+qsharp+q+qml+qore+r+racket+jsx+tsx+reason+regex+rego+renpy+rest+rip+roboconf+robotframework+ruby+rust+sas+sass+scss+scala+scheme+shell-session+smali+smalltalk+smarty+sml+solidity+solution-file+soy+sparql+splunk-spl+sqf+sql+squirrel+stan+iecst+stylus+swift+t4-templating+t4-cs+t4-vb+tap+tcl+tt2+textile+toml+turtle+twig+typescript+typoscript+unrealscript+uri+v+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+warpscript+wasm+wiki+xeora+xml-doc+xojo+xquery+yaml+yang+zig&plugins=autolinker+show-language+inline-color+normalize-whitespace+data-uri-highlight+toolbar+copy-to-clipboard+match-braces */ -/** - * prism.js default theme for JavaScript, CSS and HTML - * Based on dabblet (http://dabblet.com) - * @author Lea Verou - */ - -code[class*="language-"], -pre[class*="language-"] { - color: black; - background: none; - text-shadow: 0 1px white; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 1em; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, -code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - text-shadow: none; - background: #b3d4fc; -} - -pre[class*="language-"]::selection, pre[class*="language-"] ::selection, -code[class*="language-"]::selection, code[class*="language-"] ::selection { - text-shadow: none; - background: #b3d4fc; -} - -@media print { - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } -} - -/* Code blocks */ -pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; -} - -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: #f5f2f0; -} - -/* Inline code */ -:not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; - white-space: normal; -} - -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: slategray; -} - -.token.punctuation { - color: #999; -} - -.token.namespace { - opacity: .7; -} - -.token.property, -.token.tag, -.token.boolean, -.token.number, -.token.constant, -.token.symbol, -.token.deleted { - color: #905; -} - -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted { - color: #690; -} - -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string { - color: #9a6e3a; - /* This background color was intended by the author of this theme. */ - background: hsla(0, 0%, 100%, .5); -} - -.token.atrule, -.token.attr-value, -.token.keyword { - color: #07a; -} - -.token.function, -.token.class-name { - color: #DD4A68; -} - -.token.regex, -.token.important, -.token.variable { - color: #e90; -} - -.token.important, -.token.bold { - font-weight: bold; -} -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} - -.token a { - color: inherit; -} -div.code-toolbar { - position: relative; -} - -div.code-toolbar > .toolbar { - position: absolute; - top: .3em; - right: .2em; - transition: opacity 0.3s ease-in-out; - opacity: 0; -} - -div.code-toolbar:hover > .toolbar { - opacity: 1; -} - -/* Separate line b/c rules are thrown out if selector is invalid. - IE11 and old Edge versions don't support :focus-within. */ -div.code-toolbar:focus-within > .toolbar { - opacity: 1; -} - -div.code-toolbar > .toolbar .toolbar-item { - display: inline-block; -} - -div.code-toolbar > .toolbar a { - cursor: pointer; -} - -div.code-toolbar > .toolbar button { - background: none; - border: 0; - color: inherit; - font: inherit; - line-height: normal; - overflow: visible; - padding: 0; - -webkit-user-select: none; /* for button */ - -moz-user-select: none; - -ms-user-select: none; -} - -div.code-toolbar > .toolbar a, -div.code-toolbar > .toolbar button, -div.code-toolbar > .toolbar span { - color: #bbb; - font-size: .8em; - padding: 0 .5em; - background: #f5f2f0; - background: rgba(224, 224, 224, 0.2); - box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); - border-radius: .5em; -} - -div.code-toolbar > .toolbar a:hover, -div.code-toolbar > .toolbar a:focus, -div.code-toolbar > .toolbar button:hover, -div.code-toolbar > .toolbar button:focus, -div.code-toolbar > .toolbar span:hover, -div.code-toolbar > .toolbar span:focus { - color: inherit; - text-decoration: none; -} - -span.inline-color-wrapper { - /* - * The background image is the following SVG inline in base 64: - * - * - * - * - * - * - * SVG-inlining explained: - * https://stackoverflow.com/a/21626701/7595472 - */ - background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4="); - /* This is to prevent visual glitches where one pixel from the repeating pattern could be seen. */ - background-position: center; - background-size: 110%; - - display: inline-block; - height: 1.333ch; - width: 1.333ch; - margin: 0 .333ch; - box-sizing: border-box; - border: 1px solid white; - outline: 1px solid rgba(0,0,0,.5); - overflow: hidden; -} - -span.inline-color { - display: block; - /* To prevent visual glitches again */ - height: 120%; - width: 120%; -} - -.token.punctuation.brace-hover, -.token.punctuation.brace-selected { - outline: solid 1px; -} - -.rainbow-braces .token.punctuation.brace-level-1, -.rainbow-braces .token.punctuation.brace-level-5, -.rainbow-braces .token.punctuation.brace-level-9 { - color: #E50; - opacity: 1; -} -.rainbow-braces .token.punctuation.brace-level-2, -.rainbow-braces .token.punctuation.brace-level-6, -.rainbow-braces .token.punctuation.brace-level-10 { - color: #0B3; - opacity: 1; -} -.rainbow-braces .token.punctuation.brace-level-3, -.rainbow-braces .token.punctuation.brace-level-7, -.rainbow-braces .token.punctuation.brace-level-11 { - color: #26F; - opacity: 1; -} -.rainbow-braces .token.punctuation.brace-level-4, -.rainbow-braces .token.punctuation.brace-level-8, -.rainbow-braces .token.punctuation.brace-level-12 { - color: #E0E; - opacity: 1; -} - diff --git a/extension/helpers.js b/extension/helpers.js index b30075c..a2c2133 100644 --- a/extension/helpers.js +++ b/extension/helpers.js @@ -123,11 +123,14 @@ export const fmt = {}; import './dep/prism.js'; fmt.Prism = Prism; fmt.Prism.manual = true; -fmt.Prism.hooks.add('complete', (event) => { - if (!fmt.Prism._stylesheetLoaded) { - web.loadStyleset('./dep/prism.css'); - fmt.Prism._stylesheetLoaded = true; - } +fmt.Prism.hooks.add('complete', async (event) => { + event.element.parentElement.parentElement + .querySelector('.copy-to-clipboard-button') + .prepend(web.createElement(await fs.getText('icons/fontawesome/copy.svg'))); + // if (!fmt.Prism._stylesheetLoaded) { + // web.loadStyleset('./dep/prism.css'); + // fmt.Prism._stylesheetLoaded = true; + // } }); // delete globalThis['Prism']; @@ -135,14 +138,19 @@ import './dep/markdown-it.min.js'; fmt.md = new markdownit({ linkify: true, highlight: (str, lang) => - web.html`${web.escapeHtml( - str - )}`, + web.html`${web.escapeHtml(str)}`, }); -fmt.md.renderer.rules.code_block = (tokens, idx, options, env, slf) => - web.html`${web.escapeHtml( +fmt.md.renderer.rules.code_block = (tokens, idx, options, env, slf) => { + const attrIdx = tokens[idx].attrIndex('class'); + if (attrIdx === -1) { + tokens[idx].attrPush(['class', 'match-braces']); + } else tokens[idx].attrs[attrIdx][1] = 'match-braces'; + return web.html`${web.escapeHtml( tokens[idx].content )}\n`; +}; fmt.md.core.ruler.push( 'heading_ids', function (md, state) { @@ -152,12 +160,10 @@ fmt.md.core.ruler.push( const text = md.renderer.render(state.tokens[i + 1].children, md.options), slug = fmt.slugger(text, slugs); slugs.add(slug); - const idx = token.attrIndex('id'); - if (idx === -1) { + const attrIdx = token.attrIndex('id'); + if (attrIdx === -1) { token.attrPush(['id', slug]); - } else { - token.attrs[idx][1] = slug; - } + } else token.attrs[attrIdx][1] = slug; } }); }.bind(null, fmt.md) diff --git a/extension/icons/fontawesome/copy.svg b/extension/icons/fontawesome/copy.svg new file mode 100644 index 0000000..bc9ba30 --- /dev/null +++ b/extension/icons/fontawesome/copy.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/markdown.css b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/markdown.css index 122c3e4..eaac224 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/markdown.css +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/markdown.css @@ -4,6 +4,10 @@ * (https://notion-enhancer.github.io/) under the MIT license */ +::selection { + background: var(--theme--selected); +} + .markdown table { border-spacing: 0; border: 1px solid var(--theme--divider); @@ -46,14 +50,6 @@ .markdown hr { border: 0.5px solid var(--theme--divider); } -.markdown :not(pre) > code { - background: var(--theme--code_inline); - color: var(--theme--code_inline-text); - padding: 0.2em 0.4em; - border-radius: 3px; - font-family: var(--theme--font_code) !important; - font-size: var(--theme_dark--font_code-size) !important; -} .markdown a { opacity: 0.7; text-decoration: none; @@ -62,3 +58,111 @@ .markdown a:hover { opacity: 1; } + +.markdown :not(pre) > code { + padding: 0.2em 0.4em; + border-radius: 3px; + background: var(--theme--code_inline); + color: var(--theme--code_inline-text); +} +.markdown pre { + padding: 2em 1.25em; + border-radius: 3px; + tab-size: 2; + white-space: pre; + overflow-x: auto; + background: var(--theme--code); + color: var(--theme--code_plain); +} +.markdown pre, +.markdown code { + font-family: var(--theme--font_code); + font-size: var(--theme--font_code-size); + text-align: left; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + hyphens: none; + line-height: 1.5; +} + +/* + * https://prismjs.com/plugins/inline-color/ + */ +span.inline-color-wrapper { + /* + * base64 svg (https://stackoverflow.com/a/21626701/7595472 - prevents visual glitches) + * + * + * + * + */ + background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4='); + background-position: center; + background-size: 110%; + display: inline-block; + height: 1.333ch; + width: 1.333ch; + margin: 0 0.333ch; + box-sizing: border-box; + border: 0.5px solid var(--theme--code_plain); + overflow: hidden; +} +span.inline-color { + display: block; + height: 120%; + width: 120%; +} + +/* + * https://prismjs.com/plugins/match-braces/ + */ +.token.punctuation.brace-hover, +.token.punctuation.brace-selected { + outline: solid 1px; +} + +/* + * https://prismjs.com/plugins/show-language/ + * https://prismjs.com/plugins/copy-to-clipboard/ + */ +.code-toolbar { + position: relative; +} +.code-toolbar .toolbar-item { + position: absolute; + top: 0.35rem; + display: inline-block; + transition: opacity 200ms ease-in-out; + opacity: 0; +} +.code-toolbar .toolbar-item:first-child { + left: 0.8rem; +} +.code-toolbar .toolbar-item:last-child { + right: 0.8rem; +} +.code-toolbar:hover .toolbar-item, +.code-toolbar:focus-within .toolbar-item { + opacity: 1; +} +.code-toolbar .toolbar-item > * { + padding: 0.25rem 0.35rem; + color: var(--theme--text_property); + font-size: var(--theme--font_ui_small-size); + font-family: inherit; +} +.code-toolbar .toolbar-item .copy-to-clipboard-button { + border: none; + background: none; + cursor: pointer; + border-radius: 3px; + transition: background 100ms ease-in-out; +} +.code-toolbar .toolbar-item .copy-to-clipboard-button:hover { + background: var(--theme--button-hover); +} +.code-toolbar .toolbar-item .copy-to-clipboard-button svg { + width: 1em; + margin-right: 0.5em; +} diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css index 3edba84..54bc89e 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css @@ -9,8 +9,6 @@ word-break: break-word; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; - font-family: var(--theme--font_sans); - color: var(--theme--text); } html { @@ -24,6 +22,11 @@ html[class] { body { padding: 1.5rem; background: var(--theme--sidebar); + color: var(--theme--text); + font-family: var(--theme--font_sans); +} +body a { + color: inherit; } header { @@ -61,6 +64,11 @@ img[data-target='notion'] { [data-container='mod'] > .documentation--buttons { grid-column: span 2; } + [data-container='mod'] .library--card, + .documentation--body { + max-height: calc(100vh - 10rem); + overflow-y: auto; + } } @media (min-width: 850px) { [data-container] { @@ -72,11 +80,6 @@ img[data-target='notion'] { [data-container='mod'] > .documentation--body { grid-column: span 2; } - [data-container='mod'] .library--card, - .documentation--body { - max-height: calc(100vh - 10rem); - overflow-y: auto; - } body { overflow: hidden; } @@ -217,7 +220,8 @@ img[data-target='notion'] { appearance: none; font-size: var(--theme--font_ui-size); } -label > p:not([class]), +label p:not([class]), +label p > span:not([class]), label > span:not([class]) { font-size: 1rem; } @@ -336,8 +340,7 @@ label > span:not([class]) { margin: 0; } .library--title h2 > span { - font-size: var(--theme_light--font_heading2-size); - padding-bottom: 0.25rem; + font-size: var(--theme--font_heading2-size); } .library--card > div { diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js index 8ba78d4..2b5f923 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js @@ -211,14 +211,20 @@ const views = { i++; } while (anchor.nodeName !== 'A'); if (location.search !== anchor.getAttribute('href')) { - window.history.pushState({ search: anchor.href }, '', anchor.href); + window.history.pushState( + { search: anchor.getAttribute('href'), hash: '' }, + '', + anchor.href + ); this._load(); } }, _navigator(event) { event.preventDefault(); - document.getElementById(event.target.getAttribute('href').slice(1)).scrollIntoView(true); + const hash = event.target.getAttribute('href').slice(1); + document.getElementById(hash).scrollIntoView(true); document.documentElement.scrollTop = 0; + history.replaceState({ search: location.search, hash }, null, `#${hash}`); }, _reset() { document @@ -261,10 +267,18 @@ const views = { await this.library(); break; default: - window.history.replaceState({}, '', '?view=library'); + window.history.replaceState( + { search: '?view=library', hash: '' }, + null, + '?view=library' + ); return this._load(); } + setTimeout(() => { + document.getElementById(location.hash.slice(1))?.scrollIntoView(true); + document.documentElement.scrollTop = 0; + }, 50); document .querySelectorAll('img') .forEach((img) => (img.onerror = (ev) => ev.target.remove())); diff --git a/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/client.css b/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/client.css index 8001d15..5f4dc37 100644 --- a/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/client.css +++ b/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/client.css @@ -1239,94 +1239,6 @@ iframe[style*='background-color'], .notion-code-block > div { color: var(--theme--code_plain) !important; } -.notion-code-block .token.function { - color: var(--theme--code_function) !important; -} -.notion-code-block .token.parameter { - color: var(--theme--code_parameter) !important; -} -.notion-code-block .token.keyword { - color: var(--theme--code_keyword) !important; -} -.notion-code-block .token.constant { - color: var(--theme--code_constant) !important; -} -.notion-code-block .token.tag { - color: var(--theme--code_tag) !important; -} -.notion-code-block .token.operator { - color: var(--theme--code_operator) !important; - background: transparent !important; -} -.notion-code-block .token.important { - color: var(--theme--code_important) !important; -} -.notion-code-block .token.regex { - color: var(--theme--code_regex) !important; -} -.notion-code-block .token.property { - color: var(--theme--code_property) !important; -} -.notion-code-block .token.builtin { - color: var(--theme--code_builtin) !important; -} -.notion-code-block .token.class-name { - color: var(--theme--code_class-name) !important; -} -.notion-code-block .token.attr-name { - color: var(--theme--code_attr-name) !important; -} -.notion-code-block .token.attr-value { - color: var(--theme--code_attr-value) !important; -} -.notion-code-block .token.selector { - color: var(--theme--code_selector) !important; -} -.notion-code-block .token.id { - color: var(--theme--code_id) !important; -} -.notion-code-block .token.class { - color: var(--theme--code_class) !important; -} -.notion-code-block .token.pseudo-element { - color: var(--theme--code_pseudo-element) !important; -} -.notion-code-block .token.pseudo-class { - color: var(--theme--code_pseudo-class) !important; -} -.notion-code-block .token.attribute { - color: var(--theme--code_attribute) !important; -} -.notion-code-block .token.value { - color: var(--theme--code_value) !important; -} -.notion-code-block .token.unit { - color: var(--theme--code_unit) !important; -} -.notion-code-block .token.comment { - color: var(--theme--code_comment) !important; -} -.notion-code-block .token.punctuation { - color: var(--theme--code_punctuation) !important; -} -.notion-code-block .token.annotation { - color: var(--theme--code_annotation) !important; -} -.notion-code-block .token.decorator { - color: var(--theme--code_decorator) !important; -} -.notion-code-block .token.doctype { - color: var(--theme--code_doctype) !important; -} -.notion-code-block .token.number { - color: var(--theme--code_number) !important; -} -.notion-code-block .token.string { - color: var(--theme--code_string) !important; -} -.notion-code-block .token.boolean { - color: var(--theme--code_boolean) !important; -} /** colours **/ diff --git a/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/mod.json b/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/mod.json index ae748f7..f9e0c71 100644 --- a/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/mod.json +++ b/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/mod.json @@ -14,7 +14,7 @@ ], "css": { "frame": ["variables.css"], - "client": ["variables.css", "client.css"], - "menu": ["variables.css"] + "client": ["variables.css", "client.css", "prism.css"], + "menu": ["variables.css", "prism.css"] } } diff --git a/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/prism.css b/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/prism.css new file mode 100644 index 0000000..6d9ae4f --- /dev/null +++ b/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/prism.css @@ -0,0 +1,156 @@ +/* + * notion-enhancer core: theming + * (c) 2021 dragonwocky (https://dragonwocky.me/) + * (https://notion-enhancer.github.io/) under the MIT license + */ + +.token.property { + color: var(--theme--code_property) !important; +} +.token.tag { + color: var(--theme--code_tag) !important; +} +.token.boolean { + color: var(--theme--code_boolean) !important; +} +.token.number { + color: var(--theme--code_number) !important; +} +.token.constant { + color: var(--theme--code_constant) !important; +} +.token.symbol { + color: var(--theme--code_symbol) !important; +} +.token.deleted { + color: var(--theme--code_deleted) !important; +} +.token.selector { + color: var(--theme--code_selector) !important; +} +.token.attr-name { + color: var(--theme--code_attr-name) !important; +} +.token.string { + color: var(--theme--code_string) !important; +} +.token.char { + color: var(--theme--code_char) !important; +} +.token.builtin { + color: var(--theme--code_builtin) !important; +} +.token.inserted { + color: var(--theme--code_inserted) !important; +} +.token.operator { + color: var(--theme--code_operator) !important; +} +.token.entity { + color: var(--theme--code_entity) !important; +} +.token.url { + color: var(--theme--code_url) !important; +} +.token.variable { + color: var(--theme--code_variable) !important; +} +.token.comment { + color: var(--theme--code_comment) !important; +} +.token.cdata { + color: var(--theme--code_cdata) !important; +} +.token.prolog { + color: var(--theme--code_prolog) !important; +} +.token.doctype { + color: var(--theme--code_doctype) !important; +} +.token.atrule { + color: var(--theme--code_atrule) !important; +} +.token.attr-value { + color: var(--theme--code_attr-value) !important; +} +.token.keyword { + color: var(--theme--code_keyword) !important; +} +.token.regex { + color: var(--theme--code_regex) !important; +} +.token.important { + color: var(--theme--code_important) !important; +} +.token.function { + color: var(--theme--code_function) !important; +} +.token.class-name { + color: var(--theme--code_class-name) !important; +} +.token.parameter { + color: var(--theme--code_parameter) !important; +} +.token.decorator { + color: var(--theme--code_decorator) !important; +} +.token.id { + color: var(--theme--code_id) !important; +} +.token.class { + color: var(--theme--code_class) !important; +} +.token.pseudo-element { + color: var(--theme--code_pseudo-element) !important; +} +.token.pseudo-class { + color: var(--theme--code_pseudo-class) !important; +} +.token.attribute { + color: var(--theme--code_attribute) !important; +} +.token.value { + color: var(--theme--code_value) !important; +} +.token.unit { + color: var(--theme--code_unit) !important; +} +.token.punctuation { + color: var(--theme--code_punctuation) !important; + opacity: 0.7 !important; +} +.token.annotation { + color: var(--theme--code_annotation) !important; +} + +.token.operator { + background: transparent !important; +} +.token.namespace { + opacity: 0.7 !important; +} +.token.important, +.token.bold { + font-weight: bold !important; +} +.token.italic { + font-style: italic !important; +} +.token.entity { + cursor: help !important; +} +.token a { + color: inherit !important; +} +.token.punctuation.brace-hover, +.token.punctuation.brace-selected { + outline: solid 1px !important; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + background: none !important; +} diff --git a/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/variables.css b/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/variables.css index e943da0..7333688 100644 --- a/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/variables.css +++ b/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/variables.css @@ -159,20 +159,36 @@ --theme_dark--code: rgb(63, 68, 71); --theme_dark--code_plain: var(--theme_dark--text); - --theme_dark--code_function: var(--theme_dark--code_plain); - --theme_dark--code_parameter: var(--theme_dark--code_plain); - --theme_dark--code_keyword: hsl(350, 40%, 70%); - --theme_dark--code_constant: hsl(350, 40%, 70%); - --theme_dark--code_tag: hsl(350, 40%, 70%); - --theme_dark--code_operator: hsl(40, 90%, 60%); - --theme_dark--code_important: #e90; - --theme_dark--code_regex: #e90; --theme_dark--code_property: hsl(350, 40%, 70%); - --theme_dark--code_builtin: hsl(75, 70%, 60%); - --theme_dark--code_class-name: var(--theme_dark--code_plain); - --theme_dark--code_attr-name: hsl(75, 70%, 60%); - --theme_dark--code_attr-value: hsl(350, 40%, 70%); + --theme_dark--code_tag: var(--theme_dark--code_property); + --theme_dark--code_boolean: var(--theme_dark--code_property); + --theme_dark--code_number: var(--theme_dark--code_property); + --theme_dark--code_constant: var(--theme_dark--code_property); + --theme_dark--code_symbol: var(--theme_dark--code_property); + --theme_dark--code_deleted: red; --theme_dark--code_selector: hsl(75, 70%, 60%); + --theme_dark--code_attr-name: var(--theme_dark--code_selector); + --theme_dark--code_string: var(--theme_dark--code_selector); + --theme_dark--code_char: var(--theme_dark--code_selector); + --theme_dark--code_builtin: var(--theme_dark--code_selector); + --theme_dark--code_inserted: var(--theme_dark--code_selector); + --theme_dark--code_operator: hsl(40, 90%, 60%); + --theme_dark--code_entity: var(--theme_dark--code_operator); + --theme_dark--code_url: var(--theme_dark--code_operator); + --theme_dark--code_variable: var(--theme_dark--code_operator); + --theme_dark--code_comment: hsl(30, 20%, 50%); + --theme_dark--code_cdata: var(--theme_dark--code_comment); + --theme_dark--code_prolog: var(--theme_dark--code_comment); + --theme_dark--code_doctype: var(--theme_dark--code_comment); + --theme_dark--code_atrule: hsl(350, 40%, 70%); + --theme_dark--code_attr-value: var(--theme_dark--code_atrule); + --theme_dark--code_keyword: var(--theme_dark--code_atrule); + --theme_dark--code_regex: #e90; + --theme_dark--code_important: var(--theme_dark--code_regex); + --theme_dark--code_function: var(--theme_dark--code_plain); + --theme_dark--code_class-name: var(--theme_dark--code_function); + --theme_dark--code_parameter: var(--theme_dark--code_plain); + --theme_dark--code_decorator: var(--theme_dark--code_plain); --theme_dark--code_id: var(--theme_dark--code_plain); --theme_dark--code_class: var(--theme_dark--code_plain); --theme_dark--code_pseudo-element: var(--theme_dark--code_plain); @@ -180,14 +196,8 @@ --theme_dark--code_attribute: var(--theme_dark--code_plain); --theme_dark--code_value: var(--theme_dark--code_plain); --theme_dark--code_unit: var(--theme_dark--code_plain); - --theme_dark--code_comment: hsl(30, 20%, 50%); --theme_dark--code_punctuation: var(--theme_dark--code_plain); - --theme_dark--code_annotation: var(--theme_dark--code_punctuation); - --theme_dark--code_decorator: var(--theme_dark--code_punctuation); - --theme_dark--code_doctype: hsl(30, 20%, 50%); - --theme_dark--code_number: hsl(350, 40%, 70%); - --theme_dark--code_string: hsl(75, 70%, 60%); - --theme_dark--code_boolean: hsl(350, 40%, 70%); + --theme_dark--code_annotation: var(--theme_dark--code_plain); --theme_dark--text_grey: rgba(151, 154, 155, 0.95); --theme_dark--text_brown: rgb(147, 114, 100); @@ -434,20 +444,36 @@ --theme_light--code: rgb(247, 246, 243); --theme_light--code_plain: var(--theme_light--text); - --theme_light--code_function: #dd4a68; - --theme_light--code_parameter: var(--theme_light--code_plain); - --theme_light--code_keyword: #07a; - --theme_light--code_constant: #905; - --theme_light--code_tag: #905; - --theme_light--code_operator: #9a6e3a; - --theme_light--code_important: #e90; - --theme_light--code_regex: #e90; --theme_light--code_property: #905; - --theme_light--code_builtin: #690; - --theme_light--code_class-name: #dd4a68; - --theme_light--code_attr-name: #690; - --theme_light--code_attr-value: #07a; + --theme_light--code_tag: var(--theme_light--code_property); + --theme_light--code_boolean: var(--theme_light--code_property); + --theme_light--code_number: var(--theme_light--code_property); + --theme_light--code_constant: var(--theme_light--code_property); + --theme_light--code_symbol: var(--theme_light--code_property); + --theme_light--code_deleted: var(--theme_light--code_property); --theme_light--code_selector: #690; + --theme_light--code_attr-name: var(--theme_light--code_selector); + --theme_light--code_string: var(--theme_light--code_selector); + --theme_light--code_char: var(--theme_light--code_selector); + --theme_light--code_builtin: var(--theme_light--code_selector); + --theme_light--code_inserted: var(--theme_light--code_selector); + --theme_light--code_operator: #9a6e3a; + --theme_light--code_entity: var(--theme_light--code_operator); + --theme_light--code_url: var(--theme_light--code_operator); + --theme_light--code_variable: var(--theme_light--code_regex); + --theme_light--code_comment: slategray; + --theme_light--code_cdata: var(--theme_light--code_comment); + --theme_light--code_prolog: var(--theme_light--code_comment); + --theme_light--code_doctype: var(--theme_light--code_comment); + --theme_light--code_atrule: #07a; + --theme_light--code_attr-value: var(--theme_light--code_atrule); + --theme_light--code_keyword: var(--theme_light--code_atrule); + --theme_light--code_regex: #e90; + --theme_light--code_important: var(--theme_light--code_regex); + --theme_light--code_function: #dd4a68; + --theme_light--code_class-name: var(--theme_light--code_function); + --theme_light--code_parameter: var(--theme_light--code_plain); + --theme_light--code_decorator: var(--theme_light--code_plain); --theme_light--code_id: var(--theme_light--code_plain); --theme_light--code_class: var(--theme_light--code_plain); --theme_light--code_pseudo-element: var(--theme_light--code_plain); @@ -455,14 +481,8 @@ --theme_light--code_attribute: var(--theme_light--code_plain); --theme_light--code_value: var(--theme_light--code_plain); --theme_light--code_unit: var(--theme_light--code_plain); - --theme_light--code_comment: #708090; --theme_light--code_punctuation: #999; - --theme_light--code_annotation: var(--theme_light--code_punctuation); - --theme_light--code_decorator: var(--theme_light--code_punctuation); - --theme_light--code_doctype: #708090; - --theme_light--code_number: #905; - --theme_light--code_string: #690; - --theme_light--code_boolean: #905; + --theme_light--code_annotation: var(--theme_light--code_plain); --theme_light--text_grey: rgb(155, 154, 151); --theme_light--text_brown: rgb(100, 71, 58); @@ -701,20 +721,36 @@ --theme--code: var(--theme_dark--code); --theme--code_plain: var(--theme_dark--code_plain); - --theme--code_function: var(--theme_dark--code_function); - --theme--code_parameter: var(--theme_dark--code_parameter); - --theme--code_keyword: var(--theme_dark--code_keyword); - --theme--code_constant: var(--theme_dark--code_constant); - --theme--code_tag: var(--theme_dark--code_tag); - --theme--code_operator: var(--theme_dark--code_operator); - --theme--code_important: var(--theme_dark--code_important); - --theme--code_regex: var(--theme_dark--code_regex); --theme--code_property: var(--theme_dark--code_property); - --theme--code_builtin: var(--theme_dark--code_builtin); - --theme--code_class-name: var(--theme_dark--code_class-name); - --theme--code_attr-name: var(--theme_dark--code_attr-name); - --theme--code_attr-value: var(--theme_dark--code_attr-value); + --theme--code_tag: var(--theme_dark--code_tag); + --theme--code_boolean: var(--theme_dark--code_boolean); + --theme--code_number: var(--theme_dark--code_number); + --theme--code_constant: var(--theme_dark--code_constant); + --theme--code_symbol: var(--theme_dark--code_symbol); + --theme--code_deleted: var(--theme_dark--code_deleted); --theme--code_selector: var(--theme_dark--code_selector); + --theme--code_attr-name: var(--theme_dark--code_attr-name); + --theme--code_string: var(--theme_dark--code_string); + --theme--code_char: var(--theme_dark--code_char); + --theme--code_builtin: var(--theme_dark--code_builtin); + --theme--code_inserted: var(--theme_dark--code_inserted); + --theme--code_operator: var(--theme_dark--code_operator); + --theme--code_entity: var(--theme_dark--code_entity); + --theme--code_url: var(--theme_dark--code_url); + --theme--code_variable: var(--theme_dark--code_variable); + --theme--code_comment: var(--theme_dark--code_comment); + --theme--code_cdata: var(--theme_dark--code_cdata); + --theme--code_prolog: var(--theme_dark--code_prolog); + --theme--code_doctype: var(--theme_dark--code_doctype); + --theme--code_atrule: var(--theme_dark--code_atrule); + --theme--code_attr-value: var(--theme_dark--code_attr-value); + --theme--code_keyword: var(--theme_dark--code_keyword); + --theme--code_regex: var(--theme_dark--code_regex); + --theme--code_important: var(--theme_dark--code_important); + --theme--code_function: var(--theme_dark--code_function); + --theme--code_class-name: var(--theme_dark--code_class-name); + --theme--code_parameter: var(--theme_dark--code_parameter); + --theme--code_decorator: var(--theme_dark--code_decorator); --theme--code_id: var(--theme_dark--code_id); --theme--code_class: var(--theme_dark--code_class); --theme--code_pseudo-element: var(--theme_dark--code_pseudo-element); @@ -722,14 +758,8 @@ --theme--code_attribute: var(--theme_dark--code_attribute); --theme--code_value: var(--theme_dark--code_value); --theme--code_unit: var(--theme_dark--code_unit); - --theme--code_comment: var(--theme_dark--code_comment); --theme--code_punctuation: var(--theme_dark--code_punctuation); --theme--code_annotation: var(--theme_dark--code_annotation); - --theme--code_decorator: var(--theme_dark--code_decorator); - --theme--code_doctype: var(--theme_dark--code_doctype); - --theme--code_number: var(--theme_dark--code_number); - --theme--code_string: var(--theme_dark--code_string); - --theme--code_boolean: var(--theme_dark--code_boolean); --theme--text_grey: var(--theme_dark--text_grey); --theme--text_brown: var(--theme_dark--text_brown); @@ -968,20 +998,36 @@ --theme--code: var(--theme_light--code); --theme--code_plain: var(--theme_light--code_plain); - --theme--code_function: var(--theme_light--code_function); - --theme--code_parameter: var(--theme_light--code_parameter); - --theme--code_keyword: var(--theme_light--code_keyword); - --theme--code_constant: var(--theme_light--code_constant); - --theme--code_tag: var(--theme_light--code_tag); - --theme--code_operator: var(--theme_light--code_operator); - --theme--code_important: var(--theme_light--code_important); - --theme--code_regex: var(--theme_light--code_regex); --theme--code_property: var(--theme_light--code_property); - --theme--code_builtin: var(--theme_light--code_builtin); - --theme--code_class-name: var(--theme_light--code_class-name); - --theme--code_attr-name: var(--theme_light--code_attr-name); - --theme--code_attr-value: var(--theme_light--code_attr-value); + --theme--code_tag: var(--theme_light--code_tag); + --theme--code_boolean: var(--theme_light--code_boolean); + --theme--code_number: var(--theme_light--code_number); + --theme--code_constant: var(--theme_light--code_constant); + --theme--code_symbol: var(--theme_light--code_symbol); + --theme--code_deleted: var(--theme_light--code_deleted); --theme--code_selector: var(--theme_light--code_selector); + --theme--code_attr-name: var(--theme_light--code_attr-name); + --theme--code_string: var(--theme_light--code_string); + --theme--code_char: var(--theme_light--code_char); + --theme--code_builtin: var(--theme_light--code_builtin); + --theme--code_inserted: var(--theme_light--code_inserted); + --theme--code_operator: var(--theme_light--code_operator); + --theme--code_entity: var(--theme_light--code_entity); + --theme--code_url: var(--theme_light--code_url); + --theme--code_variable: var(--theme_light--code_variable); + --theme--code_comment: var(--theme_light--code_comment); + --theme--code_cdata: var(--theme_light--code_cdata); + --theme--code_prolog: var(--theme_light--code_prolog); + --theme--code_doctype: var(--theme_light--code_doctype); + --theme--code_atrule: var(--theme_light--code_atrule); + --theme--code_attr-value: var(--theme_light--code_attr-value); + --theme--code_keyword: var(--theme_light--code_keyword); + --theme--code_regex: var(--theme_light--code_regex); + --theme--code_important: var(--theme_light--code_important); + --theme--code_function: var(--theme_light--code_function); + --theme--code_class-name: var(--theme_light--code_class-name); + --theme--code_parameter: var(--theme_light--code_parameter); + --theme--code_decorator: var(--theme_light--code_decorator); --theme--code_id: var(--theme_light--code_id); --theme--code_class: var(--theme_light--code_class); --theme--code_pseudo-element: var(--theme_light--code_pseudo-element); @@ -989,14 +1035,8 @@ --theme--code_attribute: var(--theme_light--code_attribute); --theme--code_value: var(--theme_light--code_value); --theme--code_unit: var(--theme_light--code_unit); - --theme--code_comment: var(--theme_light--code_comment); --theme--code_punctuation: var(--theme_light--code_punctuation); --theme--code_annotation: var(--theme_light--code_annotation); - --theme--code_decorator: var(--theme_light--code_decorator); - --theme--code_doctype: var(--theme_light--code_doctype); - --theme--code_number: var(--theme_light--code_number); - --theme--code_string: var(--theme_light--code_string); - --theme--code_boolean: var(--theme_light--code_boolean); --theme--text_grey: var(--theme_light--text_grey); --theme--text_brown: var(--theme_light--text_brown);