diff --git a/components/elements.ts b/components/elements.ts index 27ec90356..81cdbc27d 100644 --- a/components/elements.ts +++ b/components/elements.ts @@ -2,3 +2,4 @@ export { default as Button } from '../dist/admin/components/elements/Button'; export { default as Card } from '../dist/admin/components/elements/Card'; export { default as Eyebrow } from '../dist/admin/components/elements/Eyebrow'; export { default as Nav } from '../dist/admin/components/elements/Nav'; +export { default as Gutter } from '../dist/admin/components/elements/Gutter'; diff --git a/demo/client/components/DemoUIField/Cell.tsx b/demo/client/components/DemoUIField/Cell.tsx index c81d34fb4..6ac11c48f 100644 --- a/demo/client/components/DemoUIField/Cell.tsx +++ b/demo/client/components/DemoUIField/Cell.tsx @@ -1,7 +1,7 @@ import React from 'react'; const DemoUIFieldCell: React.FC = () => ( -

Demo UI Field Cell

+

Demo UI Field Cell

); export default DemoUIFieldCell; diff --git a/demo/client/components/views/CustomDefault/index.tsx b/demo/client/components/views/CustomDefault/index.tsx index 05a3a6d12..b43365724 100644 --- a/demo/client/components/views/CustomDefault/index.tsx +++ b/demo/client/components/views/CustomDefault/index.tsx @@ -9,10 +9,11 @@ import Eyebrow from '../../../../../src/admin/components/elements/Eyebrow'; import { AdminView } from '../../../../../src/config/types'; import { useStepNav } from '../../../../../src/admin/components/elements/StepNav'; import Meta from '../../../../../src/admin/components/utilities/Meta'; +import { Gutter } from '../../../../../src/admin/components/elements/Gutter'; // In your projects, you can import as follows: // import { DefaultTemplate } from 'payload/components/templates'; -// import { Button, Eyebrow } from 'payload/components/elements'; +// import { Button, Eyebrow, Gutter } from 'payload/components/elements'; // import { AdminView } from 'payload/config'; // import { useStepNav } from 'payload/components/hooks'; // import { Meta } from 'payload/components/utilities'; @@ -48,15 +49,17 @@ const CustomDefaultRoute: AdminView = ({ user, canAccessAdmin }) => { keywords="Custom React Components, Payload, CMS" /> -

Custom Route

-

Here is a custom route that was added in the Payload config. It uses the Default Template, so the sidebar is rendered.

- + +

Custom Route

+

Here is a custom route that was added in the Payload config. It uses the Default Template, so the sidebar is rendered.

+ + ); }; diff --git a/demo/collections/Localized.ts b/demo/collections/Localized.ts index 011f2422f..b035422c5 100644 --- a/demo/collections/Localized.ts +++ b/demo/collections/Localized.ts @@ -21,9 +21,6 @@ const RichTextBlock: Block = { name: 'content', localized: true, type: 'richText', - admin: { - hideGutter: true, - }, }, ], }; diff --git a/demo/custom-index.html b/demo/custom-index.html index 5308bf84e..8aa6e223a 100644 --- a/demo/custom-index.html +++ b/demo/custom-index.html @@ -1,5 +1,5 @@ - + diff --git a/src/admin/assets/fonts/SuisseIntl-Light.woff b/src/admin/assets/fonts/SuisseIntl-Light.woff deleted file mode 100644 index c01e965e6..000000000 Binary files a/src/admin/assets/fonts/SuisseIntl-Light.woff and /dev/null differ diff --git a/src/admin/assets/fonts/SuisseIntl-Light.woff2 b/src/admin/assets/fonts/SuisseIntl-Light.woff2 deleted file mode 100644 index 2f21d9e90..000000000 Binary files a/src/admin/assets/fonts/SuisseIntl-Light.woff2 and /dev/null differ diff --git a/src/admin/assets/fonts/SuisseIntl-Medium.woff b/src/admin/assets/fonts/SuisseIntl-Medium.woff new file mode 100644 index 000000000..1bab02008 Binary files /dev/null and b/src/admin/assets/fonts/SuisseIntl-Medium.woff differ diff --git a/src/admin/assets/fonts/SuisseIntl-Medium.woff2 b/src/admin/assets/fonts/SuisseIntl-Medium.woff2 new file mode 100644 index 000000000..bba153f9d Binary files /dev/null and b/src/admin/assets/fonts/SuisseIntl-Medium.woff2 differ diff --git a/src/admin/assets/fonts/SuisseIntl-Thin.woff b/src/admin/assets/fonts/SuisseIntl-Thin.woff deleted file mode 100644 index 9932507e8..000000000 Binary files a/src/admin/assets/fonts/SuisseIntl-Thin.woff and /dev/null differ diff --git a/src/admin/assets/fonts/SuisseIntl-Thin.woff2 b/src/admin/assets/fonts/SuisseIntl-Thin.woff2 deleted file mode 100644 index 785837380..000000000 Binary files a/src/admin/assets/fonts/SuisseIntl-Thin.woff2 and /dev/null differ diff --git a/src/admin/assets/fonts/merriweather-v30-latin-700.woff b/src/admin/assets/fonts/merriweather-v30-latin-700.woff new file mode 100644 index 000000000..31cbeaeeb Binary files /dev/null and b/src/admin/assets/fonts/merriweather-v30-latin-700.woff differ diff --git a/src/admin/assets/fonts/merriweather-v30-latin-700.woff2 b/src/admin/assets/fonts/merriweather-v30-latin-700.woff2 new file mode 100644 index 000000000..a6919a9da Binary files /dev/null and b/src/admin/assets/fonts/merriweather-v30-latin-700.woff2 differ diff --git a/src/admin/assets/fonts/merriweather-v30-latin-700italic.woff b/src/admin/assets/fonts/merriweather-v30-latin-700italic.woff new file mode 100644 index 000000000..853169586 Binary files /dev/null and b/src/admin/assets/fonts/merriweather-v30-latin-700italic.woff differ diff --git a/src/admin/assets/fonts/merriweather-v30-latin-700italic.woff2 b/src/admin/assets/fonts/merriweather-v30-latin-700italic.woff2 new file mode 100644 index 000000000..20481352c Binary files /dev/null and b/src/admin/assets/fonts/merriweather-v30-latin-700italic.woff2 differ diff --git a/src/admin/assets/fonts/merriweather-v30-latin-italic.woff b/src/admin/assets/fonts/merriweather-v30-latin-italic.woff new file mode 100644 index 000000000..0e5871dad Binary files /dev/null and b/src/admin/assets/fonts/merriweather-v30-latin-italic.woff differ diff --git a/src/admin/assets/fonts/merriweather-v30-latin-italic.woff2 b/src/admin/assets/fonts/merriweather-v30-latin-italic.woff2 new file mode 100644 index 000000000..38bfa01eb Binary files /dev/null and b/src/admin/assets/fonts/merriweather-v30-latin-italic.woff2 differ diff --git a/src/admin/assets/fonts/merriweather-v30-latin-regular.woff b/src/admin/assets/fonts/merriweather-v30-latin-regular.woff new file mode 100644 index 000000000..d85e75ba8 Binary files /dev/null and b/src/admin/assets/fonts/merriweather-v30-latin-regular.woff differ diff --git a/src/admin/assets/fonts/merriweather-v30-latin-regular.woff2 b/src/admin/assets/fonts/merriweather-v30-latin-regular.woff2 new file mode 100644 index 000000000..6515c26fd Binary files /dev/null and b/src/admin/assets/fonts/merriweather-v30-latin-regular.woff2 differ diff --git a/src/admin/components/elements/Banner/index.scss b/src/admin/components/elements/Banner/index.scss index 3f62f76c4..c256fc8d3 100644 --- a/src/admin/components/elements/Banner/index.scss +++ b/src/admin/components/elements/Banner/index.scss @@ -5,8 +5,8 @@ line-height: base(1); border: 0; vertical-align: middle; - background: rgba($color-dark-gray, .1); - color: $color-dark-gray; + background: var(--theme-elevation-900); + color: var(--theme-elevation-800); border-radius: $style-radius-s; padding: base(.5); margin-bottom: $baseline; @@ -18,6 +18,7 @@ &--has-icon { display: flex; + svg { display: block; } @@ -26,44 +27,44 @@ &--type-default { &.button--has-action { &:hover { - background: darken($color-dark-gray, .15); + background: var(--theme-elevation-900); } &:active { - background: darken($color-dark-gray, .2); + background: var(--theme-elevation-950); } } } &--type-error { - background: rgba($color-red, .1); - color: $color-red; + background: var(--color-error-100); + color: var(--color-error-500); svg { - @include color-svg($color-red); + @include color-svg(var(--color-error-500)); } &.button--has-action { &:hover { - background: rgba($color-red, .15); + background: var(--color-error-200); } &:active { - background: rgba($color-red, .2); + background: var(--color-error-300); } } } &--type-success { - background: $color-green; + background: var(--color-success-500); &.button--has-action { &:hover { - background: rgba($color-green, .15); + background: var(--color-success-200); } &:active { - background: rgba($color-green, .2); + background: var(--color-success-200); } } } diff --git a/src/admin/components/elements/Button/index.scss b/src/admin/components/elements/Button/index.scss index da4f30089..4acd9ae87 100644 --- a/src/admin/components/elements/Button/index.scss +++ b/src/admin/components/elements/Button/index.scss @@ -56,7 +56,8 @@ line-height: base(1); } - span, svg { + span, + svg { vertical-align: top; } @@ -69,20 +70,20 @@ } &--style-primary { - background-color: $color-dark-gray; - color: white; + background-color: var(--theme-elevation-800); + color: var(--theme-elevation-0); &.btn--disabled { - background-color: rgba($color-dark-gray, .6); + background-color: var(--theme-elevation-400); } &:not(.btn--disabled) { &:hover { - background: lighten($color-dark-gray, 5%); + background: var(--theme-elevation-750); } &:active { - background: lighten($color-dark-gray, 10%); + background: var(--theme-elevation-700); } } @@ -94,26 +95,26 @@ } &--style-secondary { - $base-box-shadow: inset 0 0 0 $style-stroke-width $color-dark-gray; - $hover-box-shadow: inset 0 0 0 $style-stroke-width lighten($color-dark-gray, 5%); + $base-box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-800); + $hover-box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-700); box-shadow: $base-box-shadow; - color: $color-dark-gray; + color: var(--theme-elevation-800); background: none; &:hover { - background: rgba($color-dark-gray, .02); + background: var(--theme-elevation-100); box-shadow: $hover-box-shadow; } &:active { - background: lighten($color-light-gray, 7%); + background: var(--theme-elevation-200); } &.btn--disabled { - color: rgba($color-dark-gray, .6); + color: var(--theme-elevation-400); background: none; - box-shadow: inset 0 0 0 $style-stroke-width rgba($color-dark-gray, .4); + box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-400); } &:focus { @@ -148,7 +149,7 @@ &.btn--style-primary { .icon { - @include color-svg(white); + @include color-svg(var(--theme-elevation-0)); } } } @@ -159,7 +160,7 @@ } &--style-light-gray { - box-shadow: inset 0 0 0 $style-stroke-width $color-dark-gray; + box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-800); } &--icon-position-left { @@ -191,15 +192,15 @@ &:hover { .btn__icon { - @include color-svg(white); - background: $color-dark-gray; + @include color-svg(var(--theme-elevation-0)); + background: var(--theme-elevation-800); } } &:focus { .btn__icon { - @include color-svg($color-dark-gray); - background: $color-light-gray; + @include color-svg(var(--theme-elevation-800)); + background: var(--theme-elevation-150); } outline: none; @@ -207,8 +208,8 @@ &:active { .btn__icon { - @include color-svg(white); - background: lighten($color-dark-gray, 10%); + @include color-svg(var(--theme-elevation-0)); + background: var(--theme-elevation-700); } } } diff --git a/src/admin/components/elements/Card/index.scss b/src/admin/components/elements/Card/index.scss index d0b6ed718..37d1bbf8f 100644 --- a/src/admin/components/elements/Card/index.scss +++ b/src/admin/components/elements/Card/index.scss @@ -1,7 +1,7 @@ @import '../../../scss/styles'; .card { - background: $color-background-gray; + background: var(--theme-elevation-50); padding: base(1.25) $baseline; position: relative; @@ -26,7 +26,7 @@ cursor: pointer; &:hover { - background: darken($color-background-gray, 3%); + background: var(--theme-elevation-100); } } diff --git a/src/admin/components/elements/ColumnSelector/index.scss b/src/admin/components/elements/ColumnSelector/index.scss index ff20ec385..a293e9b71 100644 --- a/src/admin/components/elements/ColumnSelector/index.scss +++ b/src/admin/components/elements/ColumnSelector/index.scss @@ -1,7 +1,7 @@ @import '../../../scss/styles.scss'; .column-selector { - background: $color-background-gray; + background: var(--theme-elevation-50); padding: base(1) base(1) base(.5); .pill { diff --git a/src/admin/components/elements/DatePicker/index.scss b/src/admin/components/elements/DatePicker/index.scss index 9cf0ea9f0..17a410eeb 100644 --- a/src/admin/components/elements/DatePicker/index.scss +++ b/src/admin/components/elements/DatePicker/index.scss @@ -3,7 +3,6 @@ $cal-icon-width: 18px; .date-time-picker { - position: relative; .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box, .react-datepicker__time-container { @@ -11,19 +10,35 @@ $cal-icon-width: 18px; } &__icon-wrap { - display: flex; - column-gap: 10px; - position: absolute; - right: base(.75); - top: base(.625); - z-index: 2; + position: relative; + z-index: 1; + } - .icon { - pointer-events: none; - width: $cal-icon-width; - height: auto; - @include color-svg($color-dark-gray); - } + .icon--calendar, + &__clear-button { + position: absolute; + } + + .icon--calendar, + .icon--x { + @include color-svg(var(--theme-elevation-800)); + height: auto; + } + + &__clear-button { + top: base(.5); + right: base(2); + } + + .icon--calendar { + top: base(.625); + right: base(.75); + width: $cal-icon-width; + pointer-events: none; + } + + .icon--x { + width: base(1); } &__clear-button { @@ -49,7 +64,7 @@ $cal-icon-width: 18px; &-popper, &__time-container, &__time-box { - width: 100%; + width: base(6); } &__time-container { @@ -78,19 +93,19 @@ $cal-icon-width: 18px; &--has-error { .react-datepicker__input-container input { - background-color: lighten($color-red, 20%); + background-color: var(--color-error-200); } } .react-datepicker { - @include shadow-sm; - background: white; + @include shadow-lg; + background: var(--theme-input-bg); display: inline-flex; - border: 1px solid $color-light-gray; + border: none; font-family: $font-body; font-weight: 100; border-radius: 0; - border: none; + color: var(--theme-elevation-800); &__header { padding-top: 0; @@ -98,11 +113,11 @@ $cal-icon-width: 18px; text-align: center; border-radius: 0; border: none; - background-color: white; + background-color: var(--theme-input-bg); &--time { padding: 10px 0; - border-bottom: 1px solid $color-light-gray; + border-bottom: 1px solid var(--theme-elevation-150); font-weight: 600; } } @@ -125,70 +140,89 @@ $cal-icon-width: 18px; top: 15px; &--next { - border-left-color: $color-gray; + border-left-color: var(--theme-elevation-400); &:focus { - border-left-color: darken($color-gray, 30%); - outline:none; + border-left-color: var(--theme-elevation-500); + outline: none; } } &--previous { - border-right-color: $color-gray; + border-right-color: var(--theme-elevation-400); &:focus { - border-right-color: darken($color-gray, 30%); - outline:none; + border-right-color: var(--theme-elevation-500); + outline: none; } } } + &__current-month, + &__header, + &-year-header, + &__day-name, + &__day, + &__time-name, + &-time__header { + color: var(--theme-elevation-1000); + } + &__current-month { padding: 10px 0; font-weight: 600; } &__month-container { - border-right: 1px solid $color-light-gray; + border-right: 1px solid var(--theme-elevation-150); + } + + &__time { + background: none; } &__time-container { border-left: none; } + &__day-names { - background-color: $color-light-gray; + background-color: var(--theme-elevation-100); } &__day { - box-shadow: inset 0px 0px 0px 1px $color-light-gray, 0px 0px 0px 1px $color-light-gray; + box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-150); font-size: base(.55); + &:hover { + background: var(--theme-elevation-100); + } + &:focus { outline: 0; - background: $color-gray; + background: var(--theme-elevation-400); } &--selected { - font-weight: 600; + font-weight: bold; &:focus { - background-color: $color-light-gray; + background-color: var(--theme-elevation-150); } } &--keyboard-selected { - color: white; - font-weight: 600; + color: var(--theme-elevation-0); + font-weight: bold; &:focus { - background-color: $color-light-gray; - box-shadow: inset 0px 0px 0px 1px $color-dark-gray, 0px 0px 0px 1px $color-dark-gray; + background-color: var(--theme-elevation-150); + box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-800), 0px 0px 0px 1px var(--theme-elevation-800); } } &--today { - font-weight: 600; + font-weight: bold; } } @@ -202,27 +236,39 @@ $cal-icon-width: 18px; .react-datepicker-popper { z-index: 10; - border: 1px solid $color-light-gray; + border: none; } .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected { - box-shadow: inset 0px 0px 0px 1px $color-dark-gray, 0px 0px 0px 1px $color-dark-gray; - background-color: $color-light-gray; - color: $color-dark-gray; + box-shadow: none; + background-color: var(--theme-elevation-150); + font-weight: bold; + color: var(--theme-elevation-800); border-radius: 0; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected, - .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range { - box-shadow: inset 0px 0px 0px 1px $color-dark-gray, 0px 0px 0px 1px $color-dark-gray; - background-color: $color-light-gray; - color: $color-dark-gray; + .react-datepicker__day--selected, + .react-datepicker__day--in-selecting-range, + .react-datepicker__day--in-range, + .react-datepicker__month-text--selected, + .react-datepicker__month-text--in-selecting-range, + .react-datepicker__month-text--in-range { + box-shadow: none; + background-color: var(--theme-elevation-150); + color: var(--theme-elevation-800); + font-weight: bold; border-radius: 0; } - .react-datepicker__day:hover, .react-datepicker__month-text:hover { + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover { + background: var(--theme-elevation-100); + } + + .react-datepicker__day:hover, + .react-datepicker__month-text:hover { border-radius: 0; } @@ -233,7 +279,6 @@ $cal-icon-width: 18px; .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item { line-height: 20px; font-size: base(.5); - font-weight: 500; } @include small-break { diff --git a/src/admin/components/elements/DeleteDocument/index.scss b/src/admin/components/elements/DeleteDocument/index.scss index 5bcac6ec8..98fb0dcf0 100644 --- a/src/admin/components/elements/DeleteDocument/index.scss +++ b/src/admin/components/elements/DeleteDocument/index.scss @@ -6,6 +6,11 @@ align-items: center; height: 100%; + &__template { + z-index: 1; + position: relative; + } + &__toggle { @extend %btn-reset; } diff --git a/src/admin/components/elements/DeleteDocument/index.tsx b/src/admin/components/elements/DeleteDocument/index.tsx index 967bf3ea6..1f32cca29 100644 --- a/src/admin/components/elements/DeleteDocument/index.tsx +++ b/src/admin/components/elements/DeleteDocument/index.tsx @@ -91,7 +91,7 @@ const DeleteDocument: React.FC = (props) => { slug={modalSlug} className={baseClass} > - +

Confirm deletion

You are about to delete the diff --git a/src/admin/components/elements/Eyebrow/index.scss b/src/admin/components/elements/Eyebrow/index.scss index 8bd61a7b0..64307c91d 100644 --- a/src/admin/components/elements/Eyebrow/index.scss +++ b/src/admin/components/elements/Eyebrow/index.scss @@ -6,14 +6,18 @@ top: 0; z-index: $z-nav; padding: base(1.5) 0; - display: flex; - align-items: center; - justify-content: space-between; + + &__wrap { + position: relative; + z-index: 1; + display: flex; + align-items: center; + justify-content: space-between; + } @include mid-break { - padding: 0 0 $baseline; - margin: 0; - position: static; + padding: base(1) 0; + position: relative; display: block; } } diff --git a/src/admin/components/elements/Eyebrow/index.tsx b/src/admin/components/elements/Eyebrow/index.tsx index cb0366bbc..82fd50426 100644 --- a/src/admin/components/elements/Eyebrow/index.tsx +++ b/src/admin/components/elements/Eyebrow/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import StepNav from '../StepNav'; import { Props } from './types'; +import { Gutter } from '../Gutter'; import './index.scss'; @@ -8,8 +9,10 @@ const baseClass = 'eyebrow'; const Eyebrow: React.FC = ({ actions }) => (

- - {actions} + + + {actions} +
); diff --git a/src/admin/components/elements/FileDetails/index.scss b/src/admin/components/elements/FileDetails/index.scss index 773cfa7b7..ba68d9ad1 100644 --- a/src/admin/components/elements/FileDetails/index.scss +++ b/src/admin/components/elements/FileDetails/index.scss @@ -1,12 +1,12 @@ @import '../../../scss/styles.scss'; .file-details { - background-color: $color-background-gray; + background-color: var(--theme-elevation-100); header { display: flex; align-items: flex-start; - border-bottom: $style-stroke-width-m solid white; + border-bottom: 1px solid var(--theme-elevation-0); } &__remove { @@ -53,7 +53,7 @@ } &__size-label { - color: $color-gray; + color: var(--theme-elevation-400); } @include large-break { @@ -89,7 +89,7 @@ } &__main-detail { - border-top: $style-stroke-width-m solid white; + border-top: $style-stroke-width-m solid var(--theme-elevation-0); order: 3; width: 100%; } diff --git a/src/admin/components/elements/GenerateConfirmation/index.scss b/src/admin/components/elements/GenerateConfirmation/index.scss index 67b707f78..89a5bc2e4 100644 --- a/src/admin/components/elements/GenerateConfirmation/index.scss +++ b/src/admin/components/elements/GenerateConfirmation/index.scss @@ -6,6 +6,11 @@ align-items: center; height: 100%; + &__template { + position: relative; + z-index: 1; + } + .btn { margin-right: $baseline; } diff --git a/src/admin/components/elements/GenerateConfirmation/index.tsx b/src/admin/components/elements/GenerateConfirmation/index.tsx index 3a5d27930..2237e781d 100644 --- a/src/admin/components/elements/GenerateConfirmation/index.tsx +++ b/src/admin/components/elements/GenerateConfirmation/index.tsx @@ -41,7 +41,7 @@ const GenerateConfirmation: React.FC = (props) => { slug={modalSlug} className={baseClass} > - +

Confirm Generation

Generating a new API key will diff --git a/src/admin/components/elements/Gutter/index.scss b/src/admin/components/elements/Gutter/index.scss new file mode 100644 index 000000000..06cfe5b77 --- /dev/null +++ b/src/admin/components/elements/Gutter/index.scss @@ -0,0 +1,19 @@ +@import '../../../scss/styles.scss'; + +.gutter { + &--left { + padding-left: var(--gutter-h); + } + + &--right { + padding-right: var(--gutter-h); + } + + &--negative-left { + margin-left: calc(-1 * var(--gutter-h)); + } + + &--negative-right { + margin-right: calc(-1 * var(--gutter-h)); + } +} diff --git a/src/admin/components/elements/Gutter/index.tsx b/src/admin/components/elements/Gutter/index.tsx new file mode 100644 index 000000000..b064d967a --- /dev/null +++ b/src/admin/components/elements/Gutter/index.tsx @@ -0,0 +1,46 @@ +import React, { forwardRef, Ref } from 'react'; +import './index.scss'; + +type Props = { + left?: boolean + right?: boolean + negativeLeft?: boolean + negativeRight?: boolean + className?: string + children: React.ReactNode + ref?: Ref +} + +const baseClass = 'gutter'; + +export const Gutter: React.FC = forwardRef((props, ref) => { + const { + left = true, + right = true, + negativeLeft = false, + negativeRight = false, + className, + children, + } = props; + + const shouldPadLeft = left && !negativeLeft; + const shouldPadRight = right && !negativeRight; + + return ( +

+ {children} +
+ ); +}); + + +Gutter.displayName = 'Gutter'; diff --git a/src/admin/components/elements/IDLabel/index.scss b/src/admin/components/elements/IDLabel/index.scss index 7fa0eb14b..03aebbe5f 100644 --- a/src/admin/components/elements/IDLabel/index.scss +++ b/src/admin/components/elements/IDLabel/index.scss @@ -3,8 +3,8 @@ .id-label { font-size: base(.75); font-weight: normal; - color: $color-gray; - background: $color-background-gray; + color: var(--theme-elevation-400); + background: var(--theme-elevation-100); padding: base(.25) base(.5); border-radius: $style-radius-m; display: inline-flex; diff --git a/src/admin/components/elements/Loading/index.tsx b/src/admin/components/elements/Loading/index.tsx index 3ea2f886a..1eff18982 100644 --- a/src/admin/components/elements/Loading/index.tsx +++ b/src/admin/components/elements/Loading/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -const Loading: React.FC = () =>
Loading
; +const Loading: React.FC = () =>
; export default Loading; diff --git a/src/admin/components/elements/Localizer/index.scss b/src/admin/components/elements/Localizer/index.scss index a353fdb79..5a0b64cf4 100644 --- a/src/admin/components/elements/Localizer/index.scss +++ b/src/admin/components/elements/Localizer/index.scss @@ -4,6 +4,7 @@ position: relative; button { + color: currentColor; padding: base(.25) 0; font-size: 1rem; line-height: base(1); @@ -23,7 +24,7 @@ } span { - color: $color-gray; + color: var(--theme-elevation-400); } ul { diff --git a/src/admin/components/elements/Nav/index.scss b/src/admin/components/elements/Nav/index.scss index 5772ea8a0..3ce75ccf7 100644 --- a/src/admin/components/elements/Nav/index.scss +++ b/src/admin/components/elements/Nav/index.scss @@ -8,13 +8,15 @@ height: 100vh; width: base(9); overflow: hidden; + border-right: 1px solid var(--theme-elevation-100); header { width: 100%; display: flex; margin-bottom: base(1.5); - a, button { + a, + button { display: block; padding: 0; @@ -35,7 +37,8 @@ visibility: hidden; cursor: pointer; - &:active, &:focus { + &:active, + &:focus { outline: none; } } @@ -58,14 +61,14 @@ } &__label { - color: $color-gray; + color: var(--theme-elevation-400); } &__controls { margin-top: auto; margin-bottom: 0; - > * { + >* { margin-top: base(1); } } @@ -126,8 +129,8 @@ } @include mid-break { - background: rgba($color-background-gray, .8); - backdrop-filter: saturate(180%) blur(5px); + @include blur-bg; + position: fixed; width: 100%; height: base(3); z-index: $z-modal; @@ -141,7 +144,9 @@ header, &__wrap { - padding: $baseline; + position: relative; + z-index: 1; + padding: $baseline var(--gutter-h); } header { diff --git a/src/admin/components/elements/Paginator/ClickableArrow/index.scss b/src/admin/components/elements/Paginator/ClickableArrow/index.scss index 6e21852bb..487496c06 100644 --- a/src/admin/components/elements/Paginator/ClickableArrow/index.scss +++ b/src/admin/components/elements/Paginator/ClickableArrow/index.scss @@ -11,8 +11,8 @@ &--is-disabled { cursor: default; - .icon .stroke{ - stroke: $color-gray; + .icon .stroke { + stroke: var(--theme-elevation-400); } } } diff --git a/src/admin/components/elements/Paginator/index.scss b/src/admin/components/elements/Paginator/index.scss index 4d927de37..45d3ef4be 100644 --- a/src/admin/components/elements/Paginator/index.scss +++ b/src/admin/components/elements/Paginator/index.scss @@ -8,8 +8,8 @@ cursor: pointer; &--is-current { - background: $color-background-gray; - color: $color-gray; + background: var(--theme-elevation-100); + color: var(--theme-elevation-400); cursor: default; } @@ -28,11 +28,11 @@ align-content: center; outline: 0; padding: base(.5); - color: $color-dark-gray; + color: var(--theme-elevation-800); line-height: base(1); &:hover:not(.clickable-arrow--is-disabled) { - background: $color-background-gray; + background: var(--theme-elevation-100); } } @@ -43,6 +43,6 @@ &__separator { align-self: center; - color: $color-gray; + color: var(--theme-elevation-400); } } diff --git a/src/admin/components/elements/PerPage/index.scss b/src/admin/components/elements/PerPage/index.scss index 4b39f46e0..b06aa8fcb 100644 --- a/src/admin/components/elements/PerPage/index.scss +++ b/src/admin/components/elements/PerPage/index.scss @@ -15,7 +15,6 @@ &__button { @extend %btn-reset; - color: white; cursor: pointer; text-align: left; width: 100%; @@ -29,7 +28,7 @@ font-weight: bold; svg { - @include color-svg(white); + @include color-svg(var(--theme-elevation-1000)); margin-left: base(-.25); margin-right: base(-.125); transform: rotate(-90deg); diff --git a/src/admin/components/elements/PerPage/index.tsx b/src/admin/components/elements/PerPage/index.tsx index 2fcedca2b..4cc0d6afe 100644 --- a/src/admin/components/elements/PerPage/index.tsx +++ b/src/admin/components/elements/PerPage/index.tsx @@ -26,7 +26,6 @@ const PerPage: React.FC = ({ limits = defaultLimits, limit, handleChange, return (
diff --git a/src/admin/components/elements/Pill/index.scss b/src/admin/components/elements/Pill/index.scss index 7656af864..890427481 100644 --- a/src/admin/components/elements/Pill/index.scss +++ b/src/admin/components/elements/Pill/index.scss @@ -6,8 +6,8 @@ border: 0; display: inline-flex; vertical-align: middle; - background: $color-light-gray; - color: $color-dark-gray; + background: var(--theme-elevation-150); + color: var(--theme-elevation-800); border-radius: $style-radius-s; padding: 0 base(.25); padding-left: base(.0875 + .25); @@ -38,14 +38,15 @@ } &--style-white { - background: white; + background: var(--theme-elevation-0); + &.pill--has-action { &:hover { - background: lighten($color-light-gray, 3%); + background: var(--theme-elevation-100); } &:active { - background: lighten($color-light-gray, 5%); + background: var(--theme-elevation-100); } } } @@ -53,43 +54,43 @@ &--style-light { &.pill--has-action { &:hover { - background: lighten($color-light-gray, 3%); + background: var(--theme-elevation-100); } &:active { - background: lighten($color-light-gray, 5%); + background: var(--theme-elevation-100); } } } &--style-light-gray { - background: $color-background-gray; - color: $color-dark-gray; + background: var(--theme-elevation-100); + color: var(--theme-elevation-800); } &--style-warning { - background: $color-yellow; + background: var(--color-warning-500); } &--style-success { - background: $color-green; + background: var(--color-success-500); } &--style-dark { - background: $color-dark-gray; - color: white; + background: var(--theme-elevation-800); + color: var(--theme-elevation-0); svg { - @include color-svg(white); + @include color-svg(var(--theme-elevation-0)); } &.pill--has-action { &:hover { - background: lighten($color-dark-gray, 3%); + background: var(--theme-elevation-750); } &:active { - background: lighten($color-dark-gray, 5%); + background: var(--theme-elevation-700); } } } diff --git a/src/admin/components/elements/Popup/index.scss b/src/admin/components/elements/Popup/index.scss index cc165973d..30693ed9b 100644 --- a/src/admin/components/elements/Popup/index.scss +++ b/src/admin/components/elements/Popup/index.scss @@ -5,7 +5,7 @@ &__content { position: absolute; - background: white; + background: var(--theme-input-bg); opacity: 0; visibility: hidden; z-index: $z-modal; @@ -16,7 +16,7 @@ position: absolute; top: calc(100% - 1px); border: 12px solid transparent; - border-top-color: white; + border-top-color: var(--theme-input-bg); } } @@ -73,7 +73,7 @@ &:after { border: 12px solid transparent; - border-top-color: white; + border-top-color: var(--theme-input-bg); } } @@ -109,11 +109,11 @@ &--h-align-center { .popup__content { left: 50%; - transform: translateX(-50%); + transform: translateX(-0%); &:after { left: 50%; - transform: translateX(-50%); + transform: translateX(-0%); } } } @@ -147,14 +147,14 @@ top: unset; bottom: calc(100% - 1px); border-top-color: transparent !important; - border-bottom-color: white; + border-bottom-color: var(--theme-input-bg); } } &.popup--color-dark { .popup__content { &:after { - border-bottom-color: $color-dark-gray; + border-bottom-color: var(--theme-elevation-800); } } } @@ -166,11 +166,11 @@ &--color-dark { .popup__content { - background: $color-dark-gray; - color: white; + background: var(--theme-elevation-800); + color: var(--theme-input-bg); &:after { - border-top-color: $color-dark-gray; + border-top-color: var(--theme-elevation-800); } } } @@ -187,8 +187,9 @@ } @include mid-break { + &__scroll, - &--size-large .popup__scroll{ + &--size-large .popup__scroll { padding: base(.75); padding-right: calc(var(--scrollbar-width) + #{base(.75)}); } @@ -206,11 +207,11 @@ &--h-align-center { .popup__content { left: 50%; - transform: translateX(-50%); + transform: translateX(-0%); &:after { left: 50%; - transform: translateX(-50%); + transform: translateX(-0%); } } } diff --git a/src/admin/components/elements/ReactSelect/index.scss b/src/admin/components/elements/ReactSelect/index.scss index ef8b6dabb..a729906df 100644 --- a/src/admin/components/elements/ReactSelect/index.scss +++ b/src/admin/components/elements/ReactSelect/index.scss @@ -12,7 +12,7 @@ div.react-select { padding: base(.25) 0; min-height: base(1.5); - > * { + >* { margin-top: 0; margin-bottom: 0; padding-top: 0; @@ -43,6 +43,8 @@ div.react-select { } .rs__input { + color: var(--theme-elevation-1000); + input { font-family: $font-body; width: 100% !important; @@ -52,11 +54,12 @@ div.react-select { .rs__menu { z-index: 2; border-radius: 0; - @include inputShadowActive; + @include shadow-lg; + background: var(--theme-input-bg); } .rs__group-heading { - color: $color-dark-gray; + color: var(--theme-elevation-800); padding-left: base(.5); margin-bottom: base(.25); } @@ -65,21 +68,25 @@ div.react-select { font-family: $font-body; font-size: $baseline-body-size; padding: base(.375) base(.75); - color: $color-dark-gray; + color: var(--theme-elevation-800); &--is-focused { - background-color: rgba($color-dark-gray, .1); + background-color: var(--theme-elevation-100); } &--is-selected { - background-color: rgba($color-dark-gray, .5); + background-color: var(--theme-elevation-300); } } + .rs__single-value { + color: currentColor; + } + .rs__multi-value { padding: 0; background: transparent; - border: $style-stroke-width-s solid $color-dark-gray; + border: $style-stroke-width-s solid var(--theme-elevation-800); line-height: calc(#{$baseline} - #{$style-stroke-width-s * 2}); margin: base(.25) base(.5) base(.25) 0; } @@ -87,6 +94,7 @@ div.react-select { .rs__multi-value__label { padding: 0 base(.125) 0 base(.25); max-width: 150px; + color: currentColor; } .rs__multi-value__remove { @@ -94,14 +102,14 @@ div.react-select { cursor: pointer; &:hover { - color: $color-dark-gray; - background: rgba($color-red, .25); + color: var(--theme-elevation-800); + background: var(--color-error-150); } } &--error { div.rs__control { - background-color: lighten($color-red, 20%); + background-color: var(--color-error-200); } } } diff --git a/src/admin/components/elements/SortComplex/index.scss b/src/admin/components/elements/SortComplex/index.scss index 4ffc11948..736e19dec 100644 --- a/src/admin/components/elements/SortComplex/index.scss +++ b/src/admin/components/elements/SortComplex/index.scss @@ -1,7 +1,7 @@ @import '../../../scss/styles.scss'; .sort-complex { - background: $color-background-gray; + background: var(--theme-elevation-100); padding: base(0.5); display: flex; @@ -17,8 +17,9 @@ padding: 0 base(0.5); flex-grow: 1; } + &__label { - color: $color-gray; + color: var(--theme-elevation-400); margin: base(0.5) 0; } diff --git a/src/admin/components/elements/Status/index.scss b/src/admin/components/elements/Status/index.scss index 5ae4d2ffd..c50c44e41 100644 --- a/src/admin/components/elements/Status/index.scss +++ b/src/admin/components/elements/Status/index.scss @@ -27,4 +27,9 @@ margin-right: $baseline; } } + + &__modal-template { + position: relative; + z-index: 1; + } } diff --git a/src/admin/components/elements/Status/index.tsx b/src/admin/components/elements/Status/index.tsx index 3537bcac4..66e5d2f77 100644 --- a/src/admin/components/elements/Status/index.tsx +++ b/src/admin/components/elements/Status/index.tsx @@ -114,7 +114,7 @@ const Status: React.FC = () => { slug={unPublishModalSlug} className={`${baseClass}__modal`} > - +

Confirm unpublish

You are about to unpublish this document. Are you sure?

{ const editor = useSlate(); + const { theme } = useTheme(); const [error, setError] = useState(false); const [open, setOpen] = useState(element.url === undefined); @@ -45,7 +47,7 @@ const Link = ({ attributes, children, element, editorRef }) => { initActive={element.url === undefined} buttonType="none" size="small" - color="dark" + color={theme === 'dark' ? 'light' : 'dark'} horizontalAlign="center" forceOpen={open} onToggleOpen={handleToggleOpen} diff --git a/src/admin/components/forms/field-types/RichText/elements/relationship/Button/index.scss b/src/admin/components/forms/field-types/RichText/elements/relationship/Button/index.scss index ed233e77a..020815628 100644 --- a/src/admin/components/forms/field-types/RichText/elements/relationship/Button/index.scss +++ b/src/admin/components/forms/field-types/RichText/elements/relationship/Button/index.scss @@ -6,13 +6,15 @@ } &__modal { + @include blur-bg; display: flex; align-items: center; height: 100%; + } - &.payload__modal-item--enterDone { - @include blur-bg; - } + &__modal-template { + position: relative; + z-index: 1; } &__header { diff --git a/src/admin/components/forms/field-types/RichText/elements/relationship/Button/index.tsx b/src/admin/components/forms/field-types/RichText/elements/relationship/Button/index.tsx index 183495ce4..cc169b433 100644 --- a/src/admin/components/forms/field-types/RichText/elements/relationship/Button/index.tsx +++ b/src/admin/components/forms/field-types/RichText/elements/relationship/Button/index.tsx @@ -84,7 +84,7 @@ const RelationshipButton: React.FC<{path: string}> = ({ path }) => { slug={modalSlug} className={`${baseClass}__modal`} > - +

Add Relationship

-
{upload?.filename}
+ {upload?.filename}
{children} diff --git a/src/admin/components/forms/field-types/RichText/elements/upload/addSwapModals.scss b/src/admin/components/forms/field-types/RichText/elements/upload/addSwapModals.scss index 2a3048951..d4ade3754 100644 --- a/src/admin/components/forms/field-types/RichText/elements/upload/addSwapModals.scss +++ b/src/admin/components/forms/field-types/RichText/elements/upload/addSwapModals.scss @@ -8,6 +8,8 @@ .template-minimal { padding-top: base(4); align-items: flex-start; + position: relative; + z-index: 1; } &__header { diff --git a/src/admin/components/forms/field-types/RichText/index.scss b/src/admin/components/forms/field-types/RichText/index.scss index 485a0ef59..5bcee352a 100644 --- a/src/admin/components/forms/field-types/RichText/index.scss +++ b/src/admin/components/forms/field-types/RichText/index.scss @@ -5,18 +5,38 @@ display: flex; &__toolbar { - @include blur-bg(white); + @include blur-bg(var(--theme-elevation-0)); + margin-bottom: $baseline; + border: $style-stroke-width-s solid var(--theme-elevation-150); + position: sticky; + z-index: 2; + top: base(4); + } + + &__toolbar-wrap { + padding: base(.25); display: flex; flex-wrap: wrap; align-items: stretch; - margin-bottom: $baseline; - border: $style-stroke-width-s solid $color-light-gray; - padding: base(.25); - position: sticky; - top: base(5); + position: relative; + z-index: 1; + + &:after { + content: ' '; + opacity: .8; + position: absolute; + top: calc(100% + 1px); + background: linear-gradient(var(--theme-elevation-0), transparent); + display: block; + left: -1px; + right: -1px; + height: base(1); + } } &__editor { + font-family: var(--font-serif); + font-size: base(.625); [data-slate-node=element] { margin-bottom: base(0.25); @@ -25,8 +45,40 @@ h1, h2, h3, - h4 { - margin-bottom: base(.5); + h4, + h5, + h6 { + font-family: var(--font-body); + } + + h1[data-slate-node=element] { + font-size: base(1.5); + margin: base(1) 0 base(.5); + } + + h2[data-slate-node=element] { + font-size: base(1.25); + margin: base(1) 0 base(.5); + } + + h3[data-slate-node=element] { + font-size: base(1.125); + margin: base(.75) 0 base(.5); + } + + h4[data-slate-node=element] { + font-size: base(1); + margin: base(.5) 0 base(.5); + } + + h5[data-slate-node=element] { + font-size: base(.875); + margin: base(.25) 0 base(.25); + } + + h6[data-slate-node=element] { + font-size: base(.75); + margin: base(.25) 0 base(.25); } } @@ -45,7 +97,7 @@ &--read-only { .rich-text__editor { - background-color: $color-light-gray; + background-color: var(--theme-elevation-150); padding: base(.5); } } @@ -55,18 +107,18 @@ padding: base(0.25); svg { - @include color-svg($color-dark-gray); + @include color-svg(var(--theme-elevation-800)); width: base(0.75); height: base(0.75); } &:hover { - background-color: $color-background-gray; + background-color: var(--theme-elevation-100); } &__button--active, &__button--active:hover { - background-color: $color-light-gray; + background-color: var(--theme-elevation-150); } } } diff --git a/src/admin/components/forms/field-types/Select/index.scss b/src/admin/components/forms/field-types/Select/index.scss index 80b76e78f..280912ed4 100644 --- a/src/admin/components/forms/field-types/Select/index.scss +++ b/src/admin/components/forms/field-types/Select/index.scss @@ -8,7 +8,7 @@ .select--read-only { div.react-select { div.rs__control { - background: lighten($color-light-gray, 5%); + background: var(--theme-elevation-100); } } } diff --git a/src/admin/components/forms/field-types/Text/index.scss b/src/admin/components/forms/field-types/Text/index.scss index 9fbec4f43..f9ffce8b8 100644 --- a/src/admin/components/forms/field-types/Text/index.scss +++ b/src/admin/components/forms/field-types/Text/index.scss @@ -1,16 +1,16 @@ @import '../../../../scss/styles.scss'; .field-type.text { - position: relative; + position: relative; margin-bottom: $baseline; - input { - @include formInput; - } + input { + @include formInput; + } - &.error { - input { - background-color: lighten($color-red, 20%); - } - } + &.error { + input { + background-color: var(--color-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 0b74bdba2..45a07f3d1 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: lighten($color-red, 20%); + background-color: var(--color-error-200); } } } diff --git a/src/admin/components/forms/field-types/Upload/Add/index.scss b/src/admin/components/forms/field-types/Upload/Add/index.scss index e4048a079..7f6913773 100644 --- a/src/admin/components/forms/field-types/Upload/Add/index.scss +++ b/src/admin/components/forms/field-types/Upload/Add/index.scss @@ -8,6 +8,8 @@ .template-minimal { padding-top: base(6); align-items: flex-start; + position: relative; + z-index: 1; } &__header { diff --git a/src/admin/components/forms/field-types/Upload/SelectExisting/index.scss b/src/admin/components/forms/field-types/Upload/SelectExisting/index.scss index eafb60ab1..df99eb706 100644 --- a/src/admin/components/forms/field-types/Upload/SelectExisting/index.scss +++ b/src/admin/components/forms/field-types/Upload/SelectExisting/index.scss @@ -8,6 +8,8 @@ .template-minimal { padding-top: base(6); align-items: flex-start; + position: relative; + z-index: 1; } &__header { diff --git a/src/admin/components/forms/field-types/Upload/index.scss b/src/admin/components/forms/field-types/Upload/index.scss index fa7a591ab..6c657042a 100644 --- a/src/admin/components/forms/field-types/Upload/index.scss +++ b/src/admin/components/forms/field-types/Upload/index.scss @@ -1,14 +1,14 @@ @import '../../../../scss/styles'; .upload { - position: relative; + position: relative; margin-bottom: $baseline; min-width: base(15); &__wrap { display: flex; padding: base(1.5) base(1.5) $baseline; - background: $color-background-gray; + background: var(--theme-elevation-100); .btn { margin: 0 $baseline base(.5) 0; diff --git a/src/admin/components/graphics/Account/index.tsx b/src/admin/components/graphics/Account/index.tsx index c05037400..b75418ad2 100644 --- a/src/admin/components/graphics/Account/index.tsx +++ b/src/admin/components/graphics/Account/index.tsx @@ -1,26 +1,39 @@ import React from 'react'; +const css = ` + .graphic-account .circle1 { + fill: var(--theme-elevation-100); + } + + .graphic-account .circle2, .graphic-account path { + fill: var(--theme-elevation-300); + } +`; + const Account: React.FC = () => ( + diff --git a/src/admin/components/graphics/Icon/index.tsx b/src/admin/components/graphics/Icon/index.tsx index d202ef53b..cd9db6d23 100644 --- a/src/admin/components/graphics/Icon/index.tsx +++ b/src/admin/components/graphics/Icon/index.tsx @@ -2,20 +2,28 @@ import React from 'react'; import { useConfig } from '../../utilities/Config'; import RenderCustomComponent from '../../utilities/RenderCustomComponent'; +const css = ` + .graphic-icon path { + fill: var(--theme-elevation-1000); + } +`; + const PayloadIcon: React.FC = () => ( + ); diff --git a/src/admin/components/graphics/Logo/index.tsx b/src/admin/components/graphics/Logo/index.tsx index 659f30c79..84ff5df0e 100644 --- a/src/admin/components/graphics/Logo/index.tsx +++ b/src/admin/components/graphics/Logo/index.tsx @@ -2,6 +2,12 @@ import React from 'react'; import { useConfig } from '../../utilities/Config'; import RenderCustomComponent from '../../utilities/RenderCustomComponent'; +const css = ` + .graphic-logo path { + fill: var(--theme-elevation-1000); + } +`; + const PayloadLogo: React.FC = () => ( ( viewBox="0 0 180 50" fill="none" xmlns="http://www.w3.org/2000/svg" - className="logo" + className="graphic-logo" > + ); diff --git a/src/admin/components/icons/Calendar/index.scss b/src/admin/components/icons/Calendar/index.scss index 0a9cac23a..10b6ee866 100644 --- a/src/admin/components/icons/Calendar/index.scss +++ b/src/admin/components/icons/Calendar/index.scss @@ -5,7 +5,7 @@ width: $baseline; .stroke { - stroke: $color-dark-gray; + stroke: var(--theme-elevation-800); stroke-width: $style-stroke-width-s; } } diff --git a/src/admin/components/icons/Check/index.scss b/src/admin/components/icons/Check/index.scss index a5bc77c6a..3fdaab4da 100644 --- a/src/admin/components/icons/Check/index.scss +++ b/src/admin/components/icons/Check/index.scss @@ -6,7 +6,7 @@ .stroke { fill: none; - stroke: $color-dark-gray; + stroke: var(--theme-elevation-800); stroke-width: $style-stroke-width-m; } } diff --git a/src/admin/components/icons/Chevron/index.scss b/src/admin/components/icons/Chevron/index.scss index a49909a34..424776021 100644 --- a/src/admin/components/icons/Chevron/index.scss +++ b/src/admin/components/icons/Chevron/index.scss @@ -6,7 +6,7 @@ .stroke { fill: none; - stroke: $color-dark-gray; + stroke: var(--theme-elevation-800); stroke-width: $style-stroke-width-m; } } diff --git a/src/admin/components/icons/CloseMenu/index.scss b/src/admin/components/icons/CloseMenu/index.scss index adf332c38..02dad6a2c 100644 --- a/src/admin/components/icons/CloseMenu/index.scss +++ b/src/admin/components/icons/CloseMenu/index.scss @@ -5,6 +5,6 @@ width: $baseline; .fill { - fill: $color-dark-gray; + fill: var(--theme-elevation-800); } } diff --git a/src/admin/components/icons/Copy/index.scss b/src/admin/components/icons/Copy/index.scss index ee2c4ad1f..e0bae2cfc 100644 --- a/src/admin/components/icons/Copy/index.scss +++ b/src/admin/components/icons/Copy/index.scss @@ -6,7 +6,7 @@ .stroke { fill: none; - stroke: $color-dark-gray; + stroke: var(--theme-elevation-800); stroke-width: $style-stroke-width-s; } } diff --git a/src/admin/components/icons/Edit/index.scss b/src/admin/components/icons/Edit/index.scss index 0fdfa3767..2a579d7c5 100644 --- a/src/admin/components/icons/Edit/index.scss +++ b/src/admin/components/icons/Edit/index.scss @@ -6,7 +6,7 @@ shape-rendering: auto; .fill { - fill: $color-dark-gray; + fill: var(--theme-elevation-800); stroke: none; } } diff --git a/src/admin/components/icons/IndentLeft/index.scss b/src/admin/components/icons/IndentLeft/index.scss index d94900fd7..3ce1a5248 100644 --- a/src/admin/components/icons/IndentLeft/index.scss +++ b/src/admin/components/icons/IndentLeft/index.scss @@ -6,11 +6,11 @@ .stroke { fill: none; - stroke: $color-dark-gray; + stroke: var(--theme-elevation-800); stroke-width: $style-stroke-width-m; } .fill { - fill: $color-dark-gray; + fill: var(--theme-elevation-800); } } diff --git a/src/admin/components/icons/IndentRight/index.scss b/src/admin/components/icons/IndentRight/index.scss index 9a123bb39..c8111149c 100644 --- a/src/admin/components/icons/IndentRight/index.scss +++ b/src/admin/components/icons/IndentRight/index.scss @@ -6,11 +6,11 @@ .stroke { fill: none; - stroke: $color-dark-gray; + stroke: var(--theme-elevation-800); stroke-width: $style-stroke-width-m; } .fill { - fill: $color-dark-gray; + fill: var(--theme-elevation-800); } } diff --git a/src/admin/components/icons/IndentRight/index.tsx b/src/admin/components/icons/IndentRight/index.tsx index db6549201..0979eda8f 100644 --- a/src/admin/components/icons/IndentRight/index.tsx +++ b/src/admin/components/icons/IndentRight/index.tsx @@ -10,7 +10,7 @@ const IndentRight: React.FC = () => ( > ( ( y="4.5" width="18" height="2" - fill="#333333" + className="fill" /> ); diff --git a/src/admin/components/icons/Plus/index.scss b/src/admin/components/icons/Plus/index.scss index c1b0d8e6d..f3c3664a3 100644 --- a/src/admin/components/icons/Plus/index.scss +++ b/src/admin/components/icons/Plus/index.scss @@ -5,7 +5,7 @@ height: $baseline; .stroke { - stroke: $color-dark-gray; + stroke: var(--theme-elevation-800); stroke-width: $style-stroke-width; } } diff --git a/src/admin/components/icons/Relationship/index.scss b/src/admin/components/icons/Relationship/index.scss index a72f99b60..9bab28ab2 100644 --- a/src/admin/components/icons/Relationship/index.scss +++ b/src/admin/components/icons/Relationship/index.scss @@ -6,7 +6,7 @@ .stroke { fill: none; - stroke: $color-dark-gray; + stroke: var(--theme-elevation-800); stroke-width: $style-stroke-width-m; } } diff --git a/src/admin/components/icons/Search/index.scss b/src/admin/components/icons/Search/index.scss new file mode 100644 index 000000000..fa855dbe6 --- /dev/null +++ b/src/admin/components/icons/Search/index.scss @@ -0,0 +1,11 @@ +@import '../../../scss/styles'; + +.icon--search { + height: $baseline; + width: $baseline; + + .stroke { + stroke: var(--theme-elevation-800); + stroke-width: $style-stroke-width-s; + } +} diff --git a/src/admin/components/icons/Search/index.tsx b/src/admin/components/icons/Search/index.tsx index 470f96785..9066f74bb 100644 --- a/src/admin/components/icons/Search/index.tsx +++ b/src/admin/components/icons/Search/index.tsx @@ -1,9 +1,9 @@ import React from 'react'; +import './index.scss'; + const Search: React.FC = () => ( ( cx="11.2069" cy="10.7069" r="5" - stroke="#333333" - strokeWidth="2" + className="stroke" /> ); diff --git a/src/admin/components/icons/Swap/index.scss b/src/admin/components/icons/Swap/index.scss index 4f126c022..9ebbb7817 100644 --- a/src/admin/components/icons/Swap/index.scss +++ b/src/admin/components/icons/Swap/index.scss @@ -6,7 +6,7 @@ .stroke { fill: none; - stroke: $color-dark-gray; + stroke: var(--theme-elevation-800); stroke-width: $style-stroke-width-m; } } diff --git a/src/admin/components/icons/Upload/index.scss b/src/admin/components/icons/Upload/index.scss index 6e89c034a..80536168f 100644 --- a/src/admin/components/icons/Upload/index.scss +++ b/src/admin/components/icons/Upload/index.scss @@ -5,7 +5,7 @@ width: $baseline; .fill { - fill: $color-dark-gray; + fill: var(--theme-elevation-800); stroke: none; } } diff --git a/src/admin/components/icons/X/index.scss b/src/admin/components/icons/X/index.scss index 3b85ed6b1..df7744cde 100644 --- a/src/admin/components/icons/X/index.scss +++ b/src/admin/components/icons/X/index.scss @@ -2,7 +2,7 @@ .icon--x { line { - stroke: $color-dark-gray; + stroke: var(--theme-elevation-800); stroke-width: $style-stroke-width; } } diff --git a/src/admin/components/icons/X/index.tsx b/src/admin/components/icons/X/index.tsx index ad3e1a539..729bcac8f 100644 --- a/src/admin/components/icons/X/index.tsx +++ b/src/admin/components/icons/X/index.tsx @@ -2,11 +2,14 @@ import React from 'react'; import './index.scss'; -const X: React.FC = () => ( +const X: React.FC<{ className?: string }> = ({ className }) => ( diff --git a/src/admin/components/modals/LeaveWithoutSaving/index.scss b/src/admin/components/modals/LeaveWithoutSaving/index.scss index 0de395378..f7ae40e2f 100644 --- a/src/admin/components/modals/LeaveWithoutSaving/index.scss +++ b/src/admin/components/modals/LeaveWithoutSaving/index.scss @@ -9,6 +9,11 @@ bottom: 0; left: 0; + &__template { + position: relative; + z-index: 1; + } + .btn { margin-right: $baseline; } diff --git a/src/admin/components/modals/LeaveWithoutSaving/index.tsx b/src/admin/components/modals/LeaveWithoutSaving/index.tsx index d0797a25c..8aa63f4fc 100644 --- a/src/admin/components/modals/LeaveWithoutSaving/index.tsx +++ b/src/admin/components/modals/LeaveWithoutSaving/index.tsx @@ -17,7 +17,7 @@ const LeaveWithoutSaving: React.FC = () => { {({ onConfirm, onCancel }) => (
- +

Leave without saving

Your changes have not been saved. If you leave now, you will lose your changes.

-
+ ); }; diff --git a/src/admin/components/views/Version/Compare/index.scss b/src/admin/components/views/Version/Compare/index.scss index 385c383fc..f7ac08982 100644 --- a/src/admin/components/views/Version/Compare/index.scss +++ b/src/admin/components/views/Version/Compare/index.scss @@ -2,11 +2,11 @@ .compare-version { &__error-loading { - border: 1px solid $color-red; + border: 1px solid var(--color-error-500); min-height: base(2); padding: base(.5) base(.75); - background-color: $color-red; - color: white; + background-color: var(--color-error-500); + color: var(--theme-elevation-0); } &__label { diff --git a/src/admin/components/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss b/src/admin/components/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss index ae201e4ef..e221902d1 100644 --- a/src/admin/components/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss +++ b/src/admin/components/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss @@ -5,7 +5,7 @@ &__locale-label { margin-right: base(.25); - background: $color-background-gray; + background: var(--theme-elevation-100); padding: base(.25); border-radius: $style-radius-m; } @@ -13,13 +13,13 @@ &__wrap { margin: base(.5) 0; padding-left: base(.5); - border-left: $style-stroke-width-s solid $color-light-gray; + border-left: $style-stroke-width-s solid var(--theme-elevation-150); } &__no-rows { font-family: monospace; - background-color: #fafbfc; - padding: base(.125) 0; + background-color: var(--theme-elevation-50); + padding: base(.125) base(.5); margin: base(.125) 0; } } diff --git a/src/admin/components/views/Version/RenderFieldsToDiff/fields/Nested/index.scss b/src/admin/components/views/Version/RenderFieldsToDiff/fields/Nested/index.scss index 11a2fc155..609f619c4 100644 --- a/src/admin/components/views/Version/RenderFieldsToDiff/fields/Nested/index.scss +++ b/src/admin/components/views/Version/RenderFieldsToDiff/fields/Nested/index.scss @@ -3,6 +3,6 @@ .nested-diff { &__wrap--gutter { padding-left: base(1); - border-left: $style-stroke-width-s solid $color-light-gray; + border-left: $style-stroke-width-s solid var(--theme-elevation-150); } } diff --git a/src/admin/components/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss b/src/admin/components/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss index a499f9d6f..fb46996ae 100644 --- a/src/admin/components/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss +++ b/src/admin/components/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss @@ -3,7 +3,7 @@ .relationship-diff { &__locale-label { margin-right: base(.25); - background: $color-background-gray; + background: var(--theme-elevation-100); padding: base(.25); border-radius: $style-radius-m; } diff --git a/src/admin/components/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx b/src/admin/components/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx index 7fb897b1c..2e7845cda 100644 --- a/src/admin/components/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx +++ b/src/admin/components/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx @@ -6,6 +6,7 @@ import { SanitizedCollectionConfig } from '../../../../../../../collections/conf import { fieldAffectsData, fieldIsPresentationalOnly, RelationshipField } from '../../../../../../../fields/config/types'; import Label from '../../Label'; import { Props } from '../types'; +import { diffStyles } from '../styles'; import './index.scss'; @@ -85,6 +86,7 @@ const Relationship: React.FC = ({ field, ve {field.label} = ({ field, locale, version, comparison, isRichText {field.label} = ({ collection, global, className, versionID, or slug={modalSlug} className={`${baseClass}__modal`} > - +

Confirm version restoration

{restoreMessage}