github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-18 11:02:46 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Codeblocks experiment merge (#29870)

Browse Source
This commit is contained in:
Jordan Vidrine 2024-11-20 17:24:41 -06:00 committed by GitHub
parent 0b96ec26ab
commit 34e6c8f3dd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 67 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/assets/stylesheets/color_definitions.scss
View File

@ -109,15 +109,20 @@
--facebook-or-white: #{$facebook-or-white};
--twitter-or-white: #{$twitter-or-white};
--hljs-comment: #{$hljs-comment};
--hljs-number: #{$hljs-number};
--hljs-string: #{$hljs-string};
--hljs-literal: #{$hljs-literal};
--hljs-tag: #{$hljs-tag};
--hljs-attr: #{$hljs-attr};
--hljs-attribute: #{$hljs-attribute};
--hljs-symbol: #{$hljs-symbol};
--hljs-addition: #{$hljs-addition};
--hljs-bg: #{$hljs-bg};
--hljs-builtin-name: #{$hljs-builtin-name};
--hljs-comment: #{$hljs-comment};
--hljs-deletion: #{$hljs-deletion};
--hljs-keyword: #{$hljs-keyword};
--hljs-title: #{$hljs-title};
--hljs-name: #{$hljs-name};
--hljs-punctuation: #{$hljs-punctuation};
--hljs-symbol: #{$hljs-symbol};
--hljs-variable: #{$hljs-variable};
--hljs-string: #{$hljs-string};
--google: #{$google};
--google-hover: #{$google-hover};
--instagram: #{$instagram};

56
app/assets/stylesheets/common/base/code_highlighting.scss
View File

@ -5,14 +5,20 @@ li > code,
pre > code,
strong > code,
em > code {
font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono",
Menlo, Monaco, Consolas, monospace;
color: var(--primary-very-high);
background: var(--hljs-bg);
border-radius: var(--d-button-border-radius);
font-size: 14px;
line-height: calc((13 + 4) / 13);
}
.hljs {
display: block;
padding: 0.5em;
padding: 12px;
color: var(--primary-very-high);
background-color: var(--hljs-bg);
}
.hljs-comment,
@ -23,12 +29,15 @@ em > code {
font-style: italic;
}
.hljs-color {
color: var(--hljs-color);
}
.hljs-keyword,
.hljs-subst,
.hljs-request,
.hljs-status {
color: var(--primary-very-high);
font-weight: bold;
color: var(--hljs-keyword);
}
.hljs-number {
@ -43,15 +52,20 @@ em > code {
color: var(--hljs-string);
}
.hljs-title,
.hljs-name,
.hljs-title {
color: var(--hljs-title);
}
.hljs-name {
color: var(--hljs-name);
}
.hljs-quote,
.hljs-operator,
.hljs-selector-pseudo,
.hljs-selector-tag,
.hljs-link {
color: var(--hljs-string);
font-weight: bold;
}
.hljs-subst {
@ -60,27 +74,34 @@ em > code {
.hljs-literal,
.hljs-class .hljs-title {
color: var(--hljs-literal);
font-weight: bold;
color: var(--hljs-title);
}
.hljs-tag,
.hljs-punctuation,
.hljs-tag .hljs-title {
color: var(--hljs-tag);
font-weight: normal;
}
.hljs-tag .hljs-attr,
.hljs-tag .hljs-name {
color: var(--hljs-attribute);
.hljs-punctuation {
color: var(--hljs-punctuation);
}
.hljs-attr {
color: var(--hljs-attr);
}
.hljs-attribute,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id,
.hljs-selector-id {
color: var(--hljs-attr);
}
.hljs-variable {
color: var(--hljs-variable);
}
.hljs-attribute {
color: var(--hljs-attribute);
}
@ -95,20 +116,21 @@ em > code {
.hljs-built_in,
.hljs-builtin-name {
color: var(--hljs-builtin-name);
color: var(--hljs-name);
}
.hljs-deletion {
background: var(--danger-low);
color: var(--hljs-deletion);
}
.hljs-addition {
background: var(--success-low);
color: var(--hljs-addition);
}
.hljs-section {
color: var(--hljs-builtin-name);
font-weight: bold;
color: var(--hljs-name);
}
.hljs-bullet {

28
app/assets/stylesheets/common/foundation/color_transformations.scss
View File

@ -159,18 +159,22 @@ $facebook-or-white: dark-light-choose($facebook, unquote("#fff")) !default;
$twitter-or-white: dark-light-choose($twitter, unquote("#fff")) !default;
// code highlighting
$hljs-comment: dark-light-choose(unquote("#998"), unquote("#bba")) !default;
$hljs-number: dark-light-choose(unquote("#099"), unquote("#aff")) !default;
$hljs-string: dark-light-choose(unquote("#d14"), unquote("#f99")) !default;
$hljs-literal: dark-light-choose(unquote("#458"), unquote("#9ae")) !default;
$hljs-tag: dark-light-choose(unquote("#000080"), unquote("#99f")) !default;
$hljs-attribute: dark-light-choose(
unquote("#008080"),
unquote("#0ee")
) !default;
$hljs-symbol: dark-light-choose(unquote("#990073"), unquote("#fbe")) !default;
$hljs-bg: dark-light-choose(unquote("#f8f8f8"), unquote("#333")) !default;
$hljs-builtin-name: dark-light-choose($tertiary-high, $tertiary-hover) !default;
// stack overflow light & dark color pallets
// https://github.com/highlightjs/highlight.js/blob/main/src/styles/stackoverflow-dark.css
// https://github.com/highlightjs/highlight.js/blob/main/src/styles/stackoverflow-light.css
$hljs-attr: dark-light-choose(#015692, #88aece) !default;
$hljs-attribute: dark-light-choose(#803378, #c59bc1) !default;
$hljs-addition: dark-light-choose(#2f6f44, #76c490) !default;
$hljs-bg: dark-light-choose($primary-50, rgba(0, 0, 0, 0.25)) !default;
$hljs-comment: $primary-500 !default;
$hljs-deletion: dark-light-choose(#c02d2e, #de7176) !default;
$hljs-keyword: dark-light-choose(#015692, #88aece) !default;
$hljs-title: dark-light-choose(#b75501, #f08d49) !default;
$hljs-name: dark-light-choose(#b75501, #f08d49) !default;
$hljs-punctuation: dark-light-choose(#535a60, #cccccc) !default;
$hljs-symbol: dark-light-choose(#54790d, #b5bd68) !default;
$hljs-variable: dark-light-choose(#54790d, #b5bd68) !default;
$hljs-string: dark-light-choose(#54790d, #b5bd68) !default;
// shadow opacity variables
$shadow-opacity-modal: dark-light-choose(0.6, 1) !default;