Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-09 16:48:16 -05:00
Code Issues Activity

✨ Add code highlight dark and light modes

Browse source
This commit is contained in:
alonso.torres 2023-11-30 16:43:49 +01:00
parent c601cca288
commit 668f443149
8 changed files with 223 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/resources/styles/common/refactor/themes/default-theme.scss
View file

@ -4,6 +4,8 @@
//
// Copyright (c) KALEIDOS INC
@use "sass:meta";
:root {
--color-background-primary: var(--dark-gray-1);
--color-background-secondary: var(--dark-gray-2);
@ -25,4 +27,6 @@
--pending-color: var(--dark-pending-color);
--error-color: var(--dark-error-color);
--canvas-color: var(--color-canvas);
@include meta.load-css("hljs-dark-theme");
}

98
frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss Normal file
View file

@ -0,0 +1,98 @@
/**
* Panda Syntax Theme for Highlight.js
* Based on: https://github.com/tinkertrain/panda-syntax-vscode
* Author: Annmarie Switzer <https://github.com/annmarie-switzer>
*/
.hljs {
color: #e6e6e6;
background: #2a2c2d;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-link {
text-decoration: underline;
}
.hljs-comment,
.hljs-quote {
color: #bbbbbb;
font-style: italic;
}
.hljs-params {
color: #bbbbbb;
}
.hljs-punctuation,
.hljs-attr {
color: #e6e6e6;
}
.hljs-selector-tag,
.hljs-name,
.hljs-meta {
color: #ff4b82;
}
.hljs-operator,
.hljs-char.escape_ {
color: #b084eb;
}
.hljs-keyword,
.hljs-deletion {
color: #ff75b5;
}
.hljs-regexp,
.hljs-selector-pseudo,
.hljs-selector-attr,
.hljs-variable.language_ {
color: #ff9ac1;
}
.hljs-subst,
.hljs-property,
.hljs-code,
.hljs-formula,
.hljs-section,
.hljs-title.function_ {
color: #45a9f9;
}
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-selector-class,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-meta .hljs-string {
color: #19f9d8;
}
.hljs-variable,
.hljs-template-variable,
.hljs-number,
.hljs-literal,
.hljs-type,
.hljs-link,
.hljs-built_in,
.hljs-title,
.hljs-selector-id,
.hljs-tag,
.hljs-doctag,
.hljs-attribute,
.hljs-template-tag,
.hljs-meta .hljs-keyword,
.hljs-punctuation {
color: #ffb86c;
}

94
frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss Normal file
View file

@ -0,0 +1,94 @@
/**
* Panda Syntax Theme for Highlight.js
* Based on: https://github.com/tinkertrain/panda-syntax-vscode
* Author: Annmarie Switzer <https://github.com/annmarie-switzer>
*/
.hljs {
color: #2a2c2d;
background: #e6e6e6;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-link {
text-decoration: underline;
}
.hljs-comment,
.hljs-quote {
color: #676b79;
font-style: italic;
}
.hljs-params {
color: #676b79;
}
.hljs-punctuation,
.hljs-attr {
color: #2a2c2d;
}
.hljs-selector-tag,
.hljs-name,
.hljs-meta,
.hljs-operator,
.hljs-char.escape_ {
color: #c56200;
}
.hljs-keyword,
.hljs-deletion {
color: #d92792;
}
.hljs-regexp,
.hljs-selector-pseudo,
.hljs-selector-attr,
.hljs-variable.language_ {
color: #cc5e91;
}
.hljs-subst,
.hljs-property,
.hljs-code,
.hljs-formula,
.hljs-section,
.hljs-title.function_ {
color: #3787c7;
}
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-selector-class,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-meta .hljs-string {
color: #0d7d6c;
}
.hljs-variable,
.hljs-template-variable,
.hljs-number,
.hljs-literal,
.hljs-type,
.hljs-link,
.hljs-built_in,
.hljs-title,
.hljs-selector-id,
.hljs-tag,
.hljs-doctag,
.hljs-attribute,
.hljs-template-tag,
.hljs-meta .hljs-keyword {
color: #7641bb;
}

4
frontend/resources/styles/common/refactor/themes/light-theme.scss
View file

@ -4,6 +4,8 @@
//
// Copyright (c) KALEIDOS INC
@use "sass:meta";
.light {
--color-background-primary: var(--light-gray-1);
--color-background-secondary: var(--light-gray-2);
@ -24,4 +26,6 @@
--pending-color: var(--light-pending-color);
--error-color: var(--light-error-color);
--canvas-color: var(--color-canvas);
@include meta.load-css("hljs-light-theme");
}

20
frontend/src/app/main/ui/auth/common.scss
View file

@ -40,13 +40,19 @@
--input-min-width: 100%;
}
.buttons-stack button,
.buttons-stack :global(.btn-primary) {
@extend .button-primary;
font-size: $fs-11;
height: $s-40;
text-transform: uppercase;
width: 100%;
.buttons-stack {
display: flex;
flex-direction: column;
gap: $s-8;
button,
:global(.btn-primary) {
@extend .button-primary;
font-size: $fs-11;
height: $s-40;
text-transform: uppercase;
width: 100%;
}
}
.link-entry {

8
frontend/src/app/main/ui/components/code_block.cljs
View file

@ -10,16 +10,20 @@
["highlight.js" :as hljs]
[app.common.data.macros :as dm]
[app.main.ui.context :as ctx]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
(mf/defc code-block
{::mf/wrap-props false}
[{:keys [code type]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
block-ref (mf/use-ref)]
block-ref (mf/use-ref)
code (str/trim code)]
(mf/with-effect [code type]
(when-let [node (mf/ref-val block-ref)]
(hljs/highlightElement node)))
[:pre {:class (dm/str type " " (stl/css new-css-system :code-display)) :ref block-ref} code]))
(if new-css-system
[:pre {:class (dm/str type " " (stl/css :code-display)) :ref block-ref} code]
[:pre {:class (dm/str type " " "code-display") :ref block-ref} code])))

2
frontend/src/app/main/ui/components/code_block.scss
View file

@ -7,8 +7,10 @@
@import "refactor/common-refactor.scss";
.code-display {
user-select: text;
border-radius: $br-8;
margin-top: $s-8;
padding: $s-12;
background-color: var(--menu-background-color);
overflow: auto;
}

4
frontend/src/app/main/ui/workspace/sidebar.cljs
View file

@ -196,8 +196,8 @@
(obj/set! "on-expand" handle-expand))]
[:aside {:class (stl/css-case new-css-system
:global/settings-bar true
:global/settings-bar-right true
:global/settings-bar (not new-css-system)
:global/settings-bar-right (not new-css-system)
:right-settings-bar true
:not-expand (not can-be-expanded?)
:expanded (> size 276))