mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-28 07:40:13 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

black to white

Browse Source
This commit is contained in:
Philipp Kühn 2021-01-29 11:46:19 +01:00
parent 8ca5e70b58
commit d006f96fb3
6 changed files with 44 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,10 +12,11 @@
max-height: 50rem;
overflow: auto;
scroll-behavior: smooth;
border: 1px solid rgba($colorBlack, 0.1);
}
&__source {
border: 1px solid rgba($colorWhite, 0.1);
border: 1px solid rgba($colorBlack, 0.1);
background-color: $colorBlack;
}

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

@ -4,13 +4,13 @@
padding: 1.5rem 0;
&__link {
color: rgba($colorWhite, 0.6);
color: rgba($colorBlack, 0.6);
padding: 0.25rem 0.5rem;
border-radius: 5px;
&:hover {
color: $colorWhite;
background-color: rgba($colorWhite, 0.05);
color: $colorBlack;
background-color: rgba($colorBlack, 0.05);
}
}
}

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

@ -55,7 +55,7 @@ body {
-moz-osx-font-smoothing: grayscale;
line-height: 1.7;
font-feature-settings: 'cv05' 1;
background-color: $colorBlack;
background-color: $colorWhite;
color: $colorText;
}
@ -75,7 +75,7 @@ a {
text-decoration: none;
&:hover {
color: $colorWhite;
color: $colorBlack;
}
}
@ -91,46 +91,6 @@ code {
color: white;
}
// TODO: Move to examples
// .ProseMirror {
// > * + * {
// margin-top: 0.75em;
// }
// ul,
// ol {
// padding: 0 1rem;
// }
// pre {
// background: $colorBlack;
// color: $colorWhite;
// font-family: 'JetBrainsMono', monospace;
// padding: 0.75rem 1rem;
// border-radius: 0.5rem;
// code {
// color: inherit;
// background: none;
// font-size: 0.8rem;
// }
// }
// img {
// max-width: 100%;
// height: auto;
// }
// hr {
// margin: 1rem 0;
// }
// blockquote {
// padding-left: 1rem;
// border-left: 2px solid rgba($colorBlack, 0.1);
// }
// }
.DocSearch,
.DocSearch-Container {
filter: saturate(0);

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

@ -16,7 +16,7 @@ $menuBreakPoint: 800px;
display: inline-flex;
align-items: center;
font-weight: 600;
color: $colorWhite;
color: $colorBlack;
font-size: 1.5rem;
&::after {
@ -27,7 +27,7 @@ $menuBreakPoint: 800px;
letter-spacing: 0.05rem;
text-transform: uppercase;
border-radius: 5px;
border: 1px solid $colorWhite;
border: 1px solid $colorBlack;
padding: 0 0.4em;
}
}
@ -51,13 +51,13 @@ $menuBreakPoint: 800px;
height: 3rem;
overflow: hidden;
background-color: transparent;
border: 1px solid rgba($colorWhite, 0.1);
border: 1px solid rgba($colorBlack, 0.1);
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
&::after {
content: 'Search';
color: rgba($colorWhite, 0.5);
color: rgba($colorBlack, 0.5);
}
}
@ -90,7 +90,7 @@ $menuBreakPoint: 800px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
border-right: 1px solid rgba($colorWhite, 0.1);
border-right: 1px solid rgba($colorBlack, 0.1);
}
}
@ -121,7 +121,7 @@ $menuBreakPoint: 800px;
left: 0;
width: 100%;
height: 100%;
background-color: $colorBlack;
background-color: $colorWhite;
opacity: 0.8;
transform: translate3d(0,0,0);
pointer-events: none;
@ -146,7 +146,7 @@ $menuBreakPoint: 800px;
transition: color 0.2s $ease;
&:hover {
color: $colorWhite;
color: $colorBlack;
}
@media (min-width: $menuBreakPoint) {
@ -177,7 +177,7 @@ $menuBreakPoint: 800px;
letter-spacing: 0.025rem;
font-size: 0.75rem;
text-transform: uppercase;
color: rgba($colorWhite, 0.3);
color: rgba($colorBlack, 0.3);
margin-bottom: 0.5rem;
}
@ -209,16 +209,16 @@ $menuBreakPoint: 800px;
white-space: nowrap;
&:hover {
color: $colorWhite;
color: $colorBlack;
}
&--exact {
color: $colorWhite;
background-color: rgba($colorWhite, 0.05);
color: $colorBlack;
background-color: rgba($colorBlack, 0.05);
}
&--draft {
color: rgba($colorWhite, 0.4);
color: rgba($colorBlack, 0.4);
&::after {
content: 'draft';
@ -268,7 +268,7 @@ $menuBreakPoint: 800px;
&--with-children::after {
content: '›';
font-weight: bold;
color: rgba($colorWhite, 0.2);
color: rgba($colorBlack, 0.2);
position: absolute;
margin-left: -1.5em;
}
@ -287,14 +287,14 @@ $menuBreakPoint: 800px;
}
&__page-navigation {
border-top: 1px solid rgba($colorWhite, 0.1);
border-top: 1px solid rgba($colorBlack, 0.1);
}
&__page-footer {
font-size: 0.85rem;
padding: 1.5rem 0;
text-align: center;
border-top: 1px solid rgba($colorWhite, 0.1);
border-top: 1px solid rgba($colorBlack, 0.1);
a {
text-decoration: underline;

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

@ -27,8 +27,7 @@
> h4,
> h5,
> h6 {
font-weight: 500;
color: $colorWhite;
color: $colorBlack;
margin-top: 3 * $spacing;
margin-bottom: $spacing;
@ -54,7 +53,7 @@
position: absolute;
top: 0;
right: 100%;
color: rgba($colorWhite, 0.4);
color: rgba($colorBlack, 0.4);
text-decoration: none;
font-weight: 400;
padding-right: 0.5rem;
@ -80,7 +79,7 @@
}
> pre {
border: 1px solid rgba($colorWhite, 0.1);
border: 1px solid rgba($colorBlack, 0.1);
}
> p code,
@ -88,8 +87,8 @@
> ol code,
> .table-wrapper code,
> .remark-container code {
color: $colorYellow;
background-color: rgba($colorYellow, 0.1);
color: rgba($colorBlack, 0.7);
background-color: rgba($colorYellow, 0.3);
box-decoration-break: clone;
}
@ -110,9 +109,10 @@
& + ul {
list-style: none;
border: 1px solid rgba($colorWhite, 0.1);
background-color: rgba($colorBlack, 0.03);
padding: 1.25rem !important;
border-radius: 0.5rem;
font-size: 0.85rem;
&::before {
display: block;
@ -121,7 +121,7 @@
letter-spacing: 0.025rem;
font-size: 0.75rem;
text-transform: uppercase;
color: rgba($colorWhite, 0.3);
color: rgba($colorBlack, 0.3);
margin-bottom: 0.5rem;
}
@ -157,7 +157,7 @@
display: inline-block;
margin-right: 0.75rem;
content: "\2022";
color: $colorYellow;
color: $colorBlack;
}
}
}
@ -180,9 +180,9 @@
justify-content: center;
height: 1.5rem;
width: 1.5rem;
background-color: rgba($colorYellow, 0.1);
background-color: rgba($colorBlack, 0.1);
border-radius: 9999px;
color: $colorYellow;
color: $colorBlack;
font-size: 0.75rem;
font-weight: 700;
content: counter(item);
@ -219,13 +219,13 @@
th {
white-space: nowrap;
color: $colorWhite;
color: $colorBlack;
font-weight: 500;
border-bottom: 1px solid rgba($colorWhite, 0.2);
border-bottom: 1px solid rgba($colorBlack, 0.2);
}
td {
border-bottom: 1px solid rgba($colorWhite, 0.1);
border-bottom: 1px solid rgba($colorBlack, 0.1);
}
tr:last-child td {
@ -238,7 +238,7 @@
}
&:hover {
background: rgba($colorWhite, 0.02);
background: rgba($colorBlack, 0.02);
}
}
}
@ -246,31 +246,23 @@
> .remark-container {
padding: 1.25rem;
border: 1px solid rgba($colorWhite, 0.1);
border-radius: 0.5rem;
color: rgba($colorBlack, 0.7);
&.warning {
border-color: rgba($colorYellow, 0.1);
background-color: rgba($colorYellow, 0.1);
color: $colorYellow;
background-color: rgba($colorYellow, 0.3);
}
&.info {
border-color: rgba($colorBlue, 0.1);
background-color: rgba($colorBlue, 0.1);
color: $colorBlue;
background-color: rgba($colorBlue, 0.3);
}
&.error {
border-color: rgba($colorRed, 0.1);
background-color: rgba($colorRed, 0.1);
color: $colorRed;
background-color: rgba($colorRed, 0.3);
}
&.pro {
border-color: rgba($colorOrange, 0.1);
background-color: rgba($colorOrange, 0.1);
color: $colorOrange;
background-color: rgba($colorOrange, 0.3);
}
.remark-container-title {
@ -280,7 +272,7 @@
> blockquote {
border-left: 1px solid rgba($colorGrey, 0.5);
padding-left: 2*$spacing;
padding-left: 2 * $spacing;
}
}

2
docs/src/variables.scss
View File

@ -1,6 +1,6 @@
$colorWhite: #FFF;
$colorBlack: #0D0D0D;
$colorText: rgba($colorWhite, 0.75);
$colorText: rgba($colorBlack, 0.8);
$colorGrey: #616161;
$colorPurple: #A975FF;
$colorRed: #FB5151;