diff --git a/themes/catppuccin-latte-peach/v1/code-block.css b/themes/catppuccin-latte-peach/v1/code-block.css new file mode 100644 index 0000000..e0a67f8 --- /dev/null +++ b/themes/catppuccin-latte-peach/v1/code-block.css @@ -0,0 +1,241 @@ +/** + * Catppuccin Mocha + * If this is an adaptation of an existing theme, credit the creator and/or leave a link to it! + * By @revsuine + * Licenced under the GPL v3 + */ + +/** + * How to use this template: + * + * This file contains all the boilerplate necessary for a Prism theme along with template rules for you to fill in. + * + * All properties with the value `unset` are for you to change. + * You should fill in all `color` and `background` properties. + * If you don't need an `unset` property (e.g. `border-radius`), then feel free to remove it. + * You are also free to add more properties that aren't stated, such as `text-shadow`. + * If you wish to style the plugins, you may grab their selectors from their respective .css files in the template folder. + * + * Your finished theme should have all `unset` properties either filled in or removed. + */ + +/* COLOURS: */ +/* @thecodrr on discord suggested css vars should work under this selector instead of :root */ +pre[class*="language-"] { + --rosewater: #dc8a78; + --flamingo: #dd7878; + --pink: #ea76cb; + --mauve: #8839ef; + --red: #d20f39; + --redrgba: 210, 15, 57; + --maroon: #e64553; + --peach: #fe640b; + --yellow: #df8e1d; + --green: #40a02b; + --greenrgba: 64, 160, 43; + --teal: #179299; + --sky: #04a5e5; + --sapphire: #209fb5; + --blue: #1e66f5; + --lavender: #7287fd; + --text: #4c4f69; + --subtext1: #5c5f77; + --subtext0: #6c6f85; + --overlay2: #7c7f93; + --overlay1: #8c8fa1; + --overlay0: #9ca0b0; + --surface2: #acb0be; + --surface2rgba: 172, 176, 190; + --surface1: #bcc0cc; + --surface0: #ccd0da; + --base: #eff1f5; + --mantle: #e6e9ef; + --crust: #dce0e8; +} + +/* Set the main properties of the code, code blocks, and inline code */ +code[class*="language-"], +pre[class*="language-"] { + background: var(--crust); + color: var(--text); + font-family: "MonaspiceNe Nerd Font", "MonaspiceNe Nerd Font Mono", "JetBrainsMono Nerd Font", monospace; /* this is the default */ + /* The following properties are standard, please leave them as they are */ + font-size: 1em; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + /* The default is 4, but you could change it if you really, really want to */ + -moz-tab-size: 2; + -o-tab-size: 2; + tab-size: 2; + /* The following properties are also standard */ + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +/* Optional: What the code looks like when highlighted */ +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection, +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection, +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection { + background: rgba(var(--surface2rgba), 0.6); +} + +/* Properties specific to code blocks */ +pre[class*="language-"] { + padding: 1em; /* this is standard */ + margin: 0.5em 0; /* this is the default */ + overflow: auto; /* this is standard */ + border-radius: unset; +} + +/* Properties specific to inline code */ +:not(pre) > code[class*="language-"] { + padding: 0.1em; /* this is the default */ + border-radius: unset; + white-space: normal; /* this is standard */ +} + +/** + * These are the minimum tokens you must style, you can rearrange them and/or style more tokens as you want + * The concepts behind these standard tokens, as well as some examples, can be found here: https://prismjs.com/tokens.html + */ +.token.comment { + color: var(--overlay0); +} + +.token.prolog { + color: var(--overlay0); +} + +.token.cdata { + color: var(--overlay0); +} + +.token.doctype { + color: var(--overlay0); +} + +.token.punctuation { + color: var(--overlay2); +} + +.token.entity { + color: unset; +} + +.token.attr-name { + color: var(--maroon); +} + +.token.class-name { + color: var(--yellow); +} + +.token.boolean { + color: var(--mauve); +} + +.token.constant, +.token.number { + color: var(--peach); +} + +.token.atrule { + color: var(--yellow); +} + +.token.keyword, +.token.tag { + color: var(--mauve); +} + +.token.property { + color: var(--maroon); +} + +.token.symbol { + color: var(--pink); +} + +.token.deleted { + background: rgba(var(--redrgba), 0.2); +} + +.token.important { + color: var(--yellow); +} + +.token.selector { + color: var(--blue); +} + +.token.string, +.token.char { + color: var(--green); +} + +.token.builtin { + color: var(--red); +} + +.token.inserted { + background: rgba(var(--greenrgba), 0.2); +} + +.token.regex { + color: var(--pink); +} + +.token.attr-value { + color: var(--green); +} + +.token.variable { + color: var(--pink); +} + +.token.operator { + color: var(--sky); +} + +.token.function { + color: var(--blue); + font-style: italic; +} + +.token.url { + color: var(--blue); +} + +/* The following rules are pretty similar across themes, but feel free to adjust them */ +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + +.token.namespace { + opacity: 0.7; +} + +/* LANGUAGE-SPECIFIC OVERRIDES */ +/* If you'd like your theme to have overrides for specific languages, here's an example, you can remove it and/or add more overrides */ +/* .language-css .token.important { + color: unset; +} */ diff --git a/themes/catppuccin-latte-peach/v1/theme.json b/themes/catppuccin-latte-peach/v1/theme.json new file mode 100644 index 0000000..7e5609c --- /dev/null +++ b/themes/catppuccin-latte-peach/v1/theme.json @@ -0,0 +1,146 @@ +{ + "$schema": "https://raw.githubusercontent.com/streetwriters/notesnook-themes/main/schemas/v1.schema.json", + "name": "Catppuccin Latte Peach", + "id": "catppuccin-latte-peach", + "version": 1, + "license": "GPL-3.0-or-later", + "homepage": "https://notesnook.com", + "description": "Catppuccin Latte with a peach accent", + "colorScheme": "light", + "compatibilityVersion": 1, + "authors": [ + { + "name": "Hakan", + "email": "3ddh54dlz@mozmail.com", + "url": "https://github.com/Ecinni" + } + ], + "scopes": { + "base": { + "primary": { + "accent": "#fe640b", + "paragraph": "#4c4f69", + "background": "#eff1f5", + "border": "#ccd0da", + "heading": "#4c4f69", + "icon": "#5c5f77", + "separator": "#e6e9ef", + "placeholder": "#8c8fa1", + "hover": "#bcc0cc", + "accentForeground": "#dce0e8", + "backdrop": "#dce0e899" + }, + "secondary": { + "accent": "#fe640b", + "paragraph": "#4c4f69", + "background": "#dce0e8", + "border": "#9ca0b0", + "heading": "#4c4f69", + "icon": "#4c4f69", + "separator": "#9ca0b0", + "placeholder": "#8c8fa1", + "hover": "#bcc0cc", + "accentForeground": "#dce0e8", + "backdrop": "#dce0e899" + }, + "disabled": { + "accent": "#fe640b", + "paragraph": "#4c4f69", + "background": "#8c8fa1", + "border": "#9ca0b0", + "heading": "#4c4f69", + "icon": "#4c4f69", + "separator": "#9ca0b0", + "placeholder": "#4c4f69", + "hover": "#bcc0cc", + "accentForeground": "#dce0e8", + "backdrop": "#dce0e899" + }, + "selected": { + "accent": "#fe640b", + "paragraph": "#4c4f69", + "background": "#bcc0cc", + "border": "#fe640b", + "heading": "#4c4f69", + "icon": "#fe640b", + "separator": "#9ca0b0", + "placeholder": "#8c8fa1", + "hover": "#ccd0da", + "accentForeground": "#dce0e8", + "backdrop": "#dce0e899" + }, + "error": { + "accent": "#d20f39", + "paragraph": "#d20f39", + "background": "#eff1f5", + "border": "#9ca0b0", + "heading": "#d20f39", + "icon": "#d20f39", + "separator": "#9ca0b0", + "placeholder": "#d20f39", + "hover": "#bcc0cc", + "accentForeground": "#dce0e8", + "backdrop": "#dce0e899" + }, + "success": { + "accent": "#40a02b", + "paragraph": "#40a02b", + "background": "#eff1f5", + "border": "#9ca0b0", + "heading": "#40a02b", + "icon": "#40a02b", + "separator": "#9ca0b0", + "placeholder": "#8c8fa1", + "hover": "#bcc0cc", + "accentForeground": "#dce0e8", + "backdrop": "#dce0e899" + } + }, + "statusBar": { + "primary": { + "paragraph": "#5c5f77", + "background": "#eff1f5", + "separator": "#eff1f5" + } + }, + "list": { + "primary": { + "paragraph": "#6c6f85", + "background": "#e6e9ef", + "hover": "#ccd0da" + }, + "secondary": { + "paragraph": "#5c5f77" + } + }, + "editor": { + "primary": { + "background": "#eff1f5", + "border": "#ccd0da" + }, + "secondary": { + "paragraph": "#6c6f85", + "border": "#dce0e8" + } + }, + "editorToolbar": { + "primary": { + "background": "#e6e9ef", + "hover": "#bcc0cc" + }, + "secondary": { + "background": "#ccd0da" + } + }, + "navigationMenu": { + "primary": { + "background": "#dce0e8" + } + }, + "sheet": { + "selected": { + "paragraph": "#008837" + } + } + } +}