tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: updates syntax colors for light theme

Browse Source
This commit is contained in:
Jessica Boezwinkle
2022-11-28 16:22:13 +00:00
parent a0d03667c5
commit dbfe7ca6e6
2 changed files with 184 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/admin/components/forms/field-types/Code/Code.tsx
View File

@@ -17,6 +17,7 @@ import Error from '../../Error';
import FieldDescription from '../../FieldDescription';
import { code } from '../../../../../fields/validations';
import { Props } from './types';
import { useTheme } from '../../../utilities/Theme';
import './index.scss';
@@ -63,12 +64,16 @@ const Code: React.FC<Props> = (props) => {
condition,
});
const { theme } = useTheme();
const classes = [
'field-type',
'code',
className,
showError && 'error',
readOnly && 'read-only',
theme && theme,
].filter(Boolean).join(' ');
return (

268
src/admin/components/forms/field-types/Code/index.scss
View File

@@ -47,105 +47,16 @@ pre[class*="language-"] {
border-radius: 0.3em;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: var(--theme-base-100);
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: 0.1em;
border-radius: 0.3em;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #7c7c7c;
}
.token.punctuation {
color: #c5c8c6;
}
.namespace {
opacity: 0.7;
}
.token.property,
.token.keyword,
.token.tag {
color: #96cbfe;
}
.token.class-name {
color: #ffffb6;
text-decoration: underline;
}
.token.boolean,
.token.constant {
color: #99cc99;
}
.token.symbol,
.token.deleted {
color: #f92672;
}
.token.number {
color: #ff73fd;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #a8ff60;
}
.token.variable {
color: #c6c5fe;
}
.token.operator {
color: #ededed;
}
.token.entity {
color: #ffffb6;
cursor: help;
}
.token.url {
color: #96cbfe;
}
.language-css .token.string,
.style .token.string {
color: #87c38a;
}
.token.atrule,
.token.attr-value {
color: #f9ee98;
}
.token.function {
color: #dad085;
}
.token.regex {
color: #e9c062;
}
.token.important {
color: #fd971f;
}
.token.important,
.token.bold {
font-weight: bold;
@@ -154,3 +65,182 @@ pre[class*="language-"] {
.token.italic {
font-style: italic;
}
.dark {
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: var(--theme-base-100);
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #7c7c7c;
}
.token.punctuation {
color: #c5c8c6;
}
.token.property,
.token.keyword,
.token.tag {
color: #96cbfe;
}
.token.class-name {
color: #ffffb6;
text-decoration: underline;
}
.token.boolean,
.token.constant {
color: #99cc99;
}
.token.symbol,
.token.deleted {
color: #f92672;
}
.token.number {
color: #ff73fd;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #a8ff60;
}
.token.variable {
color: #c6c5fe;
}
.token.operator {
color: #ededed;
}
.token.entity {
color: #ffffb6;
cursor: help;
}
.token.url {
color: #96cbfe;
}
.language-css .token.string,
.style .token.string {
color: #87c38a;
}
.token.atrule,
.token.attr-value {
color: #f9ee98;
}
.token.function {
color: #dad085;
}
.token.regex {
color: #e9c062;
}
.token.important {
color: #fd971f;
}
}
.light {
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #666666;
}
.token.punctuation {
color: #797979;
}
.token.property,
.token.keyword,
.token.tag {
color: #0167c5;
}
.token.class-name {
color: #b2ac00;
text-decoration: underline;
}
.token.boolean,
.token.constant {
color: #008600;
}
.token.symbol,
.token.deleted {
color: #ab003f;
}
.token.number {
color: #970195;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #418c03;
}
.token.variable {
color: #4643e3;
}
.token.operator {
color: #3c3c3c;
}
.token.entity {
color: #b2ac00;
cursor: help;
}
.token.url {
color: #0084ff;
}
.language-css .token.string,
.style .token.string {
color: #386b3a;
}
.token.atrule,
.token.attr-value {
color: #b5a108;
}
.token.function {
color: #8c1aea;
}
.token.regex {
color: #e5a205;
}
.token.important {
color: #ac0900;
}
}