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

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

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

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

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

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

@@ -5,10 +5,10 @@
&__link { &__link {
font-weight: 500; font-weight: 500;
color: rgba($colorBlack, 0.6); color: rgba($colorWhite, 0.6);
&:hover { &: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); border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box; background-clip: padding-box;
border-radius: 8px; border-radius: 8px;
background-color: rgba($colorBlack, 0); background-color: rgba($colorWhite, 0);
} }
:hover::-webkit-scrollbar-thumb { :hover::-webkit-scrollbar-thumb {
background-color: rgba($colorBlack, 0.1); background-color: rgba($colorWhite, 0.1);
} }
::-webkit-scrollbar-button { ::-webkit-scrollbar-button {
@@ -52,7 +52,8 @@ body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
line-height: 1.7; line-height: 1.7;
font-feature-settings: 'cv05' 1; font-feature-settings: 'cv05' 1;
background-color: $colorBackground; background-color: $colorBlack;
color: $colorWhite;
height: 100%; height: 100%;
} }
@@ -78,10 +79,8 @@ a {
code { code {
font-family: 'JetBrainsMono', monospace; font-family: 'JetBrainsMono', monospace;
background-color: rgba($colorBlack, 0.05);
padding: 0.1rem 0.3rem; padding: 0.1rem 0.3rem;
border-radius: 0.25rem; border-radius: 0.25rem;
color: rgba($colorBlack, 0.7);
font-size: 0.9rem; font-size: 0.9rem;
} }
@@ -122,3 +121,12 @@ blockquote {
#table-of-contents { #table-of-contents {
display: none; 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); $codeBackground: $colorBlack;
$codeText: #eee;
$codeGrey: #616161;
$codeRed: #ff6666;
$codeOrange: #fd9170;
$colorYellow: #ffcb6b;
$codeGreen: #b9ea80;
$codeBlue: #89ddff;
$codeTeal: #80cbc4;
$codePurple: #c792ea;
.prism-editor__textarea { .prism-editor__textarea {
background: transparent; background: transparent;
@@ -36,7 +27,7 @@ pre[class*="language-"] {
:not(pre) > code[class*="language-"] { :not(pre) > code[class*="language-"] {
white-space: normal; white-space: normal;
color: $codeText; color: $colorText;
background: $codeBackground; background: $codeBackground;
border-radius: 0.2em; border-radius: 0.2em;
padding: 0.1em; padding: 0.1em;
@@ -51,7 +42,7 @@ pre > code[class*="language-"] {
pre[class*="language-"] { pre[class*="language-"] {
overflow: auto; overflow: auto;
position: relative; position: relative;
color: $codeText; color: $colorText;
background: $codeBackground; background: $codeBackground;
padding: 1.2rem 1.5rem !important; padding: 1.2rem 1.5rem !important;
border-radius: 0.5rem; border-radius: 0.5rem;
@@ -65,7 +56,7 @@ pre[class*="language-"] {
pre[class*="language-"].language-css > code, pre[class*="language-"].language-css > code,
pre[class*="language-"].language-sass > code, pre[class*="language-"].language-sass > code,
pre[class*="language-"].language-scss > code { pre[class*="language-"].language-scss > code {
color: $codeOrange; color: $colorOrange;
} }
[class*="language-"] .namespace { [class*="language-"] .namespace {
@@ -73,7 +64,7 @@ pre[class*="language-"].language-scss > code {
} }
.token.atrule { .token.atrule {
color: $codePurple; color: $colorPurple;
} }
.token.attr-name { .token.attr-name {
@@ -81,15 +72,15 @@ pre[class*="language-"].language-scss > code {
} }
.token.attr-value { .token.attr-value {
color: $codeGreen; color: $colorGreen;
} }
.token.attribute { .token.attribute {
color: $codeGreen; color: $colorGreen;
} }
.token.boolean { .token.boolean {
color: $codePurple; color: $colorPurple;
} }
.token.builtin { .token.builtin {
@@ -97,11 +88,11 @@ pre[class*="language-"].language-scss > code {
} }
.token.cdata { .token.cdata {
color: $codeTeal; color: $colorTeal;
} }
.token.char { .token.char {
color: $codeTeal; color: $colorTeal;
} }
.token.class { .token.class {
@@ -113,27 +104,27 @@ pre[class*="language-"].language-scss > code {
} }
.token.comment { .token.comment {
color: $codeGrey; color: $colorGrey;
} }
.token.constant { .token.constant {
color: $codePurple; color: $colorPurple;
} }
.token.deleted { .token.deleted {
color: $codeRed; color: $colorRed;
} }
.token.doctype { .token.doctype {
color: $codeGrey; color: $colorGrey;
} }
.token.entity { .token.entity {
color: $codeRed; color: $colorRed;
} }
.token.function { .token.function {
color: $codePurple; color: $colorPurple;
} }
.token.hexcode { .token.hexcode {
@@ -141,49 +132,49 @@ pre[class*="language-"].language-scss > code {
} }
.token.id { .token.id {
color: $codePurple; color: $colorPurple;
font-weight: bold; font-weight: bold;
} }
.token.important { .token.important {
color: $codePurple; color: $colorPurple;
font-weight: bold; font-weight: bold;
} }
.token.inserted { .token.inserted {
color: $codeTeal; color: $colorTeal;
} }
.token.keyword { .token.keyword {
color: $codePurple; color: $colorPurple;
} }
.token.number { .token.number {
color: $codeOrange; color: $colorOrange;
} }
.token.operator { .token.operator {
color: $codeBlue; color: $colorBlue;
} }
.token.prolog { .token.prolog {
color: $codeGrey; color: $colorGrey;
} }
.token.property { .token.property {
color: $codeTeal; color: $colorTeal;
} }
.token.pseudo-class { .token.pseudo-class {
color: $codeGreen; color: $colorGreen;
} }
.token.pseudo-element { .token.pseudo-element {
color: $codeGreen; color: $colorGreen;
} }
.token.punctuation { .token.punctuation {
color: $codeBlue; color: $colorBlue;
} }
.token.regex { .token.regex {
@@ -191,31 +182,31 @@ pre[class*="language-"].language-scss > code {
} }
.token.selector { .token.selector {
color: $codeRed; color: $colorRed;
} }
.token.string { .token.string {
color: $codeGreen; color: $colorGreen;
} }
.token.symbol { .token.symbol {
color: $codePurple; color: $colorPurple;
} }
.token.tag { .token.tag {
color: $codeRed; color: $colorRed;
} }
.token.unit { .token.unit {
color: $codeOrange; color: $colorOrange;
} }
.token.url { .token.url {
color: $codeRed; color: $colorRed;
} }
.token.variable { .token.variable {
color: $codeRed; color: $colorRed;
} }
.line-highlight { .line-highlight {

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

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

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

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

13
docs/src/variables.scss
View File

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