From 5fc4f3adadc8f7ec3eaf99021dccf7060926c7f1 Mon Sep 17 00:00:00 2001 From: James Date: Thu, 14 Jul 2022 15:20:34 -0700 Subject: [PATCH] feat: more maintainable colors --- .../components/elements/Banner/index.scss | 16 +- .../components/elements/DatePicker/index.scss | 2 +- src/admin/components/elements/Pill/index.scss | 4 +- .../elements/ReactSelect/index.scss | 4 +- .../Condition/Relationship/index.scss | 4 +- src/admin/components/forms/Error/index.scss | 4 +- src/admin/components/forms/Label/index.scss | 2 +- .../forms/field-types/Code/Code.tsx | 4 +- .../forms/field-types/Code/index.scss | 4 +- .../field-types/ConfirmPassword/index.scss | 2 +- .../forms/field-types/DateTime/index.scss | 2 +- .../forms/field-types/Email/index.scss | 2 +- .../forms/field-types/Number/index.scss | 2 +- .../forms/field-types/Password/index.scss | 2 +- .../forms/field-types/Point/index.scss | 2 +- .../forms/field-types/Relationship/index.scss | 4 +- .../RichText/elements/link/index.tsx | 1 - .../forms/field-types/Text/index.scss | 2 +- .../forms/field-types/Textarea/index.scss | 2 +- .../views/Version/Compare/index.scss | 4 +- .../RenderFieldsToDiff/fields/styles.ts | 12 +- .../views/collections/Edit/Auth/index.scss | 2 +- .../views/collections/Edit/Upload/index.scss | 4 +- src/admin/scss/app.scss | 204 +-------------- src/admin/scss/colors.scss | 245 ++++++++++++++++++ src/admin/scss/overrides.scss | 1 + src/admin/scss/toastify.scss | 10 +- src/admin/scss/vars.scss | 2 +- test/e2e/fields/config.ts | 22 +- test/e2e/fields/shared.ts | 81 +++++- 30 files changed, 402 insertions(+), 250 deletions(-) create mode 100644 src/admin/scss/colors.scss create mode 100644 src/admin/scss/overrides.scss diff --git a/src/admin/components/elements/Banner/index.scss b/src/admin/components/elements/Banner/index.scss index c256fc8d3..d3fc495bd 100644 --- a/src/admin/components/elements/Banner/index.scss +++ b/src/admin/components/elements/Banner/index.scss @@ -37,34 +37,34 @@ } &--type-error { - background: var(--color-error-100); - color: var(--color-error-500); + background: var(--theme-error-100); + color: var(--theme-error-500); svg { - @include color-svg(var(--color-error-500)); + @include color-svg(var(--theme-error-500)); } &.button--has-action { &:hover { - background: var(--color-error-200); + background: var(--theme-error-200); } &:active { - background: var(--color-error-300); + background: var(--theme-error-300); } } } &--type-success { - background: var(--color-success-500); + background: var(--theme-success-500); &.button--has-action { &:hover { - background: var(--color-success-200); + background: var(--theme-success-200); } &:active { - background: var(--color-success-200); + background: var(--theme-success-200); } } } diff --git a/src/admin/components/elements/DatePicker/index.scss b/src/admin/components/elements/DatePicker/index.scss index e11ecbecf..85dbaa975 100644 --- a/src/admin/components/elements/DatePicker/index.scss +++ b/src/admin/components/elements/DatePicker/index.scss @@ -93,7 +93,7 @@ $cal-icon-width: 18px; &--has-error { .react-datepicker__input-container input { - background-color: var(--color-error-200); + background-color: var(--theme-error-200); } } diff --git a/src/admin/components/elements/Pill/index.scss b/src/admin/components/elements/Pill/index.scss index 890427481..534c6db33 100644 --- a/src/admin/components/elements/Pill/index.scss +++ b/src/admin/components/elements/Pill/index.scss @@ -69,11 +69,11 @@ } &--style-warning { - background: var(--color-warning-500); + background: var(--theme-warning-500); } &--style-success { - background: var(--color-success-500); + background: var(--theme-success-500); } &--style-dark { diff --git a/src/admin/components/elements/ReactSelect/index.scss b/src/admin/components/elements/ReactSelect/index.scss index 06e119954..7474ab676 100644 --- a/src/admin/components/elements/ReactSelect/index.scss +++ b/src/admin/components/elements/ReactSelect/index.scss @@ -103,13 +103,13 @@ div.react-select { &:hover { color: var(--theme-elevation-800); - background: var(--color-error-150); + background: var(--theme-error-150); } } &--error { div.rs__control { - background-color: var(--color-error-200); + background-color: var(--theme-error-200); } } } diff --git a/src/admin/components/elements/WhereBuilder/Condition/Relationship/index.scss b/src/admin/components/elements/WhereBuilder/Condition/Relationship/index.scss index 48c79a290..4f0e6bdca 100644 --- a/src/admin/components/elements/WhereBuilder/Condition/Relationship/index.scss +++ b/src/admin/components/elements/WhereBuilder/Condition/Relationship/index.scss @@ -2,10 +2,10 @@ .condition-value-relationship { &__error-loading { - border: 1px solid var(--color-error-500); + border: 1px solid var(--theme-error-500); min-height: base(2); padding: base(.5) base(.75); - background-color: var(--color-error-500); + background-color: var(--theme-error-500); color: var(--theme-elevation-0); } } diff --git a/src/admin/components/forms/Error/index.scss b/src/admin/components/forms/Error/index.scss index c4f2e5fff..8a3c6ede5 100644 --- a/src/admin/components/forms/Error/index.scss +++ b/src/admin/components/forms/Error/index.scss @@ -6,9 +6,9 @@ left: auto; right: base(.5); transform: none; - background-color: var(--color-error-500); + background-color: var(--theme-error-500); span { - border-top-color: var(--color-error-500); + border-top-color: var(--theme-error-500); } } diff --git a/src/admin/components/forms/Label/index.scss b/src/admin/components/forms/Label/index.scss index e5bbd4464..c0fbfcc91 100644 --- a/src/admin/components/forms/Label/index.scss +++ b/src/admin/components/forms/Label/index.scss @@ -6,7 +6,7 @@ label.field-label { color: var(--theme-elevation-800); .required { - color: var(--color-error-500); + color: var(--theme-error-500); margin-left: base(.25); margin-right: auto; } diff --git a/src/admin/components/forms/field-types/Code/Code.tsx b/src/admin/components/forms/field-types/Code/Code.tsx index f18cb7676..0bdca7185 100644 --- a/src/admin/components/forms/field-types/Code/Code.tsx +++ b/src/admin/components/forms/field-types/Code/Code.tsx @@ -88,8 +88,8 @@ const Code: React.FC = (props) => { highlight={highlighter} padding={25} style={{ - backgroundColor: 'var(--color-base-850)', - color: 'var(--color-base-0)', + backgroundColor: 'var(--theme-base-850)', + color: 'var(--theme-base-0)', fontFamily: '"Consolas", "Monaco", monospace', fontSize: 12, pointerEvents: readOnly ? 'none' : 'auto', diff --git a/src/admin/components/forms/field-types/Code/index.scss b/src/admin/components/forms/field-types/Code/index.scss index 26660fcd1..5eb017d6b 100644 --- a/src/admin/components/forms/field-types/Code/index.scss +++ b/src/admin/components/forms/field-types/Code/index.scss @@ -6,7 +6,7 @@ &.error { 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-"], pre[class*="language-"] { - background: var(--color-base-100); + background: var(--theme-base-100); } /* Inline code */ diff --git a/src/admin/components/forms/field-types/ConfirmPassword/index.scss b/src/admin/components/forms/field-types/ConfirmPassword/index.scss index 27cd1574f..9a077a132 100644 --- a/src/admin/components/forms/field-types/ConfirmPassword/index.scss +++ b/src/admin/components/forms/field-types/ConfirmPassword/index.scss @@ -10,7 +10,7 @@ &.error { input { - background-color: var(--color-error-200); + background-color: var(--theme-error-200); } } } diff --git a/src/admin/components/forms/field-types/DateTime/index.scss b/src/admin/components/forms/field-types/DateTime/index.scss index 41fac9927..d061e7e03 100644 --- a/src/admin/components/forms/field-types/DateTime/index.scss +++ b/src/admin/components/forms/field-types/DateTime/index.scss @@ -9,7 +9,7 @@ &--has-error { .react-datepicker__input-container input { - background-color: var(--color-error-200); + background-color: var(--theme-error-200); } } } diff --git a/src/admin/components/forms/field-types/Email/index.scss b/src/admin/components/forms/field-types/Email/index.scss index b669a73f7..45deb8c46 100644 --- a/src/admin/components/forms/field-types/Email/index.scss +++ b/src/admin/components/forms/field-types/Email/index.scss @@ -10,7 +10,7 @@ &.error { input { - background-color: var(--color-error-200); + background-color: var(--theme-error-200); } } } diff --git a/src/admin/components/forms/field-types/Number/index.scss b/src/admin/components/forms/field-types/Number/index.scss index 9b5172ed7..2f29ff77b 100644 --- a/src/admin/components/forms/field-types/Number/index.scss +++ b/src/admin/components/forms/field-types/Number/index.scss @@ -10,7 +10,7 @@ &.error { input { - background-color: var(--color-error-200); + background-color: var(--theme-error-200); } } } diff --git a/src/admin/components/forms/field-types/Password/index.scss b/src/admin/components/forms/field-types/Password/index.scss index e33cd0505..9493092d7 100644 --- a/src/admin/components/forms/field-types/Password/index.scss +++ b/src/admin/components/forms/field-types/Password/index.scss @@ -10,7 +10,7 @@ &.error { input { - background-color: var(--color-error-200); + background-color: var(--theme-error-200); } } } diff --git a/src/admin/components/forms/field-types/Point/index.scss b/src/admin/components/forms/field-types/Point/index.scss index 6e56d99b6..e8d1cf392 100644 --- a/src/admin/components/forms/field-types/Point/index.scss +++ b/src/admin/components/forms/field-types/Point/index.scss @@ -24,7 +24,7 @@ &.error { input { - background-color: var(--color-error-200); + background-color: var(--theme-error-200); } } } diff --git a/src/admin/components/forms/field-types/Relationship/index.scss b/src/admin/components/forms/field-types/Relationship/index.scss index ff8060b26..f34de675f 100644 --- a/src/admin/components/forms/field-types/Relationship/index.scss +++ b/src/admin/components/forms/field-types/Relationship/index.scss @@ -6,10 +6,10 @@ } .relationship__error-loading { - border: 1px solid var(--color-error-500); + border: 1px solid var(--theme-error-500); min-height: base(2); padding: base(.5) base(.75); - background-color: var(--color-error-500); + background-color: var(--theme-error-500); color: var(--theme-elevation-0); } diff --git a/src/admin/components/forms/field-types/RichText/elements/link/index.tsx b/src/admin/components/forms/field-types/RichText/elements/link/index.tsx index 4b1b3ccf4..5f158b030 100644 --- a/src/admin/components/forms/field-types/RichText/elements/link/index.tsx +++ b/src/admin/components/forms/field-types/RichText/elements/link/index.tsx @@ -47,7 +47,6 @@ const Link = ({ attributes, children, element, editorRef }) => { initActive={element.url === undefined} buttonType="none" size="small" - color={theme === 'dark' ? 'light' : 'dark'} horizontalAlign="center" forceOpen={open} onToggleOpen={handleToggleOpen} diff --git a/src/admin/components/forms/field-types/Text/index.scss b/src/admin/components/forms/field-types/Text/index.scss index f9ffce8b8..f66e22fc8 100644 --- a/src/admin/components/forms/field-types/Text/index.scss +++ b/src/admin/components/forms/field-types/Text/index.scss @@ -10,7 +10,7 @@ &.error { input { - background-color: var(--color-error-200); + background-color: var(--theme-error-200); } } } diff --git a/src/admin/components/forms/field-types/Textarea/index.scss b/src/admin/components/forms/field-types/Textarea/index.scss index 45a07f3d1..80e15b504 100644 --- a/src/admin/components/forms/field-types/Textarea/index.scss +++ b/src/admin/components/forms/field-types/Textarea/index.scss @@ -12,7 +12,7 @@ &.error { textarea { - background-color: var(--color-error-200); + background-color: var(--theme-error-200); } } } diff --git a/src/admin/components/views/Version/Compare/index.scss b/src/admin/components/views/Version/Compare/index.scss index f7ac08982..ec08841ea 100644 --- a/src/admin/components/views/Version/Compare/index.scss +++ b/src/admin/components/views/Version/Compare/index.scss @@ -2,10 +2,10 @@ .compare-version { &__error-loading { - border: 1px solid var(--color-error-500); + border: 1px solid var(--theme-error-500); min-height: base(2); padding: base(.5) base(.75); - background-color: var(--color-error-500); + background-color: var(--theme-error-500); color: var(--theme-elevation-0); } diff --git a/src/admin/components/views/Version/RenderFieldsToDiff/fields/styles.ts b/src/admin/components/views/Version/RenderFieldsToDiff/fields/styles.ts index 266a9e0b2..5d4892e0d 100644 --- a/src/admin/components/views/Version/RenderFieldsToDiff/fields/styles.ts +++ b/src/admin/components/views/Version/RenderFieldsToDiff/fields/styles.ts @@ -2,12 +2,12 @@ export const diffStyles = { variables: { light: { diffViewerBackground: 'transparent', - addedBackground: 'var(--color-success-100)', - addedColor: 'var(--color-success-900)', - removedBackground: 'var(--color-error-100)', - removedColor: 'var(--color-error-900)', - wordAddedBackground: 'var(--color-success-200)', - wordRemovedBackground: 'var(--color-error-200)', + addedBackground: 'var(--theme-success-100)', + addedColor: 'var(--theme-success-900)', + removedBackground: 'var(--theme-error-100)', + removedColor: 'var(--theme-error-900)', + wordAddedBackground: 'var(--theme-success-200)', + wordRemovedBackground: 'var(--theme-error-200)', }, }, }; diff --git a/src/admin/components/views/collections/Edit/Auth/index.scss b/src/admin/components/views/collections/Edit/Auth/index.scss index 0da14e2d8..508ebf433 100644 --- a/src/admin/components/views/collections/Edit/Auth/index.scss +++ b/src/admin/components/views/collections/Edit/Auth/index.scss @@ -25,7 +25,7 @@ @keyframes highlight { 0% { - background: var(--color-success-500); + background: var(--theme-success-500); } 100% { diff --git a/src/admin/components/views/collections/Edit/Upload/index.scss b/src/admin/components/views/collections/Edit/Upload/index.scss index a98b3a3e6..5dc779d84 100644 --- a/src/admin/components/views/collections/Edit/Upload/index.scss +++ b/src/admin/components/views/collections/Edit/Upload/index.scss @@ -52,8 +52,8 @@ &--dragging { .file-field__drop-zone { - border-color: var(--color-success-500); - background: var(--color-success-150); + border-color: var(--theme-success-500); + background: var(--theme-success-150); } } diff --git a/src/admin/scss/app.scss b/src/admin/scss/app.scss index 5738e7ff1..4a2443e05 100644 --- a/src/admin/scss/app.scss +++ b/src/admin/scss/app.scss @@ -1,6 +1,7 @@ @import 'fonts'; @import 'styles'; @import './toastify.scss'; +@import './colors.scss'; :root { --breakpoint-xs-width : #{$breakpoint-xs-width}; @@ -10,113 +11,9 @@ --z-modal: #{$z-modal}; --scrollbar-width: 17px; - --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-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); + --theme-bg: var(--theme-base-0); + --theme-input-bg: var(--theme-base-0); + --theme-text: var(--theme-base-800); --font-body: 'Suisse Intl', system-ui; --font-mono: monospace; @@ -151,97 +48,16 @@ html { -webkit-font-smoothing: antialiased; &[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-text: var(--theme-elevation-1000); --theme-input-bg: var(--theme-elevation-50); ::selection { - color: var(--color-base-1000); + color: var(--theme-base-1000); } ::-moz-selection { - color: var(--color-base-1000); + color: var(--theme-base-1000); } } @@ -258,13 +74,13 @@ body { } ::selection { - background: var(--color-success-500); - color: var(--color-base-800); + background: var(--theme-success-500); + color: var(--theme-base-800); } ::-moz-selection { - background: var(--color-success-500); - color: var(--color-base-800); + background: var(--theme-success-500); + color: var(--theme-base-800); } img { diff --git a/src/admin/scss/colors.scss b/src/admin/scss/colors.scss new file mode 100644 index 000000000..160391830 --- /dev/null +++ b/src/admin/scss/colors.scss @@ -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); +} diff --git a/src/admin/scss/overrides.scss b/src/admin/scss/overrides.scss new file mode 100644 index 000000000..0b6a709cf --- /dev/null +++ b/src/admin/scss/overrides.scss @@ -0,0 +1 @@ +/* Used as a placeholder for when the Payload app does not have custom SCSS */ diff --git a/src/admin/scss/toastify.scss b/src/admin/scss/toastify.scss index 9f4a35a9f..77e851694 100644 --- a/src/admin/scss/toastify.scss +++ b/src/admin/scss/toastify.scss @@ -25,24 +25,24 @@ } .Toastify__toast--success { - color: var(--color-success-100); + color: var(--color-success-900); background: var(--color-success-500); .Toastify__progress-bar { - background-color: var(--color-success-100); + background-color: var(--color-success-900); } } .Toastify__close-button--success { - color: var(--color-success-100); + color: var(--color-success-900); } .Toastify__toast--error { - background: var(--color-error-500); + background: var(--theme-error-500); color: #fff; .Toastify__progress-bar { - background-color: var(--color-base-0); + background-color: #fff; } } diff --git a/src/admin/scss/vars.scss b/src/admin/scss/vars.scss index 1f20d8a67..52b53a0de 100644 --- a/src/admin/scss/vars.scss +++ b/src/admin/scss/vars.scss @@ -38,7 +38,7 @@ $style-stroke-width-m : 2px !default; $top-header-offset: calc(#{base(4)} - 1px); $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 diff --git a/test/e2e/fields/config.ts b/test/e2e/fields/config.ts index 1b3c4eed6..92388f3bb 100644 --- a/test/e2e/fields/config.ts +++ b/test/e2e/fields/config.ts @@ -1,6 +1,6 @@ import { buildConfig } from '../buildConfig'; import { devUser } from '../../credentials'; -import { arrayDoc, blocksDoc, collapsibleDoc, textDoc } from './shared'; +import { arrayDoc, blocksDoc, collapsibleDoc, richTextDoc, textDoc } from './shared'; export default buildConfig({ collections: [ @@ -72,6 +72,16 @@ export default buildConfig({ }, ], }, + { + slug: 'rich-text-fields', + fields: [ + { + name: 'richText', + type: 'richText', + required: true, + }, + ], + }, { slug: 'text-fields', admin: { @@ -110,9 +120,17 @@ export default buildConfig({ data: collapsibleDoc, }); - await payload.create({ + const createdTextDoc = await payload.create({ collection: 'text-fields', data: textDoc, }); + + const richTextDocWithRelationship = { ...richTextDoc }; + richTextDocWithRelationship.richText[2].value = { id: createdTextDoc.id }; + + await payload.create({ + collection: 'rich-text-fields', + data: richTextDocWithRelationship, + }); }, }); diff --git a/test/e2e/fields/shared.ts b/test/e2e/fields/shared.ts index 711a7a2a3..820d53a2a 100644 --- a/test/e2e/fields/shared.ts +++ b/test/e2e/fields/shared.ts @@ -36,10 +36,83 @@ export const blocksDoc = { ], }; -export const textDoc = { - text: 'Seeded text document', -}; - export const collapsibleDoc = { 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', +};