@payloadcms/richtext-slate 3.0.0-canary.a0b06af → 3.0.0-canary.a5aaf21

package/dist/index.js

@@ -1,10 +1,9 @@
 import { sanitizeFields, withNullableJSONSchemaType } from 'payload';
-import { RichTextCell } from './cell/index.js';
 import { richTextRelationshipPromise } from './data/richTextRelationshipPromise.js';
 import { richTextValidate } from './data/validation.js';
+import { elements as elementTypes } from './field/elements/index.js';
 import { transformExtraFields } from './field/elements/link/utilities.js';
-import { RichTextField } from './field/index.js';
-import { getGenerateComponentMap } from './generateComponentMap.js';
+import { defaultLeaves as leafTypes } from './field/leaves/index.js';
 import { getGenerateSchemaMap } from './generateSchemaMap.js';
 export function slateEditor(args) {
     return async ({ config })=>{
@@ -21,6 +20,7 @@ export function slateEditor(args) {
         args.admin.link.fields = await sanitizeFields({
             config: config,
             fields: transformExtraFields(args.admin?.link?.fields, config),
+            parentIsLocalized: false,
             validRelationships
         });
         if (args?.admin?.upload?.collections) {
@@ -29,15 +29,72 @@ export function slateEditor(args) {
                     args.admin.upload.collections[collection].fields = await sanitizeFields({
                         config: config,
                         fields: args.admin?.upload?.collections[collection]?.fields,
+                        parentIsLocalized: false,
                         validRelationships
                     });
                 }
             }
         }
         return {
-            CellComponent: RichTextCell,
-            FieldComponent: RichTextField,
-            generateComponentMap: getGenerateComponentMap(args),
+            CellComponent: '@payloadcms/richtext-slate/client#RichTextCell',
+            FieldComponent: '@payloadcms/richtext-slate/client#RichTextField',
+            generateComponentMap: {
+                path: '@payloadcms/richtext-slate/generateComponentMap#getGenerateComponentMap',
+                serverProps: args
+            },
+            generateImportMap: ({ addToImportMap })=>{
+                addToImportMap('@payloadcms/richtext-slate/client#RichTextCell');
+                addToImportMap('@payloadcms/richtext-slate/client#RichTextField');
+                addToImportMap('@payloadcms/richtext-slate/generateComponentMap#getGenerateComponentMap');
+                Object.values(leafTypes).forEach((leaf)=>{
+                    if (leaf.Button) {
+                        addToImportMap(leaf.Button);
+                    }
+                    if (leaf.Leaf) {
+                        addToImportMap(leaf.Leaf);
+                    }
+                    if (Array.isArray(leaf.plugins) && leaf.plugins?.length) {
+                        addToImportMap(leaf.plugins);
+                    }
+                });
+                args?.admin?.leaves?.forEach((leaf)=>{
+                    if (typeof leaf === 'object') {
+                        if (leaf.Button) {
+                            addToImportMap(leaf.Button);
+                        }
+                        if (leaf.Leaf) {
+                            addToImportMap(leaf.Leaf);
+                        }
+                        if (Array.isArray(leaf.plugins) && leaf.plugins?.length) {
+                            addToImportMap(leaf.plugins);
+                        }
+                    }
+                });
+                Object.values(elementTypes).forEach((element)=>{
+                    if (element.Button) {
+                        addToImportMap(element.Button);
+                    }
+                    if (element.Element) {
+                        addToImportMap(element.Element);
+                    }
+                    if (Array.isArray(element.plugins) && element.plugins?.length) {
+                        addToImportMap(element.plugins);
+                    }
+                });
+                args?.admin?.elements?.forEach((element)=>{
+                    if (typeof element === 'object') {
+                        if (element.Button) {
+                            addToImportMap(element.Button);
+                        }
+                        if (element.Element) {
+                            addToImportMap(element.Element);
+                        }
+                        if (Array.isArray(element.plugins) && element.plugins?.length) {
+                            addToImportMap(element.plugins);
+                        }
+                    }
+                });
+            },
             generateSchemaMap: getGenerateSchemaMap(args),
             graphQLPopulationPromises ({ context, currentDepth, depth, draft, field, fieldPromises, findMany, flattenLocales, overrideAccess, populationPromises, req, showHiddenFields, siblingDoc }) {
                 if (field.admin?.elements?.includes('relationship') || field.admin?.elements?.includes('upload') || field.admin?.elements?.includes('link') || !field?.admin?.elements) {
@@ -95,10 +152,6 @@ export function slateEditor(args) {
         };
     };
 }
-export { ElementButton } from './field/elements/Button.js';
-export { toggleElement } from './field/elements/toggle.js';
-export { LeafButton } from './field/leaves/Button.js';
-export { useLeaf } from './field/providers/LeafProvider.js';
 export { nodeIsTextNode } from './types.js';
 
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import type { Config, RichTextAdapterProvider } from 'payload'\n\nimport { sanitizeFields, withNullableJSONSchemaType } from 'payload'\n\nimport type { AdapterArguments } from './types.js'\n\nimport { RichTextCell } from './cell/index.js'\nimport { richTextRelationshipPromise } from './data/richTextRelationshipPromise.js'\nimport { richTextValidate } from './data/validation.js'\nimport { transformExtraFields } from './field/elements/link/utilities.js'\nimport { RichTextField } from './field/index.js'\nimport { getGenerateComponentMap } from './generateComponentMap.js'\nimport { getGenerateSchemaMap } from './generateSchemaMap.js'\n\nexport function slateEditor(\n  args: AdapterArguments,\n): RichTextAdapterProvider<any[], AdapterArguments, any> {\n  return async ({ config }) => {\n    const validRelationships = config.collections.map((c) => c.slug) || []\n\n    if (!args.admin) {\n      args.admin = {}\n    }\n    if (!args.admin.link) {\n      args.admin.link = {}\n    }\n    if (!args.admin.link.fields) {\n      args.admin.link.fields = []\n    }\n    args.admin.link.fields = await sanitizeFields({\n      config: config as unknown as Config,\n      fields: transformExtraFields(args.admin?.link?.fields, config),\n      validRelationships,\n    })\n\n    if (args?.admin?.upload?.collections) {\n      for (const collection of Object.keys(args.admin.upload.collections)) {\n        if (args?.admin?.upload?.collections[collection]?.fields) {\n          args.admin.upload.collections[collection].fields = await sanitizeFields({\n            config: config as unknown as Config,\n            fields: args.admin?.upload?.collections[collection]?.fields,\n            validRelationships,\n          })\n        }\n      }\n    }\n\n    return {\n      CellComponent: RichTextCell,\n      FieldComponent: RichTextField,\n      generateComponentMap: getGenerateComponentMap(args),\n      generateSchemaMap: getGenerateSchemaMap(args),\n      graphQLPopulationPromises({\n        context,\n        currentDepth,\n        depth,\n        draft,\n        field,\n        fieldPromises,\n        findMany,\n        flattenLocales,\n        overrideAccess,\n        populationPromises,\n        req,\n        showHiddenFields,\n        siblingDoc,\n      }) {\n        if (\n          field.admin?.elements?.includes('relationship') ||\n          field.admin?.elements?.includes('upload') ||\n          field.admin?.elements?.includes('link') ||\n          !field?.admin?.elements\n        ) {\n          richTextRelationshipPromise({\n            context,\n            currentDepth,\n            depth,\n            draft,\n            field,\n            fieldPromises,\n            findMany,\n            flattenLocales,\n            overrideAccess,\n            populationPromises,\n            req,\n            showHiddenFields,\n            siblingDoc,\n          })\n        }\n      },\n      hooks: {\n        afterRead: [\n          ({\n            context: _context,\n            currentDepth,\n            depth,\n            draft,\n            field: _field,\n            fieldPromises,\n            findMany,\n            flattenLocales,\n            overrideAccess,\n            populationPromises,\n            req,\n            showHiddenFields,\n            siblingData,\n          }) => {\n            const context: any = _context\n            const field = _field as any\n            if (\n              field.admin?.elements?.includes('relationship') ||\n              field.admin?.elements?.includes('upload') ||\n              field.admin?.elements?.includes('link') ||\n              !field?.admin?.elements\n            ) {\n              richTextRelationshipPromise({\n                context,\n                currentDepth,\n                depth,\n                draft,\n                field,\n                fieldPromises,\n                findMany,\n                flattenLocales,\n                overrideAccess,\n                populationPromises,\n                req,\n                showHiddenFields,\n                siblingDoc: siblingData,\n              })\n            }\n          },\n        ],\n      },\n      outputSchema: ({ isRequired }) => {\n        return {\n          type: withNullableJSONSchemaType('array', isRequired),\n          items: {\n            type: 'object',\n          },\n        }\n      },\n      validate: richTextValidate,\n    }\n  }\n}\n\nexport { ElementButton } from './field/elements/Button.js'\n\nexport { toggleElement } from './field/elements/toggle.js'\nexport { LeafButton } from './field/leaves/Button.js'\nexport { useLeaf } from './field/providers/LeafProvider.js'\n\nexport type {\n  AdapterArguments,\n  ElementNode,\n  FieldProps,\n  RichTextCustomElement,\n  RichTextCustomLeaf,\n  RichTextElement,\n  RichTextLeaf,\n  TextNode,\n} from './types.js'\n\nexport { nodeIsTextNode } from './types.js'\n"],"names":["sanitizeFields","withNullableJSONSchemaType","RichTextCell","richTextRelationshipPromise","richTextValidate","transformExtraFields","RichTextField","getGenerateComponentMap","getGenerateSchemaMap","slateEditor","args","config","validRelationships","collections","map","c","slug","admin","link","fields","upload","collection","Object","keys","CellComponent","FieldComponent","generateComponentMap","generateSchemaMap","graphQLPopulationPromises","context","currentDepth","depth","draft","field","fieldPromises","findMany","flattenLocales","overrideAccess","populationPromises","req","showHiddenFields","siblingDoc","elements","includes","hooks","afterRead","_context","_field","siblingData","outputSchema","isRequired","type","items","validate","ElementButton","toggleElement","LeafButton","useLeaf","nodeIsTextNode"],"mappings":"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"}
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import type { Config, RichTextAdapterProvider } from 'payload'\n\nimport { sanitizeFields, withNullableJSONSchemaType } from 'payload'\n\nimport type { AdapterArguments } from './types.js'\n\nimport { richTextRelationshipPromise } from './data/richTextRelationshipPromise.js'\nimport { richTextValidate } from './data/validation.js'\nimport { elements as elementTypes } from './field/elements/index.js'\nimport { transformExtraFields } from './field/elements/link/utilities.js'\nimport { defaultLeaves as leafTypes } from './field/leaves/index.js'\nimport { getGenerateSchemaMap } from './generateSchemaMap.js'\n\nexport function slateEditor(\n  args: AdapterArguments,\n): RichTextAdapterProvider<any[], AdapterArguments, any> {\n  return async ({ config }) => {\n    const validRelationships = config.collections.map((c) => c.slug) || []\n\n    if (!args.admin) {\n      args.admin = {}\n    }\n    if (!args.admin.link) {\n      args.admin.link = {}\n    }\n    if (!args.admin.link.fields) {\n      args.admin.link.fields = []\n    }\n    args.admin.link.fields = await sanitizeFields({\n      config: config as unknown as Config,\n      fields: transformExtraFields(args.admin?.link?.fields, config),\n      parentIsLocalized: false,\n      validRelationships,\n    })\n\n    if (args?.admin?.upload?.collections) {\n      for (const collection of Object.keys(args.admin.upload.collections)) {\n        if (args?.admin?.upload?.collections[collection]?.fields) {\n          args.admin.upload.collections[collection].fields = await sanitizeFields({\n            config: config as unknown as Config,\n            fields: args.admin?.upload?.collections[collection]?.fields,\n            parentIsLocalized: false,\n            validRelationships,\n          })\n        }\n      }\n    }\n\n    return {\n      CellComponent: '@payloadcms/richtext-slate/client#RichTextCell',\n      FieldComponent: '@payloadcms/richtext-slate/client#RichTextField',\n      generateComponentMap: {\n        path: '@payloadcms/richtext-slate/generateComponentMap#getGenerateComponentMap',\n        serverProps: args,\n      },\n      generateImportMap: ({ addToImportMap }) => {\n        addToImportMap('@payloadcms/richtext-slate/client#RichTextCell')\n        addToImportMap('@payloadcms/richtext-slate/client#RichTextField')\n        addToImportMap('@payloadcms/richtext-slate/generateComponentMap#getGenerateComponentMap')\n        Object.values(leafTypes).forEach((leaf) => {\n          if (leaf.Button) {\n            addToImportMap(leaf.Button)\n          }\n          if (leaf.Leaf) {\n            addToImportMap(leaf.Leaf)\n          }\n          if (Array.isArray(leaf.plugins) && leaf.plugins?.length) {\n            addToImportMap(leaf.plugins)\n          }\n        })\n        args?.admin?.leaves?.forEach((leaf) => {\n          if (typeof leaf === 'object') {\n            if (leaf.Button) {\n              addToImportMap(leaf.Button)\n            }\n            if (leaf.Leaf) {\n              addToImportMap(leaf.Leaf)\n            }\n            if (Array.isArray(leaf.plugins) && leaf.plugins?.length) {\n              addToImportMap(leaf.plugins)\n            }\n          }\n        })\n\n        Object.values(elementTypes).forEach((element) => {\n          if (element.Button) {\n            addToImportMap(element.Button)\n          }\n          if (element.Element) {\n            addToImportMap(element.Element)\n          }\n          if (Array.isArray(element.plugins) && element.plugins?.length) {\n            addToImportMap(element.plugins)\n          }\n        })\n\n        args?.admin?.elements?.forEach((element) => {\n          if (typeof element === 'object') {\n            if (element.Button) {\n              addToImportMap(element.Button)\n            }\n            if (element.Element) {\n              addToImportMap(element.Element)\n            }\n            if (Array.isArray(element.plugins) && element.plugins?.length) {\n              addToImportMap(element.plugins)\n            }\n          }\n        })\n      },\n      generateSchemaMap: getGenerateSchemaMap(args),\n      graphQLPopulationPromises({\n        context,\n        currentDepth,\n        depth,\n        draft,\n        field,\n        fieldPromises,\n        findMany,\n        flattenLocales,\n        overrideAccess,\n        populationPromises,\n        req,\n        showHiddenFields,\n        siblingDoc,\n      }) {\n        if (\n          field.admin?.elements?.includes('relationship') ||\n          field.admin?.elements?.includes('upload') ||\n          field.admin?.elements?.includes('link') ||\n          !field?.admin?.elements\n        ) {\n          richTextRelationshipPromise({\n            context,\n            currentDepth,\n            depth,\n            draft,\n            field,\n            fieldPromises,\n            findMany,\n            flattenLocales,\n            overrideAccess,\n            populationPromises,\n            req,\n            showHiddenFields,\n            siblingDoc,\n          })\n        }\n      },\n      hooks: {\n        afterRead: [\n          ({\n            context: _context,\n            currentDepth,\n            depth,\n            draft,\n            field: _field,\n            fieldPromises,\n            findMany,\n            flattenLocales,\n            overrideAccess,\n            populationPromises,\n            req,\n            showHiddenFields,\n            siblingData,\n          }) => {\n            const context: any = _context\n            const field = _field as any\n            if (\n              field.admin?.elements?.includes('relationship') ||\n              field.admin?.elements?.includes('upload') ||\n              field.admin?.elements?.includes('link') ||\n              !field?.admin?.elements\n            ) {\n              richTextRelationshipPromise({\n                context,\n                currentDepth,\n                depth,\n                draft,\n                field,\n                fieldPromises,\n                findMany,\n                flattenLocales,\n                overrideAccess,\n                populationPromises,\n                req,\n                showHiddenFields,\n                siblingDoc: siblingData,\n              })\n            }\n          },\n        ],\n      },\n      outputSchema: ({ isRequired }) => {\n        return {\n          type: withNullableJSONSchemaType('array', isRequired),\n          items: {\n            type: 'object',\n          },\n        }\n      },\n      validate: richTextValidate,\n    }\n  }\n}\n\nexport type {\n  AdapterArguments,\n  ElementNode,\n  RichTextCustomElement,\n  RichTextCustomLeaf,\n  RichTextElement,\n  RichTextLeaf,\n  RichTextPlugin,\n  RichTextPluginComponent,\n  SlateFieldProps,\n  TextNode,\n} from './types.js'\n\nexport { nodeIsTextNode } from './types.js'\n"],"names":["sanitizeFields","withNullableJSONSchemaType","richTextRelationshipPromise","richTextValidate","elements","elementTypes","transformExtraFields","defaultLeaves","leafTypes","getGenerateSchemaMap","slateEditor","args","config","validRelationships","collections","map","c","slug","admin","link","fields","parentIsLocalized","upload","collection","Object","keys","CellComponent","FieldComponent","generateComponentMap","path","serverProps","generateImportMap","addToImportMap","values","forEach","leaf","Button","Leaf","Array","isArray","plugins","length","leaves","element","Element","generateSchemaMap","graphQLPopulationPromises","context","currentDepth","depth","draft","field","fieldPromises","findMany","flattenLocales","overrideAccess","populationPromises","req","showHiddenFields","siblingDoc","includes","hooks","afterRead","_context","_field","siblingData","outputSchema","isRequired","type","items","validate","nodeIsTextNode"],"mappings":"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"}

package/dist/scss/app.scss

@@ -3,7 +3,7 @@
 @import './colors.scss';
 
 :root {
-  --base-px: 25;
+  --base-px: 20;
   --base-body-size: 13;
   --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
 
@@ -21,7 +21,8 @@
   --theme-baseline-body-size: #{$baseline-body-size};
   --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
     sans-serif;
-  --font-mono: monospace;
+  --font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
+  --font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;
 
   --style-radius-s: #{$style-radius-s};
   --style-radius-m: #{$style-radius-m};
@@ -37,19 +38,19 @@
 
   --gutter-h: #{base(3)};
   --spacing-view-bottom: var(--gutter-h);
-  --app-header-height: calc(var(--base) * 3);
-  --doc-controls-height: calc(var(--base) * 3);
+  --doc-controls-height: calc(var(--base) * 2.8);
+  --app-header-height: calc(var(--base) * 2.8);
   --nav-width: 275px;
   --nav-trans-time: 150ms;
 
   @include mid-break {
     --gutter-h: #{base(2)};
-    --app-header-height: calc(var(--base) * 2);
-    --doc-controls-height: calc(var(--base) * 2.5);
+    --app-header-height: calc(var(--base) * 2.4);
+    --doc-controls-height: calc(var(--base) * 2.4);
   }
 
   @include small-break {
-    --gutter-h: #{base(0.5)};
+    --gutter-h: #{base(0.8)};
     --spacing-view-bottom: calc(var(--base) * 2);
     --nav-width: 100vw;
   }
@@ -67,12 +68,6 @@ html {
   @extend %body;
   background: var(--theme-bg);
   -webkit-font-smoothing: antialiased;
-  opacity: 0;
-
-  &[data-theme='dark'],
-  &[data-theme='light'] {
-    opacity: initial;
-  }
 
   &[data-theme='dark'] {
     --theme-bg: var(--theme-elevation-0);
@@ -111,12 +106,12 @@ body {
 }
 
 ::selection {
-  background: var(--theme-success-500);
+  background: var(--color-success-250);
   color: var(--theme-base-800);
 }
 
 ::-moz-selection {
-  background: var(--theme-success-500);
+  background: var(--color-success-250);
   color: var(--theme-base-800);
 }
 
@@ -151,13 +146,13 @@ h6 {
 }
 
 p {
-  margin: 0 0 $baseline;
+  margin: 0;
 }
 
 ul,
 ol {
   padding-left: $baseline;
-  margin: 0 0 $baseline;
+  margin: 0;
 }
 
 :focus-visible {

package/dist/scss/toastify.scss

@@ -0,0 +1,59 @@
+@import 'vars';
+@import 'queries';
+
+.Toastify {
+  .Toastify__toast-container {
+    left: base(5);
+    transform: none;
+    right: base(5);
+    width: auto;
+  }
+
+  .Toastify__toast {
+    padding: base(0.5);
+    border-radius: $style-radius-m;
+    font-weight: 600;
+  }
+
+  .Toastify__close-button {
+    align-self: center;
+    opacity: 0.7;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .Toastify__toast--success {
+    color: var(--color-success-900);
+    background: var(--color-success-500);
+
+    .Toastify__progress-bar {
+      background-color: var(--color-success-900);
+    }
+  }
+
+  .Toastify__close-button--success {
+    color: var(--color-success-900);
+  }
+
+  .Toastify__toast--error {
+    background: var(--theme-error-500);
+    color: #fff;
+
+    .Toastify__progress-bar {
+      background-color: #fff;
+    }
+  }
+
+  .Toastify__close-button--light {
+    color: inherit;
+  }
+
+  @include mid-break {
+    .Toastify__toast-container {
+      left: $baseline;
+      right: $baseline;
+    }
+  }
+}

package/dist/scss/toasts.scss

@@ -1,24 +1,28 @@
+@import './styles.scss';
+
 .payload-toast-container {
+  padding: 0;
+  margin: 0;
+
   .payload-toast-close-button {
+    position: absolute;
+    order: 3;
     left: unset;
-    right: 0.5rem;
-    top: 1.55rem;
-    color: var(--theme-elevation-400);
+    inset-inline-end: base(0.8);
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--theme-elevation-600);
     background: unset;
     border: none;
-    display: flex;
-    width: 1.25rem;
-    height: 1.25rem;
-    justify-content: center;
-    align-items: center;
 
-    &:hover {
-      background: none;
+    svg {
+      width: base(0.8);
+      height: base(0.8);
     }
 
-    svg {
-      width: 2rem;
-      height: 2rem;
+    &:hover {
+      color: var(--theme-elevation-250);
+      background: none;
     }
 
     [dir='RTL'] & {
@@ -27,16 +31,21 @@
     }
   }
 
+  .toast-title {
+    line-height: base(1);
+    margin-right: base(1);
+  }
+
   .payload-toast-item {
-    padding: 1rem 2.5rem 1rem 1rem;
-    color: var(--theme-text);
+    padding: base(0.8);
+    color: var(--theme-elevation-800);
     font-style: normal;
     font-weight: 600;
     display: flex;
     gap: 1rem;
     align-items: center;
     width: 100%;
-    border-radius: 0.15rem;
+    border-radius: 4px;
     border: 1px solid var(--theme-border-color);
     background: var(--theme-input-bg);
     box-shadow:
@@ -45,6 +54,7 @@
 
     .toast-content {
       transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+      width: 100%;
     }
 
     &[data-front='false'] {
@@ -60,51 +70,72 @@
     }
 
     .toast-icon {
-      svg {
-        width: 2.4rem;
-        height: 2.4rem;
+      width: base(0.8);
+      height: base(0.8);
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      & > * {
+        width: base(1.2);
+        height: base(1.2);
       }
     }
 
     &.toast-warning {
-      border-color: var(--theme-warning-200);
+      color: var(--theme-warning-800);
+      border-color: var(--theme-warning-250);
       background-color: var(--theme-warning-100);
+
+      .payload-toast-close-button {
+        color: var(--theme-warning-600);
+
+        &:hover {
+          color: var(--theme-warning-250);
+        }
+      }
     }
 
     &.toast-error {
-      border-color: var(--theme-error-300);
-      background-color: var(--theme-error-150);
+      color: var(--theme-error-800);
+      border-color: var(--theme-error-250);
+      background-color: var(--theme-error-100);
+
+      .payload-toast-close-button {
+        color: var(--theme-error-600);
+
+        &:hover {
+          color: var(--theme-error-250);
+        }
+      }
     }
 
     &.toast-success {
-      border-color: var(--theme-success-200);
+      color: var(--theme-success-800);
+      border-color: var(--theme-success-250);
       background-color: var(--theme-success-100);
+
+      .payload-toast-close-button {
+        color: var(--theme-success-600);
+
+        &:hover {
+          color: var(--theme-success-250);
+        }
+      }
     }
 
     &.toast-info {
+      color: var(--theme-elevation-800);
       border-color: var(--theme-elevation-250);
       background-color: var(--theme-elevation-100);
-    }
-
-    [data-theme='light'] & {
-      &.toast-warning {
-        border-color: var(--theme-warning-550);
-        background-color: var(--theme-warning-100);
-      }
 
-      &.toast-error {
-        border-color: var(--theme-error-200);
-        background-color: var(--theme-error-50);
-      }
-
-      &.toast-success {
-        border-color: var(--theme-success-550);
-        background-color: var(--theme-success-50);
-      }
+      .payload-toast-close-button {
+        color: var(--theme-elevation-600);
 
-      &.toast-info {
-        border-color: var(--theme-border-color);
-        background-color: var(--theme-elevation-50);
+        &:hover {
+          color: var(--theme-elevation-250);
+        }
       }
     }
   }

package/dist/scss/type.scss

@@ -15,17 +15,10 @@
   font-weight: 500;
 }
 
-%jumbo {
-  font-size: base(2.5);
-  line-height: 1;
-  margin: 0 0 base(2);
-}
-
 %h1 {
-  margin: 0 0 base(1);
-  font-size: base(2);
-  line-height: 1.15;
-  letter-spacing: -1px;
+  margin: 0;
+  font-size: base(1.6);
+  line-height: base(1.8);
 
   @include small-break {
     letter-spacing: -0.5px;
@@ -34,10 +27,9 @@
 }
 
 %h2 {
-  margin: 0 0 base(1);
-  font-size: base(1.25);
-  line-height: 1.15;
-  letter-spacing: -0.5px;
+  margin: 0;
+  font-size: base(1.3);
+  line-height: base(1.6);
 
   @include small-break {
     font-size: base(0.85);
@@ -45,10 +37,9 @@
 }
 
 %h3 {
-  margin: 0 0 base(1);
-  font-size: base(0.925);
-  line-height: 1.25;
-  letter-spacing: -0.5px;
+  margin: 0;
+  font-size: base(1);
+  line-height: base(1.2);
 
   @include small-break {
     font-size: base(0.65);
@@ -57,28 +48,28 @@
 }
 
 %h4 {
-  margin: 0 0 $baseline;
-  font-size: base(0.75);
-  line-height: 1.5;
+  margin: 0;
+  font-size: base(0.8);
+  line-height: base(1);
   letter-spacing: -0.375px;
 }
 
 %h5 {
   margin: 0;
-  font-size: base(0.5625);
-  line-height: 1.5;
+  font-size: base(0.65);
+  line-height: base(0.8);
 }
 
 %h6 {
   margin: 0;
-  font-size: base(0.5);
-  line-height: 1.5;
+  font-size: base(0.6);
+  line-height: base(0.8);
 }
 
 %small {
   margin: 0;
-  font-size: 11px;
-  line-height: 1.5;
+  font-size: 12px;
+  line-height: 20px;
 }
 
 /////////////////////////////
@@ -105,6 +96,7 @@
   font-size: $baseline-body-size;
   line-height: $baseline-px;
   font-weight: normal;
+  font-family: var(--font-body);
 }
 
 %code {