chore: makes copy of scss for each package that needs it
This commit is contained in:
James
6
.vscode/settings.json
vendored
6
.vscode/settings.json
vendored
@@ -5,21 +5,21 @@
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"editor.formatOnSave": true,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true
|
||||
"source.fixAll.eslint": "explicit"
|
||||
}
|
||||
},
|
||||
"[typescriptreact]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"editor.formatOnSave": true,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true
|
||||
"source.fixAll.eslint": "explicit"
|
||||
}
|
||||
},
|
||||
"[javascript]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"editor.formatOnSave": true,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true
|
||||
"source.fixAll.eslint": "explicit"
|
||||
}
|
||||
},
|
||||
"[json]": {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../ui/src/scss//styles.scss';
|
||||
@import '../../../scss/styles.scss';
|
||||
|
||||
.query-inspector {
|
||||
&__json-children {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../ui/src/scss/styles.scss';
|
||||
@import '../../scss/styles.scss';
|
||||
|
||||
.query-inspector {
|
||||
--string-color: #11b102;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../scss/styles.scss';
|
||||
|
||||
.payload-settings {
|
||||
position: relative;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../scss/styles.scss';
|
||||
|
||||
.dashboard {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../../scss/styles.scss';
|
||||
|
||||
.auth-fields {
|
||||
padding: calc(var(--base) * 2);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../scss/styles.scss';
|
||||
|
||||
.collection-edit {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../../../../scss/styles.scss';
|
||||
|
||||
.bool-cell {
|
||||
font-size: 1rem;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../../../../scss/styles.scss';
|
||||
|
||||
.code-cell {
|
||||
font-size: 1rem;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../../../../scss/styles.scss';
|
||||
|
||||
.file {
|
||||
display: flex;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../../../../scss/styles.scss';
|
||||
|
||||
.json-cell {
|
||||
font-size: 1rem;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../scss/styles.scss';
|
||||
|
||||
.collection-list {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../scss/styles.scss';
|
||||
|
||||
.live-preview-window {
|
||||
background-color: var(--theme-bg);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../../scss/styles.scss';
|
||||
|
||||
.live-preview-toolbar-controls {
|
||||
display: flex;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../scss/styles.scss';
|
||||
|
||||
.live-preview-toolbar {
|
||||
display: flex;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../packages/ui/src/scss/styles.scss';
|
||||
@import '../../scss/styles.scss';
|
||||
|
||||
.live-preview {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../ui/src/scss/styles.scss';
|
||||
@import '../../scss/styles.scss';
|
||||
|
||||
.not-found {
|
||||
margin-top: var(--base);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../scss/styles.scss';
|
||||
|
||||
.view-version {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../scss/styles.scss';
|
||||
|
||||
.render-field-diffs {
|
||||
display: flex;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../ui/src/scss/styles.scss';
|
||||
@import '../../scss/styles.scss';
|
||||
|
||||
.versions {
|
||||
width: 100%;
|
||||
|
||||
209
packages/next/src/scss/app.scss
Normal file
209
packages/next/src/scss/app.scss
Normal file
@@ -0,0 +1,209 @@
|
||||
@import 'fonts';
|
||||
@import 'styles';
|
||||
@import './toastify.scss';
|
||||
@import './colors.scss';
|
||||
|
||||
:root {
|
||||
--base-px: 25;
|
||||
--base-body-size: 13;
|
||||
--base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
|
||||
|
||||
--breakpoint-xs-width: #{$breakpoint-xs-width};
|
||||
--breakpoint-s-width: #{$breakpoint-s-width};
|
||||
--breakpoint-m-width: #{$breakpoint-m-width};
|
||||
--breakpoint-l-width: #{$breakpoint-l-width};
|
||||
--scrollbar-width: 17px;
|
||||
|
||||
--theme-bg: var(--theme-elevation-0);
|
||||
--theme-input-bg: var(--theme-elevation-0);
|
||||
--theme-text: var(--theme-elevation-800);
|
||||
--theme-overlay: rgba(5, 5, 5, 0.5);
|
||||
--theme-baseline: #{$baseline-px};
|
||||
--theme-baseline-body-size: #{$baseline-body-size};
|
||||
--font-body: 'Suisse Intl', system-ui;
|
||||
--font-mono: monospace;
|
||||
--font-serif: 'Merriweather', serif;
|
||||
|
||||
--style-radius-s: #{$style-radius-s};
|
||||
--style-radius-m: #{$style-radius-m};
|
||||
--style-radius-l: #{$style-radius-l};
|
||||
|
||||
--z-popup: 10;
|
||||
--z-nav: 20;
|
||||
--z-modal: 30;
|
||||
--z-status: 40;
|
||||
|
||||
--accessibility-outline: 2px solid var(--theme-text);
|
||||
--accessibility-outline-offset: 2px;
|
||||
|
||||
--gutter-h: #{base(3)};
|
||||
--spacing-view-bottom: var(--gutter-h);
|
||||
--app-header-height: calc(var(--base) * 3);
|
||||
--doc-controls-height: calc(var(--base) * 3);
|
||||
--nav-width: 275px;
|
||||
--nav-trans-time: 150ms;
|
||||
|
||||
@include mid-break {
|
||||
--gutter-h: #{base(2)};
|
||||
--app-header-height: calc(var(--base) * 2);
|
||||
--doc-controls-height: calc(var(--base) * 2.5);
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
--gutter-h: #{base(0.5)};
|
||||
--spacing-view-bottom: calc(var(--base) * 2);
|
||||
--nav-width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
// GLOBAL STYLES
|
||||
/////////////////////////////
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
@extend %body;
|
||||
background: var(--theme-bg);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
opacity: 0;
|
||||
|
||||
&[data-theme='dark'],
|
||||
&[data-theme='light'] {
|
||||
opacity: initial;
|
||||
}
|
||||
|
||||
&[data-theme='dark'] {
|
||||
--theme-bg: var(--theme-elevation-0);
|
||||
--theme-text: var(--theme-elevation-1000);
|
||||
--theme-input-bg: var(--theme-elevation-50);
|
||||
--theme-overlay: rgba(5, 5, 5, 0.75);
|
||||
color-scheme: dark;
|
||||
|
||||
::selection {
|
||||
color: var(--color-base-1000);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
color: var(--color-base-1000);
|
||||
}
|
||||
}
|
||||
|
||||
@include mid-break {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-weight: 400;
|
||||
color: var(--theme-text);
|
||||
margin: 0;
|
||||
// this is for the nav to be able to push the document over
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--theme-success-500);
|
||||
color: var(--theme-base-800);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: var(--theme-success-500);
|
||||
color: var(--theme-base-800);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend %h1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend %h2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend %h3;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@extend %h4;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@extend %h5;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@extend %h6;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 $baseline;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: $baseline;
|
||||
margin: 0 0 $baseline;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: var(--accessibility-outline);
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
|
||||
&:focus {
|
||||
&:not(:focus-visible) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
dialog {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.payload__modal-item {
|
||||
min-height: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.payload__modal-container--enterDone {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.payload__modal-item--enter,
|
||||
.payload__modal-item--enterDone {
|
||||
z-index: var(--z-modal);
|
||||
}
|
||||
|
||||
// @import '~payload-user-css'; TODO: re-enable this
|
||||
269
packages/next/src/scss/colors.scss
Normal file
269
packages/next/src/scss/colors.scss
Normal file
@@ -0,0 +1,269 @@
|
||||
:root {
|
||||
--color-base-0: rgb(255, 255, 255);
|
||||
--color-base-50: rgb(245, 245, 245);
|
||||
--color-base-100: rgb(235, 235, 235);
|
||||
--color-base-150: rgb(221, 221, 221);
|
||||
--color-base-200: rgb(208, 208, 208);
|
||||
--color-base-250: rgb(195, 195, 195);
|
||||
--color-base-300: rgb(181, 181, 181);
|
||||
--color-base-350: rgb(168, 168, 168);
|
||||
--color-base-400: rgb(154, 154, 154);
|
||||
--color-base-450: rgb(141, 141, 141);
|
||||
--color-base-500: rgb(128, 128, 128);
|
||||
--color-base-550: rgb(114, 114, 114);
|
||||
--color-base-600: rgb(101, 101, 101);
|
||||
--color-base-650: rgb(87, 87, 87);
|
||||
--color-base-700: rgb(74, 74, 74);
|
||||
--color-base-750: rgb(60, 60, 60);
|
||||
--color-base-800: rgb(47, 47, 47);
|
||||
--color-base-850: rgb(34, 34, 34);
|
||||
--color-base-900: rgb(20, 20, 20);
|
||||
--color-base-950: rgb(7, 7, 7);
|
||||
--color-base-1000: rgb(0, 0, 0);
|
||||
|
||||
--color-success-50: rgb(247, 255, 251);
|
||||
--color-success-100: rgb(240, 255, 247);
|
||||
--color-success-150: rgb(232, 255, 243);
|
||||
--color-success-200: rgb(224, 255, 239);
|
||||
--color-success-250: rgb(217, 255, 235);
|
||||
--color-success-300: rgb(209, 255, 230);
|
||||
--color-success-350: rgb(201, 255, 226);
|
||||
--color-success-400: rgb(193, 255, 222);
|
||||
--color-success-450: rgb(186, 255, 218);
|
||||
--color-success-500: rgb(178, 255, 214);
|
||||
--color-success-550: rgb(160, 230, 193);
|
||||
--color-success-600: rgb(142, 204, 171);
|
||||
--color-success-650: rgb(125, 179, 150);
|
||||
--color-success-700: rgb(107, 153, 128);
|
||||
--color-success-750: rgb(89, 128, 107);
|
||||
--color-success-800: rgb(71, 102, 86);
|
||||
--color-success-850: rgb(53, 77, 64);
|
||||
--color-success-900: rgb(36, 51, 43);
|
||||
--color-success-950: rgb(18, 25, 21);
|
||||
|
||||
--color-warning-50: rgb(255, 255, 246);
|
||||
--color-warning-100: rgb(255, 255, 237);
|
||||
--color-warning-150: rgb(254, 255, 228);
|
||||
--color-warning-200: rgb(254, 255, 219);
|
||||
--color-warning-250: rgb(254, 255, 210);
|
||||
--color-warning-300: rgb(254, 255, 200);
|
||||
--color-warning-350: rgb(254, 255, 191);
|
||||
--color-warning-400: rgb(253, 255, 182);
|
||||
--color-warning-450: rgb(253, 255, 173);
|
||||
--color-warning-500: rgb(253, 255, 164);
|
||||
--color-warning-550: rgb(228, 230, 148);
|
||||
--color-warning-600: rgb(202, 204, 131);
|
||||
--color-warning-650: rgb(177, 179, 115);
|
||||
--color-warning-700: rgb(152, 153, 98);
|
||||
--color-warning-750: rgb(127, 128, 82);
|
||||
--color-warning-800: rgb(101, 102, 66);
|
||||
--color-warning-850: rgb(76, 77, 49);
|
||||
--color-warning-900: rgb(51, 51, 33);
|
||||
--color-warning-950: rgb(25, 25, 16);
|
||||
|
||||
--color-error-50: rgb(255, 241, 241);
|
||||
--color-error-100: rgb(255, 226, 228);
|
||||
--color-error-150: rgb(255, 212, 214);
|
||||
--color-error-200: rgb(255, 197, 200);
|
||||
--color-error-250: rgb(255, 183, 187);
|
||||
--color-error-300: rgb(255, 169, 173);
|
||||
--color-error-350: rgb(255, 154, 159);
|
||||
--color-error-400: rgb(255, 140, 145);
|
||||
--color-error-450: rgb(255, 125, 132);
|
||||
--color-error-500: rgb(255, 111, 118);
|
||||
--color-error-550: rgb(230, 100, 106);
|
||||
--color-error-600: rgb(204, 89, 94);
|
||||
--color-error-650: rgb(179, 78, 83);
|
||||
--color-error-700: rgb(153, 67, 71);
|
||||
--color-error-750: rgb(128, 56, 59);
|
||||
--color-error-800: rgb(102, 44, 47);
|
||||
--color-error-850: rgb(77, 33, 35);
|
||||
--color-error-900: rgb(51, 22, 24);
|
||||
--color-error-950: rgb(25, 11, 12);
|
||||
|
||||
--color-blue-50: rgb(230, 247, 253);
|
||||
--color-blue-100: rgb(204, 238, 252);
|
||||
--color-blue-150: rgb(179, 230, 250);
|
||||
--color-blue-200: rgb(153, 221, 249);
|
||||
--color-blue-250: rgb(128, 213, 247);
|
||||
--color-blue-300: rgb(102, 204, 245);
|
||||
--color-blue-350: rgb(77, 196, 244);
|
||||
--color-blue-400: rgb(51, 187, 242);
|
||||
--color-blue-450: rgb(25, 179, 241);
|
||||
--color-blue-500: rgb(0, 170, 239);
|
||||
--color-blue-550: rgb(0, 153, 215);
|
||||
--color-blue-600: rgb(0, 136, 191);
|
||||
--color-blue-650: rgb(0, 119, 167);
|
||||
--color-blue-700: rgb(0, 102, 143);
|
||||
--color-blue-750: rgb(0, 85, 120);
|
||||
--color-blue-800: rgb(0, 68, 96);
|
||||
--color-blue-850: rgb(0, 51, 72);
|
||||
--color-blue-900: rgb(0, 34, 48);
|
||||
--color-blue-950: rgb(0, 17, 24);
|
||||
|
||||
--theme-border-color: var(--theme-elevation-150);
|
||||
|
||||
--theme-success-50: var(--color-success-50);
|
||||
--theme-success-100: var(--color-success-100);
|
||||
--theme-success-150: var(--color-success-150);
|
||||
--theme-success-200: var(--color-success-200);
|
||||
--theme-success-250: var(--color-success-250);
|
||||
--theme-success-300: var(--color-success-300);
|
||||
--theme-success-350: var(--color-success-350);
|
||||
--theme-success-400: var(--color-success-400);
|
||||
--theme-success-450: var(--color-success-450);
|
||||
--theme-success-500: var(--color-success-500);
|
||||
--theme-success-550: var(--color-success-550);
|
||||
--theme-success-600: var(--color-success-600);
|
||||
--theme-success-650: var(--color-success-650);
|
||||
--theme-success-700: var(--color-success-700);
|
||||
--theme-success-750: var(--color-success-750);
|
||||
--theme-success-800: var(--color-success-800);
|
||||
--theme-success-850: var(--color-success-850);
|
||||
--theme-success-900: var(--color-success-900);
|
||||
--theme-success-950: var(--color-success-950);
|
||||
|
||||
--theme-warning-50: var(--color-warning-50);
|
||||
--theme-warning-100: var(--color-warning-100);
|
||||
--theme-warning-150: var(--color-warning-150);
|
||||
--theme-warning-200: var(--color-warning-200);
|
||||
--theme-warning-250: var(--color-warning-250);
|
||||
--theme-warning-300: var(--color-warning-300);
|
||||
--theme-warning-350: var(--color-warning-350);
|
||||
--theme-warning-400: var(--color-warning-400);
|
||||
--theme-warning-450: var(--color-warning-450);
|
||||
--theme-warning-500: var(--color-warning-500);
|
||||
--theme-warning-550: var(--color-warning-550);
|
||||
--theme-warning-600: var(--color-warning-600);
|
||||
--theme-warning-650: var(--color-warning-650);
|
||||
--theme-warning-700: var(--color-warning-700);
|
||||
--theme-warning-750: var(--color-warning-750);
|
||||
--theme-warning-800: var(--color-warning-800);
|
||||
--theme-warning-850: var(--color-warning-850);
|
||||
--theme-warning-900: var(--color-warning-900);
|
||||
--theme-warning-950: var(--color-warning-950);
|
||||
|
||||
--theme-error-50: var(--color-error-50);
|
||||
--theme-error-100: var(--color-error-100);
|
||||
--theme-error-150: var(--color-error-150);
|
||||
--theme-error-200: var(--color-error-200);
|
||||
--theme-error-250: var(--color-error-250);
|
||||
--theme-error-300: var(--color-error-300);
|
||||
--theme-error-350: var(--color-error-350);
|
||||
--theme-error-400: var(--color-error-400);
|
||||
--theme-error-450: var(--color-error-450);
|
||||
--theme-error-500: var(--color-error-500);
|
||||
--theme-error-550: var(--color-error-550);
|
||||
--theme-error-600: var(--color-error-600);
|
||||
--theme-error-650: var(--color-error-650);
|
||||
--theme-error-700: var(--color-error-700);
|
||||
--theme-error-750: var(--color-error-750);
|
||||
--theme-error-800: var(--color-error-800);
|
||||
--theme-error-850: var(--color-error-850);
|
||||
--theme-error-900: var(--color-error-900);
|
||||
--theme-error-950: var(--color-error-950);
|
||||
|
||||
--theme-elevation-0: var(--color-base-0);
|
||||
--theme-elevation-50: var(--color-base-50);
|
||||
--theme-elevation-100: var(--color-base-100);
|
||||
--theme-elevation-150: var(--color-base-150);
|
||||
--theme-elevation-200: var(--color-base-200);
|
||||
--theme-elevation-250: var(--color-base-250);
|
||||
--theme-elevation-300: var(--color-base-300);
|
||||
--theme-elevation-350: var(--color-base-350);
|
||||
--theme-elevation-400: var(--color-base-400);
|
||||
--theme-elevation-450: var(--color-base-450);
|
||||
--theme-elevation-500: var(--color-base-500);
|
||||
--theme-elevation-550: var(--color-base-550);
|
||||
--theme-elevation-600: var(--color-base-600);
|
||||
--theme-elevation-650: var(--color-base-650);
|
||||
--theme-elevation-700: var(--color-base-700);
|
||||
--theme-elevation-750: var(--color-base-750);
|
||||
--theme-elevation-800: var(--color-base-800);
|
||||
--theme-elevation-850: var(--color-base-850);
|
||||
--theme-elevation-900: var(--color-base-900);
|
||||
--theme-elevation-950: var(--color-base-950);
|
||||
--theme-elevation-1000: var(--color-base-1000);
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
--theme-border-color: var(--theme-elevation-150);
|
||||
|
||||
--theme-elevation-0: var(--color-base-900);
|
||||
--theme-elevation-50: var(--color-base-850);
|
||||
--theme-elevation-100: var(--color-base-800);
|
||||
--theme-elevation-150: var(--color-base-750);
|
||||
--theme-elevation-200: var(--color-base-700);
|
||||
--theme-elevation-250: var(--color-base-650);
|
||||
--theme-elevation-300: var(--color-base-600);
|
||||
--theme-elevation-350: var(--color-base-550);
|
||||
--theme-elevation-400: var(--color-base-450);
|
||||
--theme-elevation-450: var(--color-base-400);
|
||||
--theme-elevation-550: var(--color-base-350);
|
||||
--theme-elevation-600: var(--color-base-300);
|
||||
--theme-elevation-650: var(--color-base-250);
|
||||
--theme-elevation-700: var(--color-base-200);
|
||||
--theme-elevation-750: var(--color-base-150);
|
||||
--theme-elevation-800: var(--color-base-100);
|
||||
--theme-elevation-850: var(--color-base-50);
|
||||
--theme-elevation-900: var(--color-base-0);
|
||||
--theme-elevation-950: var(--color-base-0);
|
||||
--theme-elevation-1000: var(--color-base-0);
|
||||
|
||||
--theme-success-50: var(--color-success-950);
|
||||
--theme-success-100: var(--color-success-900);
|
||||
--theme-success-150: var(--color-success-850);
|
||||
--theme-success-200: var(--color-success-800);
|
||||
--theme-success-250: var(--color-success-750);
|
||||
--theme-success-300: var(--color-success-700);
|
||||
--theme-success-350: var(--color-success-650);
|
||||
--theme-success-400: var(--color-success-600);
|
||||
--theme-success-450: var(--color-success-550);
|
||||
--theme-success-550: var(--color-success-450);
|
||||
--theme-success-600: var(--color-success-400);
|
||||
--theme-success-650: var(--color-success-350);
|
||||
--theme-success-700: var(--color-success-300);
|
||||
--theme-success-750: var(--color-success-250);
|
||||
--theme-success-800: var(--color-success-200);
|
||||
--theme-success-850: var(--color-success-150);
|
||||
--theme-success-900: var(--color-success-100);
|
||||
--theme-success-950: var(--color-success-50);
|
||||
|
||||
--theme-warning-50: var(--color-warning-950);
|
||||
--theme-warning-100: var(--color-warning-900);
|
||||
--theme-warning-150: var(--color-warning-850);
|
||||
--theme-warning-200: var(--color-warning-800);
|
||||
--theme-warning-250: var(--color-warning-750);
|
||||
--theme-warning-300: var(--color-warning-700);
|
||||
--theme-warning-350: var(--color-warning-650);
|
||||
--theme-warning-400: var(--color-warning-600);
|
||||
--theme-warning-450: var(--color-warning-550);
|
||||
--theme-warning-550: var(--color-warning-450);
|
||||
--theme-warning-600: var(--color-warning-400);
|
||||
--theme-warning-650: var(--color-warning-350);
|
||||
--theme-warning-700: var(--color-warning-300);
|
||||
--theme-warning-750: var(--color-warning-250);
|
||||
--theme-warning-800: var(--color-warning-200);
|
||||
--theme-warning-850: var(--color-warning-150);
|
||||
--theme-warning-900: var(--color-warning-100);
|
||||
--theme-warning-950: var(--color-warning-50);
|
||||
|
||||
--theme-error-50: var(--color-error-950);
|
||||
--theme-error-100: var(--color-error-900);
|
||||
--theme-error-150: var(--color-error-850);
|
||||
--theme-error-200: var(--color-error-800);
|
||||
--theme-error-250: var(--color-error-750);
|
||||
--theme-error-300: var(--color-error-700);
|
||||
--theme-error-350: var(--color-error-650);
|
||||
--theme-error-400: var(--color-error-600);
|
||||
--theme-error-450: var(--color-error-550);
|
||||
--theme-error-550: var(--color-error-450);
|
||||
--theme-error-600: var(--color-error-400);
|
||||
--theme-error-650: var(--color-error-350);
|
||||
--theme-error-700: var(--color-error-300);
|
||||
--theme-error-750: var(--color-error-250);
|
||||
--theme-error-800: var(--color-error-200);
|
||||
--theme-error-850: var(--color-error-150);
|
||||
--theme-error-900: var(--color-error-100);
|
||||
--theme-error-950: var(--color-error-50);
|
||||
}
|
||||
1
packages/next/src/scss/custom.css
Normal file
1
packages/next/src/scss/custom.css
Normal file
@@ -0,0 +1 @@
|
||||
/* Used as a placeholder for when the Payload app does not have custom CSS */
|
||||
75
packages/next/src/scss/fonts.scss
Normal file
75
packages/next/src/scss/fonts.scss
Normal file
@@ -0,0 +1,75 @@
|
||||
@font-face {
|
||||
font-family: 'Suisse Intl';
|
||||
src:
|
||||
url('../assets/fonts/SuisseIntl.woff2') format('woff2'),
|
||||
url('../assets/fonts/SuisseIntl.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Suisse Intl';
|
||||
src:
|
||||
url('../assets/fonts/SuisseIntl-Medium.woff2') format('woff2'),
|
||||
url('../assets/fonts/SuisseIntl-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Suisse Intl';
|
||||
src:
|
||||
url('../assets/fonts/SuisseIntl-SemiBold.woff2') format('woff2'),
|
||||
url('../assets/fonts/SuisseIntl-SemiBold.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Suisse Intl';
|
||||
src:
|
||||
url('../assets/fonts/SuisseIntl-Bold.woff2') format('woff2'),
|
||||
url('../assets/fonts/SuisseIntl-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Merriweather';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src:
|
||||
local(''),
|
||||
url('../assets/fonts/merriweather-v30-latin-regular.woff2') format('woff2'),
|
||||
url('../assets/fonts/merriweather-v30-latin-regular.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Merriweather';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src:
|
||||
local(''),
|
||||
url('../assets/fonts/merriweather-v30-latin-italic.woff2') format('woff2'),
|
||||
url('../assets/fonts/merriweather-v30-latin-italic.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Merriweather';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src:
|
||||
local(''),
|
||||
url('../assets/fonts/merriweather-v30-latin-900.woff2') format('woff2'),
|
||||
url('../assets/fonts/merriweather-v30-latin-900.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Merriweather';
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
src:
|
||||
local(''),
|
||||
url('../assets/fonts/merriweather-v30-latin-900italic.woff2') format('woff2'),
|
||||
url('../assets/fonts/merriweather-v30-latin-900italic.woff') format('woff');
|
||||
}
|
||||
27
packages/next/src/scss/queries.scss
Normal file
27
packages/next/src/scss/queries.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
////////////////////////////
|
||||
// MEDIA QUERIES
|
||||
/////////////////////////////
|
||||
|
||||
@mixin extra-small-break {
|
||||
@media (max-width: $breakpoint-xs-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin small-break {
|
||||
@media (max-width: $breakpoint-s-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mid-break {
|
||||
@media (max-width: $breakpoint-m-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin large-break {
|
||||
@media (max-width: $breakpoint-l-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
17
packages/next/src/scss/resets.scss
Normal file
17
packages/next/src/scss/resets.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
%btn-reset {
|
||||
border: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
@mixin btn-reset {
|
||||
border: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
color: currentColor;
|
||||
}
|
||||
11
packages/next/src/scss/styles.scss
Normal file
11
packages/next/src/scss/styles.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
@import 'vars';
|
||||
@import 'z-index';
|
||||
|
||||
//////////////////////////////
|
||||
// IMPORT OVERRIDES
|
||||
//////////////////////////////
|
||||
|
||||
@import 'type';
|
||||
@import 'queries';
|
||||
@import 'resets';
|
||||
@import 'svg';
|
||||
10
packages/next/src/scss/svg.scss
Normal file
10
packages/next/src/scss/svg.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
@mixin color-svg($color) {
|
||||
.stroke {
|
||||
stroke: $color;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.fill {
|
||||
fill: $color;
|
||||
}
|
||||
}
|
||||
59
packages/next/src/scss/toastify.scss
Normal file
59
packages/next/src/scss/toastify.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
@import 'vars';
|
||||
@import '../../node_modules/react-toastify/dist/ReactToastify.css';
|
||||
|
||||
.Toastify {
|
||||
.Toastify__toast-container {
|
||||
left: base(5);
|
||||
transform: none;
|
||||
right: base(5);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.Toastify__toast {
|
||||
padding: base(0.5);
|
||||
border-radius: $style-radius-m;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.Toastify__close-button {
|
||||
align-self: center;
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.Toastify__toast--success {
|
||||
color: var(--color-success-900);
|
||||
background: var(--color-success-500);
|
||||
|
||||
.Toastify__progress-bar {
|
||||
background-color: var(--color-success-900);
|
||||
}
|
||||
}
|
||||
|
||||
.Toastify__close-button--success {
|
||||
color: var(--color-success-900);
|
||||
}
|
||||
|
||||
.Toastify__toast--error {
|
||||
background: var(--theme-error-500);
|
||||
color: #fff;
|
||||
|
||||
.Toastify__progress-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.Toastify__close-button--light {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@include mid-break {
|
||||
.Toastify__toast-container {
|
||||
left: $baseline;
|
||||
right: $baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
117
packages/next/src/scss/type.scss
Normal file
117
packages/next/src/scss/type.scss
Normal file
@@ -0,0 +1,117 @@
|
||||
@import 'vars';
|
||||
@import 'queries';
|
||||
|
||||
/////////////////////////////
|
||||
// HEADINGS
|
||||
/////////////////////////////
|
||||
|
||||
%h1,
|
||||
%h2,
|
||||
%h3,
|
||||
%h4,
|
||||
%h5,
|
||||
%h6 {
|
||||
font-family: var(--font-body);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
%jumbo {
|
||||
font-size: base(2.5);
|
||||
line-height: 1;
|
||||
margin: 0 0 base(2);
|
||||
}
|
||||
|
||||
%h1 {
|
||||
margin: 0 0 base(1);
|
||||
font-size: base(2);
|
||||
line-height: 1.15;
|
||||
letter-spacing: -1px;
|
||||
|
||||
@include small-break {
|
||||
letter-spacing: -0.5px;
|
||||
font-size: base(1.25);
|
||||
}
|
||||
}
|
||||
|
||||
%h2 {
|
||||
margin: 0 0 base(1);
|
||||
font-size: base(1.25);
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.5px;
|
||||
|
||||
@include small-break {
|
||||
font-size: base(0.85);
|
||||
}
|
||||
}
|
||||
|
||||
%h3 {
|
||||
margin: 0 0 base(1);
|
||||
font-size: base(0.925);
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.5px;
|
||||
|
||||
@include small-break {
|
||||
font-size: base(0.65);
|
||||
line-height: 1.25;
|
||||
}
|
||||
}
|
||||
|
||||
%h4 {
|
||||
margin: 0 0 $baseline;
|
||||
font-size: base(0.75);
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.375px;
|
||||
}
|
||||
|
||||
%h5 {
|
||||
margin: 0;
|
||||
font-size: base(0.5625);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
%h6 {
|
||||
margin: 0;
|
||||
font-size: base(0.5);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
%small {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
// TYPE STYLES
|
||||
/////////////////////////////
|
||||
|
||||
%large-body {
|
||||
font-size: base(0.6);
|
||||
line-height: base(1);
|
||||
letter-spacing: base(0.02);
|
||||
|
||||
@include mid-break {
|
||||
font-size: base(0.7);
|
||||
line-height: base(1);
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
font-size: base(0.55);
|
||||
line-height: base(0.75);
|
||||
}
|
||||
}
|
||||
|
||||
%body {
|
||||
font-size: $baseline-body-size;
|
||||
line-height: $baseline-px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
%code {
|
||||
font-size: base(0.4);
|
||||
color: var(--theme-elevation-400);
|
||||
|
||||
span {
|
||||
color: var(--theme-elevation-800);
|
||||
}
|
||||
}
|
||||
220
packages/next/src/scss/vars.scss
Normal file
220
packages/next/src/scss/vars.scss
Normal file
@@ -0,0 +1,220 @@
|
||||
@use 'sass:math';
|
||||
|
||||
/////////////////////////////
|
||||
// BREAKPOINTS
|
||||
/////////////////////////////
|
||||
|
||||
$breakpoint-xs-width: 400px !default;
|
||||
$breakpoint-s-width: 768px !default;
|
||||
$breakpoint-m-width: 1024px !default;
|
||||
$breakpoint-l-width: 1440px !default;
|
||||
|
||||
//////////////////////////////
|
||||
// BASELINE GRID
|
||||
//////////////////////////////
|
||||
|
||||
$baseline-px: 25px !default;
|
||||
$baseline-body-size: 13px !default;
|
||||
$baseline: math.div($baseline-px, $baseline-body-size) + rem;
|
||||
|
||||
@function base($multiplier) {
|
||||
@return (math.div($baseline-px, $baseline-body-size) * $multiplier) + rem;
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// FONTS (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
|
||||
//////////////////////////////
|
||||
|
||||
$font-body: 'Suisse Intl' !default;
|
||||
$font-mono: monospace !default;
|
||||
|
||||
//////////////////////////////
|
||||
// COLORS (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
|
||||
//////////////////////////////
|
||||
|
||||
$color-dark-gray: #333333 !default;
|
||||
$color-gray: #9a9a9a !default;
|
||||
$color-light-gray: #dadada !default;
|
||||
$color-background-gray: #f3f3f3 !default;
|
||||
$color-red: #ff6f76 !default;
|
||||
$color-yellow: #fdffa4 !default;
|
||||
$color-green: #b2ffd6 !default;
|
||||
$color-purple: #f3ddf3 !default;
|
||||
|
||||
//////////////////////////////
|
||||
// STYLES
|
||||
//////////////////////////////
|
||||
|
||||
$style-radius-s: 3px !default;
|
||||
$style-radius-m: 4px !default;
|
||||
$style-radius-l: 9px !default;
|
||||
$style-stroke-width: 1px !default;
|
||||
|
||||
$style-stroke-width-s: 1px !default;
|
||||
$style-stroke-width-m: 2px !default;
|
||||
|
||||
//////////////////////////////
|
||||
// MISC
|
||||
//////////////////////////////
|
||||
|
||||
$top-header-offset: calc(var(--base) - 1px);
|
||||
$top-header-offset-m: calc(var(--base) * 3);
|
||||
$focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
|
||||
|
||||
//////////////////////////////
|
||||
// SHADOWS
|
||||
//////////////////////////////
|
||||
|
||||
@mixin shadow-sm {
|
||||
box-shadow:
|
||||
0 2px 3px 0 rgba(0, 2, 4, 0.05),
|
||||
0 10px 4px -8px rgba(0, 2, 4, 0.02);
|
||||
}
|
||||
|
||||
@mixin shadow-m {
|
||||
box-shadow:
|
||||
0 0 30px 0 rgb(0 2 4 / 12%),
|
||||
0 30px 25px -8px rgb(0 2 4 / 10%);
|
||||
}
|
||||
|
||||
@mixin shadow-lg {
|
||||
box-shadow:
|
||||
0 20px 35px -10px rgba(0, 2, 4, 0.2),
|
||||
0 6px 4px -4px rgba(0, 2, 4, 0.02);
|
||||
}
|
||||
|
||||
@mixin shadow-lg-top {
|
||||
box-shadow:
|
||||
0 -20px 35px -10px rgba(0, 2, 4, 0.2),
|
||||
0 -6px 4px -4px rgba(0, 2, 4, 0.02);
|
||||
}
|
||||
|
||||
@mixin shadow {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin inputShadowActive {
|
||||
box-shadow:
|
||||
0 2px 3px 0 rgba(0, 2, 4, 0.16),
|
||||
0 6px 4px -4px rgba(0, 2, 4, 0.13);
|
||||
}
|
||||
|
||||
@mixin inputShadow {
|
||||
@include shadow-sm;
|
||||
|
||||
&:not(:disabled) {
|
||||
&:hover {
|
||||
box-shadow:
|
||||
0 2px 3px 0 rgba(0, 2, 4, 0.13),
|
||||
0 6px 4px -4px rgba(0, 2, 4, 0.1);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus-within,
|
||||
&:focus {
|
||||
@include inputShadowActive;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin soft-shadow-bottom {
|
||||
box-shadow: 0 7px 14px 0px rgb(0 0 0 / 5%);
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// STYLE MIXINS
|
||||
//////////////////////////////
|
||||
|
||||
@mixin blur-bg($color: var(--theme-bg), $opacity: 0.75) {
|
||||
&:before,
|
||||
&:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
background: $color;
|
||||
opacity: $opacity;
|
||||
}
|
||||
|
||||
&:after {
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin blur-bg-light {
|
||||
@include blur-bg(var(--theme-bg), 0.3);
|
||||
}
|
||||
|
||||
@mixin formInput() {
|
||||
@include inputShadow;
|
||||
font-family: var(--font-body);
|
||||
width: 100%;
|
||||
border: 1px solid var(--theme-elevation-150);
|
||||
background: var(--theme-input-bg);
|
||||
color: var(--theme-elevation-800);
|
||||
border-radius: 0;
|
||||
font-size: 1rem;
|
||||
height: base(2);
|
||||
line-height: base(1);
|
||||
padding: base(0.5) base(0.75);
|
||||
-webkit-appearance: none;
|
||||
|
||||
&[data-rtl='true'] {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: var(--theme-elevation-400);
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
color: var(--theme-elevation-400);
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--theme-elevation-250);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-within,
|
||||
&:active {
|
||||
border-color: var(--theme-elevation-400);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: var(--theme-elevation-200);
|
||||
color: var(--theme-elevation-450);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--theme-elevation-150);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lightInputError {
|
||||
background-color: var(--theme-error-50);
|
||||
border: 1px solid var(--theme-error-500);
|
||||
}
|
||||
|
||||
@mixin darkInputError {
|
||||
background-color: var(--theme-error-100);
|
||||
border: 1px solid var(--theme-error-400);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--theme-error-500);
|
||||
}
|
||||
}
|
||||
9
packages/next/src/scss/z-index.scss
Normal file
9
packages/next/src/scss/z-index.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
/////////////////////////////
|
||||
// Z-INDEX CHART (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
|
||||
/////////////////////////////
|
||||
|
||||
$z-page: 20;
|
||||
$z-page-content: 30;
|
||||
$z-nav: 40;
|
||||
$z-modal: 50;
|
||||
$z-status: 60;
|
||||
@@ -9,11 +9,12 @@ export const richTextValidate: Validate<
|
||||
unknown,
|
||||
RichTextField<any[], AdapterArguments>,
|
||||
RichTextField<any[], AdapterArguments>
|
||||
> = (value, { req: { t }, required }) => {
|
||||
> = (value, { required }) => {
|
||||
if (required) {
|
||||
const stringifiedDefaultValue = JSON.stringify(defaultRichTextValue)
|
||||
if (value && JSON.stringify(value) !== stringifiedDefaultValue) return true
|
||||
return t('validation:required')
|
||||
// TODO: translate this string
|
||||
return 'This field is required.'
|
||||
}
|
||||
|
||||
return true
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../ui/src/scss/styles.scss';
|
||||
@import '../scss/styles.scss';
|
||||
|
||||
.rich-text__button {
|
||||
position: relative;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../scss/styles.scss';
|
||||
|
||||
.rich-text-blockquote {
|
||||
&[data-slate-node='element'] {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../../scss/styles.scss';
|
||||
|
||||
.rich-text-link {
|
||||
position: relative;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../../scss/styles.scss';
|
||||
|
||||
.rich-text-link-edit-modal {
|
||||
&__template {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../scss/styles.scss';
|
||||
|
||||
.rich-text-ol {
|
||||
&[data-slate-node='element'] {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../../scss/styles.scss';
|
||||
|
||||
.relationship-rich-text-button {
|
||||
display: flex;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../../scss/styles.scss';
|
||||
|
||||
.rich-text-relationship {
|
||||
@extend %body;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../scss/styles.scss';
|
||||
|
||||
.rich-text-ul {
|
||||
&[data-slate-node='element'] {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../../scss/styles.scss';
|
||||
|
||||
.upload-rich-text-button {
|
||||
display: flex;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../../scss/styles.scss';
|
||||
|
||||
.rich-text-upload {
|
||||
@extend %body;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../scss/styles.scss';
|
||||
|
||||
.icon--indent-left {
|
||||
height: $baseline;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../scss/styles.scss';
|
||||
|
||||
.icon--indent-right {
|
||||
height: $baseline;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../scss/styles.scss';
|
||||
|
||||
.icon--link {
|
||||
width: $baseline;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../scss/styles.scss';
|
||||
|
||||
.icon--relationship {
|
||||
height: $baseline;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../ui/src/scss/styles.scss';
|
||||
@import '../../../scss/styles.scss';
|
||||
|
||||
.icon--upload {
|
||||
height: $baseline;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../ui/src/scss/styles.scss';
|
||||
@import '../scss/styles.scss';
|
||||
|
||||
.rich-text {
|
||||
margin-bottom: base(2);
|
||||
|
||||
209
packages/richtext-slate/src/scss/app.scss
Normal file
209
packages/richtext-slate/src/scss/app.scss
Normal file
@@ -0,0 +1,209 @@
|
||||
@import 'fonts';
|
||||
@import 'styles';
|
||||
@import './toastify.scss';
|
||||
@import './colors.scss';
|
||||
|
||||
:root {
|
||||
--base-px: 25;
|
||||
--base-body-size: 13;
|
||||
--base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
|
||||
|
||||
--breakpoint-xs-width: #{$breakpoint-xs-width};
|
||||
--breakpoint-s-width: #{$breakpoint-s-width};
|
||||
--breakpoint-m-width: #{$breakpoint-m-width};
|
||||
--breakpoint-l-width: #{$breakpoint-l-width};
|
||||
--scrollbar-width: 17px;
|
||||
|
||||
--theme-bg: var(--theme-elevation-0);
|
||||
--theme-input-bg: var(--theme-elevation-0);
|
||||
--theme-text: var(--theme-elevation-800);
|
||||
--theme-overlay: rgba(5, 5, 5, 0.5);
|
||||
--theme-baseline: #{$baseline-px};
|
||||
--theme-baseline-body-size: #{$baseline-body-size};
|
||||
--font-body: 'Suisse Intl', system-ui;
|
||||
--font-mono: monospace;
|
||||
--font-serif: 'Merriweather', serif;
|
||||
|
||||
--style-radius-s: #{$style-radius-s};
|
||||
--style-radius-m: #{$style-radius-m};
|
||||
--style-radius-l: #{$style-radius-l};
|
||||
|
||||
--z-popup: 10;
|
||||
--z-nav: 20;
|
||||
--z-modal: 30;
|
||||
--z-status: 40;
|
||||
|
||||
--accessibility-outline: 2px solid var(--theme-text);
|
||||
--accessibility-outline-offset: 2px;
|
||||
|
||||
--gutter-h: #{base(3)};
|
||||
--spacing-view-bottom: var(--gutter-h);
|
||||
--app-header-height: calc(var(--base) * 3);
|
||||
--doc-controls-height: calc(var(--base) * 3);
|
||||
--nav-width: 275px;
|
||||
--nav-trans-time: 150ms;
|
||||
|
||||
@include mid-break {
|
||||
--gutter-h: #{base(2)};
|
||||
--app-header-height: calc(var(--base) * 2);
|
||||
--doc-controls-height: calc(var(--base) * 2.5);
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
--gutter-h: #{base(0.5)};
|
||||
--spacing-view-bottom: calc(var(--base) * 2);
|
||||
--nav-width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
// GLOBAL STYLES
|
||||
/////////////////////////////
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
@extend %body;
|
||||
background: var(--theme-bg);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
opacity: 0;
|
||||
|
||||
&[data-theme='dark'],
|
||||
&[data-theme='light'] {
|
||||
opacity: initial;
|
||||
}
|
||||
|
||||
&[data-theme='dark'] {
|
||||
--theme-bg: var(--theme-elevation-0);
|
||||
--theme-text: var(--theme-elevation-1000);
|
||||
--theme-input-bg: var(--theme-elevation-50);
|
||||
--theme-overlay: rgba(5, 5, 5, 0.75);
|
||||
color-scheme: dark;
|
||||
|
||||
::selection {
|
||||
color: var(--color-base-1000);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
color: var(--color-base-1000);
|
||||
}
|
||||
}
|
||||
|
||||
@include mid-break {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-weight: 400;
|
||||
color: var(--theme-text);
|
||||
margin: 0;
|
||||
// this is for the nav to be able to push the document over
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--theme-success-500);
|
||||
color: var(--theme-base-800);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: var(--theme-success-500);
|
||||
color: var(--theme-base-800);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend %h1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend %h2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend %h3;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@extend %h4;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@extend %h5;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@extend %h6;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 $baseline;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: $baseline;
|
||||
margin: 0 0 $baseline;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: var(--accessibility-outline);
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
|
||||
&:focus {
|
||||
&:not(:focus-visible) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
dialog {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.payload__modal-item {
|
||||
min-height: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.payload__modal-container--enterDone {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.payload__modal-item--enter,
|
||||
.payload__modal-item--enterDone {
|
||||
z-index: var(--z-modal);
|
||||
}
|
||||
|
||||
// @import '~payload-user-css'; TODO: re-enable this
|
||||
269
packages/richtext-slate/src/scss/colors.scss
Normal file
269
packages/richtext-slate/src/scss/colors.scss
Normal file
@@ -0,0 +1,269 @@
|
||||
:root {
|
||||
--color-base-0: rgb(255, 255, 255);
|
||||
--color-base-50: rgb(245, 245, 245);
|
||||
--color-base-100: rgb(235, 235, 235);
|
||||
--color-base-150: rgb(221, 221, 221);
|
||||
--color-base-200: rgb(208, 208, 208);
|
||||
--color-base-250: rgb(195, 195, 195);
|
||||
--color-base-300: rgb(181, 181, 181);
|
||||
--color-base-350: rgb(168, 168, 168);
|
||||
--color-base-400: rgb(154, 154, 154);
|
||||
--color-base-450: rgb(141, 141, 141);
|
||||
--color-base-500: rgb(128, 128, 128);
|
||||
--color-base-550: rgb(114, 114, 114);
|
||||
--color-base-600: rgb(101, 101, 101);
|
||||
--color-base-650: rgb(87, 87, 87);
|
||||
--color-base-700: rgb(74, 74, 74);
|
||||
--color-base-750: rgb(60, 60, 60);
|
||||
--color-base-800: rgb(47, 47, 47);
|
||||
--color-base-850: rgb(34, 34, 34);
|
||||
--color-base-900: rgb(20, 20, 20);
|
||||
--color-base-950: rgb(7, 7, 7);
|
||||
--color-base-1000: rgb(0, 0, 0);
|
||||
|
||||
--color-success-50: rgb(247, 255, 251);
|
||||
--color-success-100: rgb(240, 255, 247);
|
||||
--color-success-150: rgb(232, 255, 243);
|
||||
--color-success-200: rgb(224, 255, 239);
|
||||
--color-success-250: rgb(217, 255, 235);
|
||||
--color-success-300: rgb(209, 255, 230);
|
||||
--color-success-350: rgb(201, 255, 226);
|
||||
--color-success-400: rgb(193, 255, 222);
|
||||
--color-success-450: rgb(186, 255, 218);
|
||||
--color-success-500: rgb(178, 255, 214);
|
||||
--color-success-550: rgb(160, 230, 193);
|
||||
--color-success-600: rgb(142, 204, 171);
|
||||
--color-success-650: rgb(125, 179, 150);
|
||||
--color-success-700: rgb(107, 153, 128);
|
||||
--color-success-750: rgb(89, 128, 107);
|
||||
--color-success-800: rgb(71, 102, 86);
|
||||
--color-success-850: rgb(53, 77, 64);
|
||||
--color-success-900: rgb(36, 51, 43);
|
||||
--color-success-950: rgb(18, 25, 21);
|
||||
|
||||
--color-warning-50: rgb(255, 255, 246);
|
||||
--color-warning-100: rgb(255, 255, 237);
|
||||
--color-warning-150: rgb(254, 255, 228);
|
||||
--color-warning-200: rgb(254, 255, 219);
|
||||
--color-warning-250: rgb(254, 255, 210);
|
||||
--color-warning-300: rgb(254, 255, 200);
|
||||
--color-warning-350: rgb(254, 255, 191);
|
||||
--color-warning-400: rgb(253, 255, 182);
|
||||
--color-warning-450: rgb(253, 255, 173);
|
||||
--color-warning-500: rgb(253, 255, 164);
|
||||
--color-warning-550: rgb(228, 230, 148);
|
||||
--color-warning-600: rgb(202, 204, 131);
|
||||
--color-warning-650: rgb(177, 179, 115);
|
||||
--color-warning-700: rgb(152, 153, 98);
|
||||
--color-warning-750: rgb(127, 128, 82);
|
||||
--color-warning-800: rgb(101, 102, 66);
|
||||
--color-warning-850: rgb(76, 77, 49);
|
||||
--color-warning-900: rgb(51, 51, 33);
|
||||
--color-warning-950: rgb(25, 25, 16);
|
||||
|
||||
--color-error-50: rgb(255, 241, 241);
|
||||
--color-error-100: rgb(255, 226, 228);
|
||||
--color-error-150: rgb(255, 212, 214);
|
||||
--color-error-200: rgb(255, 197, 200);
|
||||
--color-error-250: rgb(255, 183, 187);
|
||||
--color-error-300: rgb(255, 169, 173);
|
||||
--color-error-350: rgb(255, 154, 159);
|
||||
--color-error-400: rgb(255, 140, 145);
|
||||
--color-error-450: rgb(255, 125, 132);
|
||||
--color-error-500: rgb(255, 111, 118);
|
||||
--color-error-550: rgb(230, 100, 106);
|
||||
--color-error-600: rgb(204, 89, 94);
|
||||
--color-error-650: rgb(179, 78, 83);
|
||||
--color-error-700: rgb(153, 67, 71);
|
||||
--color-error-750: rgb(128, 56, 59);
|
||||
--color-error-800: rgb(102, 44, 47);
|
||||
--color-error-850: rgb(77, 33, 35);
|
||||
--color-error-900: rgb(51, 22, 24);
|
||||
--color-error-950: rgb(25, 11, 12);
|
||||
|
||||
--color-blue-50: rgb(230, 247, 253);
|
||||
--color-blue-100: rgb(204, 238, 252);
|
||||
--color-blue-150: rgb(179, 230, 250);
|
||||
--color-blue-200: rgb(153, 221, 249);
|
||||
--color-blue-250: rgb(128, 213, 247);
|
||||
--color-blue-300: rgb(102, 204, 245);
|
||||
--color-blue-350: rgb(77, 196, 244);
|
||||
--color-blue-400: rgb(51, 187, 242);
|
||||
--color-blue-450: rgb(25, 179, 241);
|
||||
--color-blue-500: rgb(0, 170, 239);
|
||||
--color-blue-550: rgb(0, 153, 215);
|
||||
--color-blue-600: rgb(0, 136, 191);
|
||||
--color-blue-650: rgb(0, 119, 167);
|
||||
--color-blue-700: rgb(0, 102, 143);
|
||||
--color-blue-750: rgb(0, 85, 120);
|
||||
--color-blue-800: rgb(0, 68, 96);
|
||||
--color-blue-850: rgb(0, 51, 72);
|
||||
--color-blue-900: rgb(0, 34, 48);
|
||||
--color-blue-950: rgb(0, 17, 24);
|
||||
|
||||
--theme-border-color: var(--theme-elevation-150);
|
||||
|
||||
--theme-success-50: var(--color-success-50);
|
||||
--theme-success-100: var(--color-success-100);
|
||||
--theme-success-150: var(--color-success-150);
|
||||
--theme-success-200: var(--color-success-200);
|
||||
--theme-success-250: var(--color-success-250);
|
||||
--theme-success-300: var(--color-success-300);
|
||||
--theme-success-350: var(--color-success-350);
|
||||
--theme-success-400: var(--color-success-400);
|
||||
--theme-success-450: var(--color-success-450);
|
||||
--theme-success-500: var(--color-success-500);
|
||||
--theme-success-550: var(--color-success-550);
|
||||
--theme-success-600: var(--color-success-600);
|
||||
--theme-success-650: var(--color-success-650);
|
||||
--theme-success-700: var(--color-success-700);
|
||||
--theme-success-750: var(--color-success-750);
|
||||
--theme-success-800: var(--color-success-800);
|
||||
--theme-success-850: var(--color-success-850);
|
||||
--theme-success-900: var(--color-success-900);
|
||||
--theme-success-950: var(--color-success-950);
|
||||
|
||||
--theme-warning-50: var(--color-warning-50);
|
||||
--theme-warning-100: var(--color-warning-100);
|
||||
--theme-warning-150: var(--color-warning-150);
|
||||
--theme-warning-200: var(--color-warning-200);
|
||||
--theme-warning-250: var(--color-warning-250);
|
||||
--theme-warning-300: var(--color-warning-300);
|
||||
--theme-warning-350: var(--color-warning-350);
|
||||
--theme-warning-400: var(--color-warning-400);
|
||||
--theme-warning-450: var(--color-warning-450);
|
||||
--theme-warning-500: var(--color-warning-500);
|
||||
--theme-warning-550: var(--color-warning-550);
|
||||
--theme-warning-600: var(--color-warning-600);
|
||||
--theme-warning-650: var(--color-warning-650);
|
||||
--theme-warning-700: var(--color-warning-700);
|
||||
--theme-warning-750: var(--color-warning-750);
|
||||
--theme-warning-800: var(--color-warning-800);
|
||||
--theme-warning-850: var(--color-warning-850);
|
||||
--theme-warning-900: var(--color-warning-900);
|
||||
--theme-warning-950: var(--color-warning-950);
|
||||
|
||||
--theme-error-50: var(--color-error-50);
|
||||
--theme-error-100: var(--color-error-100);
|
||||
--theme-error-150: var(--color-error-150);
|
||||
--theme-error-200: var(--color-error-200);
|
||||
--theme-error-250: var(--color-error-250);
|
||||
--theme-error-300: var(--color-error-300);
|
||||
--theme-error-350: var(--color-error-350);
|
||||
--theme-error-400: var(--color-error-400);
|
||||
--theme-error-450: var(--color-error-450);
|
||||
--theme-error-500: var(--color-error-500);
|
||||
--theme-error-550: var(--color-error-550);
|
||||
--theme-error-600: var(--color-error-600);
|
||||
--theme-error-650: var(--color-error-650);
|
||||
--theme-error-700: var(--color-error-700);
|
||||
--theme-error-750: var(--color-error-750);
|
||||
--theme-error-800: var(--color-error-800);
|
||||
--theme-error-850: var(--color-error-850);
|
||||
--theme-error-900: var(--color-error-900);
|
||||
--theme-error-950: var(--color-error-950);
|
||||
|
||||
--theme-elevation-0: var(--color-base-0);
|
||||
--theme-elevation-50: var(--color-base-50);
|
||||
--theme-elevation-100: var(--color-base-100);
|
||||
--theme-elevation-150: var(--color-base-150);
|
||||
--theme-elevation-200: var(--color-base-200);
|
||||
--theme-elevation-250: var(--color-base-250);
|
||||
--theme-elevation-300: var(--color-base-300);
|
||||
--theme-elevation-350: var(--color-base-350);
|
||||
--theme-elevation-400: var(--color-base-400);
|
||||
--theme-elevation-450: var(--color-base-450);
|
||||
--theme-elevation-500: var(--color-base-500);
|
||||
--theme-elevation-550: var(--color-base-550);
|
||||
--theme-elevation-600: var(--color-base-600);
|
||||
--theme-elevation-650: var(--color-base-650);
|
||||
--theme-elevation-700: var(--color-base-700);
|
||||
--theme-elevation-750: var(--color-base-750);
|
||||
--theme-elevation-800: var(--color-base-800);
|
||||
--theme-elevation-850: var(--color-base-850);
|
||||
--theme-elevation-900: var(--color-base-900);
|
||||
--theme-elevation-950: var(--color-base-950);
|
||||
--theme-elevation-1000: var(--color-base-1000);
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
--theme-border-color: var(--theme-elevation-150);
|
||||
|
||||
--theme-elevation-0: var(--color-base-900);
|
||||
--theme-elevation-50: var(--color-base-850);
|
||||
--theme-elevation-100: var(--color-base-800);
|
||||
--theme-elevation-150: var(--color-base-750);
|
||||
--theme-elevation-200: var(--color-base-700);
|
||||
--theme-elevation-250: var(--color-base-650);
|
||||
--theme-elevation-300: var(--color-base-600);
|
||||
--theme-elevation-350: var(--color-base-550);
|
||||
--theme-elevation-400: var(--color-base-450);
|
||||
--theme-elevation-450: var(--color-base-400);
|
||||
--theme-elevation-550: var(--color-base-350);
|
||||
--theme-elevation-600: var(--color-base-300);
|
||||
--theme-elevation-650: var(--color-base-250);
|
||||
--theme-elevation-700: var(--color-base-200);
|
||||
--theme-elevation-750: var(--color-base-150);
|
||||
--theme-elevation-800: var(--color-base-100);
|
||||
--theme-elevation-850: var(--color-base-50);
|
||||
--theme-elevation-900: var(--color-base-0);
|
||||
--theme-elevation-950: var(--color-base-0);
|
||||
--theme-elevation-1000: var(--color-base-0);
|
||||
|
||||
--theme-success-50: var(--color-success-950);
|
||||
--theme-success-100: var(--color-success-900);
|
||||
--theme-success-150: var(--color-success-850);
|
||||
--theme-success-200: var(--color-success-800);
|
||||
--theme-success-250: var(--color-success-750);
|
||||
--theme-success-300: var(--color-success-700);
|
||||
--theme-success-350: var(--color-success-650);
|
||||
--theme-success-400: var(--color-success-600);
|
||||
--theme-success-450: var(--color-success-550);
|
||||
--theme-success-550: var(--color-success-450);
|
||||
--theme-success-600: var(--color-success-400);
|
||||
--theme-success-650: var(--color-success-350);
|
||||
--theme-success-700: var(--color-success-300);
|
||||
--theme-success-750: var(--color-success-250);
|
||||
--theme-success-800: var(--color-success-200);
|
||||
--theme-success-850: var(--color-success-150);
|
||||
--theme-success-900: var(--color-success-100);
|
||||
--theme-success-950: var(--color-success-50);
|
||||
|
||||
--theme-warning-50: var(--color-warning-950);
|
||||
--theme-warning-100: var(--color-warning-900);
|
||||
--theme-warning-150: var(--color-warning-850);
|
||||
--theme-warning-200: var(--color-warning-800);
|
||||
--theme-warning-250: var(--color-warning-750);
|
||||
--theme-warning-300: var(--color-warning-700);
|
||||
--theme-warning-350: var(--color-warning-650);
|
||||
--theme-warning-400: var(--color-warning-600);
|
||||
--theme-warning-450: var(--color-warning-550);
|
||||
--theme-warning-550: var(--color-warning-450);
|
||||
--theme-warning-600: var(--color-warning-400);
|
||||
--theme-warning-650: var(--color-warning-350);
|
||||
--theme-warning-700: var(--color-warning-300);
|
||||
--theme-warning-750: var(--color-warning-250);
|
||||
--theme-warning-800: var(--color-warning-200);
|
||||
--theme-warning-850: var(--color-warning-150);
|
||||
--theme-warning-900: var(--color-warning-100);
|
||||
--theme-warning-950: var(--color-warning-50);
|
||||
|
||||
--theme-error-50: var(--color-error-950);
|
||||
--theme-error-100: var(--color-error-900);
|
||||
--theme-error-150: var(--color-error-850);
|
||||
--theme-error-200: var(--color-error-800);
|
||||
--theme-error-250: var(--color-error-750);
|
||||
--theme-error-300: var(--color-error-700);
|
||||
--theme-error-350: var(--color-error-650);
|
||||
--theme-error-400: var(--color-error-600);
|
||||
--theme-error-450: var(--color-error-550);
|
||||
--theme-error-550: var(--color-error-450);
|
||||
--theme-error-600: var(--color-error-400);
|
||||
--theme-error-650: var(--color-error-350);
|
||||
--theme-error-700: var(--color-error-300);
|
||||
--theme-error-750: var(--color-error-250);
|
||||
--theme-error-800: var(--color-error-200);
|
||||
--theme-error-850: var(--color-error-150);
|
||||
--theme-error-900: var(--color-error-100);
|
||||
--theme-error-950: var(--color-error-50);
|
||||
}
|
||||
1
packages/richtext-slate/src/scss/custom.css
Normal file
1
packages/richtext-slate/src/scss/custom.css
Normal file
@@ -0,0 +1 @@
|
||||
/* Used as a placeholder for when the Payload app does not have custom CSS */
|
||||
75
packages/richtext-slate/src/scss/fonts.scss
Normal file
75
packages/richtext-slate/src/scss/fonts.scss
Normal file
@@ -0,0 +1,75 @@
|
||||
@font-face {
|
||||
font-family: 'Suisse Intl';
|
||||
src:
|
||||
url('../assets/fonts/SuisseIntl.woff2') format('woff2'),
|
||||
url('../assets/fonts/SuisseIntl.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Suisse Intl';
|
||||
src:
|
||||
url('../assets/fonts/SuisseIntl-Medium.woff2') format('woff2'),
|
||||
url('../assets/fonts/SuisseIntl-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Suisse Intl';
|
||||
src:
|
||||
url('../assets/fonts/SuisseIntl-SemiBold.woff2') format('woff2'),
|
||||
url('../assets/fonts/SuisseIntl-SemiBold.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Suisse Intl';
|
||||
src:
|
||||
url('../assets/fonts/SuisseIntl-Bold.woff2') format('woff2'),
|
||||
url('../assets/fonts/SuisseIntl-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Merriweather';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src:
|
||||
local(''),
|
||||
url('../assets/fonts/merriweather-v30-latin-regular.woff2') format('woff2'),
|
||||
url('../assets/fonts/merriweather-v30-latin-regular.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Merriweather';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src:
|
||||
local(''),
|
||||
url('../assets/fonts/merriweather-v30-latin-italic.woff2') format('woff2'),
|
||||
url('../assets/fonts/merriweather-v30-latin-italic.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Merriweather';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src:
|
||||
local(''),
|
||||
url('../assets/fonts/merriweather-v30-latin-900.woff2') format('woff2'),
|
||||
url('../assets/fonts/merriweather-v30-latin-900.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Merriweather';
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
src:
|
||||
local(''),
|
||||
url('../assets/fonts/merriweather-v30-latin-900italic.woff2') format('woff2'),
|
||||
url('../assets/fonts/merriweather-v30-latin-900italic.woff') format('woff');
|
||||
}
|
||||
27
packages/richtext-slate/src/scss/queries.scss
Normal file
27
packages/richtext-slate/src/scss/queries.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
////////////////////////////
|
||||
// MEDIA QUERIES
|
||||
/////////////////////////////
|
||||
|
||||
@mixin extra-small-break {
|
||||
@media (max-width: $breakpoint-xs-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin small-break {
|
||||
@media (max-width: $breakpoint-s-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mid-break {
|
||||
@media (max-width: $breakpoint-m-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin large-break {
|
||||
@media (max-width: $breakpoint-l-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
17
packages/richtext-slate/src/scss/resets.scss
Normal file
17
packages/richtext-slate/src/scss/resets.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
%btn-reset {
|
||||
border: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
@mixin btn-reset {
|
||||
border: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
color: currentColor;
|
||||
}
|
||||
11
packages/richtext-slate/src/scss/styles.scss
Normal file
11
packages/richtext-slate/src/scss/styles.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
@import 'vars';
|
||||
@import 'z-index';
|
||||
|
||||
//////////////////////////////
|
||||
// IMPORT OVERRIDES
|
||||
//////////////////////////////
|
||||
|
||||
@import 'type';
|
||||
@import 'queries';
|
||||
@import 'resets';
|
||||
@import 'svg';
|
||||
10
packages/richtext-slate/src/scss/svg.scss
Normal file
10
packages/richtext-slate/src/scss/svg.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
@mixin color-svg($color) {
|
||||
.stroke {
|
||||
stroke: $color;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.fill {
|
||||
fill: $color;
|
||||
}
|
||||
}
|
||||
59
packages/richtext-slate/src/scss/toastify.scss
Normal file
59
packages/richtext-slate/src/scss/toastify.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
@import 'vars';
|
||||
@import '../../node_modules/react-toastify/dist/ReactToastify.css';
|
||||
|
||||
.Toastify {
|
||||
.Toastify__toast-container {
|
||||
left: base(5);
|
||||
transform: none;
|
||||
right: base(5);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.Toastify__toast {
|
||||
padding: base(0.5);
|
||||
border-radius: $style-radius-m;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.Toastify__close-button {
|
||||
align-self: center;
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.Toastify__toast--success {
|
||||
color: var(--color-success-900);
|
||||
background: var(--color-success-500);
|
||||
|
||||
.Toastify__progress-bar {
|
||||
background-color: var(--color-success-900);
|
||||
}
|
||||
}
|
||||
|
||||
.Toastify__close-button--success {
|
||||
color: var(--color-success-900);
|
||||
}
|
||||
|
||||
.Toastify__toast--error {
|
||||
background: var(--theme-error-500);
|
||||
color: #fff;
|
||||
|
||||
.Toastify__progress-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.Toastify__close-button--light {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@include mid-break {
|
||||
.Toastify__toast-container {
|
||||
left: $baseline;
|
||||
right: $baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
117
packages/richtext-slate/src/scss/type.scss
Normal file
117
packages/richtext-slate/src/scss/type.scss
Normal file
@@ -0,0 +1,117 @@
|
||||
@import 'vars';
|
||||
@import 'queries';
|
||||
|
||||
/////////////////////////////
|
||||
// HEADINGS
|
||||
/////////////////////////////
|
||||
|
||||
%h1,
|
||||
%h2,
|
||||
%h3,
|
||||
%h4,
|
||||
%h5,
|
||||
%h6 {
|
||||
font-family: var(--font-body);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
%jumbo {
|
||||
font-size: base(2.5);
|
||||
line-height: 1;
|
||||
margin: 0 0 base(2);
|
||||
}
|
||||
|
||||
%h1 {
|
||||
margin: 0 0 base(1);
|
||||
font-size: base(2);
|
||||
line-height: 1.15;
|
||||
letter-spacing: -1px;
|
||||
|
||||
@include small-break {
|
||||
letter-spacing: -0.5px;
|
||||
font-size: base(1.25);
|
||||
}
|
||||
}
|
||||
|
||||
%h2 {
|
||||
margin: 0 0 base(1);
|
||||
font-size: base(1.25);
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.5px;
|
||||
|
||||
@include small-break {
|
||||
font-size: base(0.85);
|
||||
}
|
||||
}
|
||||
|
||||
%h3 {
|
||||
margin: 0 0 base(1);
|
||||
font-size: base(0.925);
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.5px;
|
||||
|
||||
@include small-break {
|
||||
font-size: base(0.65);
|
||||
line-height: 1.25;
|
||||
}
|
||||
}
|
||||
|
||||
%h4 {
|
||||
margin: 0 0 $baseline;
|
||||
font-size: base(0.75);
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.375px;
|
||||
}
|
||||
|
||||
%h5 {
|
||||
margin: 0;
|
||||
font-size: base(0.5625);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
%h6 {
|
||||
margin: 0;
|
||||
font-size: base(0.5);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
%small {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
// TYPE STYLES
|
||||
/////////////////////////////
|
||||
|
||||
%large-body {
|
||||
font-size: base(0.6);
|
||||
line-height: base(1);
|
||||
letter-spacing: base(0.02);
|
||||
|
||||
@include mid-break {
|
||||
font-size: base(0.7);
|
||||
line-height: base(1);
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
font-size: base(0.55);
|
||||
line-height: base(0.75);
|
||||
}
|
||||
}
|
||||
|
||||
%body {
|
||||
font-size: $baseline-body-size;
|
||||
line-height: $baseline-px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
%code {
|
||||
font-size: base(0.4);
|
||||
color: var(--theme-elevation-400);
|
||||
|
||||
span {
|
||||
color: var(--theme-elevation-800);
|
||||
}
|
||||
}
|
||||
220
packages/richtext-slate/src/scss/vars.scss
Normal file
220
packages/richtext-slate/src/scss/vars.scss
Normal file
@@ -0,0 +1,220 @@
|
||||
@use 'sass:math';
|
||||
|
||||
/////////////////////////////
|
||||
// BREAKPOINTS
|
||||
/////////////////////////////
|
||||
|
||||
$breakpoint-xs-width: 400px !default;
|
||||
$breakpoint-s-width: 768px !default;
|
||||
$breakpoint-m-width: 1024px !default;
|
||||
$breakpoint-l-width: 1440px !default;
|
||||
|
||||
//////////////////////////////
|
||||
// BASELINE GRID
|
||||
//////////////////////////////
|
||||
|
||||
$baseline-px: 25px !default;
|
||||
$baseline-body-size: 13px !default;
|
||||
$baseline: math.div($baseline-px, $baseline-body-size) + rem;
|
||||
|
||||
@function base($multiplier) {
|
||||
@return (math.div($baseline-px, $baseline-body-size) * $multiplier) + rem;
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// FONTS (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
|
||||
//////////////////////////////
|
||||
|
||||
$font-body: 'Suisse Intl' !default;
|
||||
$font-mono: monospace !default;
|
||||
|
||||
//////////////////////////////
|
||||
// COLORS (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
|
||||
//////////////////////////////
|
||||
|
||||
$color-dark-gray: #333333 !default;
|
||||
$color-gray: #9a9a9a !default;
|
||||
$color-light-gray: #dadada !default;
|
||||
$color-background-gray: #f3f3f3 !default;
|
||||
$color-red: #ff6f76 !default;
|
||||
$color-yellow: #fdffa4 !default;
|
||||
$color-green: #b2ffd6 !default;
|
||||
$color-purple: #f3ddf3 !default;
|
||||
|
||||
//////////////////////////////
|
||||
// STYLES
|
||||
//////////////////////////////
|
||||
|
||||
$style-radius-s: 3px !default;
|
||||
$style-radius-m: 4px !default;
|
||||
$style-radius-l: 9px !default;
|
||||
$style-stroke-width: 1px !default;
|
||||
|
||||
$style-stroke-width-s: 1px !default;
|
||||
$style-stroke-width-m: 2px !default;
|
||||
|
||||
//////////////////////////////
|
||||
// MISC
|
||||
//////////////////////////////
|
||||
|
||||
$top-header-offset: calc(var(--base) - 1px);
|
||||
$top-header-offset-m: calc(var(--base) * 3);
|
||||
$focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
|
||||
|
||||
//////////////////////////////
|
||||
// SHADOWS
|
||||
//////////////////////////////
|
||||
|
||||
@mixin shadow-sm {
|
||||
box-shadow:
|
||||
0 2px 3px 0 rgba(0, 2, 4, 0.05),
|
||||
0 10px 4px -8px rgba(0, 2, 4, 0.02);
|
||||
}
|
||||
|
||||
@mixin shadow-m {
|
||||
box-shadow:
|
||||
0 0 30px 0 rgb(0 2 4 / 12%),
|
||||
0 30px 25px -8px rgb(0 2 4 / 10%);
|
||||
}
|
||||
|
||||
@mixin shadow-lg {
|
||||
box-shadow:
|
||||
0 20px 35px -10px rgba(0, 2, 4, 0.2),
|
||||
0 6px 4px -4px rgba(0, 2, 4, 0.02);
|
||||
}
|
||||
|
||||
@mixin shadow-lg-top {
|
||||
box-shadow:
|
||||
0 -20px 35px -10px rgba(0, 2, 4, 0.2),
|
||||
0 -6px 4px -4px rgba(0, 2, 4, 0.02);
|
||||
}
|
||||
|
||||
@mixin shadow {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin inputShadowActive {
|
||||
box-shadow:
|
||||
0 2px 3px 0 rgba(0, 2, 4, 0.16),
|
||||
0 6px 4px -4px rgba(0, 2, 4, 0.13);
|
||||
}
|
||||
|
||||
@mixin inputShadow {
|
||||
@include shadow-sm;
|
||||
|
||||
&:not(:disabled) {
|
||||
&:hover {
|
||||
box-shadow:
|
||||
0 2px 3px 0 rgba(0, 2, 4, 0.13),
|
||||
0 6px 4px -4px rgba(0, 2, 4, 0.1);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus-within,
|
||||
&:focus {
|
||||
@include inputShadowActive;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin soft-shadow-bottom {
|
||||
box-shadow: 0 7px 14px 0px rgb(0 0 0 / 5%);
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// STYLE MIXINS
|
||||
//////////////////////////////
|
||||
|
||||
@mixin blur-bg($color: var(--theme-bg), $opacity: 0.75) {
|
||||
&:before,
|
||||
&:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
background: $color;
|
||||
opacity: $opacity;
|
||||
}
|
||||
|
||||
&:after {
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin blur-bg-light {
|
||||
@include blur-bg(var(--theme-bg), 0.3);
|
||||
}
|
||||
|
||||
@mixin formInput() {
|
||||
@include inputShadow;
|
||||
font-family: var(--font-body);
|
||||
width: 100%;
|
||||
border: 1px solid var(--theme-elevation-150);
|
||||
background: var(--theme-input-bg);
|
||||
color: var(--theme-elevation-800);
|
||||
border-radius: 0;
|
||||
font-size: 1rem;
|
||||
height: base(2);
|
||||
line-height: base(1);
|
||||
padding: base(0.5) base(0.75);
|
||||
-webkit-appearance: none;
|
||||
|
||||
&[data-rtl='true'] {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: var(--theme-elevation-400);
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
color: var(--theme-elevation-400);
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--theme-elevation-250);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-within,
|
||||
&:active {
|
||||
border-color: var(--theme-elevation-400);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: var(--theme-elevation-200);
|
||||
color: var(--theme-elevation-450);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--theme-elevation-150);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lightInputError {
|
||||
background-color: var(--theme-error-50);
|
||||
border: 1px solid var(--theme-error-500);
|
||||
}
|
||||
|
||||
@mixin darkInputError {
|
||||
background-color: var(--theme-error-100);
|
||||
border: 1px solid var(--theme-error-400);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--theme-error-500);
|
||||
}
|
||||
}
|
||||
9
packages/richtext-slate/src/scss/z-index.scss
Normal file
9
packages/richtext-slate/src/scss/z-index.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
/////////////////////////////
|
||||
// Z-INDEX CHART (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
|
||||
/////////////////////////////
|
||||
|
||||
$z-page: 20;
|
||||
$z-page-content: 30;
|
||||
$z-nav: 40;
|
||||
$z-modal: 50;
|
||||
$z-status: 60;
|
||||
@@ -1,10 +1,10 @@
|
||||
import {
|
||||
AlignFeature,
|
||||
BlockQuoteFeature,
|
||||
BlocksFeature,
|
||||
LinkFeature,
|
||||
lexicalEditor,
|
||||
} from '@payloadcms/richtext-lexical'
|
||||
// import {
|
||||
// AlignFeature,
|
||||
// BlockQuoteFeature,
|
||||
// BlocksFeature,
|
||||
// LinkFeature,
|
||||
// lexicalEditor,
|
||||
// } from '@payloadcms/richtext-lexical'
|
||||
import path from 'path'
|
||||
|
||||
import type { Config, SanitizedConfig } from '../packages/payload/src/config/types'
|
||||
@@ -12,7 +12,7 @@ import type { Config, SanitizedConfig } from '../packages/payload/src/config/typ
|
||||
import { mongooseAdapter } from '../packages/db-mongodb/src'
|
||||
import { postgresAdapter } from '../packages/db-postgres/src'
|
||||
import { buildConfig as buildPayloadConfig } from '../packages/payload/src/config/build'
|
||||
//import { slateEditor } from '../packages/richtext-slate/src'
|
||||
import { slateEditor } from '../packages/richtext-slate/src'
|
||||
|
||||
// process.env.PAYLOAD_DATABASE = 'postgres'
|
||||
|
||||
@@ -62,7 +62,7 @@ export function buildConfigWithDefaults(testConfig?: Partial<Config>): Promise<S
|
||||
const config: Config = {
|
||||
db: databaseAdapters[process.env.PAYLOAD_DATABASE || 'mongoose'],
|
||||
secret: 'TEST_SECRET',
|
||||
/*editor: slateEditor({
|
||||
editor: slateEditor({
|
||||
admin: {
|
||||
upload: {
|
||||
collections: {
|
||||
@@ -77,31 +77,31 @@ export function buildConfigWithDefaults(testConfig?: Partial<Config>): Promise<S
|
||||
},
|
||||
},
|
||||
},
|
||||
}),*/
|
||||
editor: lexicalEditor({
|
||||
features: [
|
||||
LinkFeature({}),
|
||||
AlignFeature(),
|
||||
BlockQuoteFeature(),
|
||||
BlocksFeature({
|
||||
blocks: [
|
||||
{
|
||||
slug: 'myBlock',
|
||||
fields: [
|
||||
{
|
||||
name: 'title',
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
name: 'content',
|
||||
type: 'textarea',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
// editor: lexicalEditor({
|
||||
// features: [
|
||||
// LinkFeature({}),
|
||||
// AlignFeature(),
|
||||
// BlockQuoteFeature(),
|
||||
// BlocksFeature({
|
||||
// blocks: [
|
||||
// {
|
||||
// slug: 'myBlock',
|
||||
// fields: [
|
||||
// {
|
||||
// name: 'title',
|
||||
// type: 'text',
|
||||
// },
|
||||
// {
|
||||
// name: 'content',
|
||||
// type: 'textarea',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// }),
|
||||
// ],
|
||||
// }),
|
||||
rateLimit: {
|
||||
max: 9999999999,
|
||||
window: 15 * 60 * 1000, // 15min default,
|
||||
|
||||
Reference in New Issue
Block a user