payload 0.20.1 → 0.20.4-beta.0

package/dist/admin/components/views/collections/List/RelationshipProvider/index.js

@@ -0,0 +1,46 @@
+import React, { createContext, useCallback, useContext, useEffect, useReducer } from 'react';
+import querystring from 'qs';
+import { useConfig } from '../../../../utilities/Config';
+import { reducer } from './reducer';
+import useDebounce from '../../../../../hooks/useDebounce';
+const Context = createContext({});
+export const RelationshipProvider = ({ children }) => {
+    const [documents, dispatchDocuments] = useReducer(reducer, {});
+    const debouncedDocuments = useDebounce(documents, 100);
+    const config = useConfig();
+    const { serverURL, routes: { api }, } = config;
+    useEffect(() => {
+        Object.entries(debouncedDocuments).forEach(async ([slug, docs]) => {
+            const idsToLoad = [];
+            Object.entries(docs).forEach(([id, value]) => {
+                if (value === null) {
+                    idsToLoad.push(id);
+                }
+            });
+            if (idsToLoad.length > 0) {
+                const url = `${serverURL}${api}/${slug}`;
+                const params = {
+                    depth: 0,
+                    'where[id][in]': idsToLoad,
+                    pagination: false,
+                };
+                const query = querystring.stringify(params, { addQueryPrefix: true });
+                const result = await fetch(`${url}${query}`);
+                if (result.ok) {
+                    const json = await result.json();
+                    if (json.docs) {
+                        dispatchDocuments({ type: 'ADD_LOADED', docs: json.docs, relationTo: slug, idsToLoad });
+                    }
+                }
+                else {
+                    dispatchDocuments({ type: 'ADD_LOADED', docs: [], relationTo: slug, idsToLoad });
+                }
+            }
+        });
+    }, [serverURL, api, debouncedDocuments]);
+    const getRelationships = useCallback(async (relationships) => {
+        dispatchDocuments({ type: 'REQUEST', docs: relationships });
+    }, []);
+    return (React.createElement(Context.Provider, { value: { getRelationships, documents } }, children));
+};
+export const useListRelationships = () => useContext(Context);

package/dist/admin/components/views/collections/List/RelationshipProvider/reducer.d.ts

@@ -0,0 +1,18 @@
+import { Documents } from './index';
+import { TypeWithID } from '../../../../../../collections/config/types';
+declare type RequestDocuments = {
+    type: 'REQUEST';
+    docs: {
+        relationTo: string;
+        value: number | string;
+    }[];
+};
+declare type AddLoadedDocuments = {
+    type: 'ADD_LOADED';
+    relationTo: string;
+    docs: TypeWithID[];
+    idsToLoad: (string | number)[];
+};
+declare type Action = RequestDocuments | AddLoadedDocuments;
+export declare function reducer(state: Documents, action: Action): Documents;
+export {};

package/dist/admin/components/views/collections/List/RelationshipProvider/reducer.js

@@ -0,0 +1,34 @@
+export function reducer(state, action) {
+    switch (action.type) {
+        case 'REQUEST': {
+            const newState = { ...state };
+            action.docs.forEach(({ relationTo, value }) => {
+                if (typeof newState[relationTo] !== 'object') {
+                    newState[relationTo] = {};
+                }
+                newState[relationTo][value] = null;
+            });
+            return newState;
+        }
+        case 'ADD_LOADED': {
+            const newState = { ...state };
+            if (typeof newState[action.relationTo] !== 'object') {
+                newState[action.relationTo] = {};
+            }
+            const unreturnedIDs = [...action.idsToLoad];
+            if (Array.isArray(action.docs)) {
+                action.docs.forEach((doc) => {
+                    unreturnedIDs.splice(unreturnedIDs.indexOf(doc.id), 1);
+                    newState[action.relationTo][doc.id] = doc;
+                });
+            }
+            unreturnedIDs.forEach((id) => {
+                newState[action.relationTo][id] = false;
+            });
+            return newState;
+        }
+        default: {
+            return state;
+        }
+    }
+}

package/dist/admin/components/views/collections/List/buildColumns.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import Cell from './Cell';
 import SortColumn from '../../../elements/SortColumn';
-import { fieldHasSubFields, fieldAffectsData, fieldIsPresentationalOnly } from '../../../../../fields/config/types';
-const buildColumns = (collection, columns) => (columns || []).reduce((cols, col, colIndex) => {
-    let field = null;
-    const fields = [
+import { fieldIsPresentationalOnly } from '../../../../../fields/config/types';
+import flattenFields from '../../../../utilities/flattenTopLevelFields';
+const buildColumns = (collection, columns) => {
+    const flattenedFields = flattenFields([
         ...collection.fields,
         {
             name: 'id',
@@ -21,32 +21,27 @@ const buildColumns = (collection, columns) => (columns || []).reduce((cols, col,
             type: 'date',
             label: 'Created At',
         },
-    ];
-    fields.forEach((fieldToCheck) => {
-        if ((fieldAffectsData(fieldToCheck) || fieldIsPresentationalOnly(fieldToCheck)) && fieldToCheck.name === col) {
-            field = fieldToCheck;
-        }
-        if (!fieldAffectsData(fieldToCheck) && fieldHasSubFields(fieldToCheck)) {
-            fieldToCheck.fields.forEach((subField) => {
-                if (fieldAffectsData(subField) && subField.name === col) {
-                    field = subField;
-                }
-            });
-        }
-        return false;
-    });
-    if (field) {
-        return [
-            ...cols,
-            {
-                accessor: field.name,
-                components: {
-                    Heading: (React.createElement(SortColumn, { label: field.label || field.name, name: field.name, disable: (field.disableSort || fieldIsPresentationalOnly(field)) || undefined })),
-                    renderCell: (rowData, cellData) => (React.createElement(Cell, { field: field, colIndex: colIndex, collection: collection, rowData: rowData, cellData: cellData })),
+    ], true);
+    return (columns || []).reduce((cols, col, colIndex) => {
+        let field = null;
+        flattenedFields.forEach((fieldToCheck) => {
+            if (fieldToCheck.name === col) {
+                field = fieldToCheck;
+            }
+        });
+        if (field) {
+            return [
+                ...cols,
+                {
+                    accessor: field.name,
+                    components: {
+                        Heading: (React.createElement(SortColumn, { label: field.label || field.name, name: field.name, disable: (field.disableSort || fieldIsPresentationalOnly(field)) || undefined })),
+                        renderCell: (rowData, cellData) => (React.createElement(Cell, { key: JSON.stringify(cellData), field: field, colIndex: colIndex, collection: collection, rowData: rowData, cellData: cellData })),
+                    },
                 },
-            },
-        ];
-    }
-    return cols;
-}, []);
+            ];
+        }
+        return cols;
+    }, []);
+};
 export default buildColumns;

package/dist/admin/components/views/collections/List/getInitialColumns.js

@@ -1,4 +1,28 @@
 import { fieldHasSubFields, fieldAffectsData } from '../../../../../fields/config/types';
+const getRemainingColumns = (fields, useAsTitle) => fields.reduce((remaining, field) => {
+    if (fieldAffectsData(field) && field.name === useAsTitle) {
+        return remaining;
+    }
+    if (!fieldAffectsData(field) && fieldHasSubFields(field)) {
+        return [
+            ...remaining,
+            ...getRemainingColumns(field.fields, useAsTitle),
+        ];
+    }
+    if (field.type === 'tabs') {
+        return [
+            ...remaining,
+            ...field.tabs.reduce((tabFieldColumns, tab) => [
+                ...tabFieldColumns,
+                ...getRemainingColumns(tab.fields, useAsTitle),
+            ], []),
+        ];
+    }
+    return [
+        ...remaining,
+        field.name,
+    ];
+}, []);
 const getInitialColumnState = (fields, useAsTitle, defaultColumns) => {
     let initialColumns = [];
     if (Array.isArray(defaultColumns) && defaultColumns.length >= 1) {
@@ -7,29 +31,7 @@ const getInitialColumnState = (fields, useAsTitle, defaultColumns) => {
     if (useAsTitle) {
         initialColumns.push(useAsTitle);
     }
-    const remainingColumns = fields.reduce((remaining, field) => {
-        if (fieldAffectsData(field) && field.name === useAsTitle) {
-            return remaining;
-        }
-        if (!fieldAffectsData(field) && fieldHasSubFields(field)) {
-            return [
-                ...remaining,
-                ...field.fields.reduce((subFields, subField) => {
-                    if (fieldAffectsData(subField)) {
-                        return [
-                            ...subFields,
-                            subField.name,
-                        ];
-                    }
-                    return subFields;
-                }, []),
-            ];
-        }
-        return [
-            ...remaining,
-            field.name,
-        ];
-    }, []);
+    const remainingColumns = getRemainingColumns(fields, useAsTitle);
     initialColumns = initialColumns.concat(remainingColumns);
     initialColumns = initialColumns.slice(0, 4);
     return initialColumns;

package/dist/admin/components/views/collections/List/index.js

@@ -46,7 +46,7 @@ const ListView = (props) => {
     // /////////////////////////////////////
     useEffect(() => {
         const params = {
-            depth: 1,
+            depth: 0,
             draft: 'true',
             page: undefined,
             sort: undefined,
@@ -74,7 +74,7 @@ const ListView = (props) => {
             if (currentPreferences === null || currentPreferences === void 0 ? void 0 : currentPreferences.columns) {
                 setTableColumns(buildColumns(collection, currentPreferences === null || currentPreferences === void 0 ? void 0 : currentPreferences.columns));
             }
-            const params = queryString.parse(history.location.search, { ignoreQueryPrefix: true, depth: 10 });
+            const params = queryString.parse(history.location.search, { ignoreQueryPrefix: true, depth: 0 });
             const search = {
                 ...params,
                 sort: (params === null || params === void 0 ? void 0 : params.sort) || (currentPreferences === null || currentPreferences === void 0 ? void 0 : currentPreferences.sort),

package/dist/admin/components/views/collections/List/index.scss

@@ -5,9 +5,8 @@
   margin-bottom: base(2);
 
   &__wrap {
-    padding: base(3);
-    margin-right: base(2);
-    background: white;
+    padding-top: $baseline;
+    padding-bottom: $baseline;
   }
 
   &__header {
@@ -58,18 +57,8 @@
 
   @include mid-break {
     &__wrap {
-      padding: $baseline 0;
-      margin-right: 0;
-    }
-
-    &__header,
-    .list-controls,
-    .table,
-    .upload-gallery,
-    &__no-results,
-    &__page-controls {
-      padding-left: $baseline;
-      padding-right: $baseline;
+      padding-top: 0;
+      padding-bottom: 0;
     }
 
     &__header {

package/dist/admin/index.js

@@ -16,6 +16,7 @@ import { SearchParamsProvider } from './components/utilities/SearchParams';
 import { LocaleProvider } from './components/utilities/Locale';
 import Routes from './components/Routes';
 import { StepNavProvider } from './components/elements/StepNav';
+import { ThemeProvider } from './components/utilities/Theme';
 import './scss/app.scss';
 const Index = () => (React.createElement(React.Fragment, null,
     React.createElement(ConfigProvider, { config: config },
@@ -30,11 +31,12 @@ const Index = () => (React.createElement(React.Fragment, null,
                     React.createElement(ModalProvider, { classPrefix: "payload", zIndex: 50 },
                         React.createElement(AuthProvider, null,
                             React.createElement(PreferencesProvider, null,
-                                React.createElement(SearchParamsProvider, null,
-                                    React.createElement(LocaleProvider, null,
-                                        React.createElement(StepNavProvider, null,
-                                            React.createElement(CustomProvider, null,
-                                                React.createElement(Routes, null))))),
+                                React.createElement(ThemeProvider, null,
+                                    React.createElement(SearchParamsProvider, null,
+                                        React.createElement(LocaleProvider, null,
+                                            React.createElement(StepNavProvider, null,
+                                                React.createElement(CustomProvider, null,
+                                                    React.createElement(Routes, null)))))),
                                 React.createElement(ModalContainer, null)))))))),
     React.createElement(ToastContainer, { position: "bottom-center", transition: Slide, icon: false })));
 const container = document.getElementById('app');

package/dist/admin/scss/app.scss

@@ -1,14 +1,36 @@
 @import 'fonts';
 @import 'styles';
 @import './toastify.scss';
+@import './colors.scss';
 
 :root {
   --breakpoint-xs-width : #{$breakpoint-xs-width};
-  --breakpoint-s-width  : #{$breakpoint-s-width};
-  --breakpoint-m-width  : #{$breakpoint-m-width};
-  --breakpoint-l-width  : #{$breakpoint-l-width};
+  --breakpoint-s-width : #{$breakpoint-s-width};
+  --breakpoint-m-width : #{$breakpoint-m-width};
+  --breakpoint-l-width : #{$breakpoint-l-width};
   --z-modal: #{$z-modal};
   --scrollbar-width: 17px;
+
+  --theme-bg: var(--theme-elevation-0);
+  --theme-input-bg: var(--theme-elevation-0);
+  --theme-text: var(--theme-elevation-800);
+  --font-body: 'Suisse Intl', system-ui;
+  --font-mono: monospace;
+  --font-serif: 'Merriweather', serif;
+
+  --gutter-h: #{base(5)};
+
+  @include large-break {
+    --gutter-h: #{base(3)};
+  }
+
+  @include mid-break {
+    --gutter-h: #{base(2)};
+  }
+
+  @include small-break {
+    --gutter-h: #{base(.5)};
+  }
 }
 
 /////////////////////////////
@@ -21,9 +43,23 @@
 
 html {
   @extend %body;
-  background: $color-background-gray;
+  background: var(--theme-bg);
   -webkit-font-smoothing: antialiased;
 
+  &[data-theme=dark] {
+    --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);
+    }
+
+    ::-moz-selection {
+      color: var(--color-base-1000);
+    }
+  }
+
   @include mid-break {
     font-size: 12px;
   }
@@ -36,21 +72,20 @@ body,
 }
 
 body {
-  font-family: $font-body;
+  font-family: var(--font-body);
   font-weight: 400;
-  color: $color-dark-gray;
+  color: var(--theme-text);
   margin: 0;
 }
 
-
 ::selection {
-  background: $color-green;
-  color: $color-dark-gray;
+  background: var(--theme-success-500);
+  color: var(--theme-base-800);
 }
 
 ::-moz-selection {
-  background: $color-green;
-  color: $color-dark-gray;
+  background: var(--theme-success-500);
+  color: var(--theme-base-800);
 }
 
 img {
@@ -84,16 +119,17 @@ h6 {
 }
 
 p {
-    margin: 0 0 $baseline;
+  margin: 0 0 $baseline;
 }
 
-ul, ol {
+ul,
+ol {
   padding-left: $baseline;
   margin: 0 0 $baseline;
 }
 
 a {
-  color: $color-dark-gray;
+  color: currentColor;
 
   &:focus {
     opacity: .8;
@@ -114,10 +150,12 @@ dialog {
   width: 100%;
   border: 0;
   padding: 0;
+  color: currentColor;
 }
 
 .payload__modal-item {
   min-height: 100%;
+  background: transparent;
 }
 
 .payload__modal-container--enterDone {

package/dist/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);
+}