tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: more maintainable colors

Browse Source
This commit is contained in:
James
2022-07-14 15:20:34 -07:00
parent 41a0ba5780
commit 5fc4f3adad
30 changed files with 402 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/admin/components/elements/Banner/index.scss
View File

@@ -37,34 +37,34 @@
} }
&--type-error { &--type-error {
background: var(--color-error-100); background: var(--theme-error-100);
color: var(--color-error-500); color: var(--theme-error-500);
svg { svg {
@include color-svg(var(--color-error-500)); @include color-svg(var(--theme-error-500));
} }
&.button--has-action { &.button--has-action {
&:hover { &:hover {
background: var(--color-error-200); background: var(--theme-error-200);
} }
&:active { &:active {
background: var(--color-error-300); background: var(--theme-error-300);
} }
} }
} }
&--type-success { &--type-success {
background: var(--color-success-500); background: var(--theme-success-500);
&.button--has-action { &.button--has-action {
&:hover { &:hover {
background: var(--color-success-200); background: var(--theme-success-200);
} }
&:active { &:active {
background: var(--color-success-200); background: var(--theme-success-200);
} }
} }
} }

2
src/admin/components/elements/DatePicker/index.scss
View File

@@ -93,7 +93,7 @@ $cal-icon-width: 18px;
&--has-error { &--has-error {
.react-datepicker__input-container input { .react-datepicker__input-container input {
background-color: var(--color-error-200); background-color: var(--theme-error-200);
} }
} }

4
src/admin/components/elements/Pill/index.scss
View File

@@ -69,11 +69,11 @@
} }
&--style-warning { &--style-warning {
background: var(--color-warning-500); background: var(--theme-warning-500);
} }
&--style-success { &--style-success {
background: var(--color-success-500); background: var(--theme-success-500);
} }
&--style-dark { &--style-dark {

4
src/admin/components/elements/ReactSelect/index.scss
View File

@@ -103,13 +103,13 @@ div.react-select {
&:hover { &:hover {
color: var(--theme-elevation-800); color: var(--theme-elevation-800);
background: var(--color-error-150); background: var(--theme-error-150);
} }
} }
&--error { &--error {
div.rs__control { div.rs__control {
background-color: var(--color-error-200); background-color: var(--theme-error-200);
} }
} }
} }

4
src/admin/components/elements/WhereBuilder/Condition/Relationship/index.scss
View File

@@ -2,10 +2,10 @@
.condition-value-relationship { .condition-value-relationship {
&__error-loading { &__error-loading {
border: 1px solid var(--color-error-500); border: 1px solid var(--theme-error-500);
min-height: base(2); min-height: base(2);
padding: base(.5) base(.75); padding: base(.5) base(.75);
background-color: var(--color-error-500); background-color: var(--theme-error-500);
color: var(--theme-elevation-0); color: var(--theme-elevation-0);
} }
} }

4
src/admin/components/forms/Error/index.scss
View File

@@ -6,9 +6,9 @@
left: auto; left: auto;
right: base(.5); right: base(.5);
transform: none; transform: none;
background-color: var(--color-error-500); background-color: var(--theme-error-500);
span { span {
border-top-color: var(--color-error-500); border-top-color: var(--theme-error-500);
} }
} }

2
src/admin/components/forms/Label/index.scss
View File

@@ -6,7 +6,7 @@ label.field-label {
color: var(--theme-elevation-800); color: var(--theme-elevation-800);
.required { .required {
color: var(--color-error-500); color: var(--theme-error-500);
margin-left: base(.25); margin-left: base(.25);
margin-right: auto; margin-right: auto;
} }

4
src/admin/components/forms/field-types/Code/Code.tsx
View File

@@ -88,8 +88,8 @@ const Code: React.FC<Props> = (props) => {
highlight={highlighter} highlight={highlighter}
padding={25} padding={25}
style={{ style={{
backgroundColor: 'var(--color-base-850)', backgroundColor: 'var(--theme-base-850)',
color: 'var(--color-base-0)', color: 'var(--theme-base-0)',
fontFamily: '"Consolas", "Monaco", monospace', fontFamily: '"Consolas", "Monaco", monospace',
fontSize: 12, fontSize: 12,
pointerEvents: readOnly ? 'none' : 'auto', pointerEvents: readOnly ? 'none' : 'auto',

4
src/admin/components/forms/field-types/Code/index.scss
View File

@@ -6,7 +6,7 @@
&.error { &.error {
textarea { textarea {
border: 1px solid var(--color-error-500) !important; border: 1px solid var(--theme-error-500) !important;
} }
} }
} }
@@ -49,7 +49,7 @@ pre[class*="language-"] {
:not(pre)>code[class*="language-"], :not(pre)>code[class*="language-"],
pre[class*="language-"] { pre[class*="language-"] {
background: var(--color-base-100); background: var(--theme-base-100);
} }
/* Inline code */ /* Inline code */

2
src/admin/components/forms/field-types/ConfirmPassword/index.scss
View File

@@ -10,7 +10,7 @@
&.error { &.error {
input { input {
background-color: var(--color-error-200); background-color: var(--theme-error-200);
} }
} }
} }

2
src/admin/components/forms/field-types/DateTime/index.scss
View File

@@ -9,7 +9,7 @@
&--has-error { &--has-error {
.react-datepicker__input-container input { .react-datepicker__input-container input {
background-color: var(--color-error-200); background-color: var(--theme-error-200);
} }
} }
} }

2
src/admin/components/forms/field-types/Email/index.scss
View File

@@ -10,7 +10,7 @@
&.error { &.error {
input { input {
background-color: var(--color-error-200); background-color: var(--theme-error-200);
} }
} }
} }

2
src/admin/components/forms/field-types/Number/index.scss
View File

@@ -10,7 +10,7 @@
&.error { &.error {
input { input {
background-color: var(--color-error-200); background-color: var(--theme-error-200);
} }
} }
} }

2
src/admin/components/forms/field-types/Password/index.scss
View File

@@ -10,7 +10,7 @@
&.error { &.error {
input { input {
background-color: var(--color-error-200); background-color: var(--theme-error-200);
} }
} }
} }

2
src/admin/components/forms/field-types/Point/index.scss
View File

@@ -24,7 +24,7 @@
&.error { &.error {
input { input {
background-color: var(--color-error-200); background-color: var(--theme-error-200);
} }
} }
} }

4
src/admin/components/forms/field-types/Relationship/index.scss
View File

@@ -6,10 +6,10 @@
} }
.relationship__error-loading { .relationship__error-loading {
border: 1px solid var(--color-error-500); border: 1px solid var(--theme-error-500);
min-height: base(2); min-height: base(2);
padding: base(.5) base(.75); padding: base(.5) base(.75);
background-color: var(--color-error-500); background-color: var(--theme-error-500);
color: var(--theme-elevation-0); color: var(--theme-elevation-0);
} }

1
src/admin/components/forms/field-types/RichText/elements/link/index.tsx
View File

@@ -47,7 +47,6 @@ const Link = ({ attributes, children, element, editorRef }) => {
initActive={element.url === undefined} initActive={element.url === undefined}
buttonType="none" buttonType="none"
size="small" size="small"
color={theme === 'dark' ? 'light' : 'dark'}
horizontalAlign="center" horizontalAlign="center"
forceOpen={open} forceOpen={open}
onToggleOpen={handleToggleOpen} onToggleOpen={handleToggleOpen}

2
src/admin/components/forms/field-types/Text/index.scss
View File

@@ -10,7 +10,7 @@
&.error { &.error {
input { input {
background-color: var(--color-error-200); background-color: var(--theme-error-200);
} }
} }
} }

2
src/admin/components/forms/field-types/Textarea/index.scss
View File

@@ -12,7 +12,7 @@
&.error { &.error {
textarea { textarea {
background-color: var(--color-error-200); background-color: var(--theme-error-200);
} }
} }
} }

4
src/admin/components/views/Version/Compare/index.scss
View File

@@ -2,10 +2,10 @@
.compare-version { .compare-version {
&__error-loading { &__error-loading {
border: 1px solid var(--color-error-500); border: 1px solid var(--theme-error-500);
min-height: base(2); min-height: base(2);
padding: base(.5) base(.75); padding: base(.5) base(.75);
background-color: var(--color-error-500); background-color: var(--theme-error-500);
color: var(--theme-elevation-0); color: var(--theme-elevation-0);
} }

12
src/admin/components/views/Version/RenderFieldsToDiff/fields/styles.ts
View File

@@ -2,12 +2,12 @@ export const diffStyles = {
variables: { variables: {
light: { light: {
diffViewerBackground: 'transparent', diffViewerBackground: 'transparent',
addedBackground: 'var(--color-success-100)', addedBackground: 'var(--theme-success-100)',
addedColor: 'var(--color-success-900)', addedColor: 'var(--theme-success-900)',
removedBackground: 'var(--color-error-100)', removedBackground: 'var(--theme-error-100)',
removedColor: 'var(--color-error-900)', removedColor: 'var(--theme-error-900)',
wordAddedBackground: 'var(--color-success-200)', wordAddedBackground: 'var(--theme-success-200)',
wordRemovedBackground: 'var(--color-error-200)', wordRemovedBackground: 'var(--theme-error-200)',
}, },
}, },
}; };

2
src/admin/components/views/collections/Edit/Auth/index.scss
View File

@@ -25,7 +25,7 @@
@keyframes highlight { @keyframes highlight {
0% { 0% {
background: var(--color-success-500); background: var(--theme-success-500);
} }
100% { 100% {

4
src/admin/components/views/collections/Edit/Upload/index.scss
View File

@@ -52,8 +52,8 @@
&--dragging { &--dragging {
.file-field__drop-zone { .file-field__drop-zone {
border-color: var(--color-success-500); border-color: var(--theme-success-500);
background: var(--color-success-150); background: var(--theme-success-150);
} }
} }

204
src/admin/scss/app.scss
View File

@@ -1,6 +1,7 @@
@import 'fonts'; @import 'fonts';
@import 'styles'; @import 'styles';
@import './toastify.scss'; @import './toastify.scss';
@import './colors.scss';
:root { :root {
--breakpoint-xs-width : #{$breakpoint-xs-width}; --breakpoint-xs-width : #{$breakpoint-xs-width};
@@ -10,113 +11,9 @@
--z-modal: #{$z-modal}; --z-modal: #{$z-modal};
--scrollbar-width: 17px; --scrollbar-width: 17px;
--color-base-0: rgb(255, 255, 255); --theme-bg: var(--theme-base-0);
--color-base-50: rgb(245, 245, 245); --theme-input-bg: var(--theme-base-0);
--color-base-100: rgb(235, 235, 235); --theme-text: var(--theme-base-800);
--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);
--theme-bg: var(--color-base-0);
--theme-input-bg: var(--color-base-0);
--theme-text: var(--color-base-800);
--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);
--font-body: 'Suisse Intl', system-ui; --font-body: 'Suisse Intl', system-ui;
--font-mono: monospace; --font-mono: monospace;
@@ -151,97 +48,16 @@ html {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
&[data-theme=dark] { &[data-theme=dark] {
--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);
--color-success-50: rgb(18, 25, 21);
--color-success-100: rgb(36, 51, 43);
--color-success-150: rgb(53, 77, 64);
--color-success-200: rgb(71, 102, 86);
--color-success-250: rgb(89, 128, 107);
--color-success-300: rgb(107, 153, 128);
--color-success-350: rgb(125, 179, 150);
--color-success-400: rgb(142, 204, 171);
--color-success-450: rgb(160, 230, 193);
--color-success-500: rgb(178, 255, 214);
--color-success-550: rgb(186, 255, 218);
--color-success-600: rgb(193, 255, 222);
--color-success-650: rgb(201, 255, 226);
--color-success-700: rgb(209, 255, 230);
--color-success-750: rgb(217, 255, 235);
--color-success-800: rgb(224, 255, 239);
--color-success-850: rgb(232, 255, 243);
--color-success-900: rgb(240, 255, 247);
--color-success-950: rgb(247, 255, 251);
--color-warning-50: rgb(25, 25, 16);
--color-warning-100: rgb(51, 51, 33);
--color-warning-150: rgb(76, 77, 49);
--color-warning-200: rgb(101, 102, 66);
--color-warning-250: rgb(127, 128, 82);
--color-warning-300: rgb(152, 153, 98);
--color-warning-350: rgb(177, 179, 115);
--color-warning-400: rgb(202, 204, 131);
--color-warning-450: rgb(228, 230, 148);
--color-warning-500: rgb(253, 255, 164);
--color-warning-550: rgb(253, 255, 173);
--color-warning-600: rgb(253, 255, 182);
--color-warning-650: rgb(254, 255, 191);
--color-warning-700: rgb(254, 255, 200);
--color-warning-750: rgb(254, 255, 210);
--color-warning-800: rgb(254, 255, 219);
--color-warning-850: rgb(254, 255, 228);
--color-warning-900: rgb(255, 255, 237);
--color-warning-950: rgb(255, 255, 246);
--color-error-50: rgb(25, 11, 12);
--color-error-100: rgb(51, 22, 24);
--color-error-150: rgb(77, 33, 35);
--color-error-200: rgb(102, 44, 47);
--color-error-250: rgb(128, 56, 59);
--color-error-300: rgb(153, 67, 71);
--color-error-350: rgb(179, 78, 83);
--color-error-400: rgb(204, 89, 94);
--color-error-450: rgb(230, 100, 106);
--color-error-500: rgb(255, 111, 118);
--color-error-550: rgb(255, 125, 132);
--color-error-600: rgb(255, 140, 145);
--color-error-650: rgb(255, 154, 159);
--color-error-700: rgb(255, 169, 173);
--color-error-750: rgb(255, 183, 187);
--color-error-800: rgb(255, 197, 200);
--color-error-850: rgb(255, 212, 214);
--color-error-900: rgb(255, 226, 228);
--color-error-950: rgb(255, 241, 241);
--theme-bg: var(--theme-elevation-0); --theme-bg: var(--theme-elevation-0);
--theme-text: var(--theme-elevation-1000); --theme-text: var(--theme-elevation-1000);
--theme-input-bg: var(--theme-elevation-50); --theme-input-bg: var(--theme-elevation-50);
::selection { ::selection {
color: var(--color-base-1000); color: var(--theme-base-1000);
} }
::-moz-selection { ::-moz-selection {
color: var(--color-base-1000); color: var(--theme-base-1000);
} }
} }
@@ -258,13 +74,13 @@ body {
} }
::selection { ::selection {
background: var(--color-success-500); background: var(--theme-success-500);
color: var(--color-base-800); color: var(--theme-base-800);
} }
::-moz-selection { ::-moz-selection {
background: var(--color-success-500); background: var(--theme-success-500);
color: var(--color-base-800); color: var(--theme-base-800);
} }
img { img {

245
src/admin/scss/colors.scss Normal file
View File

@@ -0,0 +1,245 @@
: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);
--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-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
src/admin/scss/overrides.scss Normal file
View File

@@ -0,0 +1 @@
/* Used as a placeholder for when the Payload app does not have custom SCSS */

10
src/admin/scss/toastify.scss
View File

@@ -25,24 +25,24 @@
} }
.Toastify__toast--success { .Toastify__toast--success {
color: var(--color-success-100); color: var(--color-success-900);
background: var(--color-success-500); background: var(--color-success-500);
.Toastify__progress-bar { .Toastify__progress-bar {
background-color: var(--color-success-100); background-color: var(--color-success-900);
} }
} }
.Toastify__close-button--success { .Toastify__close-button--success {
color: var(--color-success-100); color: var(--color-success-900);
} }
.Toastify__toast--error { .Toastify__toast--error {
background: var(--color-error-500); background: var(--theme-error-500);
color: #fff; color: #fff;
.Toastify__progress-bar { .Toastify__progress-bar {
background-color: var(--color-base-0); background-color: #fff;
} }
} }

2
src/admin/scss/vars.scss
View File

@@ -38,7 +38,7 @@ $style-stroke-width-m : 2px !default;
$top-header-offset: calc(#{base(4)} - 1px); $top-header-offset: calc(#{base(4)} - 1px);
$top-header-offset-m: base(3); $top-header-offset-m: base(3);
$focus-box-shadow: 0 0 0 $style-stroke-width-m var(--color-success-500); $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
////////////////////////////// //////////////////////////////
// SHADOWS // SHADOWS

22
test/e2e/fields/config.ts
View File

@@ -1,6 +1,6 @@
import { buildConfig } from '../buildConfig'; import { buildConfig } from '../buildConfig';
import { devUser } from '../../credentials'; import { devUser } from '../../credentials';
import { arrayDoc, blocksDoc, collapsibleDoc, textDoc } from './shared'; import { arrayDoc, blocksDoc, collapsibleDoc, richTextDoc, textDoc } from './shared';
export default buildConfig({ export default buildConfig({
collections: [ collections: [
@@ -72,6 +72,16 @@ export default buildConfig({
}, },
], ],
}, },
{
slug: 'rich-text-fields',
fields: [
{
name: 'richText',
type: 'richText',
required: true,
},
],
},
{ {
slug: 'text-fields', slug: 'text-fields',
admin: { admin: {
@@ -110,9 +120,17 @@ export default buildConfig({
data: collapsibleDoc, data: collapsibleDoc,
}); });
await payload.create({ const createdTextDoc = await payload.create({
collection: 'text-fields', collection: 'text-fields',
data: textDoc, data: textDoc,
}); });
const richTextDocWithRelationship = { ...richTextDoc };
richTextDocWithRelationship.richText[2].value = { id: createdTextDoc.id };
await payload.create({
collection: 'rich-text-fields',
data: richTextDocWithRelationship,
});
}, },
}); });

81
test/e2e/fields/shared.ts
View File

@@ -36,10 +36,83 @@ export const blocksDoc = {
], ],
}; };
export const textDoc = {
text: 'Seeded text document',
};
export const collapsibleDoc = { export const collapsibleDoc = {
text: 'Seeded collapsible doc', text: 'Seeded collapsible doc',
}; };
export const richTextDoc = {
richText: [
{
children: [
{
text: "Hello, I'm a rich text field.",
},
],
type: 'h1',
},
{
children: [
{
text: 'I can do all kinds of fun stuff like render links and store nested relationship fields:',
},
],
},
{
children: [
{
text: '',
},
],
type: 'relationship',
value: { id: '' },
relationTo: 'text-fields',
},
{
children: [
{
text: 'You can build your own elements, too.',
},
],
},
{
type: 'ul',
children: [
{
children: [
{
text: "It's built with SlateJS",
},
],
type: 'li',
},
{
type: 'li',
children: [
{
text: 'It stores content as JSON so you can use it wherever you need',
},
],
},
{
type: 'li',
children: [
{
text: "It's got a great editing experience for non-technical users",
},
],
},
],
},
{
children: [
{
text: 'And a whole lot more.',
},
],
},
],
};
export const textDoc = {
text: 'Seeded text document',
};