ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

add basic new colors

Browse Source
This commit is contained in:
Philipp Kühn
2020-10-12 12:26:54 +02:00
parent a4ccb36e10
commit cbf21078de
9 changed files with 144 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/src/layouts/App/base.scss
View File

@@ -24,11 +24,11 @@
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
border-radius: 8px;
background-color: rgba($colorBlack, 0);
background-color: rgba($colorWhite, 0);
}
:hover::-webkit-scrollbar-thumb {
background-color: rgba($colorBlack, 0.1);
background-color: rgba($colorWhite, 0.1);
}
::-webkit-scrollbar-button {
@@ -52,7 +52,8 @@ body {
-moz-osx-font-smoothing: grayscale;
line-height: 1.7;
font-feature-settings: 'cv05' 1;
background-color: $colorBackground;
background-color: $colorBlack;
color: $colorWhite;
height: 100%;
}
@@ -78,10 +79,8 @@ a {
code {
font-family: 'JetBrainsMono', monospace;
background-color: rgba($colorBlack, 0.05);
padding: 0.1rem 0.3rem;
border-radius: 0.25rem;
color: rgba($colorBlack, 0.7);
font-size: 0.9rem;
}
@@ -122,3 +121,12 @@ blockquote {
#table-of-contents {
display: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
}

77
docs/src/layouts/App/prism.scss
View File

@@ -1,13 +1,4 @@
$codeBackground: rgba($colorBlack, 0.9);
$codeText: #eee;
$codeGrey: #616161;
$codeRed: #ff6666;
$codeOrange: #fd9170;
$colorYellow: #ffcb6b;
$codeGreen: #b9ea80;
$codeBlue: #89ddff;
$codeTeal: #80cbc4;
$codePurple: #c792ea;
$codeBackground: $colorBlack;
.prism-editor__textarea {
background: transparent;
@@ -36,7 +27,7 @@ pre[class*="language-"] {
:not(pre) > code[class*="language-"] {
white-space: normal;
color: $codeText;
color: $colorText;
background: $codeBackground;
border-radius: 0.2em;
padding: 0.1em;
@@ -51,7 +42,7 @@ pre > code[class*="language-"] {
pre[class*="language-"] {
overflow: auto;
position: relative;
color: $codeText;
color: $colorText;
background: $codeBackground;
padding: 1.2rem 1.5rem !important;
border-radius: 0.5rem;
@@ -65,7 +56,7 @@ pre[class*="language-"] {
pre[class*="language-"].language-css > code,
pre[class*="language-"].language-sass > code,
pre[class*="language-"].language-scss > code {
color: $codeOrange;
color: $colorOrange;
}
[class*="language-"] .namespace {
@@ -73,7 +64,7 @@ pre[class*="language-"].language-scss > code {
}
.token.atrule {
color: $codePurple;
color: $colorPurple;
}
.token.attr-name {
@@ -81,15 +72,15 @@ pre[class*="language-"].language-scss > code {
}
.token.attr-value {
color: $codeGreen;
color: $colorGreen;
}
.token.attribute {
color: $codeGreen;
color: $colorGreen;
}
.token.boolean {
color: $codePurple;
color: $colorPurple;
}
.token.builtin {
@@ -97,11 +88,11 @@ pre[class*="language-"].language-scss > code {
}
.token.cdata {
color: $codeTeal;
color: $colorTeal;
}
.token.char {
color: $codeTeal;
color: $colorTeal;
}
.token.class {
@@ -113,27 +104,27 @@ pre[class*="language-"].language-scss > code {
}
.token.comment {
color: $codeGrey;
color: $colorGrey;
}
.token.constant {
color: $codePurple;
color: $colorPurple;
}
.token.deleted {
color: $codeRed;
color: $colorRed;
}
.token.doctype {
color: $codeGrey;
color: $colorGrey;
}
.token.entity {
color: $codeRed;
color: $colorRed;
}
.token.function {
color: $codePurple;
color: $colorPurple;
}
.token.hexcode {
@@ -141,49 +132,49 @@ pre[class*="language-"].language-scss > code {
}
.token.id {
color: $codePurple;
color: $colorPurple;
font-weight: bold;
}
.token.important {
color: $codePurple;
color: $colorPurple;
font-weight: bold;
}
.token.inserted {
color: $codeTeal;
color: $colorTeal;
}
.token.keyword {
color: $codePurple;
color: $colorPurple;
}
.token.number {
color: $codeOrange;
color: $colorOrange;
}
.token.operator {
color: $codeBlue;
color: $colorBlue;
}
.token.prolog {
color: $codeGrey;
color: $colorGrey;
}
.token.property {
color: $codeTeal;
color: $colorTeal;
}
.token.pseudo-class {
color: $codeGreen;
color: $colorGreen;
}
.token.pseudo-element {
color: $codeGreen;
color: $colorGreen;
}
.token.punctuation {
color: $codeBlue;
color: $colorBlue;
}
.token.regex {
@@ -191,31 +182,31 @@ pre[class*="language-"].language-scss > code {
}
.token.selector {
color: $codeRed;
color: $colorRed;
}
.token.string {
color: $codeGreen;
color: $colorGreen;
}
.token.symbol {
color: $codePurple;
color: $colorPurple;
}
.token.tag {
color: $codeRed;
color: $colorRed;
}
.token.unit {
color: $codeOrange;
color: $colorOrange;
}
.token.url {
color: $codeRed;
color: $colorRed;
}
.token.variable {
color: $codeRed;
color: $colorRed;
}
.line-highlight {

24
docs/src/layouts/App/style.scss
View File

@@ -20,7 +20,7 @@ $menuBreakPoint: 750px;
letter-spacing: 0.025rem;
font-size: 0.75rem;
text-transform: uppercase;
color: rgba($colorBlack, 0.3);
color: rgba($colorWhite, 0.3);
margin-bottom: 0.5rem;
}
@@ -29,7 +29,7 @@ $menuBreakPoint: 750px;
padding-left: 1rem;
margin-top: 0.5rem;
margin-bottom: 1.5rem;
border-left: 2px solid rgba($colorBlack, 0.1);
border-left: 2px solid rgba($colorWhite, 0.1);
}
.active + &__link-list {
@@ -41,26 +41,26 @@ $menuBreakPoint: 750px;
padding: 0.1rem 0.5rem;
border-radius: 5px;
font-weight: 500;
color: rgba($colorBlack, 0.6);
color: rgba($colorWhite, 0.6);
margin-bottom: 0.2rem;
margin-left: -0.5rem;
&:hover {
color: $colorBlack;
color: $colorWhite;
}
&.active {
color: $colorBlack;
background-color: rgba($colorBlack, 0.05);
color: $colorWhite;
background-color: rgba($colorWhite, 0.05);
}
&--draft {
color: rgba($colorBlack, 0.2);
color: rgba($colorWhite, 0.2);
}
&--with-children::after {
content: '→';
color: rgba($colorBlack, 0.2);
content: '→';
color: rgba($colorWhite, 0.2);
}
}
@@ -75,8 +75,8 @@ $menuBreakPoint: 750px;
width: 100%;
height: $navHeight;
flex: 0 0 auto;
background-color: rgba($colorBackground, 0.8);
border-bottom: 1px solid rgba($colorBlack, 0.05);
background-color: rgba($colorBlack, 0.7);
border-bottom: 1px solid rgba($colorWhite, 0.05);
backdrop-filter: blur(10px);
}
@@ -130,7 +130,7 @@ $menuBreakPoint: 750px;
bottom: 0;
left: 0;
right: 0;
background-color: $colorBackground;
// background-color: $colorBackground;
padding-left: 1rem;
padding-right: 1rem;
visibility: hidden;