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

8
docs/src/components/Demo/style.scss
View File

@@ -5,14 +5,15 @@
&__preview {
padding: 1.5rem;
border: 1px solid rgba($colorBlack, 0.1);
border-top-left-radius: inherit;
border-top-right-radius: inherit;
border-bottom-width: 0;
color: $colorBlack;
}
&__source {
// background-color: $colorBlack;
border: 1px solid rgba($colorWhite, 0.1);
background-color: $colorBlack;
}
&__tabs {
@@ -55,11 +56,10 @@
width: 100%;
padding: 0.5rem 1.5rem;
border: 1px solid rgba($colorWhite, 0.1);
border: 1px solid rgba($colorBlack, 0.1);
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
border-top-width: 0;
background-color: rgba($colorBlack, 0.9);
background-color: $colorBlack;
color: $colorWhite;
}

7
docs/src/components/LiveDemo/CustomLayout.vue
View File

@@ -47,15 +47,16 @@ export default {
&__preview {
padding: 1.5rem;
border: 1px solid rgba($colorBlack, 0.1);
border-top-left-radius: inherit;
border-top-right-radius: inherit;
border-bottom-width: 0;
color: $colorBlack;
}
&__editor {
background-color: rgba($colorBlack, 0.9);
color: rgba($colorWhite, 0.7);
border: 1px solid rgba($colorWhite, 0.1);
background-color: $colorBlack;
color: $colorText;
}
&__editor ::v-deep {

12
docs/src/components/LiveDemo/style.scss
View File

@@ -9,15 +9,6 @@
border-bottom-width: 0;
}
&__source {
// background-color: $colorBlack;
}
&__tabs {
padding: 1rem 1.5rem 0 1.5rem;
background-color: rgba($colorBlack, 0.9);
}
&__tab {
display: inline-flex;
position: relative;
@@ -53,11 +44,10 @@
width: 100%;
padding: 0.5rem 1.5rem;
border: 1px solid rgba($colorWhite, 0.1);
border: 1px solid rgba($colorBlack, 0.1);
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
border-top-width: 0;
background-color: rgba($colorBlack, 0.9);
background-color: $colorBlack;
color: $colorWhite;
}

4
docs/src/components/PageNavigation/style.scss
View File

@@ -5,10 +5,10 @@
&__link {
font-weight: 500;
color: rgba($colorBlack, 0.6);
color: rgba($colorWhite, 0.6);
&:hover {
color: $colorBlack;
color: $colorWhite;
}
}
}

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;

83
docs/src/templates/DocPage/style.scss
View File

@@ -1,8 +1,20 @@
.doc-page {
&__markdown ::v-deep {
a {
text-decoration: underline;
$spacing: 0.75em;
> div,
> p,
ul,
ol,
blockquote {
margin-top: 2 * $spacing;
margin-bottom: 2 * $spacing;
}
li {
margin-top: $spacing;
margin-bottom: $spacing;
}
h1,
@@ -11,12 +23,12 @@
h4,
h5,
h6 {
position: relative;
font-weight: 500;
}
margin-top: 3 * $spacing;
margin-bottom: $spacing;
h1 {
font-weight: 400;
& + * {
margin-top: 0;
}
}
h1,
@@ -36,7 +48,7 @@
position: absolute;
top: 0;
right: 100%;
color: rgba($colorBlack, 0.4);
color: rgba($colorWhite, 0.4);
text-decoration: none;
font-weight: 400;
padding-right: 0.5rem;
@@ -49,8 +61,29 @@
}
}
> * + * {
margin-top: 1.5em;
:first-child {
margin-top: 0;
}
:last-child {
margin-bottom: 0;
}
> p {
color: rgba($colorWhite, 0.8);
}
> pre {
border: 1px solid rgba($colorWhite, 0.1);
}
p code {
color: $colorPurple;
background-color: rgba($colorPurple, 0.1);
}
a {
text-decoration: underline;
}
ul {
@@ -96,9 +129,9 @@
justify-content: center;
height: 1.5rem;
width: 1.5rem;
background-color: rgba($colorBlack, 0.1);
background-color: rgba($colorWhite, 0.1);
border-radius: 9999px;
color: rgba($colorBlack, 0.4);
color: rgba($colorWhite, 0.4);
font-size: 0.75rem;
font-weight: 700;
content: counter(item);
@@ -120,7 +153,7 @@
th {
font-weight: 600;
background-color: rgba($colorBlack, 0.05);
background-color: rgba($colorWhite, 0.05);
&:first-child {
border-top-left-radius: 5px;
@@ -134,7 +167,7 @@
}
td {
border-bottom: 1px solid rgba($colorBlack, 0.05);
border-bottom: 1px solid rgba($colorWhite, 0.05);
}
tr:last-child td {
@@ -144,19 +177,25 @@
.remark-container {
padding: 1rem;
border: 2px solid rgba($colorBlack, 0.1);
border-radius: 0.25rem;
border: 1px solid rgba($colorWhite, 0.1);
border-radius: 0.5rem;
&.warning {
border-color:#ffd8a8;
background-color: #fff4e6;
color: #ca9c63;
border-color: rgba($colorYellow, 0.1);
background-color: rgba($colorYellow, 0.1);
color: $colorYellow;
}
&.info {
border-color:#a5d8ff;
background-color: #e7f5ff;
color: #228be6;
border-color: rgba($colorBlue, 0.1);
background-color: rgba($colorBlue, 0.1);
color: $colorBlue;
}
&.error {
border-color: rgba($colorRed, 0.1);
background-color: rgba($colorRed, 0.1);
color: $colorRed;
}
.remark-container-title {

13
docs/src/variables.scss
View File

@@ -1,7 +1,14 @@
$colorWhite: #FFF;
$colorBlack: #000;
$colorRed: #fa5252;
$colorBackground: mix($colorBlack, $colorWhite, 2%);
$colorBlack: #0D0D0D;
$colorText: rgba($colorWhite, 0.8);
$colorGrey: #616161;
$colorPurple: #A975FF;
$colorRed: #FB5151;
$colorOrange: #fd9170;
$colorYellow: #FFCB6B;
$colorBlue: #68CEF8;
$colorTeal: #80cbc4;
$colorGreen: #9DEF8F;
/* Default Equations */
$linear: cubic-bezier(0.250, 0.250, 0.750, 0.750);