diff --git a/.gitignore b/.gitignore index 1071eaf9fa..c4e5c6d72d 100644 --- a/.gitignore +++ b/.gitignore @@ -314,3 +314,6 @@ test/app/(payload)/admin/importMap.js /test/app/(payload)/admin/importMap.js test/pnpm-lock.yaml test/databaseAdapter.js +/filename-compound-index +/media-with-relation-preview +/media-without-relation-preview diff --git a/docs/admin/customizing-css.mdx b/docs/admin/customizing-css.mdx index 593f845a22..4ed40e7070 100644 --- a/docs/admin/customizing-css.mdx +++ b/docs/admin/customizing-css.mdx @@ -33,6 +33,19 @@ Here is an example of how you might target the Dashboard View and change the bac If you are building [Custom Components](./overview), it is best to import your own stylesheets directly into your components, rather than using the global stylesheet. You can continue to use the [CSS library](#css-library) as needed. +### Specificity rules + +All Payload CSS is encapsulated inside CSS layers under `@layer payload-default`. Any custom css will now have the highest possible specificity. + +We have also provided a layer `@layer payload` if you want to use layers and ensure that your styles are applied after payload. + +To override existing styles in a way that the previous rules of specificity would be respected you can use the default layer like so +```css +@layer payload-default { + // my styles within the payload specificity +} +``` + ## Re-using Payload SCSS variables and utilities You can re-use Payload's SCSS variables and utilities in your own stylesheets by importing it from the UI package. diff --git a/docs/admin/server-functions.mdx b/docs/admin/server-functions.mdx index 2865254e1b..5bb3617b06 100644 --- a/docs/admin/server-functions.mdx +++ b/docs/admin/server-functions.mdx @@ -6,15 +6,19 @@ desc: Execute custom server-side logic from client-side code using Server Functi keywords: server functions, server-side functions, server-side logic, server-side code, server-side, functions, Payload, headless, Content Management System, cms, javascript, react, node, nextjs --- -The Payload [Admin Panel] fully supports [React Server Functions](https://react.dev/reference/rsc/server-actions) (formerly grouped under the "Server Actions" umbrella). These are functions that are defined on the server, using server-only modules, and called from the client. This is a way to execute custom server-side logic from client-side code. +The Payload [Admin Panel] supports [React Server Functions](https://react.dev/reference/rsc/server-actions) directly through the Payload Config. Server Functions are functions that are defined on the server, which may use server-only modules, but are called by the client. This is a way to execute server-side logic through a client-side action. -Server Functions are a good alternative to traditional [REST API Endpoints](../rest-api#custom-endpoints), with a few key differences. While they behave similarly, Server Functions are simpler to define, not requiring a specified path or method. They are also easier to consume, not requiring any client-side fetch. Server Functions are also able to return rendered React components. +Server Functions are a good alternative to traditional [REST API Endpoints](../rest-api#custom-endpoints), but with a few key differences. While they behave similarly, Server Functions: -Requests made through a Server Function also do not propagate though the browser's network panel in the same way as fetch requests, making it harder for others to inspect, tamper with, or replay requests directly through the browser. +1. are simpler to define, not requiring a specified route or method +2. are easier to consume, not requiring the Fetch API +3. are able to return React and/or JSX + +Server Functions do not necessarily need to be defined in the Payload Config. It is possible to write your own Server Functions and thread them to your client accordingly. You will, however, be responsible for authenticating those requests yourself. All Server Functions defined through the Payload Config will automatically receive a `req` argument, containing the `user`, `payload`, and more. Note: - Server Functions are only available in the Payload Admin Panel, not your public-facing application. For public-facing server-side logic, consider using [Custom Endpoints](../rest-api#custom-endpoints). + Server Functions defined through the Payload Config are only available within the Admin Panel, not your public-facing application. For public-facing server-side logic, you can write your own Server Functions directly into your application. ## Admin Options @@ -57,7 +61,7 @@ The function receives an object with the following properties: ## Client-side Usage -To execute a Server Function from the client, use the `useServerFunctions` hook: +To execute a Server Function from the client, use the `useServerFunctions` hook, passing the `name` of your Server Function: ```tsx 'use client' @@ -89,7 +93,7 @@ const MyComponent = () => { ## How it works -In order for Payload to support dynamic Sever Functions, a single handler is placed at the root of the application: +In order for Payload to support Sever Functions through the Payload Config, a single handler is placed at the root of the application: ```ts /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */ @@ -133,7 +137,32 @@ const Layout = ({ children }: Args) => ( export default Layout ``` -This pattern allows us to thread server-only modules, such as the Payload Config, through to the Server Function handler to be consumed within your function's logic. +The Server Function Handler is a necessary pattern for Server Functions to have access to the Payload Config, as well as any other server-only modules that may be required. This is because all server-only modules _must_ be imported in the closure as the Server Function, wherever the `use server` directive is used. [More details](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#closures-and-encryption). + +## Troubleshooting + +#### "Unknown Server Function: 'my-server-function'" + + Ensure the `name` property of your Server Function matches the name you are passing through the `serverFunction` args. + +#### "Error: Client Functions cannot be passed directly to Server Functions. Only Functions passed from the Server can be passed back again" + + Non-serializable values cannot cross the server / client boundary. Ensure that the args your sending through your Server Function are serializable, i.e. not containing any functions, classes, etc. + +#### "Body exceeded _n_ limit" + + By default, Next.js places a 1mb limit on the body size of incoming requests. However, this can be increased by setting the `bodySizeLimit` option in your `next.config.ts` file. [More details](https://nextjs.org/docs/app/api-reference/next-config-js/serverActions#bodysizelimit). + + ```ts + { + // ... + experimental: { + serverActions: { + bodySizeLimit: '2mb', + } + } + } + ``` ## TypeScript diff --git a/package.json b/package.json index 3e3ccc94f8..1b54e29d14 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "payload-monorepo", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "private": true, "type": "module", "scripts": { diff --git a/packages/create-payload-app/package.json b/packages/create-payload-app/package.json index 5fa2d63891..57fa6e0812 100644 --- a/packages/create-payload-app/package.json +++ b/packages/create-payload-app/package.json @@ -1,6 +1,6 @@ { "name": "create-payload-app", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "homepage": "https://payloadcms.com", "repository": { "type": "git", diff --git a/packages/db-mongodb/package.json b/packages/db-mongodb/package.json index 714d72fb62..90a87a6f0c 100644 --- a/packages/db-mongodb/package.json +++ b/packages/db-mongodb/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/db-mongodb", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "The officially supported MongoDB database adapter for Payload", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/db-postgres/package.json b/packages/db-postgres/package.json index 3e8b0a85b0..0e7bc34546 100644 --- a/packages/db-postgres/package.json +++ b/packages/db-postgres/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/db-postgres", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "The officially supported Postgres database adapter for Payload", "homepage": "https://payloadcms.com", "repository": { @@ -48,6 +48,7 @@ }, "dependencies": { "@payloadcms/drizzle": "workspace:*", + "@types/pg": "8.10.2", "console-table-printer": "2.11.2", "drizzle-kit": "0.23.2-df9e596", "drizzle-orm": "0.32.1", @@ -59,7 +60,6 @@ "devDependencies": { "@hyrious/esbuild-plugin-commonjs": "^0.2.4", "@payloadcms/eslint-config": "workspace:*", - "@types/pg": "8.10.2", "@types/to-snake-case": "1.0.0", "esbuild": "0.23.1", "payload": "workspace:*" diff --git a/packages/db-sqlite/package.json b/packages/db-sqlite/package.json index e7b2c32095..c47a98a591 100644 --- a/packages/db-sqlite/package.json +++ b/packages/db-sqlite/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/db-sqlite", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "The officially supported SQLite database adapter for Payload", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/db-sqlite/src/schema/traverseFields.ts b/packages/db-sqlite/src/schema/traverseFields.ts index 2678350b05..727abdabbf 100644 --- a/packages/db-sqlite/src/schema/traverseFields.ts +++ b/packages/db-sqlite/src/schema/traverseFields.ts @@ -329,7 +329,12 @@ export const traverseFields = ({ }), ) } else { - targetTable[fieldName] = withDefault(text(fieldName, { enum: options }), field) + targetTable[fieldName] = withDefault( + text(columnName, { + enum: options, + }), + field, + ) } break } diff --git a/packages/db-vercel-postgres/package.json b/packages/db-vercel-postgres/package.json index 928d10d515..428907d446 100644 --- a/packages/db-vercel-postgres/package.json +++ b/packages/db-vercel-postgres/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/db-vercel-postgres", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "Vercel Postgres adapter for Payload", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/drizzle/package.json b/packages/drizzle/package.json index 4331573548..6ef9550330 100644 --- a/packages/drizzle/package.json +++ b/packages/drizzle/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/drizzle", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "A library of shared functions used by different payload database adapters", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/drizzle/src/postgres/schema/traverseFields.ts b/packages/drizzle/src/postgres/schema/traverseFields.ts index 22a0276982..40c942260a 100644 --- a/packages/drizzle/src/postgres/schema/traverseFields.ts +++ b/packages/drizzle/src/postgres/schema/traverseFields.ts @@ -349,7 +349,7 @@ export const traverseFields = ({ }), ) } else { - targetTable[fieldName] = withDefault(adapter.enums[enumName](fieldName), field) + targetTable[fieldName] = withDefault(adapter.enums[enumName](columnName), field) } break } diff --git a/packages/drizzle/src/transform/write/traverseFields.ts b/packages/drizzle/src/transform/write/traverseFields.ts index dd3ba349e5..6834c1184b 100644 --- a/packages/drizzle/src/transform/write/traverseFields.ts +++ b/packages/drizzle/src/transform/write/traverseFields.ts @@ -363,6 +363,7 @@ export const traverseFields = ({ existingLocales, fieldPrefix, fields: field.fields, + forcedLocale, locales, numbers, parentTableName, diff --git a/packages/email-nodemailer/package.json b/packages/email-nodemailer/package.json index 3a0582b92a..07636793ce 100644 --- a/packages/email-nodemailer/package.json +++ b/packages/email-nodemailer/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/email-nodemailer", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "Payload Nodemailer Email Adapter", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/email-resend/package.json b/packages/email-resend/package.json index af06785211..66ddf12eb5 100644 --- a/packages/email-resend/package.json +++ b/packages/email-resend/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/email-resend", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "Payload Resend Email Adapter", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/graphql/package.json b/packages/graphql/package.json index 5af948aac9..750006bfbe 100644 --- a/packages/graphql/package.json +++ b/packages/graphql/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/graphql", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "homepage": "https://payloadcms.com", "repository": { "type": "git", diff --git a/packages/live-preview-react/package.json b/packages/live-preview-react/package.json index 507dd1a999..05d6485080 100644 --- a/packages/live-preview-react/package.json +++ b/packages/live-preview-react/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/live-preview-react", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "The official React SDK for Payload Live Preview", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/live-preview-vue/package.json b/packages/live-preview-vue/package.json index 5b590b75ad..a238d45274 100644 --- a/packages/live-preview-vue/package.json +++ b/packages/live-preview-vue/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/live-preview-vue", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "The official Vue SDK for Payload Live Preview", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/live-preview/package.json b/packages/live-preview/package.json index 0b757dfad2..083f41ec23 100644 --- a/packages/live-preview/package.json +++ b/packages/live-preview/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/live-preview", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "The official live preview JavaScript SDK for Payload", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/next/package.json b/packages/next/package.json index a46c1e57ce..99997d3e07 100644 --- a/packages/next/package.json +++ b/packages/next/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/next", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "homepage": "https://payloadcms.com", "repository": { "type": "git", diff --git a/packages/next/src/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.tsx b/packages/next/src/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.tsx index 72d61c2682..c7abb33cc9 100644 --- a/packages/next/src/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.tsx +++ b/packages/next/src/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.tsx @@ -8,7 +8,7 @@ export const VersionsPill: React.FC = () => { const { versions } = useDocumentInfo() // don't count snapshots - const totalVersions = versions?.docs.filter((version) => !version.snapshot).length || 0 + const totalVersions = versions?.docs?.filter((version) => !version.snapshot).length || 0 if (!versions?.totalDocs) { return null diff --git a/packages/next/src/scss/app.scss b/packages/next/src/scss/app.scss index 90254443b0..b0c575df89 100644 --- a/packages/next/src/scss/app.scss +++ b/packages/next/src/scss/app.scss @@ -1,203 +1,207 @@ +@layer payload-default, payload; + @import 'styles'; @import './toasts.scss'; @import './colors.scss'; -:root { - --base-px: 20; - --base-body-size: 13; - --base: calc((var(--base-px) / var(--base-body-size)) * 1rem); +@layer payload-default { + :root { + --base-px: 20; + --base-body-size: 13; + --base: calc((var(--base-px) / var(--base-body-size)) * 1rem); - --breakpoint-xs-width: #{$breakpoint-xs-width}; - --breakpoint-s-width: #{$breakpoint-s-width}; - --breakpoint-m-width: #{$breakpoint-m-width}; - --breakpoint-l-width: #{$breakpoint-l-width}; - --scrollbar-width: 17px; + --breakpoint-xs-width: #{$breakpoint-xs-width}; + --breakpoint-s-width: #{$breakpoint-s-width}; + --breakpoint-m-width: #{$breakpoint-m-width}; + --breakpoint-l-width: #{$breakpoint-l-width}; + --scrollbar-width: 17px; - --theme-bg: var(--theme-elevation-0); - --theme-input-bg: var(--theme-elevation-0); - --theme-text: var(--theme-elevation-800); - --theme-overlay: rgba(5, 5, 5, 0.5); - --theme-baseline: #{$baseline-px}; - --theme-baseline-body-size: #{$baseline-body-size}; - --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, - sans-serif; - --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}; - --style-radius-l: #{$style-radius-l}; - - --z-popup: 10; - --z-nav: 20; - --z-modal: 30; - --z-status: 40; - - --accessibility-outline: 2px solid var(--theme-text); - --accessibility-outline-offset: 2px; - - --gutter-h: #{base(3)}; - --spacing-view-bottom: var(--gutter-h); - --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.4); - --doc-controls-height: calc(var(--base) * 2.4); - } - - @include small-break { - --gutter-h: #{base(0.8)}; - --spacing-view-bottom: calc(var(--base) * 2); - --nav-width: 100vw; - } -} - -///////////////////////////// -// GLOBAL STYLES -///////////////////////////// - -* { - box-sizing: border-box; -} - -html { - @extend %body; - 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); - --theme-overlay: rgba(5, 5, 5, 0.75); - color-scheme: dark; + --theme-input-bg: var(--theme-elevation-0); + --theme-text: var(--theme-elevation-800); + --theme-overlay: rgba(5, 5, 5, 0.5); + --theme-baseline: #{$baseline-px}; + --theme-baseline-body-size: #{$baseline-body-size}; + --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, + sans-serif; + --font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif; + --font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace; - ::selection { - color: var(--color-base-1000); + --style-radius-s: #{$style-radius-s}; + --style-radius-m: #{$style-radius-m}; + --style-radius-l: #{$style-radius-l}; + + --z-popup: 10; + --z-nav: 20; + --z-modal: 30; + --z-status: 40; + + --accessibility-outline: 2px solid var(--theme-text); + --accessibility-outline-offset: 2px; + + --gutter-h: #{base(3)}; + --spacing-view-bottom: var(--gutter-h); + --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.4); + --doc-controls-height: calc(var(--base) * 2.4); } - ::-moz-selection { - color: var(--color-base-1000); + @include small-break { + --gutter-h: #{base(0.8)}; + --spacing-view-bottom: calc(var(--base) * 2); + --nav-width: 100vw; } } - @include mid-break { - font-size: 12px; + ///////////////////////////// + // GLOBAL STYLES + ///////////////////////////// + + * { + box-sizing: border-box; } -} -html, -body, -#app { - height: 100%; -} + html { + @extend %body; + background: var(--theme-bg); + -webkit-font-smoothing: antialiased; -body { - font-family: var(--font-body); - font-weight: 400; - color: var(--theme-text); - margin: 0; - // this is for the nav to be able to push the document over - overflow-x: hidden; -} + &[data-theme='dark'] { + --theme-bg: var(--theme-elevation-0); + --theme-text: var(--theme-elevation-1000); + --theme-input-bg: var(--theme-elevation-50); + --theme-overlay: rgba(5, 5, 5, 0.75); + color-scheme: dark; -::selection { - background: var(--color-success-250); - color: var(--theme-base-800); -} + ::selection { + color: var(--color-base-1000); + } -::-moz-selection { - background: var(--color-success-250); - color: var(--theme-base-800); -} - -img { - max-width: 100%; - height: auto; - display: block; -} - -h1 { - @extend %h1; -} - -h2 { - @extend %h2; -} - -h3 { - @extend %h3; -} - -h4 { - @extend %h4; -} - -h5 { - @extend %h5; -} - -h6 { - @extend %h6; -} - -p { - margin: 0; -} - -ul, -ol { - padding-left: $baseline; - margin: 0; -} - -:focus-visible { - outline: var(--accessibility-outline); -} - -a { - color: currentColor; - - &:focus { - &:not(:focus-visible) { - opacity: 0.8; + ::-moz-selection { + color: var(--color-base-1000); + } + } + + @include mid-break { + font-size: 12px; } - outline: none; } - &:active { - opacity: 0.7; - outline: none; + html, + body, + #app { + height: 100%; } -} -svg { - vertical-align: middle; -} + body { + font-family: var(--font-body); + font-weight: 400; + color: var(--theme-text); + margin: 0; + // this is for the nav to be able to push the document over + overflow-x: hidden; + } -dialog { - width: 100%; - border: 0; - padding: 0; - color: currentColor; -} + ::selection { + background: var(--color-success-250); + color: var(--theme-base-800); + } -.payload__modal-item { - min-height: 100%; - background: transparent; -} + ::-moz-selection { + background: var(--color-success-250); + color: var(--theme-base-800); + } -.payload__modal-container--enterDone { - overflow: auto; -} + img { + max-width: 100%; + height: auto; + display: block; + } -.payload__modal-item--enter, -.payload__modal-item--enterDone { - z-index: var(--z-modal); -} + h1 { + @extend %h1; + } -// @import '~payload-user-css'; TODO: re-enable this + h2 { + @extend %h2; + } + + h3 { + @extend %h3; + } + + h4 { + @extend %h4; + } + + h5 { + @extend %h5; + } + + h6 { + @extend %h6; + } + + p { + margin: 0; + } + + ul, + ol { + padding-left: $baseline; + margin: 0; + } + + :focus-visible { + outline: var(--accessibility-outline); + } + + a { + color: currentColor; + + &:focus { + &:not(:focus-visible) { + opacity: 0.8; + } + outline: none; + } + + &:active { + opacity: 0.7; + outline: none; + } + } + + svg { + vertical-align: middle; + } + + dialog { + width: 100%; + border: 0; + padding: 0; + color: currentColor; + } + + .payload__modal-item { + min-height: 100%; + background: transparent; + } + + .payload__modal-container--enterDone { + overflow: auto; + } + + .payload__modal-item--enter, + .payload__modal-item--enterDone { + z-index: var(--z-modal); + } + + // @import '~payload-user-css'; TODO: re-enable this +} diff --git a/packages/next/src/scss/colors.scss b/packages/next/src/scss/colors.scss index 42cea05859..1eaa88cb0a 100644 --- a/packages/next/src/scss/colors.scss +++ b/packages/next/src/scss/colors.scss @@ -1,269 +1,271 @@ -: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); +@layer payload-default { + :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(237, 245, 249); - --color-success-100: rgb(218, 237, 248); - --color-success-150: rgb(188, 225, 248); - --color-success-200: rgb(156, 216, 253); - --color-success-250: rgb(125, 204, 248); - --color-success-300: rgb(97, 190, 241); - --color-success-350: rgb(65, 178, 236); - --color-success-400: rgb(36, 164, 223); - --color-success-450: rgb(18, 148, 204); - --color-success-500: rgb(21, 135, 186); - --color-success-550: rgb(12, 121, 168); - --color-success-600: rgb(11, 110, 153); - --color-success-650: rgb(11, 97, 135); - --color-success-700: rgb(17, 88, 121); - --color-success-750: rgb(17, 76, 105); - --color-success-800: rgb(18, 66, 90); - --color-success-850: rgb(18, 56, 76); - --color-success-900: rgb(19, 44, 58); - --color-success-950: rgb(22, 33, 39); + --color-success-50: rgb(237, 245, 249); + --color-success-100: rgb(218, 237, 248); + --color-success-150: rgb(188, 225, 248); + --color-success-200: rgb(156, 216, 253); + --color-success-250: rgb(125, 204, 248); + --color-success-300: rgb(97, 190, 241); + --color-success-350: rgb(65, 178, 236); + --color-success-400: rgb(36, 164, 223); + --color-success-450: rgb(18, 148, 204); + --color-success-500: rgb(21, 135, 186); + --color-success-550: rgb(12, 121, 168); + --color-success-600: rgb(11, 110, 153); + --color-success-650: rgb(11, 97, 135); + --color-success-700: rgb(17, 88, 121); + --color-success-750: rgb(17, 76, 105); + --color-success-800: rgb(18, 66, 90); + --color-success-850: rgb(18, 56, 76); + --color-success-900: rgb(19, 44, 58); + --color-success-950: rgb(22, 33, 39); - --color-error-50: rgb(250, 241, 240); - --color-error-100: rgb(252, 229, 227); - --color-error-150: rgb(247, 208, 204); - --color-error-200: rgb(254, 193, 188); - --color-error-250: rgb(253, 177, 170); - --color-error-300: rgb(253, 154, 146); - --color-error-350: rgb(253, 131, 123); - --color-error-400: rgb(246, 109, 103); - --color-error-450: rgb(234, 90, 86); - --color-error-500: rgb(218, 75, 72); - --color-error-550: rgb(200, 62, 61); - --color-error-600: rgb(182, 54, 54); - --color-error-650: rgb(161, 47, 47); - --color-error-700: rgb(144, 44, 43); - --color-error-750: rgb(123, 41, 39); - --color-error-800: rgb(105, 39, 37); - --color-error-850: rgb(86, 36, 33); - --color-error-900: rgb(64, 32, 29); - --color-error-950: rgb(44, 26, 24); + --color-error-50: rgb(250, 241, 240); + --color-error-100: rgb(252, 229, 227); + --color-error-150: rgb(247, 208, 204); + --color-error-200: rgb(254, 193, 188); + --color-error-250: rgb(253, 177, 170); + --color-error-300: rgb(253, 154, 146); + --color-error-350: rgb(253, 131, 123); + --color-error-400: rgb(246, 109, 103); + --color-error-450: rgb(234, 90, 86); + --color-error-500: rgb(218, 75, 72); + --color-error-550: rgb(200, 62, 61); + --color-error-600: rgb(182, 54, 54); + --color-error-650: rgb(161, 47, 47); + --color-error-700: rgb(144, 44, 43); + --color-error-750: rgb(123, 41, 39); + --color-error-800: rgb(105, 39, 37); + --color-error-850: rgb(86, 36, 33); + --color-error-900: rgb(64, 32, 29); + --color-error-950: rgb(44, 26, 24); - --color-warning-50: rgb(249, 242, 237); - --color-warning-100: rgb(248, 232, 219); - --color-warning-150: rgb(243, 212, 186); - --color-warning-200: rgb(243, 200, 162); - --color-warning-250: rgb(240, 185, 136); - --color-warning-300: rgb(238, 166, 98); - --color-warning-350: rgb(234, 148, 58); - --color-warning-400: rgb(223, 132, 17); - --color-warning-450: rgb(204, 120, 15); - --color-warning-500: rgb(185, 108, 13); - --color-warning-550: rgb(167, 97, 10); - --color-warning-600: rgb(150, 87, 11); - --color-warning-650: rgb(134, 78, 11); - --color-warning-700: rgb(120, 70, 13); - --color-warning-750: rgb(105, 61, 13); - --color-warning-800: rgb(90, 55, 19); - --color-warning-850: rgb(73, 47, 21); - --color-warning-900: rgb(56, 38, 20); - --color-warning-950: rgb(38, 29, 21); + --color-warning-50: rgb(249, 242, 237); + --color-warning-100: rgb(248, 232, 219); + --color-warning-150: rgb(243, 212, 186); + --color-warning-200: rgb(243, 200, 162); + --color-warning-250: rgb(240, 185, 136); + --color-warning-300: rgb(238, 166, 98); + --color-warning-350: rgb(234, 148, 58); + --color-warning-400: rgb(223, 132, 17); + --color-warning-450: rgb(204, 120, 15); + --color-warning-500: rgb(185, 108, 13); + --color-warning-550: rgb(167, 97, 10); + --color-warning-600: rgb(150, 87, 11); + --color-warning-650: rgb(134, 78, 11); + --color-warning-700: rgb(120, 70, 13); + --color-warning-750: rgb(105, 61, 13); + --color-warning-800: rgb(90, 55, 19); + --color-warning-850: rgb(73, 47, 21); + --color-warning-900: rgb(56, 38, 20); + --color-warning-950: rgb(38, 29, 21); - --color-blue-50: rgb(237, 245, 249); - --color-blue-100: rgb(218, 237, 248); - --color-blue-150: rgb(188, 225, 248); - --color-blue-200: rgb(156, 216, 253); - --color-blue-250: rgb(125, 204, 248); - --color-blue-300: rgb(97, 190, 241); - --color-blue-350: rgb(65, 178, 236); - --color-blue-400: rgb(36, 164, 223); - --color-blue-450: rgb(18, 148, 204); - --color-blue-500: rgb(21, 135, 186); - --color-blue-550: rgb(12, 121, 168); - --color-blue-600: rgb(11, 110, 153); - --color-blue-650: rgb(11, 97, 135); - --color-blue-700: rgb(17, 88, 121); - --color-blue-750: rgb(17, 76, 105); - --color-blue-800: rgb(18, 66, 90); - --color-blue-850: rgb(18, 56, 76); - --color-blue-900: rgb(19, 44, 58); - --color-blue-950: rgb(22, 33, 39); + --color-blue-50: rgb(237, 245, 249); + --color-blue-100: rgb(218, 237, 248); + --color-blue-150: rgb(188, 225, 248); + --color-blue-200: rgb(156, 216, 253); + --color-blue-250: rgb(125, 204, 248); + --color-blue-300: rgb(97, 190, 241); + --color-blue-350: rgb(65, 178, 236); + --color-blue-400: rgb(36, 164, 223); + --color-blue-450: rgb(18, 148, 204); + --color-blue-500: rgb(21, 135, 186); + --color-blue-550: rgb(12, 121, 168); + --color-blue-600: rgb(11, 110, 153); + --color-blue-650: rgb(11, 97, 135); + --color-blue-700: rgb(17, 88, 121); + --color-blue-750: rgb(17, 76, 105); + --color-blue-800: rgb(18, 66, 90); + --color-blue-850: rgb(18, 56, 76); + --color-blue-900: rgb(19, 44, 58); + --color-blue-950: rgb(22, 33, 39); - --theme-border-color: var(--theme-elevation-150); + --theme-border-color: var(--theme-elevation-150); - --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-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-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-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-border-color: var(--theme-elevation-150); - - --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); + --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-border-color: var(--theme-elevation-150); + + --theme-elevation-0: var(--color-base-900); + --theme-elevation-50: var(--color-base-850); + --theme-elevation-100: var(--color-base-800); + --theme-elevation-150: var(--color-base-750); + --theme-elevation-200: var(--color-base-700); + --theme-elevation-250: var(--color-base-650); + --theme-elevation-300: var(--color-base-600); + --theme-elevation-350: var(--color-base-550); + --theme-elevation-400: var(--color-base-450); + --theme-elevation-450: var(--color-base-400); + --theme-elevation-550: var(--color-base-350); + --theme-elevation-600: var(--color-base-300); + --theme-elevation-650: var(--color-base-250); + --theme-elevation-700: var(--color-base-200); + --theme-elevation-750: var(--color-base-150); + --theme-elevation-800: var(--color-base-100); + --theme-elevation-850: var(--color-base-50); + --theme-elevation-900: var(--color-base-0); + --theme-elevation-950: var(--color-base-0); + --theme-elevation-1000: var(--color-base-0); + + --theme-success-50: var(--color-success-950); + --theme-success-100: var(--color-success-900); + --theme-success-150: var(--color-success-850); + --theme-success-200: var(--color-success-800); + --theme-success-250: var(--color-success-750); + --theme-success-300: var(--color-success-700); + --theme-success-350: var(--color-success-650); + --theme-success-400: var(--color-success-600); + --theme-success-450: var(--color-success-550); + --theme-success-550: var(--color-success-450); + --theme-success-600: var(--color-success-400); + --theme-success-650: var(--color-success-350); + --theme-success-700: var(--color-success-300); + --theme-success-750: var(--color-success-250); + --theme-success-800: var(--color-success-200); + --theme-success-850: var(--color-success-150); + --theme-success-900: var(--color-success-100); + --theme-success-950: var(--color-success-50); + + --theme-warning-50: var(--color-warning-950); + --theme-warning-100: var(--color-warning-900); + --theme-warning-150: var(--color-warning-850); + --theme-warning-200: var(--color-warning-800); + --theme-warning-250: var(--color-warning-750); + --theme-warning-300: var(--color-warning-700); + --theme-warning-350: var(--color-warning-650); + --theme-warning-400: var(--color-warning-600); + --theme-warning-450: var(--color-warning-550); + --theme-warning-550: var(--color-warning-450); + --theme-warning-600: var(--color-warning-400); + --theme-warning-650: var(--color-warning-350); + --theme-warning-700: var(--color-warning-300); + --theme-warning-750: var(--color-warning-250); + --theme-warning-800: var(--color-warning-200); + --theme-warning-850: var(--color-warning-150); + --theme-warning-900: var(--color-warning-100); + --theme-warning-950: var(--color-warning-50); + + --theme-error-50: var(--color-error-950); + --theme-error-100: var(--color-error-900); + --theme-error-150: var(--color-error-850); + --theme-error-200: var(--color-error-800); + --theme-error-250: var(--color-error-750); + --theme-error-300: var(--color-error-700); + --theme-error-350: var(--color-error-650); + --theme-error-400: var(--color-error-600); + --theme-error-450: var(--color-error-550); + --theme-error-550: var(--color-error-450); + --theme-error-600: var(--color-error-400); + --theme-error-650: var(--color-error-350); + --theme-error-700: var(--color-error-300); + --theme-error-750: var(--color-error-250); + --theme-error-800: var(--color-error-200); + --theme-error-850: var(--color-error-150); + --theme-error-900: var(--color-error-100); + --theme-error-950: var(--color-error-50); + } } diff --git a/packages/next/src/scss/resets.scss b/packages/next/src/scss/resets.scss index eeda892c2d..e73efa9c00 100644 --- a/packages/next/src/scss/resets.scss +++ b/packages/next/src/scss/resets.scss @@ -1,10 +1,12 @@ -%btn-reset { - border: 0; - background: none; - box-shadow: none; - border-radius: 0; - padding: 0; - color: currentColor; +@layer payload-default { + %btn-reset { + border: 0; + background: none; + box-shadow: none; + border-radius: 0; + padding: 0; + color: currentColor; + } } @mixin btn-reset { diff --git a/packages/next/src/scss/toastify.scss b/packages/next/src/scss/toastify.scss index a5bf4c35fd..33192936a4 100644 --- a/packages/next/src/scss/toastify.scss +++ b/packages/next/src/scss/toastify.scss @@ -1,59 +1,61 @@ @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 { +@layer payload-default { + .Toastify { .Toastify__toast-container { - left: $baseline; - right: $baseline; + 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; + } } } } diff --git a/packages/next/src/scss/toasts.scss b/packages/next/src/scss/toasts.scss index 116845ac34..4d3b0bc378 100644 --- a/packages/next/src/scss/toasts.scss +++ b/packages/next/src/scss/toasts.scss @@ -1,140 +1,142 @@ @import './styles.scss'; -.payload-toast-container { - padding: 0; - margin: 0; +@layer payload-default { + .payload-toast-container { + padding: 0; + margin: 0; - .payload-toast-close-button { - position: absolute; - order: 3; - left: unset; - inset-inline-end: base(0.8); - top: 50%; - transform: translateY(-50%); - color: var(--theme-elevation-600); - background: unset; - border: none; + .payload-toast-close-button { + position: absolute; + order: 3; + left: unset; + inset-inline-end: base(0.8); + top: 50%; + transform: translateY(-50%); + color: var(--theme-elevation-600); + background: unset; + border: none; - svg { - width: base(0.8); - height: base(0.8); - } + svg { + width: base(0.8); + height: base(0.8); + } - &:hover { - color: var(--theme-elevation-250); - background: none; - } + &:hover { + color: var(--theme-elevation-250); + background: none; + } - [dir='RTL'] & { - right: unset; - left: 0.5rem; - } - } - - .toast-title { - line-height: base(1); - margin-right: base(1); - } - - .payload-toast-item { - 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: 4px; - border: 1px solid var(--theme-border-color); - background: var(--theme-input-bg); - box-shadow: - 0px 10px 4px -8px rgba(0, 2, 4, 0.02), - 0px 2px 3px 0px rgba(0, 2, 4, 0.05); - - .toast-content { - transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19); - width: 100%; - } - - &[data-front='false'] { - .toast-content { - opacity: 0; + [dir='RTL'] & { + right: unset; + left: 0.5rem; } } - &[data-expanded='true'] { - .toast-content { - opacity: 1; - } + .toast-title { + line-height: base(1); + margin-right: base(1); } - .toast-icon { - 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 { - 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 { - 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 { - 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 { + .payload-toast-item { + padding: base(0.8); color: var(--theme-elevation-800); - border-color: var(--theme-elevation-250); - background-color: var(--theme-elevation-100); + font-style: normal; + font-weight: 600; + display: flex; + gap: 1rem; + align-items: center; + width: 100%; + border-radius: 4px; + border: 1px solid var(--theme-border-color); + background: var(--theme-input-bg); + box-shadow: + 0px 10px 4px -8px rgba(0, 2, 4, 0.02), + 0px 2px 3px 0px rgba(0, 2, 4, 0.05); - .payload-toast-close-button { - color: var(--theme-elevation-600); + .toast-content { + transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19); + width: 100%; + } - &:hover { - color: var(--theme-elevation-250); + &[data-front='false'] { + .toast-content { + opacity: 0; + } + } + + &[data-expanded='true'] { + .toast-content { + opacity: 1; + } + } + + .toast-icon { + 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 { + 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 { + 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 { + 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); + + .payload-toast-close-button { + color: var(--theme-elevation-600); + + &:hover { + color: var(--theme-elevation-250); + } } } } diff --git a/packages/next/src/scss/type.scss b/packages/next/src/scss/type.scss index 997e43e24a..9fe3e34be5 100644 --- a/packages/next/src/scss/type.scss +++ b/packages/next/src/scss/type.scss @@ -4,106 +4,107 @@ ///////////////////////////// // HEADINGS ///////////////////////////// - -%h1, -%h2, -%h3, -%h4, -%h5, -%h6 { - font-family: var(--font-body); - font-weight: 500; -} - -%h1 { - margin: 0; - font-size: base(1.6); - line-height: base(1.8); - - @include small-break { - letter-spacing: -0.5px; - font-size: base(1.25); +@layer payload-default { + %h1, + %h2, + %h3, + %h4, + %h5, + %h6 { + font-family: var(--font-body); + font-weight: 500; } -} -%h2 { - margin: 0; - font-size: base(1.3); - line-height: base(1.6); + %h1 { + margin: 0; + font-size: base(1.6); + line-height: base(1.8); - @include small-break { - font-size: base(0.85); + @include small-break { + letter-spacing: -0.5px; + font-size: base(1.25); + } } -} -%h3 { - margin: 0; - font-size: base(1); - line-height: base(1.2); + %h2 { + margin: 0; + font-size: base(1.3); + line-height: base(1.6); - @include small-break { - font-size: base(0.65); - line-height: 1.25; + @include small-break { + font-size: base(0.85); + } } -} -%h4 { - margin: 0; - font-size: base(0.8); - line-height: base(1); - letter-spacing: -0.375px; -} + %h3 { + margin: 0; + font-size: base(1); + line-height: base(1.2); -%h5 { - margin: 0; - font-size: base(0.65); - line-height: base(0.8); -} + @include small-break { + font-size: base(0.65); + line-height: 1.25; + } + } -%h6 { - margin: 0; - font-size: base(0.6); - line-height: base(0.8); -} - -%small { - margin: 0; - font-size: 12px; - line-height: 20px; -} - -///////////////////////////// -// TYPE STYLES -///////////////////////////// - -%large-body { - font-size: base(0.6); - line-height: base(1); - letter-spacing: base(0.02); - - @include mid-break { - font-size: base(0.7); + %h4 { + margin: 0; + font-size: base(0.8); line-height: base(1); + letter-spacing: -0.375px; } - @include small-break { - font-size: base(0.55); - line-height: base(0.75); - } -} - -%body { - font-size: $baseline-body-size; - line-height: $baseline-px; - font-weight: normal; - font-family: var(--font-body); -} - -%code { - font-size: base(0.4); - color: var(--theme-elevation-400); - - span { - color: var(--theme-elevation-800); + %h5 { + margin: 0; + font-size: base(0.65); + line-height: base(0.8); + } + + %h6 { + margin: 0; + font-size: base(0.6); + line-height: base(0.8); + } + + %small { + margin: 0; + font-size: 12px; + line-height: 20px; + } + + ///////////////////////////// + // TYPE STYLES + ///////////////////////////// + + %large-body { + font-size: base(0.6); + line-height: base(1); + letter-spacing: base(0.02); + + @include mid-break { + font-size: base(0.7); + line-height: base(1); + } + + @include small-break { + font-size: base(0.55); + line-height: base(0.75); + } + } + + %body { + font-size: $baseline-body-size; + line-height: $baseline-px; + font-weight: normal; + font-family: var(--font-body); + } + + %code { + font-size: base(0.4); + color: var(--theme-elevation-400); + + span { + color: var(--theme-elevation-800); + } } } diff --git a/packages/next/src/views/API/index.scss b/packages/next/src/views/API/index.scss index 9b549bc47d..4eea92bfe3 100644 --- a/packages/next/src/views/API/index.scss +++ b/packages/next/src/views/API/index.scss @@ -1,123 +1,125 @@ @import '../../scss/styles.scss'; -.query-inspector { - --string-color: #11b102; - --number-color: #62c3f3; - display: flex; - gap: calc(var(--base) * 2); - align-items: flex-start; +@layer payload-default { + .query-inspector { + --string-color: #11b102; + --number-color: #62c3f3; + display: flex; + gap: calc(var(--base) * 2); + align-items: flex-start; - ul { - padding-left: calc(var(--base) * 1); - } - - &--fullscreen { - padding-left: 0; - .query-inspector__configuration { - display: none; + ul { + padding-left: calc(var(--base) * 1); } - } - &__configuration { - margin-top: calc(var(--base) * 2); - width: 60%; - position: sticky; - top: var(--base); - } + &--fullscreen { + padding-left: 0; + .query-inspector__configuration { + display: none; + } + } - &__api-url { - margin-bottom: calc(var(--base) * 1.5); + &__configuration { + margin-top: calc(var(--base) * 2); + width: 60%; + position: sticky; + top: var(--base); + } - a { - display: block; - overflow: hidden; - text-overflow: ellipsis; - text-decoration: none; + &__api-url { + margin-bottom: calc(var(--base) * 1.5); - &:hover, - &:focus-visible { - text-decoration: underline; + a { + display: block; + overflow: hidden; + text-overflow: ellipsis; + text-decoration: none; + + &:hover, + &:focus-visible { + text-decoration: underline; + } + } + } + + &__form-fields { + display: flex; + flex-direction: column; + gap: var(--base); + } + + &__label { + color: var(--theme-elevation-400); + } + + &__filter-query-checkboxes { + display: flex; + gap: var(--base); + } + + &__results-wrapper { + font-family: var(--font-mono); + width: 100%; + ul { + margin: 0; + } + li { + list-style: none; + } + } + + &__toggle-fullscreen-button-container { + position: sticky; + top: 0; + z-index: 1; + + @include mid-break { + display: none; + } + } + + &__toggle-fullscreen-button { + position: absolute; + right: calc(var(--base) * 0.5); + top: calc(var(--base) * 0.5); + padding: calc(var(--base) * 0.25); + background-color: var(--theme-elevation-0); + cursor: pointer; + z-index: 1; + margin: 0; + border: 0; + border-radius: 3px; + color: var(--theme-elevation-300); + &:hover { + color: var(--theme-elevation-700); + } + } + + &__results { + padding-top: calc(var(--base) * 0.5); + padding-left: calc(var(--base) * 0.5); + padding-bottom: calc(var(--base) * 0.5); + background-color: var(--theme-elevation-50); + overflow: auto; + min-height: 100vh; + } + + @include mid-break { + flex-direction: column; + padding-left: 0; + + .query-inspector__configuration { + position: relative; + width: 100%; + top: 0; + padding-inline-end: var(--gutter-h); } } } - &__form-fields { - display: flex; - flex-direction: column; - gap: var(--base); - } - - &__label { - color: var(--theme-elevation-400); - } - - &__filter-query-checkboxes { - display: flex; - gap: var(--base); - } - - &__results-wrapper { - font-family: var(--font-mono); - width: 100%; - ul { - margin: 0; - } - li { - list-style: none; - } - } - - &__toggle-fullscreen-button-container { - position: sticky; - top: 0; - z-index: 1; - - @include mid-break { - display: none; - } - } - - &__toggle-fullscreen-button { - position: absolute; - right: calc(var(--base) * 0.5); - top: calc(var(--base) * 0.5); - padding: calc(var(--base) * 0.25); - background-color: var(--theme-elevation-0); - cursor: pointer; - z-index: 1; - margin: 0; - border: 0; - border-radius: 3px; - color: var(--theme-elevation-300); - &:hover { - color: var(--theme-elevation-700); - } - } - - &__results { - padding-top: calc(var(--base) * 0.5); - padding-left: calc(var(--base) * 0.5); - padding-bottom: calc(var(--base) * 0.5); - background-color: var(--theme-elevation-50); - overflow: auto; - min-height: 100vh; - } - - @include mid-break { - flex-direction: column; - padding-left: 0; - - .query-inspector__configuration { - position: relative; - width: 100%; - top: 0; - padding-inline-end: var(--gutter-h); + html[data-theme='light'] { + .query-inspector { + --number-color: #2e9cd3; } } } - -html[data-theme='light'] { - .query-inspector { - --number-color: #2e9cd3; - } -} diff --git a/packages/next/src/views/Account/Settings/index.scss b/packages/next/src/views/Account/Settings/index.scss index 23eb53b7bb..18d6522c68 100644 --- a/packages/next/src/views/Account/Settings/index.scss +++ b/packages/next/src/views/Account/Settings/index.scss @@ -1,46 +1,48 @@ @import '../../../scss/styles.scss'; -.payload-settings { - position: relative; - margin-bottom: calc(var(--base) * 2); +@layer payload-default { + .payload-settings { + position: relative; + margin-bottom: calc(var(--base) * 2); - h3 { - margin: 0; - } + h3 { + margin: 0; + } - &::before, - &::after { - content: ''; - display: block; - height: 1px; - background: var(--theme-elevation-100); - width: calc(100% + calc(var(--base) * 5)); - left: calc(var(--gutter-h) * -1); - top: 0; - position: absolute; - } - - &::after { - display: none; - bottom: 0; - top: unset; - } - - margin-top: calc(var(--base) * 3); - padding-top: calc(var(--base) * 3); - padding-bottom: calc(var(--base) * 3); - display: flex; - flex-direction: column; - gap: var(--base); - - @include mid-break { - margin-bottom: var(--base); - padding-top: calc(var(--base) * 2); - margin-top: calc(var(--base) * 2); - padding-bottom: calc(var(--base) * 2); + &::before, + &::after { + content: ''; + display: block; + height: 1px; + background: var(--theme-elevation-100); + width: calc(100% + calc(var(--base) * 5)); + left: calc(var(--gutter-h) * -1); + top: 0; + position: absolute; + } &::after { - display: block; + display: none; + bottom: 0; + top: unset; + } + + margin-top: calc(var(--base) * 3); + padding-top: calc(var(--base) * 3); + padding-bottom: calc(var(--base) * 3); + display: flex; + flex-direction: column; + gap: var(--base); + + @include mid-break { + margin-bottom: var(--base); + padding-top: calc(var(--base) * 2); + margin-top: calc(var(--base) * 2); + padding-bottom: calc(var(--base) * 2); + + &::after { + display: block; + } } } } diff --git a/packages/next/src/views/CreateFirstUser/index.client.tsx b/packages/next/src/views/CreateFirstUser/index.client.tsx index 51cc56d999..0a81d5ce5b 100644 --- a/packages/next/src/views/CreateFirstUser/index.client.tsx +++ b/packages/next/src/views/CreateFirstUser/index.client.tsx @@ -33,7 +33,7 @@ export const CreateFirstUserClient: React.FC<{ getEntityConfig, } = useConfig() - const { serverFunction } = useServerFunctions() + const { getFormState } = useServerFunctions() const { t } = useTranslation() const { setUser } = useAuth() @@ -42,19 +42,16 @@ export const CreateFirstUserClient: React.FC<{ const onChange: FormProps['onChange'][0] = React.useCallback( async ({ formState: prevFormState }) => { - const { state } = (await serverFunction({ - name: 'form-state', - args: { - collectionSlug: userSlug, - formState: prevFormState, - operation: 'create', - schemaPath: `_${userSlug}.auth`, - }, - })) as { state: FormState } // TODO: remove this when strictNullChecks is enabled and the return type can be inferred + const { state } = await getFormState({ + collectionSlug: userSlug, + formState: prevFormState, + operation: 'create', + schemaPath: `_${userSlug}.auth`, + }) return state }, - [userSlug, serverFunction], + [userSlug, getFormState], ) const handleFirstRegister = (data: { user: ClientUser }) => { diff --git a/packages/next/src/views/CreateFirstUser/index.scss b/packages/next/src/views/CreateFirstUser/index.scss index 750018a60b..3b17b5e3f4 100644 --- a/packages/next/src/views/CreateFirstUser/index.scss +++ b/packages/next/src/views/CreateFirstUser/index.scss @@ -1,19 +1,21 @@ @import '../../scss/styles.scss'; -.create-first-user { - display: flex; - flex-direction: column; - gap: base(0.4); +@layer payload-default { + .create-first-user { + display: flex; + flex-direction: column; + gap: base(0.4); - > form > .field-type { - margin-bottom: var(--base); + > form > .field-type { + margin-bottom: var(--base); - & .form-submit { - margin: 0; + & .form-submit { + margin: 0; + } } } -} -.emailAndUsername { - margin-bottom: var(--base); + .emailAndUsername { + margin-bottom: var(--base); + } } diff --git a/packages/next/src/views/Dashboard/Default/index.scss b/packages/next/src/views/Dashboard/Default/index.scss index cbd00878ab..385dfd38c4 100644 --- a/packages/next/src/views/Dashboard/Default/index.scss +++ b/packages/next/src/views/Dashboard/Default/index.scss @@ -1,67 +1,69 @@ @import '../../../scss/styles.scss'; -.dashboard { - width: 100%; - --gap: var(--base); - --cols: 5; - - &__wrap { - padding-bottom: var(--spacing-view-bottom); - display: flex; - flex-direction: column; - gap: var(--base); - } - - &__group { - display: flex; - flex-direction: column; - gap: var(--gap); - } - - &__label { - margin: 0; - } - - &__card-list { - padding: 0; - margin: 0; - list-style: none; - gap: var(--gap); - display: grid; - grid-template-columns: repeat(var(--cols), 1fr); - - .card { - height: 100%; - } - } - - &__locked.locked { - align-items: unset; - justify-content: unset; - } - - @include large-break { - --cols: 4; - } - - @include mid-break { +@layer payload-default { + .dashboard { + width: 100%; --gap: var(--base); - --cols: 2; - } - - @include small-break { - --cols: 2; + --cols: 5; &__wrap { + padding-bottom: var(--spacing-view-bottom); + display: flex; + flex-direction: column; gap: var(--base); } + &__group { + display: flex; + flex-direction: column; + gap: var(--gap); + } + + &__label { + margin: 0; + } + &__card-list { - gap: base(0.4); + padding: 0; + margin: 0; + list-style: none; + gap: var(--gap); + display: grid; + grid-template-columns: repeat(var(--cols), 1fr); + + .card { + height: 100%; + } + } + + &__locked.locked { + align-items: unset; + justify-content: unset; + } + + @include large-break { + --cols: 4; + } + + @include mid-break { + --gap: var(--base); + --cols: 2; + } + + @include small-break { + --cols: 2; + + &__wrap { + gap: var(--base); + } + + &__card-list { + gap: base(0.4); + } + } + + @include extra-small-break { + --cols: 1; } } - - @include extra-small-break { - --cols: 1; - } } diff --git a/packages/next/src/views/Document/getDocumentData.tsx b/packages/next/src/views/Document/getDocumentData.tsx index 612e971194..c8b395b6cb 100644 --- a/packages/next/src/views/Document/getDocumentData.tsx +++ b/packages/next/src/views/Document/getDocumentData.tsx @@ -8,7 +8,7 @@ import type { SanitizedGlobalConfig, } from 'payload' -import { buildFormState } from '@payloadcms/ui/utilities/buildFormState' +import { buildFormStateFn as buildFormState } from '@payloadcms/ui/utilities/buildFormState' import { reduceFieldsToValues } from 'payload/shared' export const getDocumentData = async (args: { @@ -38,17 +38,15 @@ export const getDocumentData = async (args: { schemaPath, }) - if (result.errors) { - throw new Error('Error building form state') - } else { - const data = reduceFieldsToValues(result.state, true) - return { - data, - formState: result.state, - } + const data = reduceFieldsToValues(result.state, true) + + return { + data, + formState: result.state, } } catch (error) { console.error('Error getting document data', error) // eslint-disable-line no-console + return { data: null, formState: { diff --git a/packages/next/src/views/LivePreview/IFrame/index.scss b/packages/next/src/views/LivePreview/IFrame/index.scss index 8d2c97a1e3..4296d4d316 100644 --- a/packages/next/src/views/LivePreview/IFrame/index.scss +++ b/packages/next/src/views/LivePreview/IFrame/index.scss @@ -1,7 +1,9 @@ -.live-preview-iframe { - background-color: white; - border: 0; - width: 100%; - height: 100%; - transform-origin: top left; +@layer payload-default { + .live-preview-iframe { + background-color: white; + border: 0; + width: 100%; + height: 100%; + transform-origin: top left; + } } diff --git a/packages/next/src/views/LivePreview/Preview/index.scss b/packages/next/src/views/LivePreview/Preview/index.scss index a93a2c6254..029d7f5428 100644 --- a/packages/next/src/views/LivePreview/Preview/index.scss +++ b/packages/next/src/views/LivePreview/Preview/index.scss @@ -1,41 +1,43 @@ @import '../../../scss/styles.scss'; -.live-preview-window { - background-color: var(--theme-bg); - width: 60%; - flex-shrink: 0; - flex-grow: 0; - position: sticky; - top: var(--doc-controls-height); - height: calc(100vh - var(--doc-controls-height)); - overflow: hidden; +@layer payload-default { + .live-preview-window { + background-color: var(--theme-bg); + width: 60%; + flex-shrink: 0; + flex-grow: 0; + position: sticky; + top: var(--doc-controls-height); + height: calc(100vh - var(--doc-controls-height)); + overflow: hidden; - &__wrapper { - display: flex; - flex-direction: column; - height: 100%; - justify-content: flex-start; - } - - &__main { - flex-grow: 1; - height: 100%; - width: 100%; - } - - &--has-breakpoint { - .live-preview-iframe { - border: 1px solid var(--theme-elevation-100); + &__wrapper { + display: flex; + flex-direction: column; + height: 100%; + justify-content: flex-start; } - .live-preview-window { - &__main { - padding: var(--base); + &__main { + flex-grow: 1; + height: 100%; + width: 100%; + } + + &--has-breakpoint { + .live-preview-iframe { + border: 1px solid var(--theme-elevation-100); + } + + .live-preview-window { + &__main { + padding: var(--base); + } } } - } - @include mid-break { - width: 100%; + @include mid-break { + width: 100%; + } } } diff --git a/packages/next/src/views/LivePreview/Toolbar/Controls/index.scss b/packages/next/src/views/LivePreview/Toolbar/Controls/index.scss index ca90b41954..0d7e4359eb 100644 --- a/packages/next/src/views/LivePreview/Toolbar/Controls/index.scss +++ b/packages/next/src/views/LivePreview/Toolbar/Controls/index.scss @@ -1,59 +1,61 @@ @import '../../../../scss/styles.scss'; -.live-preview-toolbar-controls { - display: flex; - align-items: center; - gap: calc(var(--base) / 3); +@layer payload-default { + .live-preview-toolbar-controls { + display: flex; + align-items: center; + gap: calc(var(--base) / 3); - &__breakpoint { - border: none; - background: transparent; - height: var(--base); + &__breakpoint { + border: none; + background: transparent; + height: var(--base); - &:focus { - outline: none; + &:focus { + outline: none; + } } - } - &__device-size { - display: flex; - align-items: center; - } - - &__size { - width: 50px; - height: var(--base); - display: flex; - align-items: center; - border: 1px solid var(--theme-elevation-200); - background: var(--theme-elevation-100); - border-radius: 2px; - font-size: small; - } - - &__zoom { - width: 55px; - border: none; - background: transparent; - height: var(--base); - - &:focus { - outline: none; + &__device-size { + display: flex; + align-items: center; } - } - &__external { - flex-shrink: 0; - display: flex; - width: var(--base); - height: var(--base); - align-items: center; - justify-content: center; - padding: 6px 0; - } + &__size { + width: 50px; + height: var(--base); + display: flex; + align-items: center; + border: 1px solid var(--theme-elevation-200); + background: var(--theme-elevation-100); + border-radius: 2px; + font-size: small; + } - .popup-button { - display: flex; - align-items: center; + &__zoom { + width: 55px; + border: none; + background: transparent; + height: var(--base); + + &:focus { + outline: none; + } + } + + &__external { + flex-shrink: 0; + display: flex; + width: var(--base); + height: var(--base); + align-items: center; + justify-content: center; + padding: 6px 0; + } + + .popup-button { + display: flex; + align-items: center; + } } } diff --git a/packages/next/src/views/LivePreview/Toolbar/SizeInput/index.scss b/packages/next/src/views/LivePreview/Toolbar/SizeInput/index.scss index 242fc2b1ea..0dbd78d679 100644 --- a/packages/next/src/views/LivePreview/Toolbar/SizeInput/index.scss +++ b/packages/next/src/views/LivePreview/Toolbar/SizeInput/index.scss @@ -1,10 +1,12 @@ -.toolbar-input { - width: 50px; - height: var(--base); - display: flex; - align-items: center; - border: 1px solid var(--theme-elevation-200); - background: var(--theme-elevation-100); - border-radius: 2px; - font-size: small; +@layer payload-default { + .toolbar-input { + width: 50px; + height: var(--base); + display: flex; + align-items: center; + border: 1px solid var(--theme-elevation-200); + background: var(--theme-elevation-100); + border-radius: 2px; + font-size: small; + } } diff --git a/packages/next/src/views/LivePreview/Toolbar/index.scss b/packages/next/src/views/LivePreview/Toolbar/index.scss index 8dfdf751d8..957bbbb44b 100644 --- a/packages/next/src/views/LivePreview/Toolbar/index.scss +++ b/packages/next/src/views/LivePreview/Toolbar/index.scss @@ -1,41 +1,43 @@ @import '../../../scss/styles.scss'; -.live-preview-toolbar { - display: flex; - background-color: var(--theme-bg); - color: var(--theme-text); - height: calc(var(--base) * 1.75); - align-items: center; - flex-shrink: 0; +@layer payload-default { + .live-preview-toolbar { + display: flex; + background-color: var(--theme-bg); + color: var(--theme-text); + height: calc(var(--base) * 1.75); + align-items: center; + flex-shrink: 0; - &--static { - position: relative; - width: 100%; - justify-content: center; - border-bottom: 1px solid var(--theme-elevation-100); - } - - &--draggable { - @include shadow-lg; - position: absolute; - top: 0; - left: 0; - margin: 0; - border-radius: 4px; - } - - &__drag-handle { - background: transparent; - border: 0; - padding: 0; - cursor: grab; - - .icon--drag-handle .fill { - fill: var(--theme-elevation-300); + &--static { + position: relative; + width: 100%; + justify-content: center; + border-bottom: 1px solid var(--theme-elevation-100); } - &:active { - cursor: grabbing; + &--draggable { + @include shadow-lg; + position: absolute; + top: 0; + left: 0; + margin: 0; + border-radius: 4px; + } + + &__drag-handle { + background: transparent; + border: 0; + padding: 0; + cursor: grab; + + .icon--drag-handle .fill { + fill: var(--theme-elevation-300); + } + + &:active { + cursor: grabbing; + } } } } diff --git a/packages/next/src/views/LivePreview/ToolbarArea/index.scss b/packages/next/src/views/LivePreview/ToolbarArea/index.scss index bbf897ad8e..7eb3e64e6b 100644 --- a/packages/next/src/views/LivePreview/ToolbarArea/index.scss +++ b/packages/next/src/views/LivePreview/ToolbarArea/index.scss @@ -1,4 +1,6 @@ -.toolbar-area { - width: 100%; - height: 100%; +@layer payload-default { + .toolbar-area { + width: 100%; + height: 100%; + } } diff --git a/packages/next/src/views/LivePreview/index.client.tsx b/packages/next/src/views/LivePreview/index.client.tsx index c0beca2dd7..e5a1078944 100644 --- a/packages/next/src/views/LivePreview/index.client.tsx +++ b/packages/next/src/views/LivePreview/index.client.tsx @@ -7,7 +7,6 @@ import type { ClientGlobalConfig, ClientUser, Data, - FormState, LivePreviewConfig, } from 'payload' @@ -87,7 +86,7 @@ const PreviewView: React.FC = ({ updateDocumentEditor, } = useDocumentInfo() - const { serverFunction } = useServerFunctions() + const { getFormState } = useServerFunctions() const operation = id ? 'update' : 'create' @@ -112,6 +111,8 @@ const PreviewView: React.FC = ({ const [isReadOnlyForIncomingUser, setIsReadOnlyForIncomingUser] = useState(false) const [showTakeOverModal, setShowTakeOverModal] = useState(false) + const abortControllerRef = useRef(new AbortController()) + const documentLockStateRef = useRef<{ hasShownLockedModal: boolean isLocked: boolean @@ -166,6 +167,17 @@ const PreviewView: React.FC = ({ const onChange: FormProps['onChange'][0] = useCallback( async ({ formState: prevFormState }) => { + if (abortControllerRef.current) { + try { + abortControllerRef.current.abort() + } catch (_err) { + // swallow error + } + } + + const abortController = new AbortController() + abortControllerRef.current = abortController + const currentTime = Date.now() const timeSinceLastUpdate = currentTime - lastUpdateTime @@ -177,25 +189,18 @@ const PreviewView: React.FC = ({ const docPreferences = await getDocPreferences() - const { lockedState, state } = (await serverFunction({ - name: 'form-state', - args: { - id, - collectionSlug, - docPreferences, - formState: prevFormState, - globalSlug, - operation, - returnLockStatus: isLockingEnabled ? true : false, - schemaPath, - updateLastEdited, - }, - })) as { - lockedState: { - user: ClientUser - } - state: FormState - } // TODO: remove this when strictNullChecks is enabled and the return type can be inferred + const { lockedState, state } = await getFormState({ + id, + collectionSlug, + docPreferences, + formState: prevFormState, + globalSlug, + operation, + returnLockStatus: isLockingEnabled ? true : false, + schemaPath, + signal: abortController.signal, + updateLastEdited, + }) setDocumentIsLocked(true) @@ -203,8 +208,13 @@ const PreviewView: React.FC = ({ const previousOwnerId = documentLockStateRef.current?.user?.id if (lockedState) { - if (!documentLockStateRef.current || lockedState.user.id !== previousOwnerId) { - if (previousOwnerId === user.id && lockedState.user.id !== user.id) { + const lockedUserID = + typeof lockedState.user === 'string' || typeof lockedState.user === 'number' + ? lockedState.user + : lockedState.user.id + + if (!documentLockStateRef.current || lockedUserID !== previousOwnerId) { + if (previousOwnerId === user.id && lockedUserID !== user.id) { setShowTakeOverModal(true) documentLockStateRef.current.hasShownLockedModal = true } @@ -212,9 +222,10 @@ const PreviewView: React.FC = ({ documentLockStateRef.current = documentLockStateRef.current = { hasShownLockedModal: documentLockStateRef.current?.hasShownLockedModal || false, isLocked: true, - user: lockedState.user, + user: lockedState.user as ClientUser, } - setCurrentEditor(lockedState.user) + + setCurrentEditor(lockedState.user as ClientUser) } } } @@ -233,13 +244,21 @@ const PreviewView: React.FC = ({ setCurrentEditor, setDocumentIsLocked, user, - serverFunction, + getFormState, ], ) // Clean up when the component unmounts or when the document is unlocked useEffect(() => { return () => { + if (abortControllerRef.current) { + try { + abortControllerRef.current.abort() + } catch (_err) { + // swallow error + } + } + if (!isLockingEnabled) { return } diff --git a/packages/next/src/views/LivePreview/index.scss b/packages/next/src/views/LivePreview/index.scss index 62113bbe17..2aae4d07da 100644 --- a/packages/next/src/views/LivePreview/index.scss +++ b/packages/next/src/views/LivePreview/index.scss @@ -1,66 +1,68 @@ @import '../../scss/styles.scss'; -.live-preview { - width: 100%; - display: flex; - --gradient: linear-gradient(to left, rgba(0, 0, 0, 0.04) 0%, transparent 100%); - - [dir='rtl'] & { - flex-direction: row-reverse; - } - - &--popup-open { - .live-preview { - &__edit { - padding-right: var(--gutter-h); - } - } - } - - &__main { - width: 40%; +@layer payload-default { + .live-preview { + width: 100%; display: flex; - flex-direction: column; - min-height: 100%; - position: relative; + --gradient: linear-gradient(to left, rgba(0, 0, 0, 0.04) 0%, transparent 100%); + + [dir='rtl'] & { + flex-direction: row-reverse; + } &--popup-open { - width: 100%; - } - - &::after { - content: ' '; - position: absolute; - top: 0; - right: 0; - width: calc(var(--base) * 2); - height: 100%; - background: var(--gradient); - pointer-events: none; - z-index: -1; - } - } - - @include mid-break { - flex-direction: column; - - &__main { - min-height: initial; - width: 100%; - - &::after { - display: none; + .live-preview { + &__edit { + padding-right: var(--gutter-h); + } } } - &__form { - display: block; + &__main { + width: 40%; + display: flex; + flex-direction: column; + min-height: 100%; + position: relative; + + &--popup-open { + width: 100%; + } + + &::after { + content: ' '; + position: absolute; + top: 0; + right: 0; + width: calc(var(--base) * 2); + height: 100%; + background: var(--gradient); + pointer-events: none; + z-index: -1; + } + } + + @include mid-break { + flex-direction: column; + + &__main { + min-height: initial; + width: 100%; + + &::after { + display: none; + } + } + + &__form { + display: block; + } + } + } + + html[data-theme='dark'] { + .live-preview { + --gradient: linear-gradient(to left, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%); } } } - -html[data-theme='dark'] { - .live-preview { - --gradient: linear-gradient(to left, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%); - } -} diff --git a/packages/next/src/views/Login/LoginForm/index.scss b/packages/next/src/views/Login/LoginForm/index.scss index cdd85ab457..77ba4a0ced 100644 --- a/packages/next/src/views/Login/LoginForm/index.scss +++ b/packages/next/src/views/Login/LoginForm/index.scss @@ -1,8 +1,10 @@ -.login__form { - &__inputWrap { - display: flex; - flex-direction: column; - gap: var(--base); - margin-bottom: calc(var(--base) / 4); +@layer payload-default { + .login__form { + &__inputWrap { + display: flex; + flex-direction: column; + gap: var(--base); + margin-bottom: calc(var(--base) / 4); + } } } diff --git a/packages/next/src/views/Login/index.scss b/packages/next/src/views/Login/index.scss index 828c7ac97e..37721af433 100644 --- a/packages/next/src/views/Login/index.scss +++ b/packages/next/src/views/Login/index.scss @@ -1,8 +1,10 @@ -.login { - &__brand { - display: flex; - justify-content: center; - width: 100%; - margin-bottom: calc(var(--base) * 2); +@layer payload-default { + .login { + &__brand { + display: flex; + justify-content: center; + width: 100%; + margin-bottom: calc(var(--base) * 2); + } } } diff --git a/packages/next/src/views/Logout/index.scss b/packages/next/src/views/Logout/index.scss index 21aa20a4e0..dfdaadb504 100644 --- a/packages/next/src/views/Logout/index.scss +++ b/packages/next/src/views/Logout/index.scss @@ -1,23 +1,25 @@ @import '../../scss/styles.scss'; -.logout { - display: flex; - flex-direction: column; - align-items: center; - flex-wrap: wrap; - - &__wrap { - z-index: 1; - position: relative; +@layer payload-default { + .logout { display: flex; flex-direction: column; - align-items: flex-start; - gap: base(0.8); - width: 100%; - max-width: base(36); + align-items: center; + flex-wrap: wrap; - & > * { - margin: 0; + &__wrap { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: base(0.8); + width: 100%; + max-width: base(36); + + & > * { + margin: 0; + } } } } diff --git a/packages/next/src/views/NotFound/index.scss b/packages/next/src/views/NotFound/index.scss index ebd6c21945..d426819715 100644 --- a/packages/next/src/views/NotFound/index.scss +++ b/packages/next/src/views/NotFound/index.scss @@ -1,55 +1,57 @@ @import '../../scss/styles.scss'; -.not-found { - margin-top: var(--base); - display: flex; - - & > * { - &:first-child { - margin-top: 0; - } - &:last-child { - margin-bottom: 0; - } - } - - &__wrap { +@layer payload-default { + .not-found { + margin-top: var(--base); display: flex; - flex-direction: column; - align-items: flex-start; - gap: base(0.8); - max-width: base(36); - } - &__content { - display: flex; - flex-direction: column; - gap: base(0.4); + & > * { + &:first-child { + margin-top: 0; + } + &:last-child { + margin-bottom: 0; + } + } - > * { + &__wrap { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: base(0.8); + max-width: base(36); + } + + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); + + > * { + margin: 0; + } + } + + &__button { margin: 0; } - } - &__button { - margin: 0; - } - - &--margin-top-large { - margin-top: calc(var(--base) * 2); - } - - @include large-break { &--margin-top-large { - margin-top: var(--base); + margin-top: calc(var(--base) * 2); } - } - @include small-break { - margin-top: calc(var(--base) / 2); + @include large-break { + &--margin-top-large { + margin-top: var(--base); + } + } - &--margin-top-large { + @include small-break { margin-top: calc(var(--base) / 2); + + &--margin-top-large { + margin-top: calc(var(--base) / 2); + } } } } diff --git a/packages/next/src/views/ResetPassword/index.scss b/packages/next/src/views/ResetPassword/index.scss index 2ef1a8c796..112d55478c 100644 --- a/packages/next/src/views/ResetPassword/index.scss +++ b/packages/next/src/views/ResetPassword/index.scss @@ -1,31 +1,33 @@ @import '../../scss/styles.scss'; -.reset-password { - &__wrap { - z-index: 1; - position: relative; - display: flex; - flex-direction: column; - align-items: flex-start; - gap: base(0.8); - max-width: base(36); +@layer payload-default { + .reset-password { + &__wrap { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: base(0.8); + max-width: base(36); - & > form { - width: 100%; + & > form { + width: 100%; - & > .inputWrap { - display: flex; - flex-direction: column; - gap: base(0.8); + & > .inputWrap { + display: flex; + flex-direction: column; + gap: base(0.8); - > * { - margin: 0; + > * { + margin: 0; + } } } - } - & > .btn { - margin: 0; + & > .btn { + margin: 0; + } } } } diff --git a/packages/next/src/views/Unauthorized/index.scss b/packages/next/src/views/Unauthorized/index.scss index fda11639e6..697c9b9975 100644 --- a/packages/next/src/views/Unauthorized/index.scss +++ b/packages/next/src/views/Unauthorized/index.scss @@ -1,36 +1,38 @@ @import '../../scss/styles.scss'; -.unauthorized { - margin-top: var(--base); +@layer payload-default { + .unauthorized { + margin-top: var(--base); - & > * { - &:first-child { - margin-top: 0; + & > * { + &:first-child { + margin-top: 0; + } + &:last-child { + margin-bottom: 0; + } } - &:last-child { - margin-bottom: 0; + + &__button { + margin: 0; } - } - - &__button { - margin: 0; - } - - &--margin-top-large { - margin-top: calc(var(--base) * 2); - } - - @include large-break { - &--margin-top-large { - margin-top: var(--base); - } - } - - @include small-break { - margin-top: calc(var(--base) / 2); &--margin-top-large { + margin-top: calc(var(--base) * 2); + } + + @include large-break { + &--margin-top-large { + margin-top: var(--base); + } + } + + @include small-break { margin-top: calc(var(--base) / 2); + + &--margin-top-large { + margin-top: calc(var(--base) / 2); + } } } } diff --git a/packages/next/src/views/Verify/index.scss b/packages/next/src/views/Verify/index.scss index 83481597da..77b4a8841c 100644 --- a/packages/next/src/views/Verify/index.scss +++ b/packages/next/src/views/Verify/index.scss @@ -1,14 +1,16 @@ -.verify { - display: flex; - align-items: center; - text-align: center; - flex-wrap: wrap; - min-height: 100vh; - - &__brand { +@layer payload-default { + .verify { display: flex; - justify-content: center; - width: 100%; - margin-bottom: calc(var(--base) * 2); + align-items: center; + text-align: center; + flex-wrap: wrap; + min-height: 100vh; + + &__brand { + display: flex; + justify-content: center; + width: 100%; + margin-bottom: calc(var(--base) * 2); + } } } diff --git a/packages/next/src/views/Version/Default/index.scss b/packages/next/src/views/Version/Default/index.scss index 401c0cebb5..4f3cd400ef 100644 --- a/packages/next/src/views/Version/Default/index.scss +++ b/packages/next/src/views/Version/Default/index.scss @@ -1,70 +1,72 @@ @import '../../../scss/styles.scss'; -.view-version { - width: 100%; - padding-bottom: var(--spacing-view-bottom); +@layer payload-default { + .view-version { + width: 100%; + padding-bottom: var(--spacing-view-bottom); - &__wrap { - padding-top: calc(var(--base) * 1.5); - display: flex; - flex-direction: column; - gap: var(--base); - } - - &__header-wrap { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 4); - } - - &__header { - display: flex; - align-items: center; - flex-wrap: wrap; - - h2 { - margin: 0; - } - } - - &__created-at { - margin: 0; - color: var(--theme-elevation-500); - } - - &__controls { - display: flex; - gap: var(--base); - - > * { - flex-basis: 100%; - } - } - - &__restore { - margin: 0 0 0 var(--base); - } - - @include mid-break { - &__intro, - &__header { - display: block; + &__wrap { + padding-top: calc(var(--base) * 1.5); + display: flex; + flex-direction: column; + gap: var(--base); } - &__controls { + &__header-wrap { + display: flex; flex-direction: column; gap: calc(var(--base) / 4); } - &__restore { - margin: calc(var(--base) * 0.5) 0 0 0; - } - } + &__header { + display: flex; + align-items: center; + flex-wrap: wrap; - @include small-break { - &__wrap { - padding-top: calc(var(--base) / 2); - gap: calc(var(--base) / 2); + h2 { + margin: 0; + } + } + + &__created-at { + margin: 0; + color: var(--theme-elevation-500); + } + + &__controls { + display: flex; + gap: var(--base); + + > * { + flex-basis: 100%; + } + } + + &__restore { + margin: 0 0 0 var(--base); + } + + @include mid-break { + &__intro, + &__header { + display: block; + } + + &__controls { + flex-direction: column; + gap: calc(var(--base) / 4); + } + + &__restore { + margin: calc(var(--base) * 0.5) 0 0 0; + } + } + + @include small-break { + &__wrap { + padding-top: calc(var(--base) / 2); + gap: calc(var(--base) / 2); + } } } } diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/Label/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/Label/index.scss index beffc17b52..61e50c4cde 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/Label/index.scss +++ b/packages/next/src/views/Version/RenderFieldsToDiff/Label/index.scss @@ -1,4 +1,6 @@ -.field-diff-label { - margin-bottom: calc(var(--base) * 0.25); - font-weight: 600; +@layer payload-default { + .field-diff-label { + margin-bottom: calc(var(--base) * 0.25); + font-weight: 600; + } } diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss index f4694eb943..a795f2a757 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss +++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss @@ -1,34 +1,36 @@ -.iterable-diff { - margin-bottom: calc(var(--base) * 2); +@layer payload-default { + .iterable-diff { + margin-bottom: calc(var(--base) * 2); - &__locale-label { - background: var(--theme-elevation-100); - padding: calc(var(--base) * 0.25); - // border-radius: $style-radius-m; - [dir='ltr'] & { - margin-right: calc(var(--base) * 0.25); + &__locale-label { + background: var(--theme-elevation-100); + padding: calc(var(--base) * 0.25); + // border-radius: $style-radius-m; + [dir='ltr'] & { + margin-right: calc(var(--base) * 0.25); + } + [dir='rtl'] & { + margin-left: calc(var(--base) * 0.25); + } } - [dir='rtl'] & { - margin-left: calc(var(--base) * 0.25); - } - } - &__wrap { - margin: calc(var(--base) * 0.5); - [dir='ltr'] & { - padding-left: calc(var(--base) * 0.5); - // border-left: $style-stroke-width-s solid var(--theme-elevation-150); + &__wrap { + margin: calc(var(--base) * 0.5); + [dir='ltr'] & { + padding-left: calc(var(--base) * 0.5); + // border-left: $style-stroke-width-s solid var(--theme-elevation-150); + } + [dir='rtl'] & { + padding-right: calc(var(--base) * 0.5); + // border-right: $style-stroke-width-s solid var(--theme-elevation-150); + } } - [dir='rtl'] & { - padding-right: calc(var(--base) * 0.5); - // border-right: $style-stroke-width-s solid var(--theme-elevation-150); - } - } - &__no-rows { - font-family: monospace; - background-color: var(--theme-elevation-50); - // padding: base(0.125) calc(var(--base) * 0.5); - // margin: base(0.125) 0; + &__no-rows { + font-family: monospace; + background-color: var(--theme-elevation-50); + // padding: base(0.125) calc(var(--base) * 0.5); + // margin: base(0.125) 0; + } } } diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Nested/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Nested/index.scss index 5765f87795..5e6af60557 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Nested/index.scss +++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Nested/index.scss @@ -1,12 +1,14 @@ -.nested-diff { - &__wrap--gutter { - [dir='ltr'] & { - padding-left: calc(var(--base) * 0.25); - // border-left: $style-stroke-width-s solid var(--theme-elevation-150); - } - [dir='rtl'] & { - padding-right: calc(var(--base) * 0.25); - // border-right: $style-stroke-width-s solid var(--theme-elevation-150); +@layer payload-default { + .nested-diff { + &__wrap--gutter { + [dir='ltr'] & { + padding-left: calc(var(--base) * 0.25); + // border-left: $style-stroke-width-s solid var(--theme-elevation-150); + } + [dir='rtl'] & { + padding-right: calc(var(--base) * 0.25); + // border-right: $style-stroke-width-s solid var(--theme-elevation-150); + } } } } diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss index 1d543b4298..57f56a9791 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss +++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss @@ -1,13 +1,15 @@ -.relationship-diff { - &__locale-label { - [dir='ltr'] & { - margin-right: calc(var(--base) * 0.25); +@layer payload-default { + .relationship-diff { + &__locale-label { + [dir='ltr'] & { + margin-right: calc(var(--base) * 0.25); + } + [dir='rtl'] & { + margin-left: calc(var(--base) * 0.25); + } + background: var(--theme-elevation-100); + padding: calc(var(--base) * 0.25); + // border-radius: $style-radius-m; } - [dir='rtl'] & { - margin-left: calc(var(--base) * 0.25); - } - background: var(--theme-elevation-100); - padding: calc(var(--base) * 0.25); - // border-radius: $style-radius-m; } } diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.scss index 926ecf178c..9d31d6dfa6 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.scss +++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.scss @@ -1,13 +1,15 @@ -.select-diff { - &__locale-label { - [dir='ltr'] & { - margin-right: calc(var(--base) * 0.25); +@layer payload-default { + .select-diff { + &__locale-label { + [dir='ltr'] & { + margin-right: calc(var(--base) * 0.25); + } + [dir='rtl'] & { + margin-left: calc(var(--base) * 0.25); + } + background: var(--theme-elevation-100); + padding: calc(var(--base) * 0.25); + // border-radius: $style-radius-m; } - [dir='rtl'] & { - margin-left: calc(var(--base) * 0.25); - } - background: var(--theme-elevation-100); - padding: calc(var(--base) * 0.25); - // border-radius: $style-radius-m; } } diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.scss index b9e00dc755..d0c265402e 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.scss +++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.scss @@ -1,13 +1,15 @@ -.text-diff { - &__locale-label { - [dir='ltr'] & { - margin-right: calc(var(--base) * 0.25); +@layer payload-default { + .text-diff { + &__locale-label { + [dir='ltr'] & { + margin-right: calc(var(--base) * 0.25); + } + [dir='rtl'] & { + margin-left: calc(var(--base) * 0.25); + } + background: var(--theme-elevation-100); + padding: calc(var(--base) * 0.25); + // border-radius: $style-radius-m; } - [dir='rtl'] & { - margin-left: calc(var(--base) * 0.25); - } - background: var(--theme-elevation-100); - padding: calc(var(--base) * 0.25); - // border-radius: $style-radius-m; } } diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/index.scss index 372a4651ef..ad5dd5f4cc 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/index.scss +++ b/packages/next/src/views/Version/RenderFieldsToDiff/index.scss @@ -1,18 +1,20 @@ @import '../../../scss/styles.scss'; -.render-field-diffs { - display: flex; - flex-direction: column; - gap: var(--base); - - &__field { - overflow-wrap: anywhere; +@layer payload-default { + .render-field-diffs { display: flex; flex-direction: column; gap: var(--base); - } - @include small-break { - gap: calc(var(--base) / 2); + &__field { + overflow-wrap: anywhere; + display: flex; + flex-direction: column; + gap: var(--base); + } + + @include small-break { + gap: calc(var(--base) / 2); + } } } diff --git a/packages/next/src/views/Version/Restore/index.scss b/packages/next/src/views/Version/Restore/index.scss index 4e260973c0..7dc2909a8d 100644 --- a/packages/next/src/views/Version/Restore/index.scss +++ b/packages/next/src/views/Version/Restore/index.scss @@ -1,77 +1,79 @@ @import '../../.././scss/styles.scss'; -.restore-version { - cursor: pointer; - display: flex; - - .popup-button { - display: flex; - } - - &__chevron { - background-color: var(--theme-elevation-150); - border-top-left-radius: 0; - border-bottom-left-radius: 0; +@layer payload-default { + .restore-version { cursor: pointer; - - .stroke { - stroke-width: 1px; - } - - &:hover { - background: var(--theme-elevation-100); - } - } - - &__button { - border-top-right-radius: 0px; - border-bottom-right-radius: 0px; - margin-right: 2px; - - &:focus { - border-radius: 0; - outline-offset: 0; - } - } - - &__modal { - @include blur-bg; display: flex; - align-items: center; - justify-content: center; - height: 100%; - &__toggle { - @extend %btn-reset; + .popup-button { + display: flex; } - } - &__wrapper { - z-index: 1; - position: relative; - display: flex; - flex-direction: column; - gap: base(0.8); - padding: base(2); - max-width: base(36); - } + &__chevron { + background-color: var(--theme-elevation-150); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + cursor: pointer; - &__content { - display: flex; - flex-direction: column; - gap: base(0.4); + .stroke { + stroke-width: 1px; + } - > * { - margin: 0; + &:hover { + background: var(--theme-elevation-100); + } } - } - &__controls { - display: flex; - gap: base(0.4); + &__button { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + margin-right: 2px; - .btn { - margin: 0; + &:focus { + border-radius: 0; + outline-offset: 0; + } + } + + &__modal { + @include blur-bg; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + + &__toggle { + @extend %btn-reset; + } + } + + &__wrapper { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + gap: base(0.8); + padding: base(2); + max-width: base(36); + } + + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); + + > * { + margin: 0; + } + } + + &__controls { + display: flex; + gap: base(0.4); + + .btn { + margin: 0; + } } } } diff --git a/packages/next/src/views/Version/SelectComparison/index.scss b/packages/next/src/views/Version/SelectComparison/index.scss index 8687aabf90..5de71f8576 100644 --- a/packages/next/src/views/Version/SelectComparison/index.scss +++ b/packages/next/src/views/Version/SelectComparison/index.scss @@ -1,13 +1,15 @@ -.compare-version { - &__error-loading { - border: 1px solid var(--theme-error-500); - min-height: calc(var(--base) * 2); - padding: calc(var(--base) * 0.5) calc(var(--base) * 0.75); - background-color: var(--theme-error-100); - color: var(--theme-elevation-0); - } +@layer payload-default { + .compare-version { + &__error-loading { + border: 1px solid var(--theme-error-500); + min-height: calc(var(--base) * 2); + padding: calc(var(--base) * 0.5) calc(var(--base) * 0.75); + background-color: var(--theme-error-100); + color: var(--theme-elevation-0); + } - &__label { - margin-bottom: calc(var(--base) * 0.25); + &__label { + margin-bottom: calc(var(--base) * 0.25); + } } } diff --git a/packages/next/src/views/Version/SelectLocales/index.scss b/packages/next/src/views/Version/SelectLocales/index.scss index b61b0db84a..a3ec33aab1 100644 --- a/packages/next/src/views/Version/SelectLocales/index.scss +++ b/packages/next/src/views/Version/SelectLocales/index.scss @@ -1,7 +1,9 @@ -.select-version-locales { - flex-grow: 1; +@layer payload-default { + .select-version-locales { + flex-grow: 1; - &__label { - margin-bottom: calc(var(--base) * 0.25); + &__label { + margin-bottom: calc(var(--base) * 0.25); + } } } diff --git a/packages/next/src/views/Versions/index.scss b/packages/next/src/views/Versions/index.scss index d7011b2426..25a146073b 100644 --- a/packages/next/src/views/Versions/index.scss +++ b/packages/next/src/views/Versions/index.scss @@ -1,108 +1,110 @@ @import '../../scss/styles.scss'; -.versions { - width: 100%; - margin-bottom: calc(var(--base) * 2); - - &__wrap { - padding-top: 0; - padding-bottom: var(--spacing-view-bottom); - margin-top: calc(var(--base) * 0.75); - } - - &__header { - margin-bottom: var(--base); - } - - &__no-versions { - margin-top: calc(var(--base) * 1.5); - } - - &__parent-doc { - .banner__content { - display: flex; - } - } - - &__parent-doc-pills { - [dir='ltr'] & { - margin-left: auto; - } - - [dir='rtl'] & { - margin-right: auto; - } - } - - .table { - table { - width: 100%; - overflow: auto; - } - } - - &__page-controls { +@layer payload-default { + .versions { width: 100%; - display: flex; - align-items: center; - } + margin-bottom: calc(var(--base) * 2); - .paginator { - margin-bottom: 0; - } - - &__page-info { - [dir='ltr'] & { - margin-right: var(--base); - margin-left: auto; - } - - [dir='rtl'] & { - margin-left: var(--base); - margin-right: auto; - } - } - - @include mid-break { &__wrap { padding-top: 0; - margin-top: 0; + padding-bottom: var(--spacing-view-bottom); + margin-top: calc(var(--base) * 0.75); } - // on mobile, extend the table all the way to the viewport edges - // this is to visually indicate overflowing content - .table { - display: flex; - width: calc(100% + calc(var(--gutter-h) * 2)); - max-width: unset; - left: calc(var(--gutter-h) * -1); - position: relative; - padding-left: var(--gutter-h); + &__header { + margin-bottom: var(--base); + } - &::after { - content: ''; - height: 1px; - padding-right: var(--gutter-h); + &__no-versions { + margin-top: calc(var(--base) * 1.5); + } + + &__parent-doc { + .banner__content { + display: flex; + } + } + + &__parent-doc-pills { + [dir='ltr'] & { + margin-left: auto; + } + + [dir='rtl'] & { + margin-right: auto; + } + } + + .table { + table { + width: 100%; + overflow: auto; } } &__page-controls { - flex-wrap: wrap; + width: 100%; + display: flex; + align-items: center; + } + + .paginator { + margin-bottom: 0; } &__page-info { [dir='ltr'] & { - margin-left: 0; + margin-right: var(--base); + margin-left: auto; } [dir='rtl'] & { - margin-right: 0; + margin-left: var(--base); + margin-right: auto; } } - .paginator { - width: 100%; - margin-bottom: var(--base); + @include mid-break { + &__wrap { + padding-top: 0; + margin-top: 0; + } + + // on mobile, extend the table all the way to the viewport edges + // this is to visually indicate overflowing content + .table { + display: flex; + width: calc(100% + calc(var(--gutter-h) * 2)); + max-width: unset; + left: calc(var(--gutter-h) * -1); + position: relative; + padding-left: var(--gutter-h); + + &::after { + content: ''; + height: 1px; + padding-right: var(--gutter-h); + } + } + + &__page-controls { + flex-wrap: wrap; + } + + &__page-info { + [dir='ltr'] & { + margin-left: 0; + } + + [dir='rtl'] & { + margin-right: 0; + } + } + + .paginator { + width: 100%; + margin-bottom: var(--base); + } } } } diff --git a/packages/payload/package.json b/packages/payload/package.json index 25fea44207..6ec84c32d4 100644 --- a/packages/payload/package.json +++ b/packages/payload/package.json @@ -1,6 +1,6 @@ { "name": "payload", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "Node, React, Headless CMS and Application Framework built on Next.js", "keywords": [ "admin panel", diff --git a/packages/payload/src/admin/forms/Form.ts b/packages/payload/src/admin/forms/Form.ts index 3a64560443..8b6a2b0e3d 100644 --- a/packages/payload/src/admin/forms/Form.ts +++ b/packages/payload/src/admin/forms/Form.ts @@ -1,5 +1,8 @@ +import { type SupportedLanguages } from '@payloadcms/translations' + import type { Field, Validate } from '../../fields/config/types.js' -import type { Where } from '../../types/index.js' +import type { DocumentPreferences } from '../../preferences/types.js' +import type { PayloadRequest, Where } from '../../types/index.js' export type Data = { [key: string]: any @@ -32,3 +35,22 @@ export type FormField = { export type FormState = { [path: string]: FormField } + +export type BuildFormStateArgs = { + collectionSlug?: string + data?: Data + docPreferences?: DocumentPreferences + formState?: FormState + globalSlug?: string + id?: number | string + /* + If not i18n was passed, the language can be passed to init i18n + */ + language?: keyof SupportedLanguages + locale?: string + operation?: 'create' | 'update' + req: PayloadRequest + returnLockStatus?: boolean + schemaPath: string + updateLastEdited?: boolean +} diff --git a/packages/payload/src/admin/functions/index.ts b/packages/payload/src/admin/functions/index.ts index f5720c0df5..207ce8b28c 100644 --- a/packages/payload/src/admin/functions/index.ts +++ b/packages/payload/src/admin/functions/index.ts @@ -20,7 +20,7 @@ export type ServerFunctionClientArgs = { export type ServerFunctionClient = (args: ServerFunctionClientArgs) => Promise | unknown export type ServerFunction = ( - args: ServerFunctionClientArgs['args'] & DefaultServerFunctionArgs, + args: DefaultServerFunctionArgs & ServerFunctionClientArgs['args'], ) => Promise | unknown export type ServerFunctionConfig = { diff --git a/packages/payload/src/admin/types.ts b/packages/payload/src/admin/types.ts index 324a141e84..fbb690f228 100644 --- a/packages/payload/src/admin/types.ts +++ b/packages/payload/src/admin/types.ts @@ -323,7 +323,14 @@ export type { export type { FormFieldBase, ServerFieldBase } from './forms/Field.js' -export type { Data, FilterOptionsResult, FormField, FormState, Row } from './forms/Form.js' +export type { + BuildFormStateArgs, + Data, + FilterOptionsResult, + FormField, + FormState, + Row, +} from './forms/Form.js' export type { FieldLabelClientComponent, @@ -449,6 +456,7 @@ export type { AdminViewComponent, AdminViewConfig, AdminViewProps, + ClientSideEditViewProps, EditViewProps, InitPageResult, ServerSideEditViewProps, diff --git a/packages/payload/src/collections/config/sanitize.ts b/packages/payload/src/collections/config/sanitize.ts index 43ac041232..2ca62c29de 100644 --- a/packages/payload/src/collections/config/sanitize.ts +++ b/packages/payload/src/collections/config/sanitize.ts @@ -130,9 +130,6 @@ export const sanitizeCollection = async ( // sanitize fields for reserved names sanitizeUploadFields(sanitized.fields, sanitized) - // disable duplicate for uploads by default - sanitized.disableDuplicate = sanitized.disableDuplicate || true - sanitized.upload.bulkUpload = sanitized.upload?.bulkUpload ?? true sanitized.upload.staticDir = sanitized.upload.staticDir || sanitized.slug sanitized.admin.useAsTitle = @@ -162,7 +159,7 @@ export const sanitizeCollection = async ( } // disable duplicate for auth enabled collections by default - sanitized.disableDuplicate = sanitized.disableDuplicate || true + sanitized.disableDuplicate = sanitized.disableDuplicate ?? true if (!sanitized.auth.strategies) { sanitized.auth.strategies = [] diff --git a/packages/payload/src/collections/operations/duplicate.ts b/packages/payload/src/collections/operations/duplicate.ts index c1d0fac424..9b65fecf66 100644 --- a/packages/payload/src/collections/operations/duplicate.ts +++ b/packages/payload/src/collections/operations/duplicate.ts @@ -16,6 +16,8 @@ import { afterRead } from '../../fields/hooks/afterRead/index.js' import { beforeChange } from '../../fields/hooks/beforeChange/index.js' import { beforeDuplicate } from '../../fields/hooks/beforeDuplicate/index.js' import { beforeValidate } from '../../fields/hooks/beforeValidate/index.js' +import { generateFileData } from '../../uploads/generateFileData.js' +import { uploadFiles } from '../../uploads/uploadFiles.js' import { commitTransaction } from '../../utilities/commitTransaction.js' import { initTransaction } from '../../utilities/initTransaction.js' import { killTransaction } from '../../utilities/killTransaction.js' @@ -129,7 +131,7 @@ export const duplicateOperation = async ( let result - const originalDoc = await afterRead({ + let originalDoc = await afterRead({ collection: collectionConfig, context: req.context, depth: 0, @@ -143,6 +145,18 @@ export const duplicateOperation = async ( showHiddenFields: true, }) + const { data: newFileData, files: filesToUpload } = await generateFileData({ + collection: args.collection, + config: req.payload.config, + data: originalDoc, + operation: 'create', + overwriteExistingFiles: 'forceDisable', + req, + throwOnMissingFile: true, + }) + + originalDoc = newFileData + // ///////////////////////////////////// // Create Access // ///////////////////////////////////// @@ -231,6 +245,14 @@ export const duplicateOperation = async ( // Create / Update // ///////////////////////////////////// + // ///////////////////////////////////// + // Write files to local storage + // ///////////////////////////////////// + + if (!collectionConfig.upload.disableLocalStorage) { + await uploadFiles(payload, filesToUpload, req) + } + const versionDoc = await payload.db.create({ collection: collectionConfig.slug, data: result, diff --git a/packages/payload/src/collections/operations/local/duplicate.ts b/packages/payload/src/collections/operations/local/duplicate.ts index 74a2d7b00d..fb2463400f 100644 --- a/packages/payload/src/collections/operations/local/duplicate.ts +++ b/packages/payload/src/collections/operations/local/duplicate.ts @@ -44,7 +44,7 @@ export async function duplicate( ) } - if (collection.config.disableDuplicate === false) { + if (collection.config.disableDuplicate === true) { throw new APIError( `The collection with slug ${String(collectionSlug)} cannot be duplicated.`, 400, diff --git a/packages/payload/src/uploads/generateFileData.ts b/packages/payload/src/uploads/generateFileData.ts index ee23210807..7c62ddd1f1 100644 --- a/packages/payload/src/uploads/generateFileData.ts +++ b/packages/payload/src/uploads/generateFileData.ts @@ -27,7 +27,8 @@ type Args = { data: T operation: 'create' | 'update' originalDoc?: T - overwriteExistingFiles?: boolean + /** pass forceDisable to not overwrite existing files even if they already exist in `data` */ + overwriteExistingFiles?: 'forceDisable' | boolean req: PayloadRequest throwOnMissingFile?: boolean } @@ -85,20 +86,28 @@ export const generateFileData = async ({ const filePath = `${staticPath}/${filename}` const response = await getFileByPath(filePath) file = response - overwriteExistingFiles = true + if (overwriteExistingFiles !== 'forceDisable') { + overwriteExistingFiles = true + } } else if (filename && url) { file = await getExternalFile({ data: data as FileData, req, uploadConfig: collectionConfig.upload, }) - overwriteExistingFiles = true + if (overwriteExistingFiles !== 'forceDisable') { + overwriteExistingFiles = true + } } } catch (err: unknown) { throw new FileRetrievalError(req.t, err instanceof Error ? err.message : undefined) } } + if (overwriteExistingFiles === 'forceDisable') { + overwriteExistingFiles = false + } + if (!file) { if (throwOnMissingFile) { throw new MissingFile(req.t) diff --git a/packages/plugin-cloud-storage/package.json b/packages/plugin-cloud-storage/package.json index eb715a8cf5..8627d6bd6c 100644 --- a/packages/plugin-cloud-storage/package.json +++ b/packages/plugin-cloud-storage/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/plugin-cloud-storage", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "The official cloud storage plugin for Payload CMS", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/plugin-cloud/package.json b/packages/plugin-cloud/package.json index 07194af466..c4491ac0ed 100644 --- a/packages/plugin-cloud/package.json +++ b/packages/plugin-cloud/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/plugin-cloud", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "The official Payload Cloud plugin", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/plugin-form-builder/package.json b/packages/plugin-form-builder/package.json index 17e702072b..9d09326d1d 100644 --- a/packages/plugin-form-builder/package.json +++ b/packages/plugin-form-builder/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/plugin-form-builder", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "Form builder plugin for Payload CMS", "keywords": [ "payload", diff --git a/packages/plugin-nested-docs/package.json b/packages/plugin-nested-docs/package.json index f93c9a9e96..df124bfaf6 100644 --- a/packages/plugin-nested-docs/package.json +++ b/packages/plugin-nested-docs/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/plugin-nested-docs", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "The official Nested Docs plugin for Payload", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/plugin-redirects/package.json b/packages/plugin-redirects/package.json index af66ea646b..8c908a4038 100644 --- a/packages/plugin-redirects/package.json +++ b/packages/plugin-redirects/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/plugin-redirects", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "Redirects plugin for Payload", "keywords": [ "payload", diff --git a/packages/plugin-search/package.json b/packages/plugin-search/package.json index 85aab7733a..d5fa35c0f1 100644 --- a/packages/plugin-search/package.json +++ b/packages/plugin-search/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/plugin-search", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "Search plugin for Payload", "keywords": [ "payload", diff --git a/packages/plugin-seo/package.json b/packages/plugin-seo/package.json index 35366ccb7a..7f15e140df 100644 --- a/packages/plugin-seo/package.json +++ b/packages/plugin-seo/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/plugin-seo", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "SEO plugin for Payload", "keywords": [ "payload", diff --git a/packages/plugin-seo/src/fields/index.scss b/packages/plugin-seo/src/fields/index.scss index bd00870c4e..0d1a626d6f 100644 --- a/packages/plugin-seo/src/fields/index.scss +++ b/packages/plugin-seo/src/fields/index.scss @@ -1,5 +1,7 @@ -.plugin-seo__field { - .field-label { - display: inline !important; +@layer payload-default { + .plugin-seo__field { + .field-label { + display: inline !important; + } } } diff --git a/packages/plugin-stripe/package.json b/packages/plugin-stripe/package.json index f176201d56..e16e41dbad 100644 --- a/packages/plugin-stripe/package.json +++ b/packages/plugin-stripe/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/plugin-stripe", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "Stripe plugin for Payload", "keywords": [ "payload", diff --git a/packages/richtext-lexical/package.json b/packages/richtext-lexical/package.json index 54987d2abe..d3ea631302 100644 --- a/packages/richtext-lexical/package.json +++ b/packages/richtext-lexical/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/richtext-lexical", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "The officially supported Lexical richtext adapter for Payload", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/richtext-lexical/src/features/blocks/client/component/index.scss b/packages/richtext-lexical/src/features/blocks/client/component/index.scss index 22cd404144..82f79c66e0 100644 --- a/packages/richtext-lexical/src/features/blocks/client/component/index.scss +++ b/packages/richtext-lexical/src/features/blocks/client/component/index.scss @@ -1,162 +1,164 @@ @import '../../../../scss/styles'; -.ContentEditable__root > div:has(.lexical-block) { - // Fixes a bug where, if the block field has a Select field, the Select field's dropdown menu would be hidden behind the lexical editor. - z-index: 1; -} - -.lexical-block { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 2); - @extend %body; - - &__row { - .collapsible__toggle-wrap { - padding-inline-start: base(0.4); - } +@layer payload-default { + .ContentEditable__root > div:has(.lexical-block) { + // Fixes a bug where, if the block field has a Select field, the Select field's dropdown menu would be hidden behind the lexical editor. + z-index: 1; } - margin-block: base(0.4); - - &__header { - h3 { - margin: 0; - } - } - - &__header-wrap { - display: flex; - align-items: flex-end; - width: 100%; - justify-content: space-between; - } - - &__heading-with-error { - display: flex; - align-items: center; - gap: calc(var(--base) * 0.5); - } - - &--has-no-error { - > .array-field__header .array-field__heading-with-error { - color: var(--theme-text); - } - } - - &--has-error { - > .array-field__header { - color: var(--theme-error-500); - } - } - - &__error-pill { - align-self: center; - } - - &__header-actions { - list-style: none; - margin: 0; - padding: 0; - display: flex; - } - - &__header-action { - @extend %btn-reset; - cursor: pointer; - margin-left: calc(var(--base) * 0.5); - - &:hover, - &:focus-visible { - text-decoration: underline; - } - } - - .collapsible { - &__header-wrap { - // Make more space for the block header (default right: is `calc(var(--base) * 3)`) so that the remove button aligns nicely to the right - right: calc(var(--base) * 1.5); - } - } - - &__removeButton.btn { - margin: 0; - &:hover { - background-color: var(--theme-elevation-200); - } - } - - &__block-header { - pointer-events: none; - } - - &__block-header * { - pointer-events: all; - } - - &__block-header, - &__block-header > div { - display: flex; - max-width: 100%; - width: 100%; - overflow: hidden; - gap: calc(var(--base) * 0.375); - justify-content: flex-start; - pointer-events: none; - - & > * { - pointer-events: all; - } - } - - &__block-number { - flex-shrink: 0; - } - - &__block-pill { - flex-shrink: 0; - display: block; - line-height: unset; - } - - &__rows { + .lexical-block { display: flex; flex-direction: column; gap: calc(var(--base) / 2); + @extend %body; + + &__row { + .collapsible__toggle-wrap { + padding-inline-start: base(0.4); + } + } + + margin-block: base(0.4); + + &__header { + h3 { + margin: 0; + } + } + + &__header-wrap { + display: flex; + align-items: flex-end; + width: 100%; + justify-content: space-between; + } + + &__heading-with-error { + display: flex; + align-items: center; + gap: calc(var(--base) * 0.5); + } + + &--has-no-error { + > .array-field__header .array-field__heading-with-error { + color: var(--theme-text); + } + } + + &--has-error { + > .array-field__header { + color: var(--theme-error-500); + } + } + + &__error-pill { + align-self: center; + } + + &__header-actions { + list-style: none; + margin: 0; + padding: 0; + display: flex; + } + + &__header-action { + @extend %btn-reset; + cursor: pointer; + margin-left: calc(var(--base) * 0.5); + + &:hover, + &:focus-visible { + text-decoration: underline; + } + } + + .collapsible { + &__header-wrap { + // Make more space for the block header (default right: is `calc(var(--base) * 3)`) so that the remove button aligns nicely to the right + right: calc(var(--base) * 1.5); + } + } + + &__removeButton.btn { + margin: 0; + &:hover { + background-color: var(--theme-elevation-200); + } + } + + &__block-header { + pointer-events: none; + } + + &__block-header * { + pointer-events: all; + } + + &__block-header, + &__block-header > div { + display: flex; + max-width: 100%; + width: 100%; + overflow: hidden; + gap: calc(var(--base) * 0.375); + justify-content: flex-start; + pointer-events: none; + + & > * { + pointer-events: all; + } + } + + &__block-number { + flex-shrink: 0; + } + + &__block-pill { + flex-shrink: 0; + display: block; + line-height: unset; + } + + &__rows { + display: flex; + flex-direction: column; + gap: calc(var(--base) / 2); + } + + &__drawer-toggler { + background-color: transparent; + margin: 0; + padding: 0; + border: none; + align-self: flex-start; + + .btn { + color: var(--theme-elevation-400); + margin: 0; + + &:hover { + color: var(--theme-elevation-800); + } + } + } } - &__drawer-toggler { - background-color: transparent; - margin: 0; - padding: 0; - border: none; - align-self: flex-start; + html[data-theme='light'] { + .blocks-field--has-error { + .section-title__input, + .blocks-field__heading-with-error { + color: var(--theme-error-750); + } + } + } - .btn { - color: var(--theme-elevation-400); - margin: 0; - - &:hover { - color: var(--theme-elevation-800); + html[data-theme='dark'] { + .blocks-field--has-error { + .section-title__input, + .blocks-field__heading-with-error { + color: var(--theme-error-500); } } } } - -html[data-theme='light'] { - .blocks-field--has-error { - .section-title__input, - .blocks-field__heading-with-error { - color: var(--theme-error-750); - } - } -} - -html[data-theme='dark'] { - .blocks-field--has-error { - .section-title__input, - .blocks-field__heading-with-error { - color: var(--theme-error-500); - } - } -} diff --git a/packages/richtext-lexical/src/features/blocks/client/component/index.tsx b/packages/richtext-lexical/src/features/blocks/client/component/index.tsx index 84d217598a..0741d1cf5b 100644 --- a/packages/richtext-lexical/src/features/blocks/client/component/index.tsx +++ b/packages/richtext-lexical/src/features/blocks/client/component/index.tsx @@ -13,7 +13,7 @@ import { useServerFunctions, useTranslation, } from '@payloadcms/ui' -import React, { useCallback, useEffect, useMemo, useState } from 'react' +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' const baseClass = 'lexical-block' import type { BlocksFieldClient, FormState } from 'payload' @@ -39,10 +39,11 @@ export const BlockComponent: React.FC = (props) => { const { id } = useDocumentInfo() const { path, schemaPath } = useFieldProps() const { field: parentLexicalRichTextField } = useEditorConfigContext() + const abortControllerRef = useRef(new AbortController()) - const { serverFunction } = useServerFunctions() + const { getFormState } = useServerFunctions() - const [initialState, setInitialState] = useState(false) + const [initialState, setInitialState] = useState(false) const { field: { richTextComponentMap }, @@ -59,16 +60,16 @@ export const BlockComponent: React.FC = (props) => { // Field Schema useEffect(() => { + const abortController = new AbortController() + const awaitInitialState = async () => { - const { state } = (await serverFunction({ - name: 'form-state', - args: { - id, - data: formData, - operation: 'update', - schemaPath: schemaFieldsPath, - }, - })) as { state: FormState } // TODO: remove this when strictNullChecks is enabled and the return type can be inferred + const { state } = await getFormState({ + id, + data: formData, + operation: 'update', + schemaPath: schemaFieldsPath, + signal: abortController.signal, + }) if (state) { state.blockName = { @@ -85,19 +86,40 @@ export const BlockComponent: React.FC = (props) => { if (formData) { void awaitInitialState() } - }, [serverFunction, schemaFieldsPath, id]) // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing. + + return () => { + try { + abortController.abort() + } catch (_err) { + // swallow error + } + } + }, [getFormState, schemaFieldsPath, id]) // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing. const onChange = useCallback( async ({ formState: prevFormState }) => { - const { state: formState } = (await serverFunction({ - name: 'form-state', - args: { - id, - formState: prevFormState, - operation: 'update', - schemaPath: schemaFieldsPath, - }, - })) as { state: FormState } // TODO: remove this when strictNullChecks is enabled and the return type can be inferred + if (abortControllerRef.current) { + try { + abortControllerRef.current.abort() + } catch (_err) { + // swallow error + } + } + + const abortController = new AbortController() + abortControllerRef.current = abortController + + const { state: formState } = await getFormState({ + id, + formState: prevFormState, + operation: 'update', + schemaPath: schemaFieldsPath, + signal: abortController.signal, + }) + + if (!formState) { + return prevFormState + } formState.blockName = { initialValue: '', @@ -109,9 +131,22 @@ export const BlockComponent: React.FC = (props) => { return formState }, - [id, schemaFieldsPath, formData.blockName, serverFunction], + [id, schemaFieldsPath, formData.blockName, getFormState], ) + // cleanup effect + useEffect(() => { + const abortController = abortControllerRef.current + + return () => { + try { + abortController.abort() + } catch (_err) { + // swallow error + } + } + }, []) + const classNames = [`${baseClass}__row`, `${baseClass}__row--no-errors`].filter(Boolean).join(' ') // Memoized Form JSX @@ -181,7 +216,7 @@ export const BlockComponent: React.FC = (props) => { schemaFieldsPath, classNames, i18n, - ]) + ]) // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing. return
{formContent}
} diff --git a/packages/richtext-lexical/src/features/blocks/client/componentInline/index.scss b/packages/richtext-lexical/src/features/blocks/client/componentInline/index.scss index d9e88e93b1..8687d849f0 100644 --- a/packages/richtext-lexical/src/features/blocks/client/componentInline/index.scss +++ b/packages/richtext-lexical/src/features/blocks/client/componentInline/index.scss @@ -1,88 +1,90 @@ @import '../../../../scss/styles'; -.inline-block-container { - display: inline-block; -} - -.inline-block { - @extend %body; - @include shadow-sm; - padding: base(0.1); - padding-inline-start: base(0.4); - display: flex; - align-items: center; - background: var(--theme-input-bg); - outline: 1px solid var(--theme-elevation-100); - border-radius: $style-radius-s; - max-width: calc(var(--base) * 15); - font-family: var(--font-body); - margin-right: base(0.2); - margin-left: base(0.2); - - &::selection { - background: transparent; +@layer payload-default { + .inline-block-container { + display: inline-block; } - &:hover { - outline: 1px solid var(--theme-elevation-150); - } - - &__wrap { - flex-grow: 1; - overflow: hidden; - } - - &--selected { - background: var(--theme-success-100); - outline: 1px solid var(--theme-success-400); - } - - &__editButton.btn { - margin: 0; - } - - &__editButton { - &:disabled { - color: var(--theme-elevation-300); - pointer-events: none; - } - } - - &__actions { + .inline-block { + @extend %body; + @include shadow-sm; + padding: base(0.1); + padding-inline-start: base(0.4); display: flex; align-items: center; - flex-shrink: 0; - margin-left: base(0.4); + background: var(--theme-input-bg); + outline: 1px solid var(--theme-elevation-100); + border-radius: $style-radius-s; + max-width: calc(var(--base) * 15); + font-family: var(--font-body); + margin-right: base(0.2); + margin-left: base(0.2); - & > .btn { - width: base(1); - height: base(1); + &::selection { + background: transparent; + } - &:not(:disabled):hover { - background: var(--theme-elevation-100); - } + &:hover { + outline: 1px solid var(--theme-elevation-150); + } - & > * { - height: 100%; + &__wrap { + flex-grow: 1; + overflow: hidden; + } + + &--selected { + background: var(--theme-success-100); + outline: 1px solid var(--theme-success-400); + } + + &__editButton.btn { + margin: 0; + } + + &__editButton { + &:disabled { + color: var(--theme-elevation-300); + pointer-events: none; } } - svg { - width: 16px; - height: 16px; - } - } + &__actions { + display: flex; + align-items: center; + flex-shrink: 0; + margin-left: base(0.4); - &__removeButton.btn { - margin: 0; + & > .btn { + width: base(1); + height: base(1); - line { - stroke-width: base(0.2); + &:not(:disabled):hover { + background: var(--theme-elevation-100); + } + + & > * { + height: 100%; + } + } + + svg { + width: 16px; + height: 16px; + } } - &:disabled { - color: var(--theme-elevation-300); - pointer-events: none; + &__removeButton.btn { + margin: 0; + + line { + stroke-width: base(0.2); + } + + &:disabled { + color: var(--theme-elevation-300); + pointer-events: none; + } } } } diff --git a/packages/richtext-lexical/src/features/debug/testRecorder/client/plugin/index.scss b/packages/richtext-lexical/src/features/debug/testRecorder/client/plugin/index.scss index 65c931d112..8072b163cc 100644 --- a/packages/richtext-lexical/src/features/debug/testRecorder/client/plugin/index.scss +++ b/packages/richtext-lexical/src/features/debug/testRecorder/client/plugin/index.scss @@ -1,51 +1,53 @@ @import '../../../../../scss/styles'; -.test-recorder-output { - margin: 20px auto 20px auto; - width: 100%; -} -.test-recorder-toolbar { - display: flex; -} +@layer payload-default { + .test-recorder-output { + margin: 20px auto 20px auto; + width: 100%; + } + .test-recorder-toolbar { + display: flex; + } -.test-recorder-button { - position: relative; - display: block; - font-size: 10px; - padding: 6px 6px; - border-radius: $style-radius-m; - border: none; - cursor: pointer; - outline: none; - box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4); - background-color: #222; - color: white; - transition: box-shadow 50ms ease-out; -} + .test-recorder-button { + position: relative; + display: block; + font-size: 10px; + padding: 6px 6px; + border-radius: $style-radius-m; + border: none; + cursor: pointer; + outline: none; + box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4); + background-color: #222; + color: white; + transition: box-shadow 50ms ease-out; + } -.test-recorder-button:active { - box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4); -} + .test-recorder-button:active { + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4); + } -.test-recorder-button + .test-recorder-button { - margin-left: 4px; -} + .test-recorder-button + .test-recorder-button { + margin-left: 4px; + } -.test-recorder-button::after { - content: ''; - position: absolute; - top: 8px; - right: 8px; - bottom: 8px; - left: 8px; - display: block; - background-size: contain; - filter: invert(1); -} -#test-recorder-button { - position: relative; -} + .test-recorder-button::after { + content: ''; + position: absolute; + top: 8px; + right: 8px; + bottom: 8px; + left: 8px; + display: block; + background-size: contain; + filter: invert(1); + } + #test-recorder-button { + position: relative; + } -#test-recorder-button-snapshot { - margin-right: auto; + #test-recorder-button-snapshot { + margin-right: auto; + } } diff --git a/packages/richtext-lexical/src/features/debug/treeView/client/plugin/index.scss b/packages/richtext-lexical/src/features/debug/treeView/client/plugin/index.scss index 540089b505..b06b4308e4 100644 --- a/packages/richtext-lexical/src/features/debug/treeView/client/plugin/index.scss +++ b/packages/richtext-lexical/src/features/debug/treeView/client/plugin/index.scss @@ -1,78 +1,80 @@ -.tree-view-output { - display: block; - background: #222; - color: #fff; - padding: 0; - font-size: 12px; - margin: 1px auto 10px auto; - position: relative; - overflow: hidden; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - - pre { - line-height: 1.1; +@layer payload-default { + .tree-view-output { + display: block; background: #222; color: #fff; - margin: 0; - padding: 10px; - font-size: 12px; - overflow: auto; - max-height: 400px; - } - - .debug-treetype-button { - border: 0; padding: 0; font-size: 12px; - top: 10px; - right: 85px; - position: absolute; - background: none; - color: #fff; - - &:hover { - text-decoration: underline; - } - } - - .debug-timetravel-button { - border: 0; - padding: 0; - font-size: 12px; - top: 10px; - right: 15px; - position: absolute; - background: none; - color: #fff; - - &:hover { - text-decoration: underline; - } - } - - .debug-timetravel-panel { + margin: 1px auto 10px auto; + position: relative; overflow: hidden; - padding: 0 0 10px; - margin: auto; - display: flex; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; - &-button { - padding: 0; - border: 0; - background: none; - flex: 1; + pre { + line-height: 1.1; + background: #222; color: #fff; + margin: 0; + padding: 10px; font-size: 12px; + overflow: auto; + max-height: 400px; + } + + .debug-treetype-button { + border: 0; + padding: 0; + font-size: 12px; + top: 10px; + right: 85px; + position: absolute; + background: none; + color: #fff; &:hover { text-decoration: underline; } } - &-slider { + .debug-timetravel-button { + border: 0; padding: 0; - flex: 8; + font-size: 12px; + top: 10px; + right: 15px; + position: absolute; + background: none; + color: #fff; + + &:hover { + text-decoration: underline; + } + } + + .debug-timetravel-panel { + overflow: hidden; + padding: 0 0 10px; + margin: auto; + display: flex; + + &-button { + padding: 0; + border: 0; + background: none; + flex: 1; + color: #fff; + font-size: 12px; + + &:hover { + text-decoration: underline; + } + } + + &-slider { + padding: 0; + flex: 8; + } } } } diff --git a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.scss b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.scss index 779d0cf4a4..a82b2dfca7 100644 --- a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.scss +++ b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.scss @@ -1,73 +1,75 @@ @import '../../../../../scss/styles'; -.table-cell-action-button-container { - position: absolute; - top: 0; - left: 0; - will-change: transform; -} - -.table-cell-action-button { - background-color: var(--theme-elevation-200); - border: 0; - padding: 2px; - position: relative; - border-radius: $style-radius-m; - color: var(--theme-elevation-800); - display: inline-block; - cursor: pointer; - - &:hover { - background-color: var(--theme-elevation-300); +@layer payload-default { + .table-cell-action-button-container { + position: absolute; + top: 0; + left: 0; + will-change: transform; } -} -html[data-theme='light'] { - .table-action-menu-dropdown { - box-shadow: - 0px 1px 2px 1px rgba(0, 0, 0, 0.05), - 0px 4px 8px 0px rgba(0, 0, 0, 0.1); - } -} - -.table-action-menu-dropdown { - z-index: 100; - display: block; - position: fixed; - background: var(--theme-input-bg); - min-width: 160px; - border-radius: $style-radius-m; - min-height: 40px; - overflow-y: auto; - box-shadow: - 0px 1px 2px 1px rgba(0, 0, 0, 0.1), - 0px 4px 16px 0px rgba(0, 0, 0, 0.2), - 0px -4px 8px 0px rgba(0, 0, 0, 0.1); - - hr { - border: none; - height: 1px; + .table-cell-action-button { background-color: var(--theme-elevation-200); - } - - .item { - padding: 8px; - color: var(--theme-elevation-900); - background: var(--theme-input-bg); - cursor: pointer; - font-size: 13px; - font-family: var(--font-body); - display: flex; - align-content: center; - flex-direction: row; - flex-shrink: 0; - justify-content: space-between; border: 0; - height: 30px; - width: 100%; + padding: 2px; + position: relative; + border-radius: $style-radius-m; + color: var(--theme-elevation-800); + display: inline-block; + cursor: pointer; &:hover { - background: var(--theme-elevation-100); + background-color: var(--theme-elevation-300); + } + } + + html[data-theme='light'] { + .table-action-menu-dropdown { + box-shadow: + 0px 1px 2px 1px rgba(0, 0, 0, 0.05), + 0px 4px 8px 0px rgba(0, 0, 0, 0.1); + } + } + + .table-action-menu-dropdown { + z-index: 100; + display: block; + position: fixed; + background: var(--theme-input-bg); + min-width: 160px; + border-radius: $style-radius-m; + min-height: 40px; + overflow-y: auto; + box-shadow: + 0px 1px 2px 1px rgba(0, 0, 0, 0.1), + 0px 4px 16px 0px rgba(0, 0, 0, 0.2), + 0px -4px 8px 0px rgba(0, 0, 0, 0.1); + + hr { + border: none; + height: 1px; + background-color: var(--theme-elevation-200); + } + + .item { + padding: 8px; + color: var(--theme-elevation-900); + background: var(--theme-input-bg); + cursor: pointer; + font-size: 13px; + font-family: var(--font-body); + display: flex; + align-content: center; + flex-direction: row; + flex-shrink: 0; + justify-content: space-between; + border: 0; + height: 30px; + width: 100%; + + &:hover { + background: var(--theme-elevation-100); + } } } } diff --git a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.scss b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.scss index 18c931f867..b6b73a28cc 100644 --- a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.scss +++ b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.scss @@ -1,182 +1,184 @@ @import '../../../../../scss/styles'; -.LexicalEditorTheme { - &__table { - border-collapse: collapse; - max-width: 100%; - border-spacing: 0; - overflow-y: scroll; - overflow-x: scroll; - table-layout: fixed; - width: fit-content; - margin: 0 25px 30px 0; - - ::selection { - background: rgba(172, 206, 247); - } - - br::selection { - background: unset; - } - } - - &__tableRowStriping tr:nth-child(even) { - background-color: var(--theme-elevation-100); - } - - &__tableSelected { - outline: 2px solid rgb(60, 132, 244); - } - - &__tableCell { - border: 1px solid var(--theme-elevation-200); - vertical-align: top; - text-align: start; - padding: 6px 8px; - position: relative; - cursor: default; - outline: none; - } - - &__tableCellSortedIndicator { - display: block; - opacity: 0.5; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 4px; - background-color: #999; - } - - &__tableCellResizer { - position: absolute; - right: -4px; - height: 100%; - width: 8px; - cursor: ew-resize; - z-index: 10; - top: 0; - } - - &__tableCellHeader { - background-color: #f2f3f5; - text-align: start; - } - - &__tableCellSelected { - background-color: #c9dbf0; - } - - &__tableCellPrimarySelected { - border: 2px solid rgb(60, 132, 244); - display: block; - height: calc(100% - 2px); - position: absolute; - width: calc(100% - 2px); - left: -1px; - top: -1px; - z-index: 2; - } - - &__tableCellEditing { - box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); - border-radius: $style-radius-m; - } - - &__tableAddColumns { - height: 100%; - } - - &__tableAddColumns, - &__tableAddRows { - position: absolute; - background-color: var(--theme-elevation-100); - animation: table-controls 0.2s ease; - border: 0; - cursor: pointer; - min-width: 24px; - min-height: 24px; - } - - &__tableAddColumns:after, - &__tableAddRows:after { - background-image: url(../../../../../lexical/ui/icons/Add/index.svg); - background-position: center; - background-repeat: no-repeat; - display: block; - content: ' '; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0.4; - } - - &__tableAddColumns:hover, - &__tableAddRows:hover { - background-color: var(--theme-elevation-200); - } - - &__tableAddRows { - width: calc(100% - 25px); - } - - @keyframes table-controls { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } - } - - &__tableCellResizeRuler { - display: block; - position: absolute; - width: 1px; - background-color: rgb(60, 132, 244); - height: 100%; - top: 0; - } - - &__tableCellActionButtonContainer { - display: block; - right: 5px; - top: 6px; - position: absolute; - z-index: 4; - width: 20px; - height: 20px; - } - - &__tableCellActionButton { - background-color: #eee; - display: block; - border: 0; - border-radius: 20px; - width: 20px; - height: 20px; - color: #222; - cursor: pointer; - } - - &__tableCellActionButton:hover { - background-color: #ddd; - } -} - -html[data-theme='dark'] { +@layer payload-default { .LexicalEditorTheme { + &__table { + border-collapse: collapse; + max-width: 100%; + border-spacing: 0; + overflow-y: scroll; + overflow-x: scroll; + table-layout: fixed; + width: fit-content; + margin: 0 25px 30px 0; + + ::selection { + background: rgba(172, 206, 247); + } + + br::selection { + background: unset; + } + } + + &__tableRowStriping tr:nth-child(even) { + background-color: var(--theme-elevation-100); + } + + &__tableSelected { + outline: 2px solid rgb(60, 132, 244); + } + + &__tableCell { + border: 1px solid var(--theme-elevation-200); + vertical-align: top; + text-align: start; + padding: 6px 8px; + position: relative; + cursor: default; + outline: none; + } + + &__tableCellSortedIndicator { + display: block; + opacity: 0.5; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 4px; + background-color: #999; + } + + &__tableCellResizer { + position: absolute; + right: -4px; + height: 100%; + width: 8px; + cursor: ew-resize; + z-index: 10; + top: 0; + } + &__tableCellHeader { - background-color: var(--theme-elevation-50); + background-color: #f2f3f5; + text-align: start; + } + + &__tableCellSelected { + background-color: #c9dbf0; + } + + &__tableCellPrimarySelected { + border: 2px solid rgb(60, 132, 244); + display: block; + height: calc(100% - 2px); + position: absolute; + width: calc(100% - 2px); + left: -1px; + top: -1px; + z-index: 2; + } + + &__tableCellEditing { + box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); + border-radius: $style-radius-m; + } + + &__tableAddColumns { + height: 100%; + } + + &__tableAddColumns, + &__tableAddRows { + position: absolute; + background-color: var(--theme-elevation-100); + animation: table-controls 0.2s ease; + border: 0; + cursor: pointer; + min-width: 24px; + min-height: 24px; } &__tableAddColumns:after, &__tableAddRows:after { - background-image: url(../../../../../lexical/ui/icons/Add/light.svg); + background-image: url(../../../../../lexical/ui/icons/Add/index.svg); + background-position: center; + background-repeat: no-repeat; + display: block; + content: ' '; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0.4; + } + + &__tableAddColumns:hover, + &__tableAddRows:hover { + background-color: var(--theme-elevation-200); + } + + &__tableAddRows { + width: calc(100% - 25px); + } + + @keyframes table-controls { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } + } + + &__tableCellResizeRuler { + display: block; + position: absolute; + width: 1px; + background-color: rgb(60, 132, 244); + height: 100%; + top: 0; + } + + &__tableCellActionButtonContainer { + display: block; + right: 5px; + top: 6px; + position: absolute; + z-index: 4; + width: 20px; + height: 20px; + } + + &__tableCellActionButton { + background-color: #eee; + display: block; + border: 0; + border-radius: 20px; + width: 20px; + height: 20px; + color: #222; + cursor: pointer; + } + + &__tableCellActionButton:hover { + background-color: #ddd; + } + } + + html[data-theme='dark'] { + .LexicalEditorTheme { + &__tableCellHeader { + background-color: var(--theme-elevation-50); + } + + &__tableAddColumns:after, + &__tableAddRows:after { + background-image: url(../../../../../lexical/ui/icons/Add/light.svg); + } } } } diff --git a/packages/richtext-lexical/src/features/horizontalRule/client/plugin/index.scss b/packages/richtext-lexical/src/features/horizontalRule/client/plugin/index.scss index 56eb26c892..72d343d495 100644 --- a/packages/richtext-lexical/src/features/horizontalRule/client/plugin/index.scss +++ b/packages/richtext-lexical/src/features/horizontalRule/client/plugin/index.scss @@ -1,20 +1,22 @@ @import '../../../../scss/styles'; -.LexicalEditorTheme__hr { - padding: 2px 2px; - border: none; - margin: 1rem 0; - cursor: pointer; -} +@layer payload-default { + .LexicalEditorTheme__hr { + padding: 2px 2px; + border: none; + margin: 1rem 0; + cursor: pointer; + } -.LexicalEditorTheme__hr:after { - content: ''; - display: block; - height: 2px; - background-color: var(--theme-elevation-250); -} + .LexicalEditorTheme__hr:after { + content: ''; + display: block; + height: 2px; + background-color: var(--theme-elevation-250); + } -.LexicalEditorTheme__hr.selected { - outline: 2px solid var(--theme-success-250); - user-select: none; + .LexicalEditorTheme__hr.selected { + outline: 2px solid var(--theme-success-250); + user-select: none; + } } diff --git a/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/index.scss b/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/index.scss index 7707829a18..e3fa861dfc 100644 --- a/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/index.scss +++ b/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/index.scss @@ -1,86 +1,88 @@ @import '../../../../../scss/styles.scss'; -.link-editor { - z-index: 1; - display: flex; - align-items: center; - background: var(--theme-input-bg); - padding: 4px 4px 4px 12px; - vertical-align: middle; - position: absolute; - top: 0; - left: 0; - opacity: 0; - border-radius: $style-radius-m; - transition: opacity 0.2s; - will-change: transform; - box-shadow: - 0px 1px 2px 1px rgba(0, 0, 0, 0.1), - 0px 4px 16px 0px rgba(0, 0, 0, 0.1), - 0px -4px 16px 0px rgba(0, 0, 0, 0.1); - - .link-input { +@layer payload-default { + .link-editor { + z-index: 1; display: flex; align-items: center; - flex-direction: row; - flex-wrap: nowrap; - min-height: 28px; - box-sizing: border-box; - @extend %body; - border: 0; - outline: 0; - position: relative; - font-family: var(--font-body); + background: var(--theme-input-bg); + padding: 4px 4px 4px 12px; + vertical-align: middle; + position: absolute; + top: 0; + left: 0; + opacity: 0; + border-radius: $style-radius-m; + transition: opacity 0.2s; + will-change: transform; + box-shadow: + 0px 1px 2px 1px rgba(0, 0, 0, 0.1), + 0px 4px 16px 0px rgba(0, 0, 0, 0.1), + 0px -4px 16px 0px rgba(0, 0, 0, 0.1); - &__label-pure { - color: var(--theme-elevation-1000); - margin-right: 15px; - display: block; - white-space: nowrap; - overflow: hidden; + .link-input { + display: flex; + align-items: center; + flex-direction: row; + flex-wrap: nowrap; + min-height: 28px; + box-sizing: border-box; + @extend %body; + border: 0; + outline: 0; + position: relative; + font-family: var(--font-body); + + &__label-pure { + color: var(--theme-elevation-1000); + margin-right: 15px; + display: block; + white-space: nowrap; + overflow: hidden; + } + + a { + text-decoration: underline; + display: block; + white-space: nowrap; + overflow: hidden; + margin-right: base(0.4); + text-overflow: ellipsis; + color: var(--theme-success-750); + + &:hover { + color: var(--theme-success-850); + } + } } - a { - text-decoration: underline; - display: block; - white-space: nowrap; - overflow: hidden; - margin-right: base(0.4); - text-overflow: ellipsis; - color: var(--theme-success-750); + button { + all: unset; + display: flex; + align-items: center; + justify-content: center; + background-size: 16px; + background-position: center; + background-repeat: no-repeat; + width: 30px; + height: 30px; + cursor: pointer; + color: var(--theme-elevation-600); + border-radius: $style-radius-m; - &:hover { - color: var(--theme-success-850); + &:hover:not([disabled]) { + color: var(--theme-elevation-800); + background-color: var(--theme-elevation-100); } } } - button { - all: unset; - display: flex; - align-items: center; - justify-content: center; - background-size: 16px; - background-position: center; - background-repeat: no-repeat; - width: 30px; - height: 30px; - cursor: pointer; - color: var(--theme-elevation-600); - border-radius: $style-radius-m; - - &:hover:not([disabled]) { - color: var(--theme-elevation-800); - background-color: var(--theme-elevation-100); + html[data-theme='light'] { + .link-editor { + box-shadow: + 0px 1px 2px 1px rgba(0, 0, 0, 0.05), + 0px 4px 8px 0px rgba(0, 0, 0, 0.05), + 0px -4px 16px 0px rgba(0, 0, 0, 0.05); } } } - -html[data-theme='light'] { - .link-editor { - box-shadow: - 0px 1px 2px 1px rgba(0, 0, 0, 0.05), - 0px 4px 8px 0px rgba(0, 0, 0, 0.05), - 0px -4px 16px 0px rgba(0, 0, 0, 0.05); - } -} diff --git a/packages/richtext-lexical/src/features/relationship/client/components/index.scss b/packages/richtext-lexical/src/features/relationship/client/components/index.scss index f58ad6d197..a2c6e09d07 100644 --- a/packages/richtext-lexical/src/features/relationship/client/components/index.scss +++ b/packages/richtext-lexical/src/features/relationship/client/components/index.scss @@ -1,94 +1,96 @@ @import '../../../../scss/styles.scss'; -.lexical-relationship { - @extend %body; - @include shadow-sm; - padding: calc(var(--base) * 0.75); - display: flex; - align-items: center; - background: var(--theme-input-bg); - border: 1px solid var(--theme-elevation-100); - border-radius: $style-radius-m; - max-width: calc(var(--base) * 15); - font-family: var(--font-body); - margin-block: base(0.5); - - &:hover { - border: 1px solid var(--theme-elevation-150); - } - - &__label { - margin-bottom: calc(var(--base) * 0.25); - } - - &__title { - margin: 0; - } - - &__label, - &__title { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - line-height: 1 !important; - } - - &__title { - font-weight: bold; - } - - &__wrap { - flex-grow: 1; - overflow: hidden; - } - - &--selected { - box-shadow: $focus-box-shadow; - outline: none; - } - - &__doc-drawer-toggler { - text-decoration: underline; - pointer-events: all; - line-height: inherit; - & > * { - margin: 0; - } - } - - &__swapButton.btn { - margin: 0; - } - - &__doc-drawer-toggler, - &__swapButton { - &:disabled { - color: var(--theme-elevation-300); - pointer-events: none; - } - } - - &__actions { +@layer payload-default { + .lexical-relationship { + @extend %body; + @include shadow-sm; + padding: calc(var(--base) * 0.75); display: flex; align-items: center; - flex-shrink: 0; - margin-left: calc(var(--base) * 0.5); + background: var(--theme-input-bg); + border: 1px solid var(--theme-elevation-100); + border-radius: $style-radius-m; + max-width: calc(var(--base) * 15); + font-family: var(--font-body); + margin-block: base(0.5); - & > *:not(:last-child) { - margin-right: calc(var(--base) * 0.25); - } - } - - &__removeButton.btn { - margin: 0; - - line { - stroke-width: $style-stroke-width-m; + &:hover { + border: 1px solid var(--theme-elevation-150); } - &:disabled { - color: var(--theme-elevation-300); - pointer-events: none; + &__label { + margin-bottom: calc(var(--base) * 0.25); + } + + &__title { + margin: 0; + } + + &__label, + &__title { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + line-height: 1 !important; + } + + &__title { + font-weight: bold; + } + + &__wrap { + flex-grow: 1; + overflow: hidden; + } + + &--selected { + box-shadow: $focus-box-shadow; + outline: none; + } + + &__doc-drawer-toggler { + text-decoration: underline; + pointer-events: all; + line-height: inherit; + & > * { + margin: 0; + } + } + + &__swapButton.btn { + margin: 0; + } + + &__doc-drawer-toggler, + &__swapButton { + &:disabled { + color: var(--theme-elevation-300); + pointer-events: none; + } + } + + &__actions { + display: flex; + align-items: center; + flex-shrink: 0; + margin-left: calc(var(--base) * 0.5); + + & > *:not(:last-child) { + margin-right: calc(var(--base) * 0.25); + } + } + + &__removeButton.btn { + margin: 0; + + line { + stroke-width: $style-stroke-width-m; + } + + &:disabled { + color: var(--theme-elevation-300); + pointer-events: none; + } } } } diff --git a/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.scss b/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.scss index 1b1e133d25..ca911cd01c 100644 --- a/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.scss +++ b/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.scss @@ -1,108 +1,110 @@ @import '../../../../../scss/styles'; -html[data-theme='dark'] { - .fixed-toolbar { - &__dropdown-items { - background: var(--theme-elevation-0); - transition: background 0.2s cubic-bezier(0, 0.2, 0.2, 1); +@layer payload-default { + html[data-theme='dark'] { + .fixed-toolbar { + &__dropdown-items { + background: var(--theme-elevation-0); + transition: background 0.2s cubic-bezier(0, 0.2, 0.2, 1); - .toolbar-popup__dropdown-item { - color: var(--theme-elevation-900); + .toolbar-popup__dropdown-item { + color: var(--theme-elevation-900); - &:hover:not([disabled]), - &.active { - background: var(--theme-elevation-100); - } + &:hover:not([disabled]), + &.active { + background: var(--theme-elevation-100); + } - .icon { - color: var(--theme-elevation-600); + .icon { + color: var(--theme-elevation-600); + } } } - } - .toolbar-popup { - &__dropdown { - transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1); + .toolbar-popup { + &__dropdown { + transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1); - &:hover:not([disabled]) { - background: var(--theme-elevation-100); - } + &:hover:not([disabled]) { + background: var(--theme-elevation-100); + } - &-caret:after { - filter: invert(1); - } + &-caret:after { + filter: invert(1); + } - &-label { - color: var(--theme-elevation-750); + &-label { + color: var(--theme-elevation-750); + } } } } } -} -.fixed-toolbar.fixed-toolbar--hide { - visibility: hidden; // Still needs to take up space so content does not jump, thus we cannot use display: none - // make sure you cant interact with it - pointer-events: none; - user-select: none; -} + .fixed-toolbar.fixed-toolbar--hide { + visibility: hidden; // Still needs to take up space so content does not jump, thus we cannot use display: none + // make sure you cant interact with it + pointer-events: none; + user-select: none; + } -.fixed-toolbar { - @include blur-bg(var(--theme-elevation-0)); - display: flex; - flex-wrap: wrap; - align-items: center; - padding: calc(var(--base) / 4); - vertical-align: middle; - position: sticky; - z-index: 2; - top: var(--doc-controls-height); - border: $style-stroke-width-s solid var(--theme-elevation-150); - // Make it so border itself is round too and not cut off at the corners - border-collapse: unset; - transform: translateY(1px); // aligns with top bar pixel line when stuck - - &__group { + .fixed-toolbar { + @include blur-bg(var(--theme-elevation-0)); display: flex; flex-wrap: wrap; align-items: center; - gap: 2px; - z-index: 1; + padding: calc(var(--base) / 4); + vertical-align: middle; + position: sticky; + z-index: 2; + top: var(--doc-controls-height); + border: $style-stroke-width-s solid var(--theme-elevation-150); + // Make it so border itself is round too and not cut off at the corners + border-collapse: unset; + transform: translateY(1px); // aligns with top bar pixel line when stuck - .icon { - min-width: 20px; - height: 20px; - color: var(--theme-elevation-600); - } + &__group { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 2px; + z-index: 1; - .divider { - width: 1px; - height: 15px; - background-color: var(--theme-elevation-100); - margin: 0 6.25px 0 4.25px; // substract 2px from the gap - } - } + .icon { + min-width: 20px; + height: 20px; + color: var(--theme-elevation-600); + } - + .editor-container { - > .editor-scroller > .editor { - > .ContentEditable__root { - padding-top: calc(var(--base) * 1.25); + .divider { + width: 1px; + height: 15px; + background-color: var(--theme-elevation-100); + margin: 0 6.25px 0 4.25px; // substract 2px from the gap } } - > .editor-scroller > .editor > div > .editor-placeholder { - top: calc(var(--base) * 1.25); - } - } -} - -.rich-text-lexical--show-gutter { - .fixed-toolbar { + .editor-container { > .editor-scroller > .editor { - > .ContentEditable__root::before { - top: calc(var(--base) * 1.25) !important; - height: calc(100% - calc(var(--base) * 1.25) - 8px) !important; + > .ContentEditable__root { + padding-top: calc(var(--base) * 1.25); + } + } + + > .editor-scroller > .editor > div > .editor-placeholder { + top: calc(var(--base) * 1.25); + } + } + } + + .rich-text-lexical--show-gutter { + .fixed-toolbar { + + .editor-container { + > .editor-scroller > .editor { + > .ContentEditable__root::before { + top: calc(var(--base) * 1.25) !important; + height: calc(100% - calc(var(--base) * 1.25) - 8px) !important; + } } } } diff --git a/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.scss b/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.scss index d65b618727..6d2f6270ed 100644 --- a/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.scss +++ b/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.scss @@ -1,56 +1,58 @@ @import '../../../../../scss/styles'; -.inline-toolbar-popup { - display: flex; - align-items: center; - background: var(--theme-input-bg); - padding: base(0.2); - vertical-align: middle; - position: absolute; - top: 0; - left: 0; - z-index: 2; - opacity: 0; - border-radius: $style-radius-m; - transition: opacity 0.2s; - will-change: transform; - box-shadow: - 0px 1px 2px 1px rgba(0, 0, 0, 0.1), - 0px 4px 16px 0px rgba(0, 0, 0, 0.2), - 0px -4px 8px 0px rgba(0, 0, 0, 0.1); - - .caret { - z-index: 93; - position: absolute; - top: calc(100% - 24px); - border: base(0.4) solid transparent; - pointer-events: none; - border-top-color: var(--theme-input-bg); - } - - &__group { +@layer payload-default { + .inline-toolbar-popup { display: flex; align-items: center; - gap: 2px; - - .icon { - min-width: 20px; - height: 20px; - color: var(--theme-elevation-600); - } - - .divider { - width: 1px; - height: 15px; - background-color: var(--theme-border-color); - margin: 0 6.25px; - } - } -} -html[data-theme='light'] { - .inline-toolbar-popup { + background: var(--theme-input-bg); + padding: base(0.2); + vertical-align: middle; + position: absolute; + top: 0; + left: 0; + z-index: 2; + opacity: 0; + border-radius: $style-radius-m; + transition: opacity 0.2s; + will-change: transform; box-shadow: - 0px 1px 2px 1px rgba(0, 0, 0, 0.05), - 0px 4px 8px 0px rgba(0, 0, 0, 0.1); + 0px 1px 2px 1px rgba(0, 0, 0, 0.1), + 0px 4px 16px 0px rgba(0, 0, 0, 0.2), + 0px -4px 8px 0px rgba(0, 0, 0, 0.1); + + .caret { + z-index: 93; + position: absolute; + top: calc(100% - 24px); + border: base(0.4) solid transparent; + pointer-events: none; + border-top-color: var(--theme-input-bg); + } + + &__group { + display: flex; + align-items: center; + gap: 2px; + + .icon { + min-width: 20px; + height: 20px; + color: var(--theme-elevation-600); + } + + .divider { + width: 1px; + height: 15px; + background-color: var(--theme-border-color); + margin: 0 6.25px; + } + } + } + html[data-theme='light'] { + .inline-toolbar-popup { + box-shadow: + 0px 1px 2px 1px rgba(0, 0, 0, 0.05), + 0px 4px 8px 0px rgba(0, 0, 0, 0.1); + } } } diff --git a/packages/richtext-lexical/src/features/upload/client/component/index.scss b/packages/richtext-lexical/src/features/upload/client/component/index.scss index a1f7d0b511..400e0b97d2 100644 --- a/packages/richtext-lexical/src/features/upload/client/component/index.scss +++ b/packages/richtext-lexical/src/features/upload/client/component/index.scss @@ -1,150 +1,152 @@ @import '../../../../scss/styles'; -.lexical-upload { - @extend %body; - @include shadow-sm; - max-width: calc(var(--base) * 15); - display: flex; - align-items: center; - background: var(--theme-input-bg); - border-radius: $style-radius-m; - border: 1px solid var(--theme-elevation-100); - position: relative; - font-family: var(--font-body); - margin-block: base(0.5); - - .btn { - margin: 0; - } - - &:hover { - border: 1px solid var(--theme-elevation-150); - } - - &__card { - @include soft-shadow-bottom; +@layer payload-default { + .lexical-upload { + @extend %body; + @include shadow-sm; + max-width: calc(var(--base) * 15); display: flex; - flex-direction: column; - width: 100%; - } - - &__topRow { - display: flex; - } - - &__thumbnail { - width: calc(var(--base) * 3.25); - height: auto; + align-items: center; + background: var(--theme-input-bg); + border-radius: $style-radius-m; + border: 1px solid var(--theme-elevation-100); position: relative; - overflow: hidden; - flex-shrink: 0; - border-top-left-radius: $style-radius-m; + font-family: var(--font-body); + margin-block: base(0.5); - img, - svg { - position: absolute; - object-fit: cover; - width: 100%; - height: 100%; - background-color: var(--theme-elevation-800); - } - } - - &__topRowRightPanel { - flex-grow: 1; - display: flex; - align-items: center; - padding: calc(var(--base) * 0.75); - justify-content: space-between; - max-width: calc(100% - #{calc(var(--base) * 3.25)}); - } - - &__actions { - display: flex; - align-items: center; - flex-shrink: 0; - margin-left: calc(var(--base) * 0.5); - - .lexical-upload__doc-drawer-toggler { - pointer-events: all; - } - - & > *:not(:last-child) { - margin-right: calc(var(--base) * 0.25); - } - } - - &__removeButton { - margin: 0; - - line { - stroke-width: $style-stroke-width-m; - } - - &:disabled { - color: var(--theme-elevation-300); - pointer-events: none; - } - } - - &__upload-drawer-toggler { - background-color: transparent; - border: none; - padding: 0; - margin: 0; - outline: none; - line-height: inherit; - } - - &__doc-drawer-toggler { - text-decoration: underline; - } - - &__doc-drawer-toggler, - &__list-drawer-toggler, - &__upload-drawer-toggler { - & > * { + .btn { margin: 0; } - &:disabled { - color: var(--theme-elevation-300); - pointer-events: none; + &:hover { + border: 1px solid var(--theme-elevation-150); } - } - &__collectionLabel { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } + &__card { + @include soft-shadow-bottom; + display: flex; + flex-direction: column; + width: 100%; + } - &__bottomRow { - padding: calc(var(--base) * 0.5); - border-top: 1px solid var(--theme-elevation-100); - } + &__topRow { + display: flex; + } - h5 { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } + &__thumbnail { + width: calc(var(--base) * 3.25); + height: auto; + position: relative; + overflow: hidden; + flex-shrink: 0; + border-top-left-radius: $style-radius-m; - &__wrap { - padding: calc(var(--base) * 0.5) calc(var(--base) * 0.5) calc(var(--base) * 0.5) var(--base); - text-align: left; - overflow: hidden; - text-overflow: ellipsis; - } + img, + svg { + position: absolute; + object-fit: cover; + width: 100%; + height: 100%; + background-color: var(--theme-elevation-800); + } + } - &--selected { - box-shadow: $focus-box-shadow; - outline: none; - } - - @include small-break { &__topRowRightPanel { - padding: calc(var(--base) * 0.75) calc(var(--base) * 0.5); + flex-grow: 1; + display: flex; + align-items: center; + padding: calc(var(--base) * 0.75); + justify-content: space-between; + max-width: calc(100% - #{calc(var(--base) * 3.25)}); + } + + &__actions { + display: flex; + align-items: center; + flex-shrink: 0; + margin-left: calc(var(--base) * 0.5); + + .lexical-upload__doc-drawer-toggler { + pointer-events: all; + } + + & > *:not(:last-child) { + margin-right: calc(var(--base) * 0.25); + } + } + + &__removeButton { + margin: 0; + + line { + stroke-width: $style-stroke-width-m; + } + + &:disabled { + color: var(--theme-elevation-300); + pointer-events: none; + } + } + + &__upload-drawer-toggler { + background-color: transparent; + border: none; + padding: 0; + margin: 0; + outline: none; + line-height: inherit; + } + + &__doc-drawer-toggler { + text-decoration: underline; + } + + &__doc-drawer-toggler, + &__list-drawer-toggler, + &__upload-drawer-toggler { + & > * { + margin: 0; + } + + &:disabled { + color: var(--theme-elevation-300); + pointer-events: none; + } + } + + &__collectionLabel { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + &__bottomRow { + padding: calc(var(--base) * 0.5); + border-top: 1px solid var(--theme-elevation-100); + } + + h5 { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + &__wrap { + padding: calc(var(--base) * 0.5) calc(var(--base) * 0.5) calc(var(--base) * 0.5) var(--base); + text-align: left; + overflow: hidden; + text-overflow: ellipsis; + } + + &--selected { + box-shadow: $focus-box-shadow; + outline: none; + } + + @include small-break { + &__topRowRightPanel { + padding: calc(var(--base) * 0.75) calc(var(--base) * 0.5); + } } } } diff --git a/packages/richtext-lexical/src/field/index.scss b/packages/richtext-lexical/src/field/index.scss index 37ecb68191..418b732711 100644 --- a/packages/richtext-lexical/src/field/index.scss +++ b/packages/richtext-lexical/src/field/index.scss @@ -1,30 +1,32 @@ @import '../scss/styles.scss'; -.rich-text-lexical { - & > .field-error.tooltip { - right: auto; - position: static; - margin-bottom: 0.2em; - max-width: fit-content; - } - - .errorBoundary { - pre { - text-wrap: unset; +@layer payload-default { + .rich-text-lexical { + & > .field-error.tooltip { + right: auto; + position: static; + margin-bottom: 0.2em; + max-width: fit-content; } - } - &__wrap { - width: 100%; - position: relative; - } + .errorBoundary { + pre { + text-wrap: unset; + } + } - &--read-only { - .editor-container { - .editor { - background: var(--theme-elevation-200); - color: var(--theme-elevation-450); - padding: calc(var(--base) * 0.5); + &__wrap { + width: 100%; + position: relative; + } + + &--read-only { + .editor-container { + .editor { + background: var(--theme-elevation-200); + color: var(--theme-elevation-450); + padding: calc(var(--base) * 0.5); + } } } } diff --git a/packages/richtext-lexical/src/lexical/LexicalEditor.scss b/packages/richtext-lexical/src/lexical/LexicalEditor.scss index 236af14a25..1c327a6692 100644 --- a/packages/richtext-lexical/src/lexical/LexicalEditor.scss +++ b/packages/richtext-lexical/src/lexical/LexicalEditor.scss @@ -1,63 +1,65 @@ @import '../scss/styles'; -.rich-text-lexical { - .editor { - position: relative; - } - - .editor-container { - position: relative; - - font-family: var(--font-serif); - font-size: base(0.8); - letter-spacing: 0.02em; - - h1, - h2, - h3, - h4, - h5, - h6 { - font-family: var(--font-body); - line-height: 1.125; - letter-spacing: 0; +@layer payload-default { + .rich-text-lexical { + .editor { + position: relative; } - } - &--show-gutter { - > .rich-text-lexical__wrap + .editor-container { + position: relative; + + font-family: var(--font-serif); + font-size: base(0.8); + letter-spacing: 0.02em; + + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: var(--font-body); + line-height: 1.125; + letter-spacing: 0; + } + } + + &--show-gutter { + > .rich-text-lexical__wrap + > .editor-container + > .editor-scroller + > .editor + > div + > .editor-placeholder { + left: 3rem; + } + } + + &:not(&--show-gutter) + > .rich-text-lexical__wrap > .editor-container > .editor-scroller > .editor > div > .editor-placeholder { - left: 3rem; + left: 0; + } + + .editor-placeholder { + position: absolute; + top: 8px; + font-size: base(0.8); + line-height: 1.5; + color: var(--theme-elevation-500); + /* Prevent text selection */ + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + + /* Make it behave more like a background element (no interaction) */ + pointer-events: none; } } - - &:not(&--show-gutter) - > .rich-text-lexical__wrap - > .editor-container - > .editor-scroller - > .editor - > div - > .editor-placeholder { - left: 0; - } - - .editor-placeholder { - position: absolute; - top: 8px; - font-size: base(0.8); - line-height: 1.5; - color: var(--theme-elevation-500); - /* Prevent text selection */ - user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - - /* Make it behave more like a background element (no interaction) */ - pointer-events: none; - } } diff --git a/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.scss b/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.scss index 6d52a40717..3a6d43fbaa 100644 --- a/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.scss +++ b/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.scss @@ -1,67 +1,69 @@ @import '../../../scss/styles.scss'; -.slash-menu-popup { - background: var(--theme-input-bg); - width: 200px; - color: var(--theme-elevation-800); - border-radius: $style-radius-m; - list-style: none; - font-family: var(--font-body); - max-height: 300px; - overflow-y: auto; - z-index: 10; - position: absolute; - box-shadow: - 0px 1px 2px 1px rgba(0, 0, 0, 0.1), - 0px 4px 16px 0px rgba(0, 0, 0, 0.2), - 0px -4px 8px 0px rgba(0, 0, 0, 0.1); - - &__group { - padding-bottom: 8px; - } - - &__group-title { - padding-left: 10px; - color: var(--theme-elevation-600); - font-size: 10px; - } - - &__item { - all: unset; - padding-left: 12px; - font-size: 13px; - box-sizing: border-box; - background: none; - border: none; - color: var(--theme-elevation-900); - display: flex; - align-items: center; - height: 30px; - width: 100%; - cursor: pointer; - - &--selected { - background: var(--theme-elevation-100); - } - - &-text { - margin-left: 6px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - .icon { - color: var(--theme-elevation-500); - min-width: fit-content; - } - } -} - -html[data-theme='light'] { +@layer payload-default { .slash-menu-popup { + background: var(--theme-input-bg); + width: 200px; + color: var(--theme-elevation-800); + border-radius: $style-radius-m; + list-style: none; + font-family: var(--font-body); + max-height: 300px; + overflow-y: auto; + z-index: 10; + position: absolute; box-shadow: - 0px 1px 2px 1px rgba(0, 0, 0, 0.05), - 0px 4px 8px 0px rgba(0, 0, 0, 0.1); + 0px 1px 2px 1px rgba(0, 0, 0, 0.1), + 0px 4px 16px 0px rgba(0, 0, 0, 0.2), + 0px -4px 8px 0px rgba(0, 0, 0, 0.1); + + &__group { + padding-bottom: 8px; + } + + &__group-title { + padding-left: 10px; + color: var(--theme-elevation-600); + font-size: 10px; + } + + &__item { + all: unset; + padding-left: 12px; + font-size: 13px; + box-sizing: border-box; + background: none; + border: none; + color: var(--theme-elevation-900); + display: flex; + align-items: center; + height: 30px; + width: 100%; + cursor: pointer; + + &--selected { + background: var(--theme-elevation-100); + } + + &-text { + margin-left: 6px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .icon { + color: var(--theme-elevation-500); + min-width: fit-content; + } + } + } + + html[data-theme='light'] { + .slash-menu-popup { + box-shadow: + 0px 1px 2px 1px rgba(0, 0, 0, 0.05), + 0px 4px 8px 0px rgba(0, 0, 0, 0.1); + } } } diff --git a/packages/richtext-lexical/src/lexical/plugins/handles/AddBlockHandlePlugin/index.scss b/packages/richtext-lexical/src/lexical/plugins/handles/AddBlockHandlePlugin/index.scss index c887d02708..42905de0e4 100644 --- a/packages/richtext-lexical/src/lexical/plugins/handles/AddBlockHandlePlugin/index.scss +++ b/packages/richtext-lexical/src/lexical/plugins/handles/AddBlockHandlePlugin/index.scss @@ -1,33 +1,35 @@ @import '../../../../scss/styles.scss'; -.add-block-menu { - all: unset; // reset all default button styles - border-radius: $style-radius-m; - padding: 0; - cursor: pointer; - opacity: 0; - position: absolute; - left: 0; - top: 0; - will-change: transform; +@layer payload-default { + .add-block-menu { + all: unset; // reset all default button styles + border-radius: $style-radius-m; + padding: 0; + cursor: pointer; + opacity: 0; + position: absolute; + left: 0; + top: 0; + will-change: transform; - &:hover { - background-color: var(--theme-elevation-100); - .icon { - opacity: 1; + &:hover { + background-color: var(--theme-elevation-100); + .icon { + opacity: 1; + } } - } - .icon { - width: 18px; - height: 24px; - opacity: 0.3; - background-image: url(../../../ui/icons/Add/index.svg); - } - - html[data-theme='dark'] & { .icon { - background-image: url(../../../ui/icons/Add/light.svg); + width: 18px; + height: 24px; + opacity: 0.3; + background-image: url(../../../ui/icons/Add/index.svg); + } + + html[data-theme='dark'] & { + .icon { + background-image: url(../../../ui/icons/Add/light.svg); + } } } } diff --git a/packages/richtext-lexical/src/lexical/plugins/handles/DraggableBlockPlugin/index.scss b/packages/richtext-lexical/src/lexical/plugins/handles/DraggableBlockPlugin/index.scss index de36b179bd..00e71dcd2f 100644 --- a/packages/richtext-lexical/src/lexical/plugins/handles/DraggableBlockPlugin/index.scss +++ b/packages/richtext-lexical/src/lexical/plugins/handles/DraggableBlockPlugin/index.scss @@ -1,76 +1,78 @@ @import '../../../../scss/styles.scss'; -.draggable-block-menu { - border-radius: $style-radius-m; - padding: 0; - cursor: grab; - opacity: 0; - position: absolute; - left: 0; - top: 0; - will-change: transform; - background-color: var(--theme-bg); +@layer payload-default { + .draggable-block-menu { + border-radius: $style-radius-m; + padding: 0; + cursor: grab; + opacity: 0; + position: absolute; + left: 0; + top: 0; + will-change: transform; + background-color: var(--theme-bg); - &:active { - cursor: grabbing; - } + &:active { + cursor: grabbing; + } + + &:hover { + background-color: var(--theme-elevation-100); + .icon { + opacity: 1; + } + } - &:hover { - background-color: var(--theme-elevation-100); .icon { - opacity: 1; + width: 18px; + height: 24px; + opacity: 0.3; + background-image: url(../../../ui/icons/DraggableBlock/index.svg); + } + + html[data-theme='dark'] & { + .icon { + background-image: url(../../../ui/icons/DraggableBlock/light.svg); + } } } - .icon { - width: 18px; - height: 24px; - opacity: 0.3; - background-image: url(../../../ui/icons/DraggableBlock/index.svg); - } - - html[data-theme='dark'] & { - .icon { - background-image: url(../../../ui/icons/DraggableBlock/light.svg); + .rich-text-lexical--show-gutter + > .rich-text-lexical__wrap + > .editor-container + > .editor-scroller + > .editor { + > .draggable-block-target-line { + left: 3rem; } } -} -.rich-text-lexical--show-gutter - > .rich-text-lexical__wrap - > .editor-container - > .editor-scroller - > .editor { - > .draggable-block-target-line { - left: 3rem; - } -} - -.draggable-block-target-line { - pointer-events: none; - background: var(--theme-success-400); - border-radius: 1px; - height: base(0.2); - position: absolute; - left: 0; - top: 0; - opacity: 0; - will-change: transform; - transition: transform 0.1s; -} - -/* This targets Firefox 57+. The transition looks ugly on firefox, thus we disable it here */ -@-moz-document url-prefix() { .draggable-block-target-line { - transition: none; + pointer-events: none; + background: var(--theme-success-400); + border-radius: 1px; + height: base(0.2); + position: absolute; + left: 0; + top: 0; + opacity: 0; + will-change: transform; + transition: transform 0.1s; } -} -.rich-text-lexical { - .ContentEditable__root > * { - will-change: margin-top, margin-bottom; - transition: - margin-top 0.08s, - margin-bottom 0.08s; + /* This targets Firefox 57+. The transition looks ugly on firefox, thus we disable it here */ + @-moz-document url-prefix() { + .draggable-block-target-line { + transition: none; + } + } + + .rich-text-lexical { + .ContentEditable__root > * { + will-change: margin-top, margin-bottom; + transition: + margin-top 0.08s, + margin-bottom 0.08s; + } } } diff --git a/packages/richtext-lexical/src/lexical/theme/EditorTheme.scss b/packages/richtext-lexical/src/lexical/theme/EditorTheme.scss index b0fe93378b..b15aca5083 100644 --- a/packages/richtext-lexical/src/lexical/theme/EditorTheme.scss +++ b/packages/richtext-lexical/src/lexical/theme/EditorTheme.scss @@ -1,392 +1,394 @@ @import '../../scss/styles.scss'; -.LexicalEditorTheme { - &__ltr { - text-align: left; +@layer payload-default { + .LexicalEditorTheme { + &__ltr { + text-align: left; + } + + &__rtl { + text-align: right; + } + + &__paragraph { + font-size: base(0.8); + margin-bottom: 0.55em; + position: relative; + line-height: 1.5; + letter-spacing: normal; + } + + // No bottom margin for last paragraph in editor. This also created nice animations when adding a new line at the end + .ContentEditable__root { + font-size: base(0.8); + } + + &__quote { + font-size: base(0.8); + margin-block: base(0.8); + margin-inline: base(0.2); + border-inline-start-color: var(--theme-elevation-150); + border-inline-start-width: base(0.2); + border-inline-start-style: solid; + padding-inline-start: base(0.6); + padding-block: base(0.2); + } + + &__h1 { + font-size: base(1.4); + font-weight: 700; + margin-block: 0.5em 0.4em; + line-height: base(1.2); + letter-spacing: normal; + } + + &__h2 { + font-size: base(1.25); + font-weight: 700; + margin-block: 0.55em 0.4em; + line-height: base(1.2); + letter-spacing: normal; + } + + &__h3 { + font-size: base(1.1); + font-weight: 700; + margin-block: 0.6em 0.4em; + line-height: base(1.3); + letter-spacing: normal; + } + + &__h4 { + font-size: base(1); + font-weight: 700; + margin-block: 0.65em 0.4em; + line-height: base(1.4); + letter-spacing: normal; + } + + &__h5 { + font-size: base(0.9); + font-weight: 700; + margin-block: 0.7em 0.4em; + line-height: base(1.5); + letter-spacing: normal; + } + + &__h6 { + font-size: base(0.8); + font-weight: 700; + margin-block: 0.75em 0.4em; + line-height: base(1.5); + letter-spacing: 0.1em; + } + + &__indent { + --lexical-indent-base-value: 40px; + } + + &__textBold { + font-weight: bold; + } + + &__textItalic { + font-style: italic; + } + + &__textUnderline { + text-decoration: underline; + } + + &__textStrikethrough { + text-decoration: line-through; + } + + &__textUnderlineStrikethrough { + text-decoration: underline line-through; + } + + &__textSubscript { + font-size: 0.8em; + vertical-align: sub !important; + } + + &__textSuperscript { + font-size: 0.8em; + vertical-align: super; + } + + &__textCode { + background-color: var(--theme-elevation-50); + border: 1px solid var(--theme-elevation-150); + color: var(--theme-error-600); + padding: base(0.1) base(0.2); + font-family: 'SF Mono', Menlo, Consolas, Monaco, monospace; + font-size: 0.875em; + border-radius: var(--style-radius-s); + box-decoration-break: clone; + -webkit-box-decoration-break: clone; + } + + &__hashtag { + background-color: rgba(88, 144, 255, 0.15); + border-bottom: 1px solid rgba(88, 144, 255, 0.3); + } + + .ContentEditable__root &__link { + pointer-events: none; + } + + &__link { + color: var(--theme-success-750); + text-decoration: none; + border-bottom: 1px dotted; + } + + &__code { + /*background-color: rgb(240, 242, 245);*/ + font-family: Menlo, Consolas, Monaco, monospace; + display: block; + padding: 8px 8px 8px 52px; + line-height: 1.53; + font-size: 13px; + margin: 8px 0; + tab-size: 2; + /* white-space: pre; */ + overflow-x: auto; + position: relative; + } + + &__code:before { + content: attr(data-gutter); + position: absolute; + /*background-color: #eee;*/ + left: 0; + top: 0; + border-right: 1px solid #ccc; + padding: 8px; + color: #777; + white-space: pre-wrap; + text-align: right; + min-width: 25px; + } + + &__characterLimit { + display: inline; + background-color: #ffbbbb !important; + } + + &__ol1 { + padding: 0; + list-style-position: outside; + margin: base(0.4) 0 base(0.8); + } + + &__ol2 { + padding: 0; + margin: 0; + list-style-type: upper-alpha; + list-style-position: outside; + } + + &__ol3 { + padding: 0; + margin: 0; + list-style-type: lower-alpha; + list-style-position: outside; + } + + &__ol4 { + padding: 0; + margin: 0; + list-style-type: upper-roman; + list-style-position: outside; + } + + &__ol5 { + padding: 0; + margin: 0; + list-style-type: lower-roman; + list-style-position: outside; + } + + &__ul { + padding: 0; + margin: base(0.4) 0 base(0.8); + list-style-position: outside; + } + + &__ul ul { + margin: 0; + } + + &__listItem { + font-size: base(0.8); + margin: 0 0 0.4em 40px; + } + + &__listItem[dir='rtl'] { + margin: 0 40px 0.4em 0; + } + + &__listItemChecked, + &__listItemUnchecked { + position: relative; + // Instead of having margin-left: 40px like other list-items or indented paragraphs, + // we use padding-left: 25px + margin-left: 15px = 40px, so that the click position + // calculation in `CheckListPlugin` matches the checkbox + margin-left: 15px; + padding-left: 25px; + list-style-type: none; + outline: none; + } + + // See comment above for why we need this + &__listItemUnchecked[dir='rtl'], + &__listItemChecked[dir='rtl'] { + margin-left: 0; + padding-left: 0; + padding-right: 25px; + margin-right: 15px; + } + + &__listItemChecked { + text-decoration: line-through; + } + + &__listItemUnchecked:before, + &__listItemChecked:before { + content: ''; + width: base(0.8); + height: base(0.8); + top: base(0.1); + left: 0; + cursor: pointer; + display: block; + background-size: cover; + position: absolute; + } + + &__listItemUnchecked[dir='rtl']:before, + &__listItemChecked[dir='rtl']:before { + left: auto; + right: 0; + } + + &__listItemUnchecked:focus:before, + &__listItemChecked:focus:before { + outline: 0; + box-shadow: 0 0 3px 3px var(--theme-success-400); + border: 1px solid var(--theme-elevation-250); + border-radius: var(--style-radius-s); + } + + &__listItemUnchecked:before { + border: 1px solid var(--theme-elevation-250); + border-radius: $style-radius-s; + } + + &__listItemChecked:before { + border: 1px solid var(--theme-elevation-500); + border-radius: $style-radius-s; + background-color: var(--theme-elevation-100); + background-repeat: no-repeat; + } + + &__listItemChecked:after { + content: ''; + cursor: pointer; + border-color: var(--theme-text); + border-style: solid; + position: absolute; + display: block; + top: 6px; + width: 3px; + left: 7px; + right: 7px; + height: 6px; + transform: rotate(45deg); + border-width: 0 2px 2px 0; + } + + &__nestedListItem { + list-style-type: none; + } + + &__nestedListItem:before, + &__nestedListItem:after { + display: none; + } + + &__tokenComment { + color: slategray; + } + + &__tokenPunctuation { + color: #999; + } + + &__tokenProperty { + color: #905; + } + + &__tokenSelector { + color: #690; + } + + &__tokenOperator { + color: #9a6e3a; + } + + &__tokenAttr { + color: #07a; + } + + &__tokenVariable { + color: #e90; + } + + &__tokenFunction { + color: #dd4a68; + } + + &__mark { + background: rgba(255, 212, 0, 0.14); + border-bottom: 2px solid rgba(255, 212, 0, 0.3); + padding-bottom: 2px; + } + + &__markOverlap { + background: rgba(255, 212, 0, 0.3); + border-bottom: 2px solid rgba(255, 212, 0, 0.7); + } + + &__mark.selected { + background: rgba(255, 212, 0, 0.5); + border-bottom: 2px solid rgba(255, 212, 0, 1); + } + + &__markOverlap.selected { + background: rgba(255, 212, 0, 0.7); + border-bottom: 2px solid rgba(255, 212, 0, 0.7); + } + + &__embedBlock { + user-select: none; + } + + &__embedBlockFocus { + outline: 2px solid rgb(60, 132, 244); + } + + .ContentEditable__root { + &:first-child { + margin-top: 0; + } + } } - &__rtl { - text-align: right; - } - - &__paragraph { - font-size: base(0.8); - margin-bottom: 0.55em; - position: relative; - line-height: 1.5; - letter-spacing: normal; - } - - // No bottom margin for last paragraph in editor. This also created nice animations when adding a new line at the end - .ContentEditable__root { - font-size: base(0.8); - } - - &__quote { - font-size: base(0.8); - margin-block: base(0.8); - margin-inline: base(0.2); - border-inline-start-color: var(--theme-elevation-150); - border-inline-start-width: base(0.2); - border-inline-start-style: solid; - padding-inline-start: base(0.6); - padding-block: base(0.2); - } - - &__h1 { - font-size: base(1.4); - font-weight: 700; - margin-block: 0.5em 0.4em; - line-height: base(1.2); - letter-spacing: normal; - } - - &__h2 { - font-size: base(1.25); - font-weight: 700; - margin-block: 0.55em 0.4em; - line-height: base(1.2); - letter-spacing: normal; - } - - &__h3 { - font-size: base(1.1); - font-weight: 700; - margin-block: 0.6em 0.4em; - line-height: base(1.3); - letter-spacing: normal; - } - - &__h4 { - font-size: base(1); - font-weight: 700; - margin-block: 0.65em 0.4em; - line-height: base(1.4); - letter-spacing: normal; - } - - &__h5 { - font-size: base(0.9); - font-weight: 700; - margin-block: 0.7em 0.4em; - line-height: base(1.5); - letter-spacing: normal; - } - - &__h6 { - font-size: base(0.8); - font-weight: 700; - margin-block: 0.75em 0.4em; - line-height: base(1.5); - letter-spacing: 0.1em; - } - - &__indent { - --lexical-indent-base-value: 40px; - } - - &__textBold { - font-weight: bold; - } - - &__textItalic { - font-style: italic; - } - - &__textUnderline { - text-decoration: underline; - } - - &__textStrikethrough { - text-decoration: line-through; - } - - &__textUnderlineStrikethrough { - text-decoration: underline line-through; - } - - &__textSubscript { - font-size: 0.8em; - vertical-align: sub !important; - } - - &__textSuperscript { - font-size: 0.8em; - vertical-align: super; - } - - &__textCode { - background-color: var(--theme-elevation-50); - border: 1px solid var(--theme-elevation-150); - color: var(--theme-error-600); - padding: base(0.1) base(0.2); - font-family: 'SF Mono', Menlo, Consolas, Monaco, monospace; - font-size: 0.875em; - border-radius: var(--style-radius-s); - box-decoration-break: clone; - -webkit-box-decoration-break: clone; - } - - &__hashtag { - background-color: rgba(88, 144, 255, 0.15); - border-bottom: 1px solid rgba(88, 144, 255, 0.3); - } - - .ContentEditable__root &__link { - pointer-events: none; - } - - &__link { - color: var(--theme-success-750); - text-decoration: none; - border-bottom: 1px dotted; - } - - &__code { - /*background-color: rgb(240, 242, 245);*/ - font-family: Menlo, Consolas, Monaco, monospace; - display: block; - padding: 8px 8px 8px 52px; - line-height: 1.53; - font-size: 13px; - margin: 8px 0; - tab-size: 2; - /* white-space: pre; */ - overflow-x: auto; - position: relative; - } - - &__code:before { - content: attr(data-gutter); - position: absolute; - /*background-color: #eee;*/ - left: 0; - top: 0; - border-right: 1px solid #ccc; - padding: 8px; - color: #777; - white-space: pre-wrap; - text-align: right; - min-width: 25px; - } - - &__characterLimit { - display: inline; - background-color: #ffbbbb !important; - } - - &__ol1 { - padding: 0; - list-style-position: outside; - margin: base(0.4) 0 base(0.8); - } - - &__ol2 { - padding: 0; - margin: 0; - list-style-type: upper-alpha; - list-style-position: outside; - } - - &__ol3 { - padding: 0; - margin: 0; - list-style-type: lower-alpha; - list-style-position: outside; - } - - &__ol4 { - padding: 0; - margin: 0; - list-style-type: upper-roman; - list-style-position: outside; - } - - &__ol5 { - padding: 0; - margin: 0; - list-style-type: lower-roman; - list-style-position: outside; - } - - &__ul { - padding: 0; - margin: base(0.4) 0 base(0.8); - list-style-position: outside; - } - - &__ul ul { - margin: 0; - } - - &__listItem { - font-size: base(0.8); - margin: 0 0 0.4em 40px; - } - - &__listItem[dir='rtl'] { - margin: 0 40px 0.4em 0; - } - - &__listItemChecked, - &__listItemUnchecked { - position: relative; - // Instead of having margin-left: 40px like other list-items or indented paragraphs, - // we use padding-left: 25px + margin-left: 15px = 40px, so that the click position - // calculation in `CheckListPlugin` matches the checkbox - margin-left: 15px; - padding-left: 25px; - list-style-type: none; - outline: none; - } - - // See comment above for why we need this - &__listItemUnchecked[dir='rtl'], - &__listItemChecked[dir='rtl'] { - margin-left: 0; - padding-left: 0; - padding-right: 25px; - margin-right: 15px; - } - - &__listItemChecked { - text-decoration: line-through; - } - - &__listItemUnchecked:before, - &__listItemChecked:before { - content: ''; - width: base(0.8); - height: base(0.8); - top: base(0.1); - left: 0; - cursor: pointer; - display: block; - background-size: cover; - position: absolute; - } - - &__listItemUnchecked[dir='rtl']:before, - &__listItemChecked[dir='rtl']:before { - left: auto; - right: 0; - } - - &__listItemUnchecked:focus:before, - &__listItemChecked:focus:before { - outline: 0; - box-shadow: 0 0 3px 3px var(--theme-success-400); - border: 1px solid var(--theme-elevation-250); - border-radius: var(--style-radius-s); - } - - &__listItemUnchecked:before { - border: 1px solid var(--theme-elevation-250); - border-radius: $style-radius-s; - } - - &__listItemChecked:before { - border: 1px solid var(--theme-elevation-500); - border-radius: $style-radius-s; - background-color: var(--theme-elevation-100); - background-repeat: no-repeat; - } - - &__listItemChecked:after { - content: ''; - cursor: pointer; - border-color: var(--theme-text); - border-style: solid; - position: absolute; - display: block; - top: 6px; - width: 3px; - left: 7px; - right: 7px; - height: 6px; - transform: rotate(45deg); - border-width: 0 2px 2px 0; - } - - &__nestedListItem { - list-style-type: none; - } - - &__nestedListItem:before, - &__nestedListItem:after { - display: none; - } - - &__tokenComment { - color: slategray; - } - - &__tokenPunctuation { - color: #999; - } - - &__tokenProperty { - color: #905; - } - - &__tokenSelector { - color: #690; - } - - &__tokenOperator { - color: #9a6e3a; - } - - &__tokenAttr { - color: #07a; - } - - &__tokenVariable { - color: #e90; - } - - &__tokenFunction { - color: #dd4a68; - } - - &__mark { - background: rgba(255, 212, 0, 0.14); - border-bottom: 2px solid rgba(255, 212, 0, 0.3); - padding-bottom: 2px; - } - - &__markOverlap { - background: rgba(255, 212, 0, 0.3); - border-bottom: 2px solid rgba(255, 212, 0, 0.7); - } - - &__mark.selected { - background: rgba(255, 212, 0, 0.5); - border-bottom: 2px solid rgba(255, 212, 0, 1); - } - - &__markOverlap.selected { - background: rgba(255, 212, 0, 0.7); - border-bottom: 2px solid rgba(255, 212, 0, 0.7); - } - - &__embedBlock { - user-select: none; - } - - &__embedBlockFocus { - outline: 2px solid rgb(60, 132, 244); - } - - .ContentEditable__root { - &:first-child { - margin-top: 0; + html[data-theme='dark'] { + .LexicalEditorTheme__textCode { + color: var(--theme-warning-600); } } } - -html[data-theme='dark'] { - .LexicalEditorTheme__textCode { - color: var(--theme-warning-600); - } -} diff --git a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss index bea0e4eb3c..0ab945b257 100644 --- a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss +++ b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss @@ -3,89 +3,91 @@ $lexical-contenteditable-top-padding: 8px; $lexical-contenteditable-bottom-padding: 8px; -.ContentEditable__root { - border: 0; - font-size: 15px; - display: block; - position: relative; - tab-size: 1; - outline: 0; - padding-top: $lexical-contenteditable-top-padding; - padding-bottom: $lexical-contenteditable-bottom-padding; - //min-height: base(10); - - &:focus-visible { - outline: none !important; - } - - & > * { - transition: transform 0.2s ease-in-out; - // will-change: transform; // breaks cursor rendering for empty paragraph blocks in safari, and creates other issues - } -} - -@media (max-width: 768px) { +@layer payload-default { .ContentEditable__root { - padding-left: 0; - padding-right: 0; - } -} + border: 0; + font-size: 15px; + display: block; + position: relative; + tab-size: 1; + outline: 0; + padding-top: $lexical-contenteditable-top-padding; + padding-bottom: $lexical-contenteditable-bottom-padding; + //min-height: base(10); -@media (min-width: 769px) { - .rich-text-lexical--show-gutter - > .rich-text-lexical__wrap - > .editor-container - > .editor-scroller - > .editor { - > .ContentEditable__root { - padding-left: 3rem; + &:focus-visible { + outline: none !important; } - > .ContentEditable__root::before { - content: ' '; - position: absolute; - top: $lexical-contenteditable-top-padding; - left: 0; - height: calc( - 100% - #{$lexical-contenteditable-top-padding} - #{$lexical-contenteditable-bottom-padding} - ); - border-left: 1px solid var(--theme-elevation-100); + + & > * { + transition: transform 0.2s ease-in-out; + // will-change: transform; // breaks cursor rendering for empty paragraph blocks in safari, and creates other issues } } -} -html[data-theme='light'] { - .rich-text-lexical.rich-text-lexical--show-gutter { - &.error:not(:hover) { + @media (max-width: 768px) { + .ContentEditable__root { + padding-left: 0; + padding-right: 0; + } + } + + @media (min-width: 769px) { + .rich-text-lexical--show-gutter > .rich-text-lexical__wrap - > .editor-container - > .editor-scroller - > .editor - > .ContentEditable__root::before { - border-left: 2px solid var(--theme-error-400); + > .editor-container + > .editor-scroller + > .editor { + > .ContentEditable__root { + padding-left: 3rem; + } + > .ContentEditable__root::before { + content: ' '; + position: absolute; + top: $lexical-contenteditable-top-padding; + left: 0; + height: calc( + 100% - #{$lexical-contenteditable-top-padding} - #{$lexical-contenteditable-bottom-padding} + ); + border-left: 1px solid var(--theme-elevation-100); } } + } - &.error:hover { - > .rich-text-lexical__wrap - > .editor-container - > .editor-scroller - > .editor - > .ContentEditable__root::before { - border-left: 2px solid var(--theme-error-500); - } - } - } -} - -html[data-theme='dark'] { - .rich-text-lexical.rich-text-lexical--show-gutter { - &.error { - > .rich-text-lexical__wrap - > .editor-container - > .editor-scroller - > .editor - > .ContentEditable__root::before { - border-left: 2px solid var(--theme-error-500); + html[data-theme='light'] { + .rich-text-lexical.rich-text-lexical--show-gutter { + &.error:not(:hover) { + > .rich-text-lexical__wrap + > .editor-container + > .editor-scroller + > .editor + > .ContentEditable__root::before { + border-left: 2px solid var(--theme-error-400); + } + } + + &.error:hover { + > .rich-text-lexical__wrap + > .editor-container + > .editor-scroller + > .editor + > .ContentEditable__root::before { + border-left: 2px solid var(--theme-error-500); + } + } + } + } + + html[data-theme='dark'] { + .rich-text-lexical.rich-text-lexical--show-gutter { + &.error { + > .rich-text-lexical__wrap + > .editor-container + > .editor-scroller + > .editor + > .ContentEditable__root::before { + border-left: 2px solid var(--theme-error-500); + } } } } diff --git a/packages/richtext-lexical/src/scss/app.scss b/packages/richtext-lexical/src/scss/app.scss index 90254443b0..f253d986b3 100644 --- a/packages/richtext-lexical/src/scss/app.scss +++ b/packages/richtext-lexical/src/scss/app.scss @@ -2,202 +2,204 @@ @import './toasts.scss'; @import './colors.scss'; -:root { - --base-px: 20; - --base-body-size: 13; - --base: calc((var(--base-px) / var(--base-body-size)) * 1rem); +@layer payload-default { + :root { + --base-px: 20; + --base-body-size: 13; + --base: calc((var(--base-px) / var(--base-body-size)) * 1rem); - --breakpoint-xs-width: #{$breakpoint-xs-width}; - --breakpoint-s-width: #{$breakpoint-s-width}; - --breakpoint-m-width: #{$breakpoint-m-width}; - --breakpoint-l-width: #{$breakpoint-l-width}; - --scrollbar-width: 17px; + --breakpoint-xs-width: #{$breakpoint-xs-width}; + --breakpoint-s-width: #{$breakpoint-s-width}; + --breakpoint-m-width: #{$breakpoint-m-width}; + --breakpoint-l-width: #{$breakpoint-l-width}; + --scrollbar-width: 17px; - --theme-bg: var(--theme-elevation-0); - --theme-input-bg: var(--theme-elevation-0); - --theme-text: var(--theme-elevation-800); - --theme-overlay: rgba(5, 5, 5, 0.5); - --theme-baseline: #{$baseline-px}; - --theme-baseline-body-size: #{$baseline-body-size}; - --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, - sans-serif; - --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}; - --style-radius-l: #{$style-radius-l}; - - --z-popup: 10; - --z-nav: 20; - --z-modal: 30; - --z-status: 40; - - --accessibility-outline: 2px solid var(--theme-text); - --accessibility-outline-offset: 2px; - - --gutter-h: #{base(3)}; - --spacing-view-bottom: var(--gutter-h); - --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.4); - --doc-controls-height: calc(var(--base) * 2.4); - } - - @include small-break { - --gutter-h: #{base(0.8)}; - --spacing-view-bottom: calc(var(--base) * 2); - --nav-width: 100vw; - } -} - -///////////////////////////// -// GLOBAL STYLES -///////////////////////////// - -* { - box-sizing: border-box; -} - -html { - @extend %body; - 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); - --theme-overlay: rgba(5, 5, 5, 0.75); - color-scheme: dark; + --theme-input-bg: var(--theme-elevation-0); + --theme-text: var(--theme-elevation-800); + --theme-overlay: rgba(5, 5, 5, 0.5); + --theme-baseline: #{$baseline-px}; + --theme-baseline-body-size: #{$baseline-body-size}; + --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, + sans-serif; + --font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif; + --font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace; - ::selection { - color: var(--color-base-1000); + --style-radius-s: #{$style-radius-s}; + --style-radius-m: #{$style-radius-m}; + --style-radius-l: #{$style-radius-l}; + + --z-popup: 10; + --z-nav: 20; + --z-modal: 30; + --z-status: 40; + + --accessibility-outline: 2px solid var(--theme-text); + --accessibility-outline-offset: 2px; + + --gutter-h: #{base(3)}; + --spacing-view-bottom: var(--gutter-h); + --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.4); + --doc-controls-height: calc(var(--base) * 2.4); } - ::-moz-selection { - color: var(--color-base-1000); + @include small-break { + --gutter-h: #{base(0.8)}; + --spacing-view-bottom: calc(var(--base) * 2); + --nav-width: 100vw; } } - @include mid-break { - font-size: 12px; + ///////////////////////////// + // GLOBAL STYLES + ///////////////////////////// + + * { + box-sizing: border-box; } -} -html, -body, -#app { - height: 100%; -} + html { + @extend %body; + background: var(--theme-bg); + -webkit-font-smoothing: antialiased; -body { - font-family: var(--font-body); - font-weight: 400; - color: var(--theme-text); - margin: 0; - // this is for the nav to be able to push the document over - overflow-x: hidden; -} + &[data-theme='dark'] { + --theme-bg: var(--theme-elevation-0); + --theme-text: var(--theme-elevation-1000); + --theme-input-bg: var(--theme-elevation-50); + --theme-overlay: rgba(5, 5, 5, 0.75); + color-scheme: dark; -::selection { - background: var(--color-success-250); - color: var(--theme-base-800); -} + ::selection { + color: var(--color-base-1000); + } -::-moz-selection { - background: var(--color-success-250); - color: var(--theme-base-800); -} - -img { - max-width: 100%; - height: auto; - display: block; -} - -h1 { - @extend %h1; -} - -h2 { - @extend %h2; -} - -h3 { - @extend %h3; -} - -h4 { - @extend %h4; -} - -h5 { - @extend %h5; -} - -h6 { - @extend %h6; -} - -p { - margin: 0; -} - -ul, -ol { - padding-left: $baseline; - margin: 0; -} - -:focus-visible { - outline: var(--accessibility-outline); -} - -a { - color: currentColor; - - &:focus { - &:not(:focus-visible) { - opacity: 0.8; + ::-moz-selection { + color: var(--color-base-1000); + } + } + + @include mid-break { + font-size: 12px; } - outline: none; } - &:active { - opacity: 0.7; - outline: none; + html, + body, + #app { + height: 100%; } -} -svg { - vertical-align: middle; -} + body { + font-family: var(--font-body); + font-weight: 400; + color: var(--theme-text); + margin: 0; + // this is for the nav to be able to push the document over + overflow-x: hidden; + } -dialog { - width: 100%; - border: 0; - padding: 0; - color: currentColor; -} + ::selection { + background: var(--color-success-250); + color: var(--theme-base-800); + } -.payload__modal-item { - min-height: 100%; - background: transparent; -} + ::-moz-selection { + background: var(--color-success-250); + color: var(--theme-base-800); + } -.payload__modal-container--enterDone { - overflow: auto; -} + img { + max-width: 100%; + height: auto; + display: block; + } -.payload__modal-item--enter, -.payload__modal-item--enterDone { - z-index: var(--z-modal); -} + h1 { + @extend %h1; + } -// @import '~payload-user-css'; TODO: re-enable this + h2 { + @extend %h2; + } + + h3 { + @extend %h3; + } + + h4 { + @extend %h4; + } + + h5 { + @extend %h5; + } + + h6 { + @extend %h6; + } + + p { + margin: 0; + } + + ul, + ol { + padding-left: $baseline; + margin: 0; + } + + :focus-visible { + outline: var(--accessibility-outline); + } + + a { + color: currentColor; + + &:focus { + &:not(:focus-visible) { + opacity: 0.8; + } + outline: none; + } + + &:active { + opacity: 0.7; + outline: none; + } + } + + svg { + vertical-align: middle; + } + + dialog { + width: 100%; + border: 0; + padding: 0; + color: currentColor; + } + + .payload__modal-item { + min-height: 100%; + background: transparent; + } + + .payload__modal-container--enterDone { + overflow: auto; + } + + .payload__modal-item--enter, + .payload__modal-item--enterDone { + z-index: var(--z-modal); + } + + // @import '~payload-user-css'; TODO: re-enable this +} diff --git a/packages/richtext-lexical/src/scss/colors.scss b/packages/richtext-lexical/src/scss/colors.scss index 42cea05859..1eaa88cb0a 100644 --- a/packages/richtext-lexical/src/scss/colors.scss +++ b/packages/richtext-lexical/src/scss/colors.scss @@ -1,269 +1,271 @@ -: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); +@layer payload-default { + :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(237, 245, 249); - --color-success-100: rgb(218, 237, 248); - --color-success-150: rgb(188, 225, 248); - --color-success-200: rgb(156, 216, 253); - --color-success-250: rgb(125, 204, 248); - --color-success-300: rgb(97, 190, 241); - --color-success-350: rgb(65, 178, 236); - --color-success-400: rgb(36, 164, 223); - --color-success-450: rgb(18, 148, 204); - --color-success-500: rgb(21, 135, 186); - --color-success-550: rgb(12, 121, 168); - --color-success-600: rgb(11, 110, 153); - --color-success-650: rgb(11, 97, 135); - --color-success-700: rgb(17, 88, 121); - --color-success-750: rgb(17, 76, 105); - --color-success-800: rgb(18, 66, 90); - --color-success-850: rgb(18, 56, 76); - --color-success-900: rgb(19, 44, 58); - --color-success-950: rgb(22, 33, 39); + --color-success-50: rgb(237, 245, 249); + --color-success-100: rgb(218, 237, 248); + --color-success-150: rgb(188, 225, 248); + --color-success-200: rgb(156, 216, 253); + --color-success-250: rgb(125, 204, 248); + --color-success-300: rgb(97, 190, 241); + --color-success-350: rgb(65, 178, 236); + --color-success-400: rgb(36, 164, 223); + --color-success-450: rgb(18, 148, 204); + --color-success-500: rgb(21, 135, 186); + --color-success-550: rgb(12, 121, 168); + --color-success-600: rgb(11, 110, 153); + --color-success-650: rgb(11, 97, 135); + --color-success-700: rgb(17, 88, 121); + --color-success-750: rgb(17, 76, 105); + --color-success-800: rgb(18, 66, 90); + --color-success-850: rgb(18, 56, 76); + --color-success-900: rgb(19, 44, 58); + --color-success-950: rgb(22, 33, 39); - --color-error-50: rgb(250, 241, 240); - --color-error-100: rgb(252, 229, 227); - --color-error-150: rgb(247, 208, 204); - --color-error-200: rgb(254, 193, 188); - --color-error-250: rgb(253, 177, 170); - --color-error-300: rgb(253, 154, 146); - --color-error-350: rgb(253, 131, 123); - --color-error-400: rgb(246, 109, 103); - --color-error-450: rgb(234, 90, 86); - --color-error-500: rgb(218, 75, 72); - --color-error-550: rgb(200, 62, 61); - --color-error-600: rgb(182, 54, 54); - --color-error-650: rgb(161, 47, 47); - --color-error-700: rgb(144, 44, 43); - --color-error-750: rgb(123, 41, 39); - --color-error-800: rgb(105, 39, 37); - --color-error-850: rgb(86, 36, 33); - --color-error-900: rgb(64, 32, 29); - --color-error-950: rgb(44, 26, 24); + --color-error-50: rgb(250, 241, 240); + --color-error-100: rgb(252, 229, 227); + --color-error-150: rgb(247, 208, 204); + --color-error-200: rgb(254, 193, 188); + --color-error-250: rgb(253, 177, 170); + --color-error-300: rgb(253, 154, 146); + --color-error-350: rgb(253, 131, 123); + --color-error-400: rgb(246, 109, 103); + --color-error-450: rgb(234, 90, 86); + --color-error-500: rgb(218, 75, 72); + --color-error-550: rgb(200, 62, 61); + --color-error-600: rgb(182, 54, 54); + --color-error-650: rgb(161, 47, 47); + --color-error-700: rgb(144, 44, 43); + --color-error-750: rgb(123, 41, 39); + --color-error-800: rgb(105, 39, 37); + --color-error-850: rgb(86, 36, 33); + --color-error-900: rgb(64, 32, 29); + --color-error-950: rgb(44, 26, 24); - --color-warning-50: rgb(249, 242, 237); - --color-warning-100: rgb(248, 232, 219); - --color-warning-150: rgb(243, 212, 186); - --color-warning-200: rgb(243, 200, 162); - --color-warning-250: rgb(240, 185, 136); - --color-warning-300: rgb(238, 166, 98); - --color-warning-350: rgb(234, 148, 58); - --color-warning-400: rgb(223, 132, 17); - --color-warning-450: rgb(204, 120, 15); - --color-warning-500: rgb(185, 108, 13); - --color-warning-550: rgb(167, 97, 10); - --color-warning-600: rgb(150, 87, 11); - --color-warning-650: rgb(134, 78, 11); - --color-warning-700: rgb(120, 70, 13); - --color-warning-750: rgb(105, 61, 13); - --color-warning-800: rgb(90, 55, 19); - --color-warning-850: rgb(73, 47, 21); - --color-warning-900: rgb(56, 38, 20); - --color-warning-950: rgb(38, 29, 21); + --color-warning-50: rgb(249, 242, 237); + --color-warning-100: rgb(248, 232, 219); + --color-warning-150: rgb(243, 212, 186); + --color-warning-200: rgb(243, 200, 162); + --color-warning-250: rgb(240, 185, 136); + --color-warning-300: rgb(238, 166, 98); + --color-warning-350: rgb(234, 148, 58); + --color-warning-400: rgb(223, 132, 17); + --color-warning-450: rgb(204, 120, 15); + --color-warning-500: rgb(185, 108, 13); + --color-warning-550: rgb(167, 97, 10); + --color-warning-600: rgb(150, 87, 11); + --color-warning-650: rgb(134, 78, 11); + --color-warning-700: rgb(120, 70, 13); + --color-warning-750: rgb(105, 61, 13); + --color-warning-800: rgb(90, 55, 19); + --color-warning-850: rgb(73, 47, 21); + --color-warning-900: rgb(56, 38, 20); + --color-warning-950: rgb(38, 29, 21); - --color-blue-50: rgb(237, 245, 249); - --color-blue-100: rgb(218, 237, 248); - --color-blue-150: rgb(188, 225, 248); - --color-blue-200: rgb(156, 216, 253); - --color-blue-250: rgb(125, 204, 248); - --color-blue-300: rgb(97, 190, 241); - --color-blue-350: rgb(65, 178, 236); - --color-blue-400: rgb(36, 164, 223); - --color-blue-450: rgb(18, 148, 204); - --color-blue-500: rgb(21, 135, 186); - --color-blue-550: rgb(12, 121, 168); - --color-blue-600: rgb(11, 110, 153); - --color-blue-650: rgb(11, 97, 135); - --color-blue-700: rgb(17, 88, 121); - --color-blue-750: rgb(17, 76, 105); - --color-blue-800: rgb(18, 66, 90); - --color-blue-850: rgb(18, 56, 76); - --color-blue-900: rgb(19, 44, 58); - --color-blue-950: rgb(22, 33, 39); + --color-blue-50: rgb(237, 245, 249); + --color-blue-100: rgb(218, 237, 248); + --color-blue-150: rgb(188, 225, 248); + --color-blue-200: rgb(156, 216, 253); + --color-blue-250: rgb(125, 204, 248); + --color-blue-300: rgb(97, 190, 241); + --color-blue-350: rgb(65, 178, 236); + --color-blue-400: rgb(36, 164, 223); + --color-blue-450: rgb(18, 148, 204); + --color-blue-500: rgb(21, 135, 186); + --color-blue-550: rgb(12, 121, 168); + --color-blue-600: rgb(11, 110, 153); + --color-blue-650: rgb(11, 97, 135); + --color-blue-700: rgb(17, 88, 121); + --color-blue-750: rgb(17, 76, 105); + --color-blue-800: rgb(18, 66, 90); + --color-blue-850: rgb(18, 56, 76); + --color-blue-900: rgb(19, 44, 58); + --color-blue-950: rgb(22, 33, 39); - --theme-border-color: var(--theme-elevation-150); + --theme-border-color: var(--theme-elevation-150); - --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-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-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-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-border-color: var(--theme-elevation-150); - - --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); + --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-border-color: var(--theme-elevation-150); + + --theme-elevation-0: var(--color-base-900); + --theme-elevation-50: var(--color-base-850); + --theme-elevation-100: var(--color-base-800); + --theme-elevation-150: var(--color-base-750); + --theme-elevation-200: var(--color-base-700); + --theme-elevation-250: var(--color-base-650); + --theme-elevation-300: var(--color-base-600); + --theme-elevation-350: var(--color-base-550); + --theme-elevation-400: var(--color-base-450); + --theme-elevation-450: var(--color-base-400); + --theme-elevation-550: var(--color-base-350); + --theme-elevation-600: var(--color-base-300); + --theme-elevation-650: var(--color-base-250); + --theme-elevation-700: var(--color-base-200); + --theme-elevation-750: var(--color-base-150); + --theme-elevation-800: var(--color-base-100); + --theme-elevation-850: var(--color-base-50); + --theme-elevation-900: var(--color-base-0); + --theme-elevation-950: var(--color-base-0); + --theme-elevation-1000: var(--color-base-0); + + --theme-success-50: var(--color-success-950); + --theme-success-100: var(--color-success-900); + --theme-success-150: var(--color-success-850); + --theme-success-200: var(--color-success-800); + --theme-success-250: var(--color-success-750); + --theme-success-300: var(--color-success-700); + --theme-success-350: var(--color-success-650); + --theme-success-400: var(--color-success-600); + --theme-success-450: var(--color-success-550); + --theme-success-550: var(--color-success-450); + --theme-success-600: var(--color-success-400); + --theme-success-650: var(--color-success-350); + --theme-success-700: var(--color-success-300); + --theme-success-750: var(--color-success-250); + --theme-success-800: var(--color-success-200); + --theme-success-850: var(--color-success-150); + --theme-success-900: var(--color-success-100); + --theme-success-950: var(--color-success-50); + + --theme-warning-50: var(--color-warning-950); + --theme-warning-100: var(--color-warning-900); + --theme-warning-150: var(--color-warning-850); + --theme-warning-200: var(--color-warning-800); + --theme-warning-250: var(--color-warning-750); + --theme-warning-300: var(--color-warning-700); + --theme-warning-350: var(--color-warning-650); + --theme-warning-400: var(--color-warning-600); + --theme-warning-450: var(--color-warning-550); + --theme-warning-550: var(--color-warning-450); + --theme-warning-600: var(--color-warning-400); + --theme-warning-650: var(--color-warning-350); + --theme-warning-700: var(--color-warning-300); + --theme-warning-750: var(--color-warning-250); + --theme-warning-800: var(--color-warning-200); + --theme-warning-850: var(--color-warning-150); + --theme-warning-900: var(--color-warning-100); + --theme-warning-950: var(--color-warning-50); + + --theme-error-50: var(--color-error-950); + --theme-error-100: var(--color-error-900); + --theme-error-150: var(--color-error-850); + --theme-error-200: var(--color-error-800); + --theme-error-250: var(--color-error-750); + --theme-error-300: var(--color-error-700); + --theme-error-350: var(--color-error-650); + --theme-error-400: var(--color-error-600); + --theme-error-450: var(--color-error-550); + --theme-error-550: var(--color-error-450); + --theme-error-600: var(--color-error-400); + --theme-error-650: var(--color-error-350); + --theme-error-700: var(--color-error-300); + --theme-error-750: var(--color-error-250); + --theme-error-800: var(--color-error-200); + --theme-error-850: var(--color-error-150); + --theme-error-900: var(--color-error-100); + --theme-error-950: var(--color-error-50); + } } diff --git a/packages/richtext-lexical/src/scss/resets.scss b/packages/richtext-lexical/src/scss/resets.scss index eeda892c2d..e73efa9c00 100644 --- a/packages/richtext-lexical/src/scss/resets.scss +++ b/packages/richtext-lexical/src/scss/resets.scss @@ -1,10 +1,12 @@ -%btn-reset { - border: 0; - background: none; - box-shadow: none; - border-radius: 0; - padding: 0; - color: currentColor; +@layer payload-default { + %btn-reset { + border: 0; + background: none; + box-shadow: none; + border-radius: 0; + padding: 0; + color: currentColor; + } } @mixin btn-reset { diff --git a/packages/richtext-lexical/src/scss/toastify.scss b/packages/richtext-lexical/src/scss/toastify.scss index a5bf4c35fd..3c915f7888 100644 --- a/packages/richtext-lexical/src/scss/toastify.scss +++ b/packages/richtext-lexical/src/scss/toastify.scss @@ -1,59 +1,60 @@ @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 { +@layer payload-default { + .Toastify { .Toastify__toast-container { - left: $baseline; - right: $baseline; + 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; + } } } } diff --git a/packages/richtext-lexical/src/scss/toasts.scss b/packages/richtext-lexical/src/scss/toasts.scss index 116845ac34..4d3b0bc378 100644 --- a/packages/richtext-lexical/src/scss/toasts.scss +++ b/packages/richtext-lexical/src/scss/toasts.scss @@ -1,140 +1,142 @@ @import './styles.scss'; -.payload-toast-container { - padding: 0; - margin: 0; +@layer payload-default { + .payload-toast-container { + padding: 0; + margin: 0; - .payload-toast-close-button { - position: absolute; - order: 3; - left: unset; - inset-inline-end: base(0.8); - top: 50%; - transform: translateY(-50%); - color: var(--theme-elevation-600); - background: unset; - border: none; + .payload-toast-close-button { + position: absolute; + order: 3; + left: unset; + inset-inline-end: base(0.8); + top: 50%; + transform: translateY(-50%); + color: var(--theme-elevation-600); + background: unset; + border: none; - svg { - width: base(0.8); - height: base(0.8); - } + svg { + width: base(0.8); + height: base(0.8); + } - &:hover { - color: var(--theme-elevation-250); - background: none; - } + &:hover { + color: var(--theme-elevation-250); + background: none; + } - [dir='RTL'] & { - right: unset; - left: 0.5rem; - } - } - - .toast-title { - line-height: base(1); - margin-right: base(1); - } - - .payload-toast-item { - 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: 4px; - border: 1px solid var(--theme-border-color); - background: var(--theme-input-bg); - box-shadow: - 0px 10px 4px -8px rgba(0, 2, 4, 0.02), - 0px 2px 3px 0px rgba(0, 2, 4, 0.05); - - .toast-content { - transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19); - width: 100%; - } - - &[data-front='false'] { - .toast-content { - opacity: 0; + [dir='RTL'] & { + right: unset; + left: 0.5rem; } } - &[data-expanded='true'] { - .toast-content { - opacity: 1; - } + .toast-title { + line-height: base(1); + margin-right: base(1); } - .toast-icon { - 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 { - 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 { - 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 { - 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 { + .payload-toast-item { + padding: base(0.8); color: var(--theme-elevation-800); - border-color: var(--theme-elevation-250); - background-color: var(--theme-elevation-100); + font-style: normal; + font-weight: 600; + display: flex; + gap: 1rem; + align-items: center; + width: 100%; + border-radius: 4px; + border: 1px solid var(--theme-border-color); + background: var(--theme-input-bg); + box-shadow: + 0px 10px 4px -8px rgba(0, 2, 4, 0.02), + 0px 2px 3px 0px rgba(0, 2, 4, 0.05); - .payload-toast-close-button { - color: var(--theme-elevation-600); + .toast-content { + transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19); + width: 100%; + } - &:hover { - color: var(--theme-elevation-250); + &[data-front='false'] { + .toast-content { + opacity: 0; + } + } + + &[data-expanded='true'] { + .toast-content { + opacity: 1; + } + } + + .toast-icon { + 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 { + 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 { + 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 { + 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); + + .payload-toast-close-button { + color: var(--theme-elevation-600); + + &:hover { + color: var(--theme-elevation-250); + } } } } diff --git a/packages/richtext-lexical/src/scss/type.scss b/packages/richtext-lexical/src/scss/type.scss index 997e43e24a..9fe3e34be5 100644 --- a/packages/richtext-lexical/src/scss/type.scss +++ b/packages/richtext-lexical/src/scss/type.scss @@ -4,106 +4,107 @@ ///////////////////////////// // HEADINGS ///////////////////////////// - -%h1, -%h2, -%h3, -%h4, -%h5, -%h6 { - font-family: var(--font-body); - font-weight: 500; -} - -%h1 { - margin: 0; - font-size: base(1.6); - line-height: base(1.8); - - @include small-break { - letter-spacing: -0.5px; - font-size: base(1.25); +@layer payload-default { + %h1, + %h2, + %h3, + %h4, + %h5, + %h6 { + font-family: var(--font-body); + font-weight: 500; } -} -%h2 { - margin: 0; - font-size: base(1.3); - line-height: base(1.6); + %h1 { + margin: 0; + font-size: base(1.6); + line-height: base(1.8); - @include small-break { - font-size: base(0.85); + @include small-break { + letter-spacing: -0.5px; + font-size: base(1.25); + } } -} -%h3 { - margin: 0; - font-size: base(1); - line-height: base(1.2); + %h2 { + margin: 0; + font-size: base(1.3); + line-height: base(1.6); - @include small-break { - font-size: base(0.65); - line-height: 1.25; + @include small-break { + font-size: base(0.85); + } } -} -%h4 { - margin: 0; - font-size: base(0.8); - line-height: base(1); - letter-spacing: -0.375px; -} + %h3 { + margin: 0; + font-size: base(1); + line-height: base(1.2); -%h5 { - margin: 0; - font-size: base(0.65); - line-height: base(0.8); -} + @include small-break { + font-size: base(0.65); + line-height: 1.25; + } + } -%h6 { - margin: 0; - font-size: base(0.6); - line-height: base(0.8); -} - -%small { - margin: 0; - font-size: 12px; - line-height: 20px; -} - -///////////////////////////// -// TYPE STYLES -///////////////////////////// - -%large-body { - font-size: base(0.6); - line-height: base(1); - letter-spacing: base(0.02); - - @include mid-break { - font-size: base(0.7); + %h4 { + margin: 0; + font-size: base(0.8); line-height: base(1); + letter-spacing: -0.375px; } - @include small-break { - font-size: base(0.55); - line-height: base(0.75); - } -} - -%body { - font-size: $baseline-body-size; - line-height: $baseline-px; - font-weight: normal; - font-family: var(--font-body); -} - -%code { - font-size: base(0.4); - color: var(--theme-elevation-400); - - span { - color: var(--theme-elevation-800); + %h5 { + margin: 0; + font-size: base(0.65); + line-height: base(0.8); + } + + %h6 { + margin: 0; + font-size: base(0.6); + line-height: base(0.8); + } + + %small { + margin: 0; + font-size: 12px; + line-height: 20px; + } + + ///////////////////////////// + // TYPE STYLES + ///////////////////////////// + + %large-body { + font-size: base(0.6); + line-height: base(1); + letter-spacing: base(0.02); + + @include mid-break { + font-size: base(0.7); + line-height: base(1); + } + + @include small-break { + font-size: base(0.55); + line-height: base(0.75); + } + } + + %body { + font-size: $baseline-body-size; + line-height: $baseline-px; + font-weight: normal; + font-family: var(--font-body); + } + + %code { + font-size: base(0.4); + color: var(--theme-elevation-400); + + span { + color: var(--theme-elevation-800); + } } } diff --git a/packages/richtext-lexical/src/utilities/fieldsDrawer/DrawerContent.tsx b/packages/richtext-lexical/src/utilities/fieldsDrawer/DrawerContent.tsx index 8cd8104e0b..f0ba58405b 100644 --- a/packages/richtext-lexical/src/utilities/fieldsDrawer/DrawerContent.tsx +++ b/packages/richtext-lexical/src/utilities/fieldsDrawer/DrawerContent.tsx @@ -8,7 +8,7 @@ import { useServerFunctions, useTranslation, } from '@payloadcms/ui' -import React, { useCallback, useEffect, useState } from 'react' +import React, { useCallback, useEffect, useRef, useState } from 'react' import { v4 as uuid } from 'uuid' import type { FieldsDrawerProps } from './Drawer.js' @@ -27,13 +27,15 @@ export const DrawerContent: React.FC(false) + const abortControllerRef = useRef(new AbortController()) + + const [initialState, setInitialState] = useState(false) const { field: { richTextComponentMap }, } = useEditorConfigContext() - const { serverFunction } = useServerFunctions() + const { getFormState } = useServerFunctions() const componentMapRenderedFieldsPath = `lexical_internal_feature.${featureKey}.fields${schemaPathSuffix ? `.${schemaPathSuffix}` : ''}` const schemaFieldsPath = @@ -44,41 +46,74 @@ export const DrawerContent: React.FC { + const abortController = new AbortController() + const awaitInitialState = async () => { - const { state } = (await serverFunction({ - name: 'form-state', - args: { - id, - data: data ?? {}, - operation: 'update', - schemaPath: schemaFieldsPath, - }, - })) as { state: FormState } // TODO: remove this when strictNullChecks is enabled and the return type can be inferred + const { state } = await getFormState({ + id, + data: data ?? {}, + operation: 'update', + schemaPath: schemaFieldsPath, + signal: abortController.signal, + }) setInitialState(state) } void awaitInitialState() - }, [schemaFieldsPath, id, data, serverFunction]) + + return () => { + try { + abortController.abort() + } catch (_err) { + // swallow error + } + } + }, [schemaFieldsPath, id, data, getFormState]) const onChange = useCallback( async ({ formState: prevFormState }) => { - const { state } = (await serverFunction({ - name: 'form-state', - args: { - id, - formState: prevFormState, - operation: 'update', - schemaPath: schemaFieldsPath, - }, - })) as { state: FormState } // TODO: remove this when strictNullChecks is enabled and the return type can be inferred + if (abortControllerRef.current) { + try { + abortControllerRef.current.abort() + } catch (_err) { + // swallow error + } + } + + const abortController = new AbortController() + abortControllerRef.current = abortController + + const { state } = await getFormState({ + id, + formState: prevFormState, + operation: 'update', + schemaPath: schemaFieldsPath, + signal: abortController.signal, + }) + + if (!state) { + return prevFormState + } return state }, - - [schemaFieldsPath, id, serverFunction], + [schemaFieldsPath, id, getFormState], ) + // cleanup effect + useEffect(() => { + const abortController = abortControllerRef.current + + return () => { + try { + abortController.abort() + } catch (_err) { + // swallow error + } + } + }, []) + if (initialState === false) { return null } diff --git a/packages/richtext-slate/package.json b/packages/richtext-slate/package.json index c61fc0e56e..fe9d37921d 100644 --- a/packages/richtext-slate/package.json +++ b/packages/richtext-slate/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/richtext-slate", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "The officially supported Slate richtext adapter for Payload", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/richtext-slate/src/field/buttons.scss b/packages/richtext-slate/src/field/buttons.scss index b02de5ce4c..6e529983fc 100644 --- a/packages/richtext-slate/src/field/buttons.scss +++ b/packages/richtext-slate/src/field/buttons.scss @@ -1,15 +1,16 @@ @import '../scss/styles.scss'; +@layer payload-default { + .rich-text__button { + position: relative; + cursor: pointer; -.rich-text__button { - position: relative; - cursor: pointer; + svg { + width: base(0.75); + height: base(0.75); + } - svg { - width: base(0.75); - height: base(0.75); - } - - &--disabled { - opacity: 0.4; + &--disabled { + opacity: 0.4; + } } } diff --git a/packages/richtext-slate/src/field/elements/link/Button/index.tsx b/packages/richtext-slate/src/field/elements/link/Button/index.tsx index b5649fdec8..05c9720f98 100644 --- a/packages/richtext-slate/src/field/elements/link/Button/index.tsx +++ b/packages/richtext-slate/src/field/elements/link/Button/index.tsx @@ -62,7 +62,7 @@ export const LinkButton: React.FC<{ const { t } = useTranslation() const editor = useSlate() - const { serverFunction } = useServerFunctions() + const { getFormState } = useServerFunctions() const { closeModal, openModal } = useModal() const drawerSlug = useDrawerSlug('rich-text-link') @@ -90,14 +90,11 @@ export const LinkButton: React.FC<{ text: editor.selection ? Editor.string(editor, editor.selection) : '', } - const { state } = (await serverFunction({ - name: 'form-state', - args: { - data, - operation: 'update', - schemaPath: `${schemaPath}.${linkFieldsSchemaPath}`, - }, - })) as { state: FormState } // TODO: remove this when strictNullChecks is enabled and the return type can be inferred + const { state } = await getFormState({ + data, + operation: 'update', + schemaPath: `${schemaPath}.${linkFieldsSchemaPath}`, + }) setInitialState(state) } diff --git a/packages/richtext-slate/src/field/elements/link/Element/index.tsx b/packages/richtext-slate/src/field/elements/link/Element/index.tsx index 51aa82a599..c3ef59ccaa 100644 --- a/packages/richtext-slate/src/field/elements/link/Element/index.tsx +++ b/packages/richtext-slate/src/field/elements/link/Element/index.tsx @@ -79,7 +79,7 @@ export const LinkElement = () => { const [initialState, setInitialState] = useState({}) const { id, collectionSlug } = useDocumentInfo() - const { serverFunction } = useServerFunctions() + const { getFormState } = useServerFunctions() const drawerSlug = useDrawerSlug('rich-text-link') @@ -100,14 +100,11 @@ export const LinkElement = () => { url: element.url, } - const { state } = (await serverFunction({ - name: 'form-state', - args: { - data, - operation: 'update', - schemaPath: fieldMapPath, - }, - })) as { state: FormState } // TODO: remove this when strictNullChecks is enabled and the return type can be inferred + const { state } = await getFormState({ + data, + operation: 'update', + schemaPath: fieldMapPath, + }) setInitialState(state) } @@ -115,7 +112,7 @@ export const LinkElement = () => { if (renderModal) { void awaitInitialState() } - }, [renderModal, element, locale, t, collectionSlug, config, id, fieldMapPath, serverFunction]) + }, [renderModal, element, locale, t, collectionSlug, config, id, fieldMapPath, getFormState]) return ( diff --git a/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.tsx b/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.tsx index d7bcff163f..17832f50c9 100644 --- a/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.tsx +++ b/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.tsx @@ -1,7 +1,6 @@ 'use client' import type { FormProps } from '@payloadcms/ui' -import type { FormState } from 'payload' import { Drawer, @@ -34,24 +33,21 @@ export const LinkDrawer: React.FC = ({ const fieldMapPath = `${schemaPath}.${linkFieldsSchemaPath}` const { id } = useDocumentInfo() - const { serverFunction } = useServerFunctions() + const { getFormState } = useServerFunctions() const onChange: FormProps['onChange'][0] = useCallback( async ({ formState: prevFormState }) => { - const { state } = (await serverFunction({ - name: 'form-state', - args: { - id, - formState: prevFormState, - operation: 'update', - schemaPath: fieldMapPath, - }, - })) as { state: FormState } // TODO: remove this when strictNullChecks is enabled and the return type can be inferred + const { state } = await getFormState({ + id, + formState: prevFormState, + operation: 'update', + schemaPath: fieldMapPath, + }) return state }, - [fieldMapPath, id, serverFunction], + [fieldMapPath, id, getFormState], ) return ( diff --git a/packages/richtext-slate/src/field/elements/upload/Element/UploadDrawer/index.tsx b/packages/richtext-slate/src/field/elements/upload/Element/UploadDrawer/index.tsx index a971ccfe05..10b5218038 100644 --- a/packages/richtext-slate/src/field/elements/upload/Element/UploadDrawer/index.tsx +++ b/packages/richtext-slate/src/field/elements/upload/Element/UploadDrawer/index.tsx @@ -1,7 +1,7 @@ 'use client' import type { FormProps } from '@payloadcms/ui' -import type { ClientCollectionConfig, FormState } from 'payload' +import type { ClientCollectionConfig } from 'payload' import { getTranslation } from '@payloadcms/translations' import { @@ -42,7 +42,7 @@ export const UploadDrawer: React.FC<{ const { closeModal } = useModal() const { id, collectionSlug } = useDocumentInfo() - const { serverFunction } = useServerFunctions() + const { getFormState } = useServerFunctions() const [initialState, setInitialState] = useState({}) const { @@ -72,16 +72,13 @@ export const UploadDrawer: React.FC<{ const data = deepCopyObject(element?.fields || {}) const awaitInitialState = async () => { - const { state } = (await serverFunction({ - name: 'form-state', - args: { - id, - collectionSlug, - data, - operation: 'update', - schemaPath: `${schemaPath}.${uploadFieldsSchemaPath}.${relatedCollection.slug}`, - }, - })) as { state: FormState } // TODO: remove this when strictNullChecks is enabled and the return type can be inferred + const { state } = await getFormState({ + id, + collectionSlug, + data, + operation: 'update', + schemaPath: `${schemaPath}.${uploadFieldsSchemaPath}.${relatedCollection.slug}`, + }) setInitialState(state) } @@ -96,25 +93,22 @@ export const UploadDrawer: React.FC<{ id, schemaPath, relatedCollection.slug, - serverFunction, + getFormState, ]) const onChange: FormProps['onChange'][0] = useCallback( async ({ formState: prevFormState }) => { - const { state } = (await serverFunction({ - name: 'form-state', - args: { - id, - formState: prevFormState, - operation: 'update', - schemaPath: `${schemaPath}.${uploadFieldsSchemaPath}.${relatedCollection.slug}`, - }, - })) as { state: FormState } // TODO: remove this when strictNullChecks is enabled and the return type can be inferred + const { state } = await getFormState({ + id, + formState: prevFormState, + operation: 'update', + schemaPath: `${schemaPath}.${uploadFieldsSchemaPath}.${relatedCollection.slug}`, + }) return state }, - [relatedCollection.slug, schemaPath, id, serverFunction], + [relatedCollection.slug, schemaPath, id, getFormState], ) return ( diff --git a/packages/richtext-slate/src/field/icons/IndentLeft/index.scss b/packages/richtext-slate/src/field/icons/IndentLeft/index.scss index 62b0f7fe8a..28cf55c34b 100644 --- a/packages/richtext-slate/src/field/icons/IndentLeft/index.scss +++ b/packages/richtext-slate/src/field/icons/IndentLeft/index.scss @@ -1,16 +1,18 @@ @import '../../../scss/styles.scss'; -.icon--indent-left { - height: $baseline; - width: $baseline; +@layer payload-default { + .icon--indent-left { + height: $baseline; + width: $baseline; - .stroke { - fill: none; - stroke: var(--theme-elevation-800); - stroke-width: $style-stroke-width-m; - } + .stroke { + fill: none; + stroke: var(--theme-elevation-800); + stroke-width: $style-stroke-width-m; + } - .fill { - fill: var(--theme-elevation-800); + .fill { + fill: var(--theme-elevation-800); + } } } diff --git a/packages/richtext-slate/src/field/icons/IndentRight/index.scss b/packages/richtext-slate/src/field/icons/IndentRight/index.scss index f5984269c5..3110ed8cfa 100644 --- a/packages/richtext-slate/src/field/icons/IndentRight/index.scss +++ b/packages/richtext-slate/src/field/icons/IndentRight/index.scss @@ -1,16 +1,18 @@ @import '../../../scss/styles.scss'; -.icon--indent-right { - height: $baseline; - width: $baseline; +@layer payload-default { + .icon--indent-right { + height: $baseline; + width: $baseline; - .stroke { - fill: none; - stroke: var(--theme-elevation-800); - stroke-width: $style-stroke-width-m; - } + .stroke { + fill: none; + stroke: var(--theme-elevation-800); + stroke-width: $style-stroke-width-m; + } - .fill { - fill: var(--theme-elevation-800); + .fill { + fill: var(--theme-elevation-800); + } } } diff --git a/packages/richtext-slate/src/field/icons/Link/index.scss b/packages/richtext-slate/src/field/icons/Link/index.scss index 088b8c2656..2eff6818c1 100644 --- a/packages/richtext-slate/src/field/icons/Link/index.scss +++ b/packages/richtext-slate/src/field/icons/Link/index.scss @@ -1,11 +1,13 @@ @import '../../../scss/styles.scss'; -.icon--link { - width: $baseline; - height: $baseline; +@layer payload-default { + .icon--link { + width: $baseline; + height: $baseline; - .stroke { - stroke: var(--theme-elevation-800); - stroke-width: $style-stroke-width; + .stroke { + stroke: var(--theme-elevation-800); + stroke-width: $style-stroke-width; + } } } diff --git a/packages/richtext-slate/src/field/icons/Relationship/index.scss b/packages/richtext-slate/src/field/icons/Relationship/index.scss index efa651886b..417693f2b8 100644 --- a/packages/richtext-slate/src/field/icons/Relationship/index.scss +++ b/packages/richtext-slate/src/field/icons/Relationship/index.scss @@ -1,12 +1,14 @@ @import '../../../scss/styles.scss'; -.icon--relationship { - height: $baseline; - width: $baseline; +@layer payload-default { + .icon--relationship { + height: $baseline; + width: $baseline; - .stroke { - fill: none; - stroke: var(--theme-elevation-800); - stroke-width: $style-stroke-width-m; + .stroke { + fill: none; + stroke: var(--theme-elevation-800); + stroke-width: $style-stroke-width-m; + } } } diff --git a/packages/richtext-slate/src/field/icons/Upload/index.scss b/packages/richtext-slate/src/field/icons/Upload/index.scss index 33742f91d1..1b3147d6c1 100644 --- a/packages/richtext-slate/src/field/icons/Upload/index.scss +++ b/packages/richtext-slate/src/field/icons/Upload/index.scss @@ -1,11 +1,13 @@ @import '../../../scss/styles.scss'; -.icon--upload { - height: $baseline; - width: $baseline; +@layer payload-default { + .icon--upload { + height: $baseline; + width: $baseline; - .fill { - fill: var(--theme-elevation-800); - stroke: none; + .fill { + fill: var(--theme-elevation-800); + stroke: none; + } } } diff --git a/packages/richtext-slate/src/field/index.scss b/packages/richtext-slate/src/field/index.scss index 51ec4eb07f..f5247cd819 100644 --- a/packages/richtext-slate/src/field/index.scss +++ b/packages/richtext-slate/src/field/index.scss @@ -1,212 +1,213 @@ @import '../scss/styles.scss'; - -.rich-text { - margin-bottom: base(2); - display: flex; - flex-direction: column; - isolation: isolate; - - &__toolbar { - @include blur-bg(var(--theme-elevation-0)); - margin-bottom: $baseline; - border: $style-stroke-width-s solid var(--theme-elevation-150); - position: sticky; - z-index: 1; - top: var(--doc-controls-height); - } - - &__toolbar-wrap { - padding: base(0.25); +@layer payload-default { + .rich-text { + margin-bottom: base(2); display: flex; - flex-wrap: wrap; - align-items: stretch; - position: relative; - z-index: 1; + flex-direction: column; + isolation: isolate; - &:after { - content: ' '; - opacity: 0.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(0.8); - line-height: 1.5; - - *[data-slate-node='element'] { - margin-top: 0.75em; - position: relative; - line-height: 1.5; - letter-spacing: normal; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - font-weight: 700; - letter-spacing: normal; - } - - h1[data-slate-node='element'] { - font-size: base(1.4); - margin-block: 0.5em 0.4em; - line-height: base(1.2); - letter-spacing: normal; - } - - h2[data-slate-node='element'] { - font-size: base(1.25); - margin-block: 0.55em 0.4em; - line-height: base(1.2); - letter-spacing: normal; - } - - h3[data-slate-node='element'] { - font-size: base(1.1); - margin-block: 0.6em 0.4em; - line-height: base(1.3); - letter-spacing: normal; - } - - h4[data-slate-node='element'] { - font-size: base(1); - margin-block: 0.65em 0.4em; - line-height: base(1.4); - letter-spacing: normal; - } - - h5[data-slate-node='element'] { - font-size: base(0.9); - margin-block: 0.7em 0.4em; - line-height: base(1.5); - letter-spacing: normal; - } - - h6[data-slate-node='element'] { - font-size: base(0.8); - margin-block: 0.75em 0.4em; - line-height: base(1.5); - } - } - - &--gutter { - .rich-text__editor { - padding-left: $baseline; - border-left: 1px solid var(--theme-elevation-100); - } - } - - &__input { - min-height: base(10); - } - - &__wrap { - width: 100%; - position: relative; - } - - &__wrapper { - width: 100%; - } - - &--read-only { - .rich-text__editor { - background: var(--theme-elevation-200); - color: var(--theme-elevation-450); - padding: base(0.5); - - .popup button { - display: none; - } - } - - .rich-text__toolbar { - pointer-events: none; - position: relative; - top: 0; - - &::after { - content: ' '; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: var(--theme-elevation-200); - opacity: 0.85; - z-index: 2; - backdrop-filter: unset; - } - } - } - - &__button { - @extend %btn-reset; - padding: base(0.25); - - svg { - @include color-svg(var(--theme-elevation-800)); - width: base(0.75); - height: base(0.75); - } - - &:hover { - background-color: var(--theme-elevation-100); - } - - &__button--active, - &__button--active:hover { - background-color: var(--theme-elevation-150); - } - } - - &__drawerIsOpen { - top: base(1); - } - - @include mid-break { &__toolbar { - top: base(3); + @include blur-bg(var(--theme-elevation-0)); + margin-bottom: $baseline; + border: $style-stroke-width-s solid var(--theme-elevation-150); + position: sticky; + z-index: 1; + top: var(--doc-controls-height); + } + + &__toolbar-wrap { + padding: base(0.25); + display: flex; + flex-wrap: wrap; + align-items: stretch; + position: relative; + z-index: 1; + + &:after { + content: ' '; + opacity: 0.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(0.8); + line-height: 1.5; + + *[data-slate-node='element'] { + margin-top: 0.75em; + position: relative; + line-height: 1.5; + letter-spacing: normal; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + font-weight: 700; + letter-spacing: normal; + } + + h1[data-slate-node='element'] { + font-size: base(1.4); + margin-block: 0.5em 0.4em; + line-height: base(1.2); + letter-spacing: normal; + } + + h2[data-slate-node='element'] { + font-size: base(1.25); + margin-block: 0.55em 0.4em; + line-height: base(1.2); + letter-spacing: normal; + } + + h3[data-slate-node='element'] { + font-size: base(1.1); + margin-block: 0.6em 0.4em; + line-height: base(1.3); + letter-spacing: normal; + } + + h4[data-slate-node='element'] { + font-size: base(1); + margin-block: 0.65em 0.4em; + line-height: base(1.4); + letter-spacing: normal; + } + + h5[data-slate-node='element'] { + font-size: base(0.9); + margin-block: 0.7em 0.4em; + line-height: base(1.5); + letter-spacing: normal; + } + + h6[data-slate-node='element'] { + font-size: base(0.8); + margin-block: 0.75em 0.4em; + line-height: base(1.5); + } + } + + &--gutter { + .rich-text__editor { + padding-left: $baseline; + border-left: 1px solid var(--theme-elevation-100); + } + } + + &__input { + min-height: base(10); + } + + &__wrap { + width: 100%; + position: relative; + } + + &__wrapper { + width: 100%; + } + + &--read-only { + .rich-text__editor { + background: var(--theme-elevation-200); + color: var(--theme-elevation-450); + padding: base(0.5); + + .popup button { + display: none; + } + } + + .rich-text__toolbar { + pointer-events: none; + position: relative; + top: 0; + + &::after { + content: ' '; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--theme-elevation-200); + opacity: 0.85; + z-index: 2; + backdrop-filter: unset; + } + } + } + + &__button { + @extend %btn-reset; + padding: base(0.25); + + svg { + @include color-svg(var(--theme-elevation-800)); + width: base(0.75); + height: base(0.75); + } + + &:hover { + background-color: var(--theme-elevation-100); + } + + &__button--active, + &__button--active:hover { + background-color: var(--theme-elevation-150); + } } &__drawerIsOpen { top: base(1); } + + @include mid-break { + &__toolbar { + top: base(3); + } + + &__drawerIsOpen { + top: base(1); + } + } } -} -[data-slate-node='element'] { - margin-bottom: base(0.25); -} + [data-slate-node='element'] { + margin-bottom: base(0.25); + } -html[data-theme='light'] { - .rich-text { - &.error { - .rich-text__editor, - .rich-text__toolbar { - @include lightInputError; - } - } - } -} - -html[data-theme='dark'] { - .rich-text { - &.error { - .rich-text__editor, - .rich-text__toolbar { - @include darkInputError; + html[data-theme='light'] { + .rich-text { + &.error { + .rich-text__editor, + .rich-text__toolbar { + @include lightInputError; + } + } + } + } + + html[data-theme='dark'] { + .rich-text { + &.error { + .rich-text__editor, + .rich-text__toolbar { + @include darkInputError; + } } } } diff --git a/packages/richtext-slate/src/scss/app.scss b/packages/richtext-slate/src/scss/app.scss index 90254443b0..b59af595d3 100644 --- a/packages/richtext-slate/src/scss/app.scss +++ b/packages/richtext-slate/src/scss/app.scss @@ -1,203 +1,204 @@ @import 'styles'; @import './toasts.scss'; @import './colors.scss'; +@layer payload-default { + :root { + --base-px: 20; + --base-body-size: 13; + --base: calc((var(--base-px) / var(--base-body-size)) * 1rem); -:root { - --base-px: 20; - --base-body-size: 13; - --base: calc((var(--base-px) / var(--base-body-size)) * 1rem); + --breakpoint-xs-width: #{$breakpoint-xs-width}; + --breakpoint-s-width: #{$breakpoint-s-width}; + --breakpoint-m-width: #{$breakpoint-m-width}; + --breakpoint-l-width: #{$breakpoint-l-width}; + --scrollbar-width: 17px; - --breakpoint-xs-width: #{$breakpoint-xs-width}; - --breakpoint-s-width: #{$breakpoint-s-width}; - --breakpoint-m-width: #{$breakpoint-m-width}; - --breakpoint-l-width: #{$breakpoint-l-width}; - --scrollbar-width: 17px; - - --theme-bg: var(--theme-elevation-0); - --theme-input-bg: var(--theme-elevation-0); - --theme-text: var(--theme-elevation-800); - --theme-overlay: rgba(5, 5, 5, 0.5); - --theme-baseline: #{$baseline-px}; - --theme-baseline-body-size: #{$baseline-body-size}; - --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, - sans-serif; - --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}; - --style-radius-l: #{$style-radius-l}; - - --z-popup: 10; - --z-nav: 20; - --z-modal: 30; - --z-status: 40; - - --accessibility-outline: 2px solid var(--theme-text); - --accessibility-outline-offset: 2px; - - --gutter-h: #{base(3)}; - --spacing-view-bottom: var(--gutter-h); - --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.4); - --doc-controls-height: calc(var(--base) * 2.4); - } - - @include small-break { - --gutter-h: #{base(0.8)}; - --spacing-view-bottom: calc(var(--base) * 2); - --nav-width: 100vw; - } -} - -///////////////////////////// -// GLOBAL STYLES -///////////////////////////// - -* { - box-sizing: border-box; -} - -html { - @extend %body; - 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); - --theme-overlay: rgba(5, 5, 5, 0.75); - color-scheme: dark; + --theme-input-bg: var(--theme-elevation-0); + --theme-text: var(--theme-elevation-800); + --theme-overlay: rgba(5, 5, 5, 0.5); + --theme-baseline: #{$baseline-px}; + --theme-baseline-body-size: #{$baseline-body-size}; + --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, + sans-serif; + --font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif; + --font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace; - ::selection { - color: var(--color-base-1000); + --style-radius-s: #{$style-radius-s}; + --style-radius-m: #{$style-radius-m}; + --style-radius-l: #{$style-radius-l}; + + --z-popup: 10; + --z-nav: 20; + --z-modal: 30; + --z-status: 40; + + --accessibility-outline: 2px solid var(--theme-text); + --accessibility-outline-offset: 2px; + + --gutter-h: #{base(3)}; + --spacing-view-bottom: var(--gutter-h); + --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.4); + --doc-controls-height: calc(var(--base) * 2.4); } - ::-moz-selection { - color: var(--color-base-1000); + @include small-break { + --gutter-h: #{base(0.8)}; + --spacing-view-bottom: calc(var(--base) * 2); + --nav-width: 100vw; } } - @include mid-break { - font-size: 12px; + ///////////////////////////// + // GLOBAL STYLES + ///////////////////////////// + + * { + box-sizing: border-box; } -} -html, -body, -#app { - height: 100%; -} + html { + @extend %body; + background: var(--theme-bg); + -webkit-font-smoothing: antialiased; -body { - font-family: var(--font-body); - font-weight: 400; - color: var(--theme-text); - margin: 0; - // this is for the nav to be able to push the document over - overflow-x: hidden; -} + &[data-theme='dark'] { + --theme-bg: var(--theme-elevation-0); + --theme-text: var(--theme-elevation-1000); + --theme-input-bg: var(--theme-elevation-50); + --theme-overlay: rgba(5, 5, 5, 0.75); + color-scheme: dark; -::selection { - background: var(--color-success-250); - color: var(--theme-base-800); -} + ::selection { + color: var(--color-base-1000); + } -::-moz-selection { - background: var(--color-success-250); - color: var(--theme-base-800); -} - -img { - max-width: 100%; - height: auto; - display: block; -} - -h1 { - @extend %h1; -} - -h2 { - @extend %h2; -} - -h3 { - @extend %h3; -} - -h4 { - @extend %h4; -} - -h5 { - @extend %h5; -} - -h6 { - @extend %h6; -} - -p { - margin: 0; -} - -ul, -ol { - padding-left: $baseline; - margin: 0; -} - -:focus-visible { - outline: var(--accessibility-outline); -} - -a { - color: currentColor; - - &:focus { - &:not(:focus-visible) { - opacity: 0.8; + ::-moz-selection { + color: var(--color-base-1000); + } + } + + @include mid-break { + font-size: 12px; } - outline: none; } - &:active { - opacity: 0.7; - outline: none; + html, + body, + #app { + height: 100%; } -} -svg { - vertical-align: middle; -} + body { + font-family: var(--font-body); + font-weight: 400; + color: var(--theme-text); + margin: 0; + // this is for the nav to be able to push the document over + overflow-x: hidden; + } -dialog { - width: 100%; - border: 0; - padding: 0; - color: currentColor; -} + ::selection { + background: var(--color-success-250); + color: var(--theme-base-800); + } -.payload__modal-item { - min-height: 100%; - background: transparent; -} + ::-moz-selection { + background: var(--color-success-250); + color: var(--theme-base-800); + } -.payload__modal-container--enterDone { - overflow: auto; -} + img { + max-width: 100%; + height: auto; + display: block; + } -.payload__modal-item--enter, -.payload__modal-item--enterDone { - z-index: var(--z-modal); -} + h1 { + @extend %h1; + } -// @import '~payload-user-css'; TODO: re-enable this + h2 { + @extend %h2; + } + + h3 { + @extend %h3; + } + + h4 { + @extend %h4; + } + + h5 { + @extend %h5; + } + + h6 { + @extend %h6; + } + + p { + margin: 0; + } + + ul, + ol { + padding-left: $baseline; + margin: 0; + } + + :focus-visible { + outline: var(--accessibility-outline); + } + + a { + color: currentColor; + + &:focus { + &:not(:focus-visible) { + opacity: 0.8; + } + outline: none; + } + + &:active { + opacity: 0.7; + outline: none; + } + } + + svg { + vertical-align: middle; + } + + dialog { + width: 100%; + border: 0; + padding: 0; + color: currentColor; + } + + .payload__modal-item { + min-height: 100%; + background: transparent; + } + + .payload__modal-container--enterDone { + overflow: auto; + } + + .payload__modal-item--enter, + .payload__modal-item--enterDone { + z-index: var(--z-modal); + } + + // @import '~payload-user-css'; TODO: re-enable this +} diff --git a/packages/richtext-slate/src/scss/colors.scss b/packages/richtext-slate/src/scss/colors.scss index 42cea05859..1eaa88cb0a 100644 --- a/packages/richtext-slate/src/scss/colors.scss +++ b/packages/richtext-slate/src/scss/colors.scss @@ -1,269 +1,271 @@ -: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); +@layer payload-default { + :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(237, 245, 249); - --color-success-100: rgb(218, 237, 248); - --color-success-150: rgb(188, 225, 248); - --color-success-200: rgb(156, 216, 253); - --color-success-250: rgb(125, 204, 248); - --color-success-300: rgb(97, 190, 241); - --color-success-350: rgb(65, 178, 236); - --color-success-400: rgb(36, 164, 223); - --color-success-450: rgb(18, 148, 204); - --color-success-500: rgb(21, 135, 186); - --color-success-550: rgb(12, 121, 168); - --color-success-600: rgb(11, 110, 153); - --color-success-650: rgb(11, 97, 135); - --color-success-700: rgb(17, 88, 121); - --color-success-750: rgb(17, 76, 105); - --color-success-800: rgb(18, 66, 90); - --color-success-850: rgb(18, 56, 76); - --color-success-900: rgb(19, 44, 58); - --color-success-950: rgb(22, 33, 39); + --color-success-50: rgb(237, 245, 249); + --color-success-100: rgb(218, 237, 248); + --color-success-150: rgb(188, 225, 248); + --color-success-200: rgb(156, 216, 253); + --color-success-250: rgb(125, 204, 248); + --color-success-300: rgb(97, 190, 241); + --color-success-350: rgb(65, 178, 236); + --color-success-400: rgb(36, 164, 223); + --color-success-450: rgb(18, 148, 204); + --color-success-500: rgb(21, 135, 186); + --color-success-550: rgb(12, 121, 168); + --color-success-600: rgb(11, 110, 153); + --color-success-650: rgb(11, 97, 135); + --color-success-700: rgb(17, 88, 121); + --color-success-750: rgb(17, 76, 105); + --color-success-800: rgb(18, 66, 90); + --color-success-850: rgb(18, 56, 76); + --color-success-900: rgb(19, 44, 58); + --color-success-950: rgb(22, 33, 39); - --color-error-50: rgb(250, 241, 240); - --color-error-100: rgb(252, 229, 227); - --color-error-150: rgb(247, 208, 204); - --color-error-200: rgb(254, 193, 188); - --color-error-250: rgb(253, 177, 170); - --color-error-300: rgb(253, 154, 146); - --color-error-350: rgb(253, 131, 123); - --color-error-400: rgb(246, 109, 103); - --color-error-450: rgb(234, 90, 86); - --color-error-500: rgb(218, 75, 72); - --color-error-550: rgb(200, 62, 61); - --color-error-600: rgb(182, 54, 54); - --color-error-650: rgb(161, 47, 47); - --color-error-700: rgb(144, 44, 43); - --color-error-750: rgb(123, 41, 39); - --color-error-800: rgb(105, 39, 37); - --color-error-850: rgb(86, 36, 33); - --color-error-900: rgb(64, 32, 29); - --color-error-950: rgb(44, 26, 24); + --color-error-50: rgb(250, 241, 240); + --color-error-100: rgb(252, 229, 227); + --color-error-150: rgb(247, 208, 204); + --color-error-200: rgb(254, 193, 188); + --color-error-250: rgb(253, 177, 170); + --color-error-300: rgb(253, 154, 146); + --color-error-350: rgb(253, 131, 123); + --color-error-400: rgb(246, 109, 103); + --color-error-450: rgb(234, 90, 86); + --color-error-500: rgb(218, 75, 72); + --color-error-550: rgb(200, 62, 61); + --color-error-600: rgb(182, 54, 54); + --color-error-650: rgb(161, 47, 47); + --color-error-700: rgb(144, 44, 43); + --color-error-750: rgb(123, 41, 39); + --color-error-800: rgb(105, 39, 37); + --color-error-850: rgb(86, 36, 33); + --color-error-900: rgb(64, 32, 29); + --color-error-950: rgb(44, 26, 24); - --color-warning-50: rgb(249, 242, 237); - --color-warning-100: rgb(248, 232, 219); - --color-warning-150: rgb(243, 212, 186); - --color-warning-200: rgb(243, 200, 162); - --color-warning-250: rgb(240, 185, 136); - --color-warning-300: rgb(238, 166, 98); - --color-warning-350: rgb(234, 148, 58); - --color-warning-400: rgb(223, 132, 17); - --color-warning-450: rgb(204, 120, 15); - --color-warning-500: rgb(185, 108, 13); - --color-warning-550: rgb(167, 97, 10); - --color-warning-600: rgb(150, 87, 11); - --color-warning-650: rgb(134, 78, 11); - --color-warning-700: rgb(120, 70, 13); - --color-warning-750: rgb(105, 61, 13); - --color-warning-800: rgb(90, 55, 19); - --color-warning-850: rgb(73, 47, 21); - --color-warning-900: rgb(56, 38, 20); - --color-warning-950: rgb(38, 29, 21); + --color-warning-50: rgb(249, 242, 237); + --color-warning-100: rgb(248, 232, 219); + --color-warning-150: rgb(243, 212, 186); + --color-warning-200: rgb(243, 200, 162); + --color-warning-250: rgb(240, 185, 136); + --color-warning-300: rgb(238, 166, 98); + --color-warning-350: rgb(234, 148, 58); + --color-warning-400: rgb(223, 132, 17); + --color-warning-450: rgb(204, 120, 15); + --color-warning-500: rgb(185, 108, 13); + --color-warning-550: rgb(167, 97, 10); + --color-warning-600: rgb(150, 87, 11); + --color-warning-650: rgb(134, 78, 11); + --color-warning-700: rgb(120, 70, 13); + --color-warning-750: rgb(105, 61, 13); + --color-warning-800: rgb(90, 55, 19); + --color-warning-850: rgb(73, 47, 21); + --color-warning-900: rgb(56, 38, 20); + --color-warning-950: rgb(38, 29, 21); - --color-blue-50: rgb(237, 245, 249); - --color-blue-100: rgb(218, 237, 248); - --color-blue-150: rgb(188, 225, 248); - --color-blue-200: rgb(156, 216, 253); - --color-blue-250: rgb(125, 204, 248); - --color-blue-300: rgb(97, 190, 241); - --color-blue-350: rgb(65, 178, 236); - --color-blue-400: rgb(36, 164, 223); - --color-blue-450: rgb(18, 148, 204); - --color-blue-500: rgb(21, 135, 186); - --color-blue-550: rgb(12, 121, 168); - --color-blue-600: rgb(11, 110, 153); - --color-blue-650: rgb(11, 97, 135); - --color-blue-700: rgb(17, 88, 121); - --color-blue-750: rgb(17, 76, 105); - --color-blue-800: rgb(18, 66, 90); - --color-blue-850: rgb(18, 56, 76); - --color-blue-900: rgb(19, 44, 58); - --color-blue-950: rgb(22, 33, 39); + --color-blue-50: rgb(237, 245, 249); + --color-blue-100: rgb(218, 237, 248); + --color-blue-150: rgb(188, 225, 248); + --color-blue-200: rgb(156, 216, 253); + --color-blue-250: rgb(125, 204, 248); + --color-blue-300: rgb(97, 190, 241); + --color-blue-350: rgb(65, 178, 236); + --color-blue-400: rgb(36, 164, 223); + --color-blue-450: rgb(18, 148, 204); + --color-blue-500: rgb(21, 135, 186); + --color-blue-550: rgb(12, 121, 168); + --color-blue-600: rgb(11, 110, 153); + --color-blue-650: rgb(11, 97, 135); + --color-blue-700: rgb(17, 88, 121); + --color-blue-750: rgb(17, 76, 105); + --color-blue-800: rgb(18, 66, 90); + --color-blue-850: rgb(18, 56, 76); + --color-blue-900: rgb(19, 44, 58); + --color-blue-950: rgb(22, 33, 39); - --theme-border-color: var(--theme-elevation-150); + --theme-border-color: var(--theme-elevation-150); - --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-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-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-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-border-color: var(--theme-elevation-150); - - --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); + --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-border-color: var(--theme-elevation-150); + + --theme-elevation-0: var(--color-base-900); + --theme-elevation-50: var(--color-base-850); + --theme-elevation-100: var(--color-base-800); + --theme-elevation-150: var(--color-base-750); + --theme-elevation-200: var(--color-base-700); + --theme-elevation-250: var(--color-base-650); + --theme-elevation-300: var(--color-base-600); + --theme-elevation-350: var(--color-base-550); + --theme-elevation-400: var(--color-base-450); + --theme-elevation-450: var(--color-base-400); + --theme-elevation-550: var(--color-base-350); + --theme-elevation-600: var(--color-base-300); + --theme-elevation-650: var(--color-base-250); + --theme-elevation-700: var(--color-base-200); + --theme-elevation-750: var(--color-base-150); + --theme-elevation-800: var(--color-base-100); + --theme-elevation-850: var(--color-base-50); + --theme-elevation-900: var(--color-base-0); + --theme-elevation-950: var(--color-base-0); + --theme-elevation-1000: var(--color-base-0); + + --theme-success-50: var(--color-success-950); + --theme-success-100: var(--color-success-900); + --theme-success-150: var(--color-success-850); + --theme-success-200: var(--color-success-800); + --theme-success-250: var(--color-success-750); + --theme-success-300: var(--color-success-700); + --theme-success-350: var(--color-success-650); + --theme-success-400: var(--color-success-600); + --theme-success-450: var(--color-success-550); + --theme-success-550: var(--color-success-450); + --theme-success-600: var(--color-success-400); + --theme-success-650: var(--color-success-350); + --theme-success-700: var(--color-success-300); + --theme-success-750: var(--color-success-250); + --theme-success-800: var(--color-success-200); + --theme-success-850: var(--color-success-150); + --theme-success-900: var(--color-success-100); + --theme-success-950: var(--color-success-50); + + --theme-warning-50: var(--color-warning-950); + --theme-warning-100: var(--color-warning-900); + --theme-warning-150: var(--color-warning-850); + --theme-warning-200: var(--color-warning-800); + --theme-warning-250: var(--color-warning-750); + --theme-warning-300: var(--color-warning-700); + --theme-warning-350: var(--color-warning-650); + --theme-warning-400: var(--color-warning-600); + --theme-warning-450: var(--color-warning-550); + --theme-warning-550: var(--color-warning-450); + --theme-warning-600: var(--color-warning-400); + --theme-warning-650: var(--color-warning-350); + --theme-warning-700: var(--color-warning-300); + --theme-warning-750: var(--color-warning-250); + --theme-warning-800: var(--color-warning-200); + --theme-warning-850: var(--color-warning-150); + --theme-warning-900: var(--color-warning-100); + --theme-warning-950: var(--color-warning-50); + + --theme-error-50: var(--color-error-950); + --theme-error-100: var(--color-error-900); + --theme-error-150: var(--color-error-850); + --theme-error-200: var(--color-error-800); + --theme-error-250: var(--color-error-750); + --theme-error-300: var(--color-error-700); + --theme-error-350: var(--color-error-650); + --theme-error-400: var(--color-error-600); + --theme-error-450: var(--color-error-550); + --theme-error-550: var(--color-error-450); + --theme-error-600: var(--color-error-400); + --theme-error-650: var(--color-error-350); + --theme-error-700: var(--color-error-300); + --theme-error-750: var(--color-error-250); + --theme-error-800: var(--color-error-200); + --theme-error-850: var(--color-error-150); + --theme-error-900: var(--color-error-100); + --theme-error-950: var(--color-error-50); + } } diff --git a/packages/richtext-slate/src/scss/resets.scss b/packages/richtext-slate/src/scss/resets.scss index eeda892c2d..e73efa9c00 100644 --- a/packages/richtext-slate/src/scss/resets.scss +++ b/packages/richtext-slate/src/scss/resets.scss @@ -1,10 +1,12 @@ -%btn-reset { - border: 0; - background: none; - box-shadow: none; - border-radius: 0; - padding: 0; - color: currentColor; +@layer payload-default { + %btn-reset { + border: 0; + background: none; + box-shadow: none; + border-radius: 0; + padding: 0; + color: currentColor; + } } @mixin btn-reset { diff --git a/packages/richtext-slate/src/scss/toastify.scss b/packages/richtext-slate/src/scss/toastify.scss index a5bf4c35fd..3c915f7888 100644 --- a/packages/richtext-slate/src/scss/toastify.scss +++ b/packages/richtext-slate/src/scss/toastify.scss @@ -1,59 +1,60 @@ @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 { +@layer payload-default { + .Toastify { .Toastify__toast-container { - left: $baseline; - right: $baseline; + 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; + } } } } diff --git a/packages/richtext-slate/src/scss/toasts.scss b/packages/richtext-slate/src/scss/toasts.scss index 116845ac34..d40a51c4df 100644 --- a/packages/richtext-slate/src/scss/toasts.scss +++ b/packages/richtext-slate/src/scss/toasts.scss @@ -1,140 +1,141 @@ @import './styles.scss'; +@layer payload-default { + .payload-toast-container { + padding: 0; + margin: 0; -.payload-toast-container { - padding: 0; - margin: 0; + .payload-toast-close-button { + position: absolute; + order: 3; + left: unset; + inset-inline-end: base(0.8); + top: 50%; + transform: translateY(-50%); + color: var(--theme-elevation-600); + background: unset; + border: none; - .payload-toast-close-button { - position: absolute; - order: 3; - left: unset; - inset-inline-end: base(0.8); - top: 50%; - transform: translateY(-50%); - color: var(--theme-elevation-600); - background: unset; - border: none; + svg { + width: base(0.8); + height: base(0.8); + } - svg { - width: base(0.8); - height: base(0.8); - } + &:hover { + color: var(--theme-elevation-250); + background: none; + } - &:hover { - color: var(--theme-elevation-250); - background: none; - } - - [dir='RTL'] & { - right: unset; - left: 0.5rem; - } - } - - .toast-title { - line-height: base(1); - margin-right: base(1); - } - - .payload-toast-item { - 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: 4px; - border: 1px solid var(--theme-border-color); - background: var(--theme-input-bg); - box-shadow: - 0px 10px 4px -8px rgba(0, 2, 4, 0.02), - 0px 2px 3px 0px rgba(0, 2, 4, 0.05); - - .toast-content { - transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19); - width: 100%; - } - - &[data-front='false'] { - .toast-content { - opacity: 0; + [dir='RTL'] & { + right: unset; + left: 0.5rem; } } - &[data-expanded='true'] { - .toast-content { - opacity: 1; - } + .toast-title { + line-height: base(1); + margin-right: base(1); } - .toast-icon { - 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 { - 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 { - 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 { - 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 { + .payload-toast-item { + padding: base(0.8); color: var(--theme-elevation-800); - border-color: var(--theme-elevation-250); - background-color: var(--theme-elevation-100); + font-style: normal; + font-weight: 600; + display: flex; + gap: 1rem; + align-items: center; + width: 100%; + border-radius: 4px; + border: 1px solid var(--theme-border-color); + background: var(--theme-input-bg); + box-shadow: + 0px 10px 4px -8px rgba(0, 2, 4, 0.02), + 0px 2px 3px 0px rgba(0, 2, 4, 0.05); - .payload-toast-close-button { - color: var(--theme-elevation-600); + .toast-content { + transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19); + width: 100%; + } - &:hover { - color: var(--theme-elevation-250); + &[data-front='false'] { + .toast-content { + opacity: 0; + } + } + + &[data-expanded='true'] { + .toast-content { + opacity: 1; + } + } + + .toast-icon { + 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 { + 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 { + 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 { + 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); + + .payload-toast-close-button { + color: var(--theme-elevation-600); + + &:hover { + color: var(--theme-elevation-250); + } } } } diff --git a/packages/richtext-slate/src/scss/type.scss b/packages/richtext-slate/src/scss/type.scss index 997e43e24a..9fe3e34be5 100644 --- a/packages/richtext-slate/src/scss/type.scss +++ b/packages/richtext-slate/src/scss/type.scss @@ -4,106 +4,107 @@ ///////////////////////////// // HEADINGS ///////////////////////////// - -%h1, -%h2, -%h3, -%h4, -%h5, -%h6 { - font-family: var(--font-body); - font-weight: 500; -} - -%h1 { - margin: 0; - font-size: base(1.6); - line-height: base(1.8); - - @include small-break { - letter-spacing: -0.5px; - font-size: base(1.25); +@layer payload-default { + %h1, + %h2, + %h3, + %h4, + %h5, + %h6 { + font-family: var(--font-body); + font-weight: 500; } -} -%h2 { - margin: 0; - font-size: base(1.3); - line-height: base(1.6); + %h1 { + margin: 0; + font-size: base(1.6); + line-height: base(1.8); - @include small-break { - font-size: base(0.85); + @include small-break { + letter-spacing: -0.5px; + font-size: base(1.25); + } } -} -%h3 { - margin: 0; - font-size: base(1); - line-height: base(1.2); + %h2 { + margin: 0; + font-size: base(1.3); + line-height: base(1.6); - @include small-break { - font-size: base(0.65); - line-height: 1.25; + @include small-break { + font-size: base(0.85); + } } -} -%h4 { - margin: 0; - font-size: base(0.8); - line-height: base(1); - letter-spacing: -0.375px; -} + %h3 { + margin: 0; + font-size: base(1); + line-height: base(1.2); -%h5 { - margin: 0; - font-size: base(0.65); - line-height: base(0.8); -} + @include small-break { + font-size: base(0.65); + line-height: 1.25; + } + } -%h6 { - margin: 0; - font-size: base(0.6); - line-height: base(0.8); -} - -%small { - margin: 0; - font-size: 12px; - line-height: 20px; -} - -///////////////////////////// -// TYPE STYLES -///////////////////////////// - -%large-body { - font-size: base(0.6); - line-height: base(1); - letter-spacing: base(0.02); - - @include mid-break { - font-size: base(0.7); + %h4 { + margin: 0; + font-size: base(0.8); line-height: base(1); + letter-spacing: -0.375px; } - @include small-break { - font-size: base(0.55); - line-height: base(0.75); - } -} - -%body { - font-size: $baseline-body-size; - line-height: $baseline-px; - font-weight: normal; - font-family: var(--font-body); -} - -%code { - font-size: base(0.4); - color: var(--theme-elevation-400); - - span { - color: var(--theme-elevation-800); + %h5 { + margin: 0; + font-size: base(0.65); + line-height: base(0.8); + } + + %h6 { + margin: 0; + font-size: base(0.6); + line-height: base(0.8); + } + + %small { + margin: 0; + font-size: 12px; + line-height: 20px; + } + + ///////////////////////////// + // TYPE STYLES + ///////////////////////////// + + %large-body { + font-size: base(0.6); + line-height: base(1); + letter-spacing: base(0.02); + + @include mid-break { + font-size: base(0.7); + line-height: base(1); + } + + @include small-break { + font-size: base(0.55); + line-height: base(0.75); + } + } + + %body { + font-size: $baseline-body-size; + line-height: $baseline-px; + font-weight: normal; + font-family: var(--font-body); + } + + %code { + font-size: base(0.4); + color: var(--theme-elevation-400); + + span { + color: var(--theme-elevation-800); + } } } diff --git a/packages/storage-azure/package.json b/packages/storage-azure/package.json index c0308d7a3b..ca55de8089 100644 --- a/packages/storage-azure/package.json +++ b/packages/storage-azure/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/storage-azure", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "Payload storage adapter for Azure Blob Storage", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/storage-gcs/package.json b/packages/storage-gcs/package.json index 77708ae57a..ca1ce5ddd1 100644 --- a/packages/storage-gcs/package.json +++ b/packages/storage-gcs/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/storage-gcs", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "Payload storage adapter for Google Cloud Storage", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/storage-s3/package.json b/packages/storage-s3/package.json index 141f6243af..c2fec733ea 100644 --- a/packages/storage-s3/package.json +++ b/packages/storage-s3/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/storage-s3", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "Payload storage adapter for Amazon S3", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/storage-uploadthing/package.json b/packages/storage-uploadthing/package.json index e5671dc8c4..1c62c6e9ee 100644 --- a/packages/storage-uploadthing/package.json +++ b/packages/storage-uploadthing/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/storage-uploadthing", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "Payload storage adapter for uploadthing", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/storage-vercel-blob/package.json b/packages/storage-vercel-blob/package.json index 11337a4155..c81952cd10 100644 --- a/packages/storage-vercel-blob/package.json +++ b/packages/storage-vercel-blob/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/storage-vercel-blob", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "description": "Payload storage adapter for Vercel Blob Storage", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/translations/package.json b/packages/translations/package.json index 6515a89088..6de4d33fae 100644 --- a/packages/translations/package.json +++ b/packages/translations/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/translations", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "homepage": "https://payloadcms.com", "repository": { "type": "git", diff --git a/packages/ui/package.json b/packages/ui/package.json index b7c4074853..29f3f630b5 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/ui", - "version": "3.0.0-beta.110", + "version": "3.0.0-beta.111", "homepage": "https://payloadcms.com", "repository": { "type": "git", diff --git a/packages/ui/src/elements/AddNewRelation/index.scss b/packages/ui/src/elements/AddNewRelation/index.scss index c22d4b26ba..d2d699c082 100644 --- a/packages/ui/src/elements/AddNewRelation/index.scss +++ b/packages/ui/src/elements/AddNewRelation/index.scss @@ -1,42 +1,44 @@ @import '../../scss/styles.scss'; -.relationship-add-new { - display: flex; - align-items: stretch; - - .popup__trigger-wrap { +@layer payload-default { + .relationship-add-new { display: flex; align-items: stretch; - height: 100%; - } - &__add-button:not(.relationship-add-new__add-button--unstyled), - &__add-button:not(.relationship-add-new__add-button--unstyled).doc-drawer__toggler { - @include formInput; - margin: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - position: relative; - height: 100%; - margin-left: -1px; - display: flex; - padding: 0 base(0.5); - align-items: center; - display: flex; - cursor: pointer; - } + .popup__trigger-wrap { + display: flex; + align-items: stretch; + height: 100%; + } - &__add-button { - margin: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - position: relative; - height: 100%; - margin-left: -1px; - display: flex; - padding: 0 base(0.5); - align-items: center; - display: flex; - cursor: pointer; + &__add-button:not(.relationship-add-new__add-button--unstyled), + &__add-button:not(.relationship-add-new__add-button--unstyled).doc-drawer__toggler { + @include formInput; + margin: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + position: relative; + height: 100%; + margin-left: -1px; + display: flex; + padding: 0 base(0.5); + align-items: center; + display: flex; + cursor: pointer; + } + + &__add-button { + margin: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + position: relative; + height: 100%; + margin-left: -1px; + display: flex; + padding: 0 base(0.5); + align-items: center; + display: flex; + cursor: pointer; + } } } diff --git a/packages/ui/src/elements/AppHeader/index.scss b/packages/ui/src/elements/AppHeader/index.scss index 4be3584bf2..22150e8e1f 100644 --- a/packages/ui/src/elements/AppHeader/index.scss +++ b/packages/ui/src/elements/AppHeader/index.scss @@ -1,194 +1,196 @@ @import '../../scss/styles.scss'; -.app-header { - position: relative; - width: 100%; - height: var(--app-header-height); - z-index: var(--z-modal); - - &__mobile-nav-toggler { - display: none; - } - - // place the localizer outside the `overflow: hidden` container so that the popup is visible - // this means we need to use a placeholder div so that the space is retained in the DOM - [dir='rtl'] &__localizer { - right: unset; - left: base(4.5); - } - &__localizer.localizer { - position: absolute; - top: 50%; - right: base(4.5); - transform: translate3d(0, -50%, 0); - } - - &__localizer-spacing { - visibility: hidden; - } - - &__bg { - opacity: 0; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - pointer-events: none; - } - - &--show-bg { - opacity: 1; - } - - &__content { - display: flex; - align-items: center; - height: 100%; - padding: 0 var(--gutter-h); +@layer payload-default { + .app-header { position: relative; - flex-grow: 1; - } - - &__wrapper { - display: flex; - gap: calc(var(--base) / 2); - align-items: center; - height: 100%; - flex-grow: 1; - justify-content: space-between; width: 100%; - } + height: var(--app-header-height); + z-index: var(--z-modal); - &__account { - position: relative; + &__mobile-nav-toggler { + display: none; + } - &:focus:not(:focus-visible) { + // place the localizer outside the `overflow: hidden` container so that the popup is visible + // this means we need to use a placeholder div so that the space is retained in the DOM + [dir='rtl'] &__localizer { + right: unset; + left: base(4.5); + } + &__localizer.localizer { + position: absolute; + top: 50%; + right: base(4.5); + transform: translate3d(0, -50%, 0); + } + + &__localizer-spacing { + visibility: hidden; + } + + &__bg { + opacity: 0; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; + } + + &--show-bg { opacity: 1; } - // Use a pseudo element for the accessability so that it doesn't take up DOM space - // Also because the parent element has `overflow: hidden` which would clip an outline - &:focus-visible { - outline: none; + &__content { + display: flex; + align-items: center; + height: 100%; + padding: 0 var(--gutter-h); + position: relative; + flex-grow: 1; + } - &::after { - content: ''; - border: var(--accessibility-outline); - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - pointer-events: none; + &__wrapper { + display: flex; + gap: calc(var(--base) / 2); + align-items: center; + height: 100%; + flex-grow: 1; + justify-content: space-between; + width: 100%; + } + + &__account { + position: relative; + + &:focus:not(:focus-visible) { + opacity: 1; + } + + // Use a pseudo element for the accessability so that it doesn't take up DOM space + // Also because the parent element has `overflow: hidden` which would clip an outline + &:focus-visible { + outline: none; + + &::after { + content: ''; + border: var(--accessibility-outline); + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; + } } } - } - &__controls-wrapper { - display: flex; - align-items: center; - flex-grow: 1; - overflow: hidden; - width: 100%; - } - - &__step-nav-wrapper { - flex-grow: 0; - overflow: auto; - display: flex; - width: 100%; - - &::-webkit-scrollbar { - display: none; - } - } - - &__actions-wrapper { - position: relative; - overflow: hidden; - display: flex; - align-items: center; - gap: calc(var(--base) / 2); - margin-right: var(--base); - } - - &__gradient-placeholder { - position: absolute; - top: 0; - right: 0; - width: var(--base); - height: var(--base); - background: linear-gradient(to right, transparent, var(--theme-bg)); - } - - &__actions { - display: flex; - align-items: center; - gap: calc(var(--base) / 2); - flex-shrink: 0; - max-width: 600px; - overflow: auto; - white-space: nowrap; - - &::-webkit-scrollbar { - display: none; - } - } - - &__last-action { - margin-right: var(--base); - } - - @include large-break { - &__actions { - max-width: 500px; - } - } - - @include mid-break { - &__gradient-placeholder { - right: var(--base); + &__controls-wrapper { + display: flex; + align-items: center; + flex-grow: 1; + overflow: hidden; + width: 100%; } - &__actions { - max-width: 300px; - margin-right: var(--base); - } - } + &__step-nav-wrapper { + flex-grow: 0; + overflow: auto; + display: flex; + width: 100%; - @include small-break { - &__localizer.localizer { - right: base(2); - } - - &--nav-open { - .app-header__localizer { + &::-webkit-scrollbar { display: none; } } - &__mobile-nav-toggler { + &__actions-wrapper { + position: relative; + overflow: hidden; display: flex; align-items: center; - - &.nav-toggler--is-open { - opacity: 0.5; - } - } - - &__step-header { - // TODO: overflow the step header instead of hide it - display: none; + gap: calc(var(--base) / 2); + margin-right: var(--base); } &__gradient-placeholder { + position: absolute; + top: 0; right: 0; + width: var(--base); + height: var(--base); + background: linear-gradient(to right, transparent, var(--theme-bg)); } &__actions { - max-width: 150px; - margin-right: 0; + display: flex; + align-items: center; + gap: calc(var(--base) / 2); + flex-shrink: 0; + max-width: 600px; + overflow: auto; + white-space: nowrap; + + &::-webkit-scrollbar { + display: none; + } + } + + &__last-action { + margin-right: var(--base); + } + + @include large-break { + &__actions { + max-width: 500px; + } + } + + @include mid-break { + &__gradient-placeholder { + right: var(--base); + } + + &__actions { + max-width: 300px; + margin-right: var(--base); + } + } + + @include small-break { + &__localizer.localizer { + right: base(2); + } + + &--nav-open { + .app-header__localizer { + display: none; + } + } + + &__mobile-nav-toggler { + display: flex; + align-items: center; + + &.nav-toggler--is-open { + opacity: 0.5; + } + } + + &__step-header { + // TODO: overflow the step header instead of hide it + display: none; + } + + &__gradient-placeholder { + right: 0; + } + + &__actions { + max-width: 150px; + margin-right: 0; + } } } } diff --git a/packages/ui/src/elements/ArrayAction/index.scss b/packages/ui/src/elements/ArrayAction/index.scss index 57d1fff245..10b8e3b075 100644 --- a/packages/ui/src/elements/ArrayAction/index.scss +++ b/packages/ui/src/elements/ArrayAction/index.scss @@ -1,32 +1,34 @@ @import '../../scss/styles.scss'; -.array-actions { - &__button { - @extend %btn-reset; - cursor: pointer; - border-radius: 100px; +@layer payload-default { + .array-actions { + &__button { + @extend %btn-reset; + cursor: pointer; + border-radius: 100px; - &:hover { - background: var(--theme-elevation-0); + &:hover { + background: var(--theme-elevation-0); + } } - } - &__actions { - list-style: none; - margin: 0; - padding: 0; - } + &__actions { + list-style: none; + margin: 0; + padding: 0; + } - &__action { - display: flex; - gap: calc(var(--base) / 2); - align-items: center; + &__action { + display: flex; + gap: calc(var(--base) / 2); + align-items: center; - svg { - position: relative; + svg { + position: relative; - .stroke { - stroke-width: 1px; + .stroke { + stroke-width: 1px; + } } } } diff --git a/packages/ui/src/elements/Autosave/index.scss b/packages/ui/src/elements/Autosave/index.scss index b51a57d1bf..bd769aa4c6 100644 --- a/packages/ui/src/elements/Autosave/index.scss +++ b/packages/ui/src/elements/Autosave/index.scss @@ -1,5 +1,7 @@ @import '../../scss/styles.scss'; -.autosave { - white-space: nowrap; +@layer payload-default { + .autosave { + white-space: nowrap; + } } diff --git a/packages/ui/src/elements/Banner/index.scss b/packages/ui/src/elements/Banner/index.scss index 5e1a9a3262..c470775989 100644 --- a/packages/ui/src/elements/Banner/index.scss +++ b/packages/ui/src/elements/Banner/index.scss @@ -1,71 +1,73 @@ @import '../../scss/styles.scss'; -.banner { - font-size: 1rem; - line-height: base(1); - border: 0; - vertical-align: middle; - background: var(--theme-elevation-100); - color: var(--theme-elevation-800); - border-radius: $style-radius-m; - padding: base(0.5); - margin-bottom: $baseline; +@layer payload-default { + .banner { + font-size: 1rem; + line-height: base(1); + border: 0; + vertical-align: middle; + background: var(--theme-elevation-100); + color: var(--theme-elevation-800); + border-radius: $style-radius-m; + padding: base(0.5); + margin-bottom: $baseline; - &--has-action { - cursor: pointer; - text-decoration: none; - } - - &--has-icon { - display: flex; - - svg { - display: block; - } - } - - &--type-default { - &.button--has-action { - &:hover { - background: var(--theme-elevation-900); - } - - &:active { - background: var(--theme-elevation-950); - } - } - } - - &--type-error { - background: var(--theme-error-100); - color: var(--theme-error-600); - - svg { - @include color-svg(var(--theme-error-600)); + &--has-action { + cursor: pointer; + text-decoration: none; } - &.button--has-action { - &:hover { - background: var(--theme-error-200); - } + &--has-icon { + display: flex; - &:active { - background: var(--theme-error-300); + svg { + display: block; } } - } - &--type-success { - background: var(--theme-success-100); - color: var(--theme-success-600); + &--type-default { + &.button--has-action { + &:hover { + background: var(--theme-elevation-900); + } - &.button--has-action { - &:hover { - background: var(--theme-success-200); + &:active { + background: var(--theme-elevation-950); + } + } + } + + &--type-error { + background: var(--theme-error-100); + color: var(--theme-error-600); + + svg { + @include color-svg(var(--theme-error-600)); } - &:active { - background: var(--theme-success-200); + &.button--has-action { + &:hover { + background: var(--theme-error-200); + } + + &:active { + background: var(--theme-error-300); + } + } + } + + &--type-success { + background: var(--theme-success-100); + color: var(--theme-success-600); + + &.button--has-action { + &:hover { + background: var(--theme-success-200); + } + + &:active { + background: var(--theme-success-200); + } } } } diff --git a/packages/ui/src/elements/BulkUpload/ActionsBar/index.scss b/packages/ui/src/elements/BulkUpload/ActionsBar/index.scss index 6ea0e24d31..5f09ceb7c2 100644 --- a/packages/ui/src/elements/BulkUpload/ActionsBar/index.scss +++ b/packages/ui/src/elements/BulkUpload/ActionsBar/index.scss @@ -1,59 +1,61 @@ @import '../../../scss/styles.scss'; -.bulk-upload--actions-bar { - display: flex; - padding-inline: var(--gutter-h); - align-items: center; - border-bottom: 1px solid var(--theme-border-color); - position: sticky; - z-index: 1; - top: 0; - background-color: var(--theme-bg); - height: var(--doc-controls-height); - - &__navigation { +@layer payload-default { + .bulk-upload--actions-bar { display: flex; - gap: var(--base); + padding-inline: var(--gutter-h); align-items: center; - width: 100%; - } + border-bottom: 1px solid var(--theme-border-color); + position: sticky; + z-index: 1; + top: 0; + background-color: var(--theme-bg); + height: var(--doc-controls-height); - &__locationText { - font-variant-numeric: tabular-nums; - margin: 0; - } - - &__controls { - display: flex; - gap: calc(var(--base) / 2); - - .btn { - background-color: var(--theme-elevation-100); - width: calc(var(--base) * 1.2); - height: calc(var(--base) * 1.2); - - &:hover { - background-color: var(--theme-elevation-200); - } - - &__label { - display: flex; - } - } - } - - &__buttons { - display: flex; - gap: var(--base); - margin-left: auto; - } - - @include mid-break { &__navigation { - justify-content: space-between; + display: flex; + gap: var(--base); + align-items: center; + width: 100%; } - &__saveButtons { - display: none; + + &__locationText { + font-variant-numeric: tabular-nums; + margin: 0; + } + + &__controls { + display: flex; + gap: calc(var(--base) / 2); + + .btn { + background-color: var(--theme-elevation-100); + width: calc(var(--base) * 1.2); + height: calc(var(--base) * 1.2); + + &:hover { + background-color: var(--theme-elevation-200); + } + + &__label { + display: flex; + } + } + } + + &__buttons { + display: flex; + gap: var(--base); + margin-left: auto; + } + + @include mid-break { + &__navigation { + justify-content: space-between; + } + &__saveButtons { + display: none; + } } } } diff --git a/packages/ui/src/elements/BulkUpload/AddFilesView/index.scss b/packages/ui/src/elements/BulkUpload/AddFilesView/index.scss index d953c728b7..afb4bde4f7 100644 --- a/packages/ui/src/elements/BulkUpload/AddFilesView/index.scss +++ b/packages/ui/src/elements/BulkUpload/AddFilesView/index.scss @@ -1,28 +1,30 @@ -.bulk-upload--add-files { - height: 100%; - display: flex; - flex-direction: column; - - &__dropArea { +@layer payload-default { + .bulk-upload--add-files { height: 100%; - padding: calc(var(--base) * 2) var(--gutter-h); - } - - .dropzone { - flex-direction: column; - justify-content: center; display: flex; - gap: var(--base); - background-color: var(--theme-elevation-50); + flex-direction: column; - p { + &__dropArea { + height: 100%; + padding: calc(var(--base) * 2) var(--gutter-h); + } + + .dropzone { + flex-direction: column; + justify-content: center; + display: flex; + gap: var(--base); + background-color: var(--theme-elevation-50); + + p { + margin: 0; + } + } + + &__dragAndDropText { margin: 0; + text-transform: lowercase; + align-self: center; } } - - &__dragAndDropText { - margin: 0; - text-transform: lowercase; - align-self: center; - } } diff --git a/packages/ui/src/elements/BulkUpload/AddingFilesView/index.scss b/packages/ui/src/elements/BulkUpload/AddingFilesView/index.scss index c7e3428e1a..8612ab9414 100644 --- a/packages/ui/src/elements/BulkUpload/AddingFilesView/index.scss +++ b/packages/ui/src/elements/BulkUpload/AddingFilesView/index.scss @@ -1,23 +1,25 @@ @import '../../../scss/styles.scss'; -.bulk-upload--file-manager { - display: flex; - height: 100%; - width: 100%; - overflow: hidden; - - &__editView { - flex-grow: 1; +@layer payload-default { + .bulk-upload--file-manager { + display: flex; height: 100%; - max-height: 100%; - overflow: auto; - } - - @include mid-break { - flex-direction: column-reverse; + width: 100%; + overflow: hidden; &__editView { flex-grow: 1; + height: 100%; + max-height: 100%; + overflow: auto; + } + + @include mid-break { + flex-direction: column-reverse; + + &__editView { + flex-grow: 1; + } } } } diff --git a/packages/ui/src/elements/BulkUpload/DrawerCloseButton/index.scss b/packages/ui/src/elements/BulkUpload/DrawerCloseButton/index.scss index 993de8845b..3b088ecfbe 100644 --- a/packages/ui/src/elements/BulkUpload/DrawerCloseButton/index.scss +++ b/packages/ui/src/elements/BulkUpload/DrawerCloseButton/index.scss @@ -1,27 +1,29 @@ -.drawer-close-button { - --size: calc(var(--base) * 1.2); - border: 0; - background-color: transparent; - padding: 0; - cursor: pointer; - overflow: hidden; - direction: ltr; - display: flex; - align-items: center; - justify-content: center; - width: var(--size); - height: var(--size); +@layer payload-default { + .drawer-close-button { + --size: calc(var(--base) * 1.2); + border: 0; + background-color: transparent; + padding: 0; + cursor: pointer; + overflow: hidden; + direction: ltr; + display: flex; + align-items: center; + justify-content: center; + width: var(--size); + height: var(--size); - svg { - margin: calc(-1 * var(--size)); - width: calc(var(--size) * 2); - height: calc(var(--size) * 2); + svg { + margin: calc(-1 * var(--size)); + width: calc(var(--size) * 2); + height: calc(var(--size) * 2); - position: relative; + position: relative; - .stroke { - stroke-width: 1px; - vector-effect: non-scaling-stroke; + .stroke { + stroke-width: 1px; + vector-effect: non-scaling-stroke; + } } } } diff --git a/packages/ui/src/elements/BulkUpload/EditForm/index.scss b/packages/ui/src/elements/BulkUpload/EditForm/index.scss index 943eb5ae17..a1cab90a7b 100644 --- a/packages/ui/src/elements/BulkUpload/EditForm/index.scss +++ b/packages/ui/src/elements/BulkUpload/EditForm/index.scss @@ -1,9 +1,11 @@ @import '../../../scss/styles.scss'; -.collection-edit { - width: 100%; +@layer payload-default { + .collection-edit { + width: 100%; - &__form { - height: auto; + &__form { + height: auto; + } } } diff --git a/packages/ui/src/elements/BulkUpload/EditForm/index.tsx b/packages/ui/src/elements/BulkUpload/EditForm/index.tsx index 7e8ebca86a..f96fd21bae 100644 --- a/packages/ui/src/elements/BulkUpload/EditForm/index.tsx +++ b/packages/ui/src/elements/BulkUpload/EditForm/index.tsx @@ -1,6 +1,6 @@ 'use client' -import type { ClientCollectionConfig, DocumentPermissions, FormState } from 'payload' +import type { ClientCollectionConfig, DocumentPermissions } from 'payload' import { useRouter, useSearchParams } from 'next/navigation.js' import React, { useCallback } from 'react' @@ -49,7 +49,7 @@ export function EditForm({ submitted }: EditFormProps) { onSave: onSaveFromContext, } = useDocumentInfo() - const { serverFunction } = useServerFunctions() + const { getFormState } = useServerFunctions() const { config: { @@ -116,20 +116,17 @@ export function EditForm({ submitted }: EditFormProps) { const onChange: NonNullable[0] = useCallback( async ({ formState: prevFormState }) => { const docPreferences = await getDocPreferences() - const { state: newFormState } = (await serverFunction({ - name: 'form-state', - args: { - collectionSlug, - docPreferences, - formState: prevFormState, - operation: 'create', - schemaPath, - }, - })) as { state: FormState } // TODO: remove this when strictNullChecks is enabled and the return type can be inferred + const { state: newFormState } = await getFormState({ + collectionSlug, + docPreferences, + formState: prevFormState, + operation: 'create', + schemaPath, + }) return newFormState }, - [collectionSlug, schemaPath, getDocPreferences, serverFunction], + [collectionSlug, schemaPath, getDocPreferences, getFormState], ) return ( diff --git a/packages/ui/src/elements/BulkUpload/FileSidebar/index.scss b/packages/ui/src/elements/BulkUpload/FileSidebar/index.scss index b17a358c90..f4147d1825 100644 --- a/packages/ui/src/elements/BulkUpload/FileSidebar/index.scss +++ b/packages/ui/src/elements/BulkUpload/FileSidebar/index.scss @@ -1,277 +1,279 @@ @import '../../../scss/styles.scss'; -.file-selections { - --file-gutter-h: calc(var(--gutter-h) / 4); - border-right: 1px solid var(--theme-border-color); - padding: 0; - display: flex; - flex-direction: column; - width: 300px; - overflow: auto; - max-height: 100%; - - &__header { - position: sticky; - top: 0; - margin-top: var(--base); - z-index: 1; - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - background: var(--theme-bg); - flex-wrap: wrap; - - p { - margin: 0; - } - } - - &__headerTopRow { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--base); - width: 100%; - padding-block: var(--base); - padding-inline: var(--file-gutter-h); - } - - &__header__text { +@layer payload-default { + .file-selections { + --file-gutter-h: calc(var(--gutter-h) / 4); + border-right: 1px solid var(--theme-border-color); + padding: 0; display: flex; flex-direction: column; - - .error-pill { - align-self: flex-start; - } - } - - &__filesContainer { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 4); - margin-top: calc(var(--base) / 2); - width: 100%; - padding-inline: var(--file-gutter-h); - - .shimmer-effect { - border-radius: var(--style-radius-m); - } - } - - &__fileRowContainer { - --rowPadding: calc(var(--base) / 4); - position: relative; - &:last-child { - margin-bottom: calc(var(--base) / 4); - } - } - - &__fileRow { - @include btn-reset; - display: flex; - padding: var(--rowPadding); - align-items: center; - gap: calc(var(--base) / 2); - border-radius: var(--style-radius-m); - max-width: 100%; - cursor: pointer; - width: 100%; - - &:hover { - background-color: var(--theme-elevation-100); - } - - .thumbnail { - width: base(1.2); - height: base(1.2); - flex-shrink: 0; - object-fit: cover; - border-radius: var(--style-radius-s); - } - - p { - margin: 0; - } - } - - &__fileDetails { - display: flex; - flex-direction: column; - min-width: 0; - } - - &__fileRowContainer--active { - .file-selections__fileRow { - background-color: var(--theme-elevation-100); - } - - .file-selections__remove { - .icon--x { - opacity: 1; - } - } - } - - &__fileRowContainer--error { - .file-selections__fileRow { - background-color: var(--theme-error-100); - } - - &.file-selections__fileRowContainer--active .file-selections__fileRow, - .file-selections__fileRow:hover { - background-color: var(--theme-error-200); - } - - .file-selections__remove--overlay:hover { - background-color: var(--theme-error-50); - - .icon--x { - opacity: 1; - } - } - } - - &__errorCount { - margin-left: auto; - position: absolute; - transform: translate(50%, -50%); - top: 0; - right: 0; - } - - &__fileName { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - &__fileSize { - font-size: calc(var(--base) / 2); - color: var(--theme-elvation-400); - flex-shrink: 0; - } - - &__remove { - @include btn-reset; - margin: 0; - margin-left: auto; - - .icon--x { - opacity: 0.75; - } - } - - &__remove--underlay { - pointer-events: none; - opacity: 0; - } - - &__remove--overlay { - position: absolute; - transform: translateY(-50%); - top: 50%; - bottom: 50%; - right: var(--rowPadding); - height: 20px; - border-radius: var(--style-radius-m); - cursor: pointer; - - &:hover { - background-color: var(--theme-elevation-200); - } - } - - &__header__actions { - display: flex; - gap: var(--base); - } - - &__toggler { - display: none; - margin: 0; - padding-block: 0; - } - - &__header__mobileDocActions { - display: none; - } - - &__animateWrapper { + width: 300px; overflow: auto; - } - - &__mobileBlur { - @include blur-bg; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0; - transition: opacity 100ms cubic-bezier(0, 0.2, 0.2, 1); - } - - &__showingFiles { - .file-selections__mobileBlur { - opacity: 1; - } - } - - @include mid-break { - --file-gutter-h: var(--gutter-h); - flex-direction: column-reverse; - width: 100%; - position: sticky; - bottom: 0; - flex-shrink: 0; - - &__showingFiles { - z-index: 2; - } - - &__filesContainer { - @include blur-bg; - } - - &__fileRowContainer { - z-index: 1; - } + max-height: 100%; &__header { - margin-top: 0; + position: sticky; + top: 0; + margin-top: var(--base); + z-index: 1; + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + background: var(--theme-bg); + flex-wrap: wrap; + + p { + margin: 0; + } } &__headerTopRow { - border-top: 1px solid var(--theme-border-color); - padding-block: calc(var(--base) * 0.8); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--base); + width: 100%; + padding-block: var(--base); + padding-inline: var(--file-gutter-h); } - &__header__mobileDocActions { - position: relative; + &__header__text { display: flex; - width: 100%; - padding-block: calc(var(--base) * 0.8); - padding-inline: var(--file-gutter-h); - border-top: 1px solid var(--theme-border-color); + flex-direction: column; - > div { - display: flex; - justify-content: flex-end; - width: 100%; - button { - flex: 0.5; + .error-pill { + align-self: flex-start; + } + } + + &__filesContainer { + display: flex; + flex-direction: column; + gap: calc(var(--base) / 4); + margin-top: calc(var(--base) / 2); + width: 100%; + padding-inline: var(--file-gutter-h); + + .shimmer-effect { + border-radius: var(--style-radius-m); + } + } + + &__fileRowContainer { + --rowPadding: calc(var(--base) / 4); + position: relative; + &:last-child { + margin-bottom: calc(var(--base) / 4); + } + } + + &__fileRow { + @include btn-reset; + display: flex; + padding: var(--rowPadding); + align-items: center; + gap: calc(var(--base) / 2); + border-radius: var(--style-radius-m); + max-width: 100%; + cursor: pointer; + width: 100%; + + &:hover { + background-color: var(--theme-elevation-100); + } + + .thumbnail { + width: base(1.2); + height: base(1.2); + flex-shrink: 0; + object-fit: cover; + border-radius: var(--style-radius-s); + } + + p { + margin: 0; + } + } + + &__fileDetails { + display: flex; + flex-direction: column; + min-width: 0; + } + + &__fileRowContainer--active { + .file-selections__fileRow { + background-color: var(--theme-elevation-100); + } + + .file-selections__remove { + .icon--x { + opacity: 1; } } } - &__toggler { - padding-right: 0; - display: block; + &__fileRowContainer--error { + .file-selections__fileRow { + background-color: var(--theme-error-100); + } + + &.file-selections__fileRowContainer--active .file-selections__fileRow, + .file-selections__fileRow:hover { + background-color: var(--theme-error-200); + } + + .file-selections__remove--overlay:hover { + background-color: var(--theme-error-50); + + .icon--x { + opacity: 1; + } + } } - .btn { + &__errorCount { + margin-left: auto; + position: absolute; + transform: translate(50%, -50%); + top: 0; + right: 0; + } + + &__fileName { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &__fileSize { + font-size: calc(var(--base) / 2); + color: var(--theme-elvation-400); + flex-shrink: 0; + } + + &__remove { + @include btn-reset; margin: 0; + margin-left: auto; + + .icon--x { + opacity: 0.75; + } + } + + &__remove--underlay { + pointer-events: none; + opacity: 0; + } + + &__remove--overlay { + position: absolute; + transform: translateY(-50%); + top: 50%; + bottom: 50%; + right: var(--rowPadding); + height: 20px; + border-radius: var(--style-radius-m); + cursor: pointer; + + &:hover { + background-color: var(--theme-elevation-200); + } + } + + &__header__actions { + display: flex; + gap: var(--base); + } + + &__toggler { + display: none; + margin: 0; + padding-block: 0; + } + + &__header__mobileDocActions { + display: none; + } + + &__animateWrapper { + overflow: auto; + } + + &__mobileBlur { + @include blur-bg; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 100ms cubic-bezier(0, 0.2, 0.2, 1); + } + + &__showingFiles { + .file-selections__mobileBlur { + opacity: 1; + } + } + + @include mid-break { + --file-gutter-h: var(--gutter-h); + flex-direction: column-reverse; + width: 100%; + position: sticky; + bottom: 0; + flex-shrink: 0; + + &__showingFiles { + z-index: 2; + } + + &__filesContainer { + @include blur-bg; + } + + &__fileRowContainer { + z-index: 1; + } + + &__header { + margin-top: 0; + } + + &__headerTopRow { + border-top: 1px solid var(--theme-border-color); + padding-block: calc(var(--base) * 0.8); + } + + &__header__mobileDocActions { + position: relative; + display: flex; + width: 100%; + padding-block: calc(var(--base) * 0.8); + padding-inline: var(--file-gutter-h); + border-top: 1px solid var(--theme-border-color); + + > div { + display: flex; + justify-content: flex-end; + width: 100%; + button { + flex: 0.5; + } + } + } + + &__toggler { + padding-right: 0; + display: block; + } + + .btn { + margin: 0; + } } } } diff --git a/packages/ui/src/elements/BulkUpload/FormsManager/index.tsx b/packages/ui/src/elements/BulkUpload/FormsManager/index.tsx index de5f7d1951..d14ab9376b 100644 --- a/packages/ui/src/elements/BulkUpload/FormsManager/index.tsx +++ b/packages/ui/src/elements/BulkUpload/FormsManager/index.tsx @@ -81,7 +81,7 @@ export function FormsManagerProvider({ children }: FormsManagerProps) { const { code } = useLocale() const { i18n, t } = useTranslation() - const { serverFunction } = useServerFunctions() + const { getFormState } = useServerFunctions() const [hasSubmitted, setHasSubmitted] = React.useState(false) const [docPermissions, setDocPermissions] = React.useState() @@ -155,22 +155,19 @@ export function FormsManagerProvider({ children }: FormsManagerProps) { } try { - const { state: formStateWithoutFiles } = (await serverFunction({ - name: 'form-state', - args: { - collectionSlug, - locale: code, - operation: 'create', - schemaPath: collectionSlug, - }, - })) as { state: FormState } // TODO: remove this when strictNullChecks is enabled and the return type can be inferred + const { state: formStateWithoutFiles } = await getFormState({ + collectionSlug, + locale: code, + operation: 'create', + schemaPath: collectionSlug, + }) initialStateRef.current = formStateWithoutFiles setHasInitializedState(true) - } catch (error) { + } catch (_err) { // swallow error } }, - [code, collectionSlug, serverFunction], + [code, collectionSlug, getFormState], ) const setActiveIndex: FormsManagerContext['setActiveIndex'] = React.useCallback( diff --git a/packages/ui/src/elements/BulkUpload/Header/index.scss b/packages/ui/src/elements/BulkUpload/Header/index.scss index 088a336fbe..6fe512d7de 100644 --- a/packages/ui/src/elements/BulkUpload/Header/index.scss +++ b/packages/ui/src/elements/BulkUpload/Header/index.scss @@ -1,12 +1,14 @@ -.bulk-upload--drawer-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: calc(var(--base) * 2.5) var(--gutter-h); - height: 48px; - border-bottom: 1px solid var(--theme-border-color); +@layer payload-default { + .bulk-upload--drawer-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: calc(var(--base) * 2.5) var(--gutter-h); + height: 48px; + border-bottom: 1px solid var(--theme-border-color); - h2 { - margin: 0; + h2 { + margin: 0; + } } } diff --git a/packages/ui/src/elements/Button/index.scss b/packages/ui/src/elements/Button/index.scss index ccaa749ade..e9fc454020 100644 --- a/packages/ui/src/elements/Button/index.scss +++ b/packages/ui/src/elements/Button/index.scss @@ -1,277 +1,279 @@ @import '../../scss/styles.scss'; -a.btn { - display: inline-block; -} +@layer payload-default { + a.btn { + display: inline-block; + } + + .btn--withPopup { + margin-block: 24px; + .btn { + margin: 0; + } + } -.btn--withPopup { - margin-block: 24px; .btn { - margin: 0; - } -} + // colors + &--style-primary { + --color: var(--theme-elevation-0); + --bg-color: var(--theme-elevation-800); + --box-shadow: none; + --hover-bg: var(--theme-elevation-600); + --hover-color: var(--color); -.btn { - // colors - &--style-primary { - --color: var(--theme-elevation-0); - --bg-color: var(--theme-elevation-800); - --box-shadow: none; - --hover-bg: var(--theme-elevation-600); - --hover-color: var(--color); + &.btn--disabled { + --bg-color: var(--theme-elevation-200); + --color: var(--theme-elevation-800); + --hover-bg: var(--bg-color); + --hover-color: var(--color); + } + } - &.btn--disabled { - --bg-color: var(--theme-elevation-200); + &--style-secondary { + --color: var(--theme-text); + --bg-color: transparent; + --box-shadow: inset 0 0 0 1px var(--theme-elevation-800); + --hover-color: var(--theme-elevation-600); + --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-400); + + &.btn--disabled { + --color: var(--theme-elevation-200); + --box-shadow: inset 0 0 0 1px var(--theme-elevation-200); + --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-200); + --hover-color: var(--color); + } + } + + &--style-pill { + --bg-color: var(--theme-elevation-150); --color: var(--theme-elevation-800); - --hover-bg: var(--bg-color); --hover-color: var(--color); + --hover-bg: var(--theme-elevation-100); + + &.btn--disabled { + --color: var(--theme-elevation-600); + --hover-bg: var(--bg-color); + --hover-color: var(--color); + } } } - &--style-secondary { - --color: var(--theme-text); - --bg-color: transparent; - --box-shadow: inset 0 0 0 1px var(--theme-elevation-800); - --hover-color: var(--theme-elevation-600); - --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-400); + .btn--withPopup { + .popup-button { + color: var(--color, inherit); + background-color: var(--bg-color); + box-shadow: var(--box-shadow); + border-radius: $style-radius-m; + border-left: 1px solid var(--theme-bg); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + align-items: center; - &.btn--disabled { - --color: var(--theme-elevation-200); - --box-shadow: inset 0 0 0 1px var(--theme-elevation-200); - --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-200); - --hover-color: var(--color); + &:hover, + &:focus-visible, + &:focus, + &:active { + background-color: var(--hover-bg); + color: var(--hover-color); + box-shadow: var(--hover-box-shadow); + } } } - &--style-pill { - --bg-color: var(--theme-elevation-150); - --color: var(--theme-elevation-800); - --hover-color: var(--color); - --hover-bg: var(--theme-elevation-100); - - &.btn--disabled { - --color: var(--theme-elevation-600); - --hover-bg: var(--bg-color); - --hover-color: var(--color); - } - } -} - -.btn--withPopup { - .popup-button { - color: var(--color, inherit); - background-color: var(--bg-color); - box-shadow: var(--box-shadow); - border-radius: $style-radius-m; - border-left: 1px solid var(--theme-bg); - border-top-left-radius: 0; - border-bottom-left-radius: 0; - align-items: center; - + .btn, + .btn--withPopup .btn { &:hover, &:focus-visible, &:focus, &:active { - background-color: var(--hover-bg); color: var(--hover-color); box-shadow: var(--hover-box-shadow); + background-color: var(--hover-bg); } } -} -.btn, -.btn--withPopup .btn { - &:hover, - &:focus-visible, - &:focus, - &:active { - color: var(--hover-color); - box-shadow: var(--hover-box-shadow); - background-color: var(--hover-bg); - } -} - -.btn--disabled, -.btn--disabled .btn { - cursor: not-allowed; -} - -.btn { - border-radius: $style-radius-s; - font-size: var(--base-body-size); - margin-block: base(1.2); - line-height: base(1.2); - border: 0; - cursor: pointer; - font-weight: normal; - text-decoration: none; - transition-property: border, color, box-shadow, background; - transition-duration: 100ms; - transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1); - - color: var(--color, inherit); - background-color: var(--bg-color, transparent); - box-shadow: var(--box-shadow, none); - - .icon { - @include color-svg(var(--color, currentColor)); - width: 100%; - height: 100%; + .btn--disabled, + .btn--disabled .btn { + cursor: not-allowed; } - &__content { - display: flex; - align-items: center; - justify-content: center; - } + .btn { + border-radius: $style-radius-s; + font-size: var(--base-body-size); + margin-block: base(1.2); + line-height: base(1.2); + border: 0; + cursor: pointer; + font-weight: normal; + text-decoration: none; + transition-property: border, color, box-shadow, background; + transition-duration: 100ms; + transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1); - &__icon { - width: base(1.2); - height: base(1.2); - display: flex; - align-items: center; - justify-content: center; - border: 1px solid; - border-radius: 100%; - padding: base(0.1); - color: inherit; + color: var(--color, inherit); + background-color: var(--bg-color, transparent); + box-shadow: var(--box-shadow, none); .icon { + @include color-svg(var(--color, currentColor)); width: 100%; height: 100%; } - &.btn--size-small { - padding: base(0.2); + &__content { + display: flex; + align-items: center; + justify-content: center; } - } - &--withPopup { - display: flex; - } + &__icon { + width: base(1.2); + height: base(1.2); + display: flex; + align-items: center; + justify-content: center; + border: 1px solid; + border-radius: 100%; + padding: base(0.1); + color: inherit; - &--has-tooltip { - position: relative; - } + .icon { + width: 100%; + height: 100%; + } - &--icon-style-without-border { - .btn__icon { - border: none; - } - } - - &--icon-style-none { - .btn__icon { - border: none; - } - } - - &--size-small { - padding: 0 base(0.4); - - &.btn--icon-position-left { - padding-inline-start: base(0.1); - padding-inline-end: base(0.4); - - .btn__content { - flex-direction: row-reverse; + &.btn--size-small { + padding: base(0.2); } } - &.btn--icon-position-right { - padding-inline-start: base(0.4); - padding-inline-end: base(0.1); + &--withPopup { + display: flex; } - } - &--size-medium { - padding: base(0.2) base(0.6); + &--has-tooltip { + position: relative; + } - &.btn--icon-position-left { - padding-inline-start: base(0.4); - padding-inline-end: base(0.6); - - .btn__content { - gap: base(0.2); - flex-direction: row-reverse; + &--icon-style-without-border { + .btn__icon { + border: none; } } - &.btn--icon-position-right { - padding-inline-start: base(0.6); - padding-inline-end: base(0.4); - - .btn__content { - gap: base(0.2); - } - } - } - - &--size-large { - padding: base(0.4) base(0.8); - - &.btn--icon-position-left { - padding-inline-start: base(0.6); - padding-inline-end: base(0.8); - - .btn__content { - gap: base(0.4); - flex-direction: row-reverse; + &--icon-style-none { + .btn__icon { + border: none; } } - &.btn--icon-position-right { - padding-inline-start: base(0.8); - padding-inline-end: base(0.6); + &--size-small { + padding: 0 base(0.4); + + &.btn--icon-position-left { + padding-inline-start: base(0.1); + padding-inline-end: base(0.4); + + .btn__content { + flex-direction: row-reverse; + } + } + + &.btn--icon-position-right { + padding-inline-start: base(0.4); + padding-inline-end: base(0.1); + } + } + + &--size-medium { + padding: base(0.2) base(0.6); + + &.btn--icon-position-left { + padding-inline-start: base(0.4); + padding-inline-end: base(0.6); + + .btn__content { + gap: base(0.2); + flex-direction: row-reverse; + } + } + + &.btn--icon-position-right { + padding-inline-start: base(0.6); + padding-inline-end: base(0.4); + + .btn__content { + gap: base(0.2); + } + } + } + + &--size-large { + padding: base(0.4) base(0.8); + + &.btn--icon-position-left { + padding-inline-start: base(0.6); + padding-inline-end: base(0.8); + + .btn__content { + gap: base(0.4); + flex-direction: row-reverse; + } + } + + &.btn--icon-position-right { + padding-inline-start: base(0.8); + padding-inline-end: base(0.6); + + .btn__content { + gap: base(0.4); + } + } + } + + &--withPopup .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &--style-icon-label, + &--style-icon-label.btn--icon-position-left, + &--style-icon-label.btn--icon-position-right { + padding: 0; + font-weight: 600; .btn__content { gap: base(0.4); } } - } - &--withPopup .btn { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - &--style-icon-label, - &--style-icon-label.btn--icon-position-left, - &--style-icon-label.btn--icon-position-right { - padding: 0; - font-weight: 600; - - .btn__content { - gap: base(0.4); - } - } - - &--style-none { - padding: 0; - } - - &:focus:not(:focus-visible) { - .btn__icon { - @include color-svg(var(--theme-elevation-800)); - background: var(--theme-elevation-150); + &--style-none { + padding: 0; } - outline: none; - } + &:focus:not(:focus-visible) { + .btn__icon { + @include color-svg(var(--theme-elevation-800)); + background: var(--theme-elevation-150); + } - &:active { - .btn__icon { - @include color-svg(var(--theme-elevation-0)); - background: var(--theme-elevation-700); + outline: none; } - } - &:focus-visible { - outline: var(--accessibility-outline); - outline-offset: var(--accessibility-outline-offset); - } + &:active { + .btn__icon { + @include color-svg(var(--theme-elevation-0)); + background: var(--theme-elevation-700); + } + } - &.btn--disabled { - cursor: not-allowed; + &:focus-visible { + outline: var(--accessibility-outline); + outline-offset: var(--accessibility-outline-offset); + } + + &.btn--disabled { + cursor: not-allowed; + } } } diff --git a/packages/ui/src/elements/Card/index.scss b/packages/ui/src/elements/Card/index.scss index bd24f6c4f2..a522961855 100644 --- a/packages/ui/src/elements/Card/index.scss +++ b/packages/ui/src/elements/Card/index.scss @@ -1,71 +1,73 @@ @import '../../scss/styles'; -.card { - background: var(--theme-elevation-50); - padding: base(0.8); - width: 100%; - min-height: base(4); - position: relative; - border-radius: var(--style-radius-m); - border: 1px solid var(--theme-border-color); - transition-property: border, box-shadow, background; - transition-duration: 100ms; - transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1); - display: flex; - justify-content: space-between; - align-self: start; - gap: base(0.8); - - &__title { - @extend %h5; - letter-spacing: 0; - font-weight: 600; - line-height: base(0.8); +@layer payload-default { + .card { + background: var(--theme-elevation-50); + padding: base(0.8); width: 100%; - margin: base(0.1) 0; - } - - &__actions { + min-height: base(4); position: relative; - z-index: 2; - display: inline-flex; - .btn { - margin: 0; - flex-shrink: 0; + border-radius: var(--style-radius-m); + border: 1px solid var(--theme-border-color); + transition-property: border, box-shadow, background; + transition-duration: 100ms; + transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1); + display: flex; + justify-content: space-between; + align-self: start; + gap: base(0.8); + + &__title { + @extend %h5; + letter-spacing: 0; + font-weight: 600; + line-height: base(0.8); + width: 100%; + margin: base(0.1) 0; } - .btn__icon { - border: 1px solid var(--theme-border-color); - transition-property: border, box-shadow, color, background; - transition-duration: 100ms; - transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1); + &__actions { + position: relative; + z-index: 2; + display: inline-flex; + .btn { + margin: 0; + flex-shrink: 0; + } - &:hover { - border: 1px solid var(--theme-elevation-500); - background-color: var(--theme-elevation-0); - color: currentColor; - @include shadow-sm; + .btn__icon { + border: 1px solid var(--theme-border-color); + transition-property: border, box-shadow, color, background; + transition-duration: 100ms; + transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1); + + &:hover { + border: 1px solid var(--theme-elevation-500); + background-color: var(--theme-elevation-0); + color: currentColor; + @include shadow-sm; + } } } - } - &--has-onclick { - cursor: pointer; + &--has-onclick { + cursor: pointer; - &:hover { - background: var(--theme-elevation-50); - border: 1px solid var(--theme-elevation-250); - box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.05); + &:hover { + background: var(--theme-elevation-50); + border: 1px solid var(--theme-elevation-250); + box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.05); + } + } + + &__click { + z-index: 1; + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; + margin: 0; } } - - &__click { - z-index: 1; - top: 0; - left: 0; - width: 100%; - height: 100%; - position: absolute; - margin: 0; - } } diff --git a/packages/ui/src/elements/CodeEditor/index.scss b/packages/ui/src/elements/CodeEditor/index.scss index 854d72635f..f6cb6c4266 100644 --- a/packages/ui/src/elements/CodeEditor/index.scss +++ b/packages/ui/src/elements/CodeEditor/index.scss @@ -1,21 +1,23 @@ @import '../../scss/styles'; -.code-editor { - direction: ltr; - @include formInput; - height: auto; - padding: 0; +@layer payload-default { + .code-editor { + direction: ltr; + @include formInput; + height: auto; + padding: 0; - .monaco-editor { - .view-overlays .current-line { - max-width: calc(100% - 14px); - border-width: 0px; - } - - &:focus-within { + .monaco-editor { .view-overlays .current-line { - border-right: 0; - border-width: 1px; + max-width: calc(100% - 14px); + border-width: 0px; + } + + &:focus-within { + .view-overlays .current-line { + border-right: 0; + border-width: 1px; + } } } } diff --git a/packages/ui/src/elements/Collapsible/index.scss b/packages/ui/src/elements/Collapsible/index.scss index d5d2e76bb8..d826c40824 100644 --- a/packages/ui/src/elements/Collapsible/index.scss +++ b/packages/ui/src/elements/Collapsible/index.scss @@ -1,158 +1,160 @@ @import '../../scss/styles.scss'; -.collapsible { - --toggle-pad-h: #{base(0.75)}; - --toggle-pad-v: #{base(0.6)}; +@layer payload-default { + .collapsible { + --toggle-pad-h: #{base(0.75)}; + --toggle-pad-v: #{base(0.6)}; - border-radius: $style-radius-m; + border-radius: $style-radius-m; - &__toggle-wrap { - position: relative; - padding: base(0.4) base(0.4) base(0.4) base(0.8); - display: flex; - align-items: center; - justify-content: space-between; - background: var(--theme-elevation-50); - line-height: base(1.2); - gap: base(0.2); - border-top-right-radius: $style-radius-m; - border-top-left-radius: $style-radius-m; - width: 100%; - - &:hover { - background: var(--theme-elevation-100); - } - - &:has(.collapsible__drag) { - padding-inline-start: base(0.4); - } - } - - &__drag { - display: flex; - opacity: 0.5; - top: var(--toggle-pad-v); - width: base(1.2); - height: base(1.2); - padding: base(0.1); - - icon { + &__toggle-wrap { + position: relative; + padding: base(0.4) base(0.4) base(0.4) base(0.8); + display: flex; + align-items: center; + justify-content: space-between; + background: var(--theme-elevation-50); + line-height: base(1.2); + gap: base(0.2); + border-top-right-radius: $style-radius-m; + border-top-left-radius: $style-radius-m; width: 100%; - height: 100%; - } - } - - &__toggle { - @extend %btn-reset; - @extend %body; - text-align: left; - cursor: pointer; - border-top-right-radius: $style-radius-m; - border-top-left-radius: $style-radius-m; - width: 100%; - height: 100%; - color: transparent; - position: absolute; - top: 0; - left: 0; - - span { - user-select: none; - } - } - - &--style-default { - border: 1px solid var(--theme-elevation-200); - &:hover { - border: 1px solid var(--theme-elevation-300); - } - - > .collapsible__toggle-wrap { - .row-label { - color: var(--theme-text); - } - } - } - - &--style-error { - border: 1px solid var(--theme-error-400); - > .collapsible__toggle-wrap { - background-color: var(--theme-error-100); &:hover { - background: var(--theme-error-150); + background: var(--theme-elevation-100); } - .row-label { - color: var(--theme-error-950); + &:has(.collapsible__drag) { + padding-inline-start: base(0.4); } } - } - &__header-wrap { - top: 0; - right: base(3); - bottom: 0; - left: 0; - pointer-events: none; - width: 100%; - overflow: hidden; - max-width: 100%; - } - - &__header-wrap--has-drag-handle { - left: base(1); - } - - &--collapsed { - .collapsible__toggle-wrap { - border-bottom-right-radius: $style-radius-m; - border-bottom-left-radius: $style-radius-m; - } - } - - &__actions-wrap { - pointer-events: none; - display: flex; - gap: base(0.2); - margin-inline-end: base(0.2); - } - - &__actions { - pointer-events: all; - display: flex; - align-items: center; - justify-content: center; - width: base(1.2); - height: base(1.2); - - &.icon { + &__drag { + display: flex; + opacity: 0.5; + top: var(--toggle-pad-v); + width: base(1.2); + height: base(1.2); padding: base(0.1); + + icon { + width: 100%; + height: 100%; + } } - } - &__indicator { - display: flex; - align-items: center; - justify-content: center; - width: base(1.2); - height: base(1.2); + &__toggle { + @extend %btn-reset; + @extend %body; + text-align: left; + cursor: pointer; + border-top-right-radius: $style-radius-m; + border-top-left-radius: $style-radius-m; + width: 100%; + height: 100%; + color: transparent; + position: absolute; + top: 0; + left: 0; - &.icon { - padding: base(0.1); + span { + user-select: none; + } } - } - &__content { - background-color: var(--theme-elevation-0); - border-bottom-left-radius: $style-radius-m; - border-bottom-right-radius: $style-radius-m; - padding: var(--base); - } + &--style-default { + border: 1px solid var(--theme-elevation-200); + &:hover { + border: 1px solid var(--theme-elevation-300); + } + + > .collapsible__toggle-wrap { + .row-label { + color: var(--theme-text); + } + } + } + + &--style-error { + border: 1px solid var(--theme-error-400); + > .collapsible__toggle-wrap { + background-color: var(--theme-error-100); + + &:hover { + background: var(--theme-error-150); + } + + .row-label { + color: var(--theme-error-950); + } + } + } + + &__header-wrap { + top: 0; + right: base(3); + bottom: 0; + left: 0; + pointer-events: none; + width: 100%; + overflow: hidden; + max-width: 100%; + } + + &__header-wrap--has-drag-handle { + left: base(1); + } + + &--collapsed { + .collapsible__toggle-wrap { + border-bottom-right-radius: $style-radius-m; + border-bottom-left-radius: $style-radius-m; + } + } + + &__actions-wrap { + pointer-events: none; + display: flex; + gap: base(0.2); + margin-inline-end: base(0.2); + } + + &__actions { + pointer-events: all; + display: flex; + align-items: center; + justify-content: center; + width: base(1.2); + height: base(1.2); + + &.icon { + padding: base(0.1); + } + } + + &__indicator { + display: flex; + align-items: center; + justify-content: center; + width: base(1.2); + height: base(1.2); + + &.icon { + padding: base(0.1); + } + } - @include small-break { &__content { - padding: var(--gutter-h); + background-color: var(--theme-elevation-0); + border-bottom-left-radius: $style-radius-m; + border-bottom-right-radius: $style-radius-m; + padding: var(--base); + } + + @include small-break { + &__content { + padding: var(--gutter-h); + } } } } diff --git a/packages/ui/src/elements/ColumnSelector/index.scss b/packages/ui/src/elements/ColumnSelector/index.scss index deb0e9619b..a194d629e5 100644 --- a/packages/ui/src/elements/ColumnSelector/index.scss +++ b/packages/ui/src/elements/ColumnSelector/index.scss @@ -1,46 +1,48 @@ @import '../../scss/styles.scss'; -.column-selector { - display: flex; - flex-wrap: wrap; - background: var(--theme-elevation-50); - padding: base(1) base(1) base(0.5); +@layer payload-default { + .column-selector { + display: flex; + flex-wrap: wrap; + background: var(--theme-elevation-50); + padding: base(1) base(1) base(0.5); - &__column { - margin-right: base(0.5); - margin-bottom: base(0.5); - background-color: transparent; - box-shadow: 0 0 0 1px var(--theme-elevation-150); + &__column { + margin-right: base(0.5); + margin-bottom: base(0.5); + background-color: transparent; + box-shadow: 0 0 0 1px var(--theme-elevation-150); - &.column-selector__column { - cursor: pointer; + &.column-selector__column { + cursor: pointer; - &:hover { - background-color: var(--theme-elevation-100); + &:hover { + background-color: var(--theme-elevation-100); + } } - } - &.column-selector__column--active { - background-color: var(--theme-elevation-0); - box-shadow: - 0 0px 1px 1px var(--theme-elevation-150), - 0 2px 4px -2px rgba(0, 0, 0, 0.1); - - &:hover { + &.column-selector__column--active { background-color: var(--theme-elevation-0); box-shadow: - 0 0px 1px 1px var(--theme-elevation-250), - 0 3px 4px -1px rgba(0, 0, 0, 0.1); + 0 0px 1px 1px var(--theme-elevation-150), + 0 2px 4px -2px rgba(0, 0, 0, 0.1); + + &:hover { + background-color: var(--theme-elevation-0); + box-shadow: + 0 0px 1px 1px var(--theme-elevation-250), + 0 3px 4px -1px rgba(0, 0, 0, 0.1); + } } } - } - // TODO: delete this once all icons have been migrated to viewbox edge-to-edge - .pill__icon { - padding: 0; - } + // TODO: delete this once all icons have been migrated to viewbox edge-to-edge + .pill__icon { + padding: 0; + } - @include small-break { - padding: calc(var(--base) / 2) calc(var(--base) / 2) 0; + @include small-break { + padding: calc(var(--base) / 2) calc(var(--base) / 2) 0; + } } } diff --git a/packages/ui/src/elements/CopyToClipboard/index.scss b/packages/ui/src/elements/CopyToClipboard/index.scss index b4a24f13a6..439a6b565d 100644 --- a/packages/ui/src/elements/CopyToClipboard/index.scss +++ b/packages/ui/src/elements/CopyToClipboard/index.scss @@ -1,26 +1,28 @@ @import '../../scss/styles.scss'; -.copy-to-clipboard { - @extend %btn-reset; - position: relative; - cursor: pointer; - vertical-align: middle; - border-radius: 100%; +@layer payload-default { + .copy-to-clipboard { + @extend %btn-reset; + position: relative; + cursor: pointer; + vertical-align: middle; + border-radius: 100%; - textarea { - position: absolute; - opacity: 0; - z-index: -1; - height: 0px; - width: 0px; - } + textarea { + position: absolute; + opacity: 0; + z-index: -1; + height: 0px; + width: 0px; + } - &:focus, - &:active { - outline: none; - } + &:focus, + &:active { + outline: none; + } - &:focus-visible { - outline: var(--accessibility-outline); + &:focus-visible { + outline: var(--accessibility-outline); + } } } diff --git a/packages/ui/src/elements/DatePicker/index.scss b/packages/ui/src/elements/DatePicker/index.scss index 4174567616..a3dd2d90b0 100644 --- a/packages/ui/src/elements/DatePicker/index.scss +++ b/packages/ui/src/elements/DatePicker/index.scss @@ -2,386 +2,388 @@ $cal-icon-width: 18px; -[dir='rtl'] { - .date-time-picker { - .react-datepicker__input-container input { - padding-right: base(3.4); +@layer payload-default { + [dir='rtl'] { + .date-time-picker { + .react-datepicker__input-container input { + padding-right: base(3.4); + } } } -} -.date-time-picker { - .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box, - .react-datepicker__time-container { - width: 120px; - } + .date-time-picker { + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box, + .react-datepicker__time-container { + width: 120px; + } - &__icon-wrap { - position: relative; - z-index: 1; - } + &__icon-wrap { + position: relative; + z-index: 1; + } - .icon--calendar, - &__clear-button { - position: absolute; - } + .icon--calendar, + &__clear-button { + position: absolute; + } - .icon--calendar, - .icon--x { - @include color-svg(var(--theme-elevation-800)); - height: auto; - } + .icon--calendar, + .icon--x { + @include color-svg(var(--theme-elevation-800)); + height: auto; + } - &__clear-button { - top: base(0.5); - right: base(2); - } + &__clear-button { + top: base(0.5); + right: base(2); + } - .icon--calendar { - top: base(0.625); - right: base(0.75); - width: $cal-icon-width; - pointer-events: none; - } + .icon--calendar { + top: base(0.625); + right: base(0.75); + width: $cal-icon-width; + pointer-events: none; + } - .icon--x { - width: base(1); - } + .icon--x { + width: base(1); + } - &__clear-button { - appearance: none; - background-color: transparent; - border: none; - outline: none; - padding: 0; - cursor: pointer; - } + &__clear-button { + appearance: none; + background-color: transparent; + border: none; + outline: none; + padding: 0; + cursor: pointer; + } - &__appearance--timeOnly { - .react-datepicker { - width: 100%; + &__appearance--timeOnly { + .react-datepicker { + width: 100%; - &__month-container, - &__navigation--previous, - &__navigation--next { - display: none; - visibility: hidden; - } + &__month-container, + &__navigation--previous, + &__navigation--next { + display: none; + visibility: hidden; + } - &-popper, - &__time-container, - &__time-box { - width: base(6); - } + &-popper, + &__time-container, + &__time-box { + width: base(6); + } - &__time-container { - .react-datepicker__time { - .react-datepicker__time-box { - width: 100%; + &__time-container { + .react-datepicker__time { + .react-datepicker__time-box { + width: 100%; + } } } } } - } - .react-datepicker-wrapper { - display: block; - } + .react-datepicker-wrapper { + display: block; + } - .react-datepicker-wrapper, - .react-datepicker__input-container { - width: 100%; - } + .react-datepicker-wrapper, + .react-datepicker__input-container { + width: 100%; + } - .react-datepicker__input-container input { - @include formInput; - padding-right: calc(#{base(0.75)} + #{$cal-icon-width}); - } - - &--has-error { .react-datepicker__input-container input { - background-color: var(--theme-error-200); + @include formInput; + padding-right: calc(#{base(0.75)} + #{$cal-icon-width}); } - } - .react-datepicker { - @include shadow-lg; - border: 1px solid var(--theme-elevation-100); - background: var(--theme-input-bg); - display: inline-flex; - font-family: var(--font-body); - font-weight: 100; - border-radius: 0; - color: var(--theme-elevation-800); + &--has-error { + .react-datepicker__input-container input { + background-color: var(--theme-error-200); + } + } - &__header { - padding-top: 0; - text-transform: none; - text-align: center; + .react-datepicker { + @include shadow-lg; + border: 1px solid var(--theme-elevation-100); + background: var(--theme-input-bg); + display: inline-flex; + font-family: var(--font-body); + font-weight: 100; border-radius: 0; - border: none; - background-color: var(--theme-input-bg); + color: var(--theme-elevation-800); - &--time { + &__header { + padding-top: 0; + text-transform: none; + text-align: center; + border-radius: 0; + border: none; + background-color: var(--theme-input-bg); + + &--time { + padding: 10px 0; + border-bottom: 1px solid var(--theme-elevation-150); + font-weight: 600; + } + } + + &__navigation { + background: none; + line-height: 1.7rem; + text-align: center; + cursor: pointer; + position: absolute; + top: 10px; + width: 0; + padding: 0; + border: 0.45rem solid transparent; + z-index: 1; + height: 10px; + width: 10px; + text-indent: -999em; + overflow: hidden; + top: 15px; + + &--next { + border-left-color: var(--theme-elevation-400); + + &:focus { + border-left-color: var(--theme-elevation-500); + outline: none; + } + } + + &--previous { + border-right-color: var(--theme-elevation-400); + + &:focus { + 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 { + display: none; + } + + &__header__dropdown, + &-year-header { padding: 10px 0; - border-bottom: 1px solid var(--theme-elevation-150); - font-weight: 600; - } - } - - &__navigation { - background: none; - line-height: 1.7rem; - text-align: center; - cursor: pointer; - position: absolute; - top: 10px; - width: 0; - padding: 0; - border: 0.45rem solid transparent; - z-index: 1; - height: 10px; - width: 10px; - text-indent: -999em; - overflow: hidden; - top: 15px; - - &--next { - border-left-color: var(--theme-elevation-400); - - &:focus { - border-left-color: var(--theme-elevation-500); - outline: none; - } - } - - &--previous { - border-right-color: var(--theme-elevation-400); - - &:focus { - 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 { - display: none; - } - - &__header__dropdown, - &-year-header { - padding: 10px 0; - font-weight: bold; - } - - &__month-container { - border-right: 1px solid var(--theme-elevation-150); - } - - &__time, - &__time-container, - .react-datepicker__time-container .react-datepicker__time { - background: none; - } - - &__time-container { - border-left: none; - } - - &__month-text { - padding: base(0.3); - margin: base(0.15); - font-size: base(0.55); - &:hover { - background: var(--theme-elevation-100); - } - } - - &__month-select, - &__year-select { - min-width: 70px; - border: none; - background: none; - outline: none; - cursor: pointer; - - option { - background-color: var(--theme-elevation-50); - } - } - - &__day-names { - background-color: var(--theme-elevation-100); - } - - &__day { - box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-150); - font-size: base(0.55); - - &:hover { - background: var(--theme-elevation-100); - } - - &:focus { - outline: 0; - background: var(--theme-elevation-400); - } - - &--selected { - font-weight: bold; - - &:focus { - background-color: var(--theme-elevation-150); - } - } - - &--keyboard-selected { - color: var(--theme-elevation-0); - font-weight: bold; - - &:focus { - 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: bold; } - } - &__day, - &__day-name { - width: base(1.5); - margin: base(0.15); - line-height: base(1.25); - } - } - - .react-datepicker-popper { - z-index: 10; - border: none; - } - - .react-datepicker__time-container - .react-datepicker__time - .react-datepicker__time-box - ul.react-datepicker__time-list { - max-height: 100%; - } - - .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: 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: none; - background-color: var(--theme-elevation-150); - color: var(--theme-elevation-800); - font-weight: bold; - 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:hover { - background: var(--theme-elevation-100); - } - - .react-datepicker__day:hover, - .react-datepicker__month-text:hover { - border-radius: 0; - } - - .react-datepicker__navigation--next--with-time:not( - .react-datepicker__navigation--next--with-today-button - ) { - right: 130px; - } - - .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(0.5); - } - - &__appearance--dayOnly, - &__appearance--monthOnly { - .react-datepicker { &__month-container { - border-right: none; + border-right: 1px solid var(--theme-elevation-150); } - } - } - @include small-break { - .react-datepicker { - flex-direction: column; - } - .react-datepicker__month-container { - border-right: 0; - } - .react-datepicker__time-container { - width: auto; - } - .react-datepicker__header--time { - background-color: var(--theme-elevation-100); - padding: 8px 0; - border-bottom: none; - } - .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box { - height: 120px; - width: unset; - > ul { - height: 120px; + &__time, + &__time-container, + .react-datepicker__time-container .react-datepicker__time { + background: none; + } + + &__time-container { + border-left: none; + } + + &__month-text { + padding: base(0.3); + margin: base(0.15); + font-size: base(0.55); + &:hover { + background: var(--theme-elevation-100); + } + } + + &__month-select, + &__year-select { + min-width: 70px; + border: none; + background: none; + outline: none; + cursor: pointer; + + option { + background-color: var(--theme-elevation-50); + } + } + + &__day-names { + background-color: var(--theme-elevation-100); + } + + &__day { + box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-150); + font-size: base(0.55); + + &:hover { + background: var(--theme-elevation-100); + } + + &:focus { + outline: 0; + background: var(--theme-elevation-400); + } + + &--selected { + font-weight: bold; + + &:focus { + background-color: var(--theme-elevation-150); + } + } + + &--keyboard-selected { + color: var(--theme-elevation-0); + font-weight: bold; + + &:focus { + 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: bold; + } + } + + &__day, + &__day-name { + width: base(1.5); + margin: base(0.15); + line-height: base(1.25); } } + + .react-datepicker-popper { + z-index: 10; + border: none; + } + + .react-datepicker__time-container + .react-datepicker__time + .react-datepicker__time-box + ul.react-datepicker__time-list { + max-height: 100%; + } + + .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: 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: none; + background-color: var(--theme-elevation-150); + color: var(--theme-elevation-800); + font-weight: bold; + 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:hover { + background: var(--theme-elevation-100); + } + + .react-datepicker__day:hover, + .react-datepicker__month-text:hover { + border-radius: 0; + } + .react-datepicker__navigation--next--with-time:not( .react-datepicker__navigation--next--with-today-button ) { - right: 0px; + right: 130px; } - &__input-wrapper { - .icon { - top: calc(50% - #{base(0.25)}); + + .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(0.5); + } + + &__appearance--dayOnly, + &__appearance--monthOnly { + .react-datepicker { + &__month-container { + border-right: none; + } + } + } + + @include small-break { + .react-datepicker { + flex-direction: column; + } + .react-datepicker__month-container { + border-right: 0; + } + .react-datepicker__time-container { + width: auto; + } + .react-datepicker__header--time { + background-color: var(--theme-elevation-100); + padding: 8px 0; + border-bottom: none; + } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box { + height: 120px; + width: unset; + > ul { + height: 120px; + } + } + .react-datepicker__navigation--next--with-time:not( + .react-datepicker__navigation--next--with-today-button + ) { + right: 0px; + } + &__input-wrapper { + .icon { + top: calc(50% - #{base(0.25)}); + } } } } diff --git a/packages/ui/src/elements/DeleteDocument/index.scss b/packages/ui/src/elements/DeleteDocument/index.scss index 8458f5305b..621028b2bb 100644 --- a/packages/ui/src/elements/DeleteDocument/index.scss +++ b/packages/ui/src/elements/DeleteDocument/index.scss @@ -1,42 +1,44 @@ @import '../../scss/styles.scss'; -.delete-document { - @include blur-bg; - display: flex; - align-items: center; - justify-content: center; - height: 100%; - - &__toggle { - @extend %btn-reset; - } - - &__wrapper { - z-index: 1; - position: relative; +@layer payload-default { + .delete-document { + @include blur-bg; display: flex; - flex-direction: column; - gap: base(0.8); - padding: base(2); - max-width: base(36); - } + align-items: center; + justify-content: center; + height: 100%; - &__content { - display: flex; - flex-direction: column; - gap: base(0.4); - - > * { - margin: 0; + &__toggle { + @extend %btn-reset; } - } - &__controls { - display: flex; - gap: base(0.4); + &__wrapper { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + gap: base(0.8); + padding: base(2); + max-width: base(36); + } - .btn { - margin: 0; + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); + + > * { + margin: 0; + } + } + + &__controls { + display: flex; + gap: base(0.4); + + .btn { + margin: 0; + } } } } diff --git a/packages/ui/src/elements/DeleteMany/index.scss b/packages/ui/src/elements/DeleteMany/index.scss index c7c9272784..2dbdd1c517 100644 --- a/packages/ui/src/elements/DeleteMany/index.scss +++ b/packages/ui/src/elements/DeleteMany/index.scss @@ -1,38 +1,40 @@ @import '../../scss/styles.scss'; -.delete-documents { - @include blur-bg; - display: flex; - align-items: center; - justify-content: center; - height: 100%; - - &__wrapper { - z-index: 1; - position: relative; +@layer payload-default { + .delete-documents { + @include blur-bg; display: flex; - flex-direction: column; - gap: base(0.8); - padding: base(2); - max-width: base(36); - } + align-items: center; + justify-content: center; + height: 100%; - &__content { - display: flex; - flex-direction: column; - gap: base(0.4); - - > * { - margin: 0; + &__wrapper { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + gap: base(0.8); + padding: base(2); + max-width: base(36); } - } - &__controls { - display: flex; - gap: base(0.4); + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); - .btn { - margin: 0; + > * { + margin: 0; + } + } + + &__controls { + display: flex; + gap: base(0.4); + + .btn { + margin: 0; + } } } } diff --git a/packages/ui/src/elements/DocumentControls/index.scss b/packages/ui/src/elements/DocumentControls/index.scss index 4e7ae3833b..3794d92246 100644 --- a/packages/ui/src/elements/DocumentControls/index.scss +++ b/packages/ui/src/elements/DocumentControls/index.scss @@ -1,237 +1,239 @@ @import '../../scss/styles.scss'; -.doc-controls { - @include blur-bg-light; - position: sticky; - top: 0; - width: 100%; - z-index: 5; - display: flex; - align-items: center; - - &__divider { - content: ''; - display: block; - position: absolute; - height: 1px; - background: var(--theme-elevation-100); +@layer payload-default { + .doc-controls { + @include blur-bg-light; + position: sticky; + top: 0; width: 100%; - left: 0; - top: 100%; - } - - &__wrapper { - position: relative; - width: 100%; - display: flex; - align-items: space-between; - gap: var(--base); - padding-bottom: 1px; - z-index: 4; - height: var(--doc-controls-height); - } - - &__content { + z-index: 5; display: flex; align-items: center; - flex-grow: 1; - overflow: hidden; - padding: base(0.8) 0; - } - &__meta { - flex-grow: 1; - display: flex; - list-style: none; - padding: 0; - gap: var(--base); - margin: 0; - width: 100%; - - & button { - margin: 0; + &__divider { + content: ''; + display: block; + position: absolute; + height: 1px; + background: var(--theme-elevation-100); + width: 100%; + left: 0; + top: 100%; } - } - - &__locked-controls.locked { - position: unset; - - .tooltip { - top: calc(var(--base) * -0.5); - } - } - - &__list-item { - display: flex; - align-items: center; - margin: 0; - } - - &__value-wrap { - overflow: hidden; - } - - &__value { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - margin: 0; - font-weight: 600; - line-height: base(1.2); - } - - &__label { - color: var(--theme-elevation-500); - white-space: nowrap; - margin: 0; - } - - &__controls-wrapper { - --controls-gap: calc(var(--base) / 2); - --dot-button-width: calc(var(--base) * 2); - display: flex; - align-items: center; - margin: 0; - gap: var(--controls-gap); - position: relative; - } - - &__controls { - display: flex; - align-items: center; - margin: 0; - gap: calc(var(--base) / 2); - - button { - margin: 0; - white-space: nowrap; - } - } - - &__dots { - margin: 0; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - gap: 2px; - border: 1px solid var(--theme-elevation-100); - border-radius: $style-radius-m; - height: calc(var(--base) * 1.6); - width: calc(var(--base) * 1.6); - - &:hover { - border: 1px solid var(--theme-elevation-500); - background-color: var(--theme-elevation-100); - } - - > div { - width: 3px; - height: 3px; - border-radius: 100%; - background-color: currentColor; - } - } - - &__popup { - position: relative; - } - - .popup--active { - .doc-controls { - &__dots { - border: 1px solid var(--theme-elevation-500); - background-color: var(--theme-elevation-100); - } - } - } - - .popup__trigger-wrap { - display: flex; - } - - @include mid-break { - // On mobile, only stick the controls to the top - // The timestamps and meta can scroll past - // The same container needs to the sticky, though - // So we use a static height with a negative top equal to the meta height plus top padding - top: base(-2.8); - padding-right: 0; - padding-left: 0; &__wrapper { - flex-direction: column; - gap: 0; - height: unset; + position: relative; + width: 100%; + display: flex; + align-items: space-between; + gap: var(--base); + padding-bottom: 1px; + z-index: 4; + height: var(--doc-controls-height); } &__content { - width: 100%; - overflow: auto; - padding-inline: base(2); - // this container has a fixed height - // this means the scrollbar (when present) overlaps the content - &::-webkit-scrollbar { - display: none; - } + display: flex; + align-items: center; + flex-grow: 1; + overflow: hidden; + padding: base(0.8) 0; } &__meta { - width: auto; - gap: calc(var(--base) / 2); + flex-grow: 1; + display: flex; + list-style: none; + padding: 0; + gap: var(--base); + margin: 0; + width: 100%; - &::after { - content: ''; - display: block; - position: absolute; - right: 0; - width: base(0.8); - height: var(--base); - background: linear-gradient(to right, transparent, var(--theme-bg)); - flex-shrink: 0; - z-index: 1111; - pointer-events: none; + & button { + margin: 0; } } + &__locked-controls.locked { + position: unset; + + .tooltip { + top: calc(var(--base) * -0.5); + } + } + + &__list-item { + display: flex; + align-items: center; + margin: 0; + } + + &__value-wrap { + overflow: hidden; + } + + &__value { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin: 0; + font-weight: 600; + line-height: base(1.2); + } + + &__label { + color: var(--theme-elevation-500); + white-space: nowrap; + margin: 0; + } + &__controls-wrapper { - background-color: var(--theme-bg); - width: 100%; - transform: translate3d(0, 0, 0); - padding-right: var(--gutter-h); - justify-content: space-between; - height: var(--doc-controls-height); - border-top: 1px solid var(--theme-elevation-100); + --controls-gap: calc(var(--base) / 2); + --dot-button-width: calc(var(--base) * 2); + display: flex; + align-items: center; + margin: 0; + gap: var(--controls-gap); + position: relative; } &__controls { - padding-left: var(--gutter-h); - overflow: auto; + display: flex; + align-items: center; + margin: 0; + gap: calc(var(--base) / 2); - // do not show scrollbar because the parent container has a static height - // this container has a gradient overlay as visual indication of `overflow: scroll` - &::-webkit-scrollbar { - display: none; - } - - &::after { - content: ''; - display: block; - position: sticky; - right: 0; - width: calc(var(--base) * 2); - height: calc(var(--base) * 1.5); - background: linear-gradient(to right, transparent, var(--theme-bg)); - flex-shrink: 0; - z-index: 1111; - pointer-events: none; + button { + margin: 0; + white-space: nowrap; } } - } - @include small-break { - &__content { - padding-inline: base(0.8); + &__dots { + margin: 0; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 2px; + border: 1px solid var(--theme-elevation-100); + border-radius: $style-radius-m; + height: calc(var(--base) * 1.6); + width: calc(var(--base) * 1.6); + + &:hover { + border: 1px solid var(--theme-elevation-500); + background-color: var(--theme-elevation-100); + } + + > div { + width: 3px; + height: 3px; + border-radius: 100%; + background-color: currentColor; + } + } + + &__popup { + position: relative; + } + + .popup--active { + .doc-controls { + &__dots { + border: 1px solid var(--theme-elevation-500); + background-color: var(--theme-elevation-100); + } + } + } + + .popup__trigger-wrap { + display: flex; + } + + @include mid-break { + // On mobile, only stick the controls to the top + // The timestamps and meta can scroll past + // The same container needs to the sticky, though + // So we use a static height with a negative top equal to the meta height plus top padding + top: base(-2.8); + padding-right: 0; + padding-left: 0; + + &__wrapper { + flex-direction: column; + gap: 0; + height: unset; + } + + &__content { + width: 100%; + overflow: auto; + padding-inline: base(2); + // this container has a fixed height + // this means the scrollbar (when present) overlaps the content + &::-webkit-scrollbar { + display: none; + } + } + + &__meta { + width: auto; + gap: calc(var(--base) / 2); + + &::after { + content: ''; + display: block; + position: absolute; + right: 0; + width: base(0.8); + height: var(--base); + background: linear-gradient(to right, transparent, var(--theme-bg)); + flex-shrink: 0; + z-index: 1111; + pointer-events: none; + } + } + + &__controls-wrapper { + background-color: var(--theme-bg); + width: 100%; + transform: translate3d(0, 0, 0); + padding-right: var(--gutter-h); + justify-content: space-between; + height: var(--doc-controls-height); + border-top: 1px solid var(--theme-elevation-100); + } + + &__controls { + padding-left: var(--gutter-h); + overflow: auto; + + // do not show scrollbar because the parent container has a static height + // this container has a gradient overlay as visual indication of `overflow: scroll` + &::-webkit-scrollbar { + display: none; + } + + &::after { + content: ''; + display: block; + position: sticky; + right: 0; + width: calc(var(--base) * 2); + height: calc(var(--base) * 1.5); + background: linear-gradient(to right, transparent, var(--theme-bg)); + flex-shrink: 0; + z-index: 1111; + pointer-events: none; + } + } + } + + @include small-break { + &__content { + padding-inline: base(0.8); + } } } } diff --git a/packages/ui/src/elements/DocumentControls/index.tsx b/packages/ui/src/elements/DocumentControls/index.tsx index 7552c97641..78b5871c4c 100644 --- a/packages/ui/src/elements/DocumentControls/index.tsx +++ b/packages/ui/src/elements/DocumentControls/index.tsx @@ -250,7 +250,7 @@ export const DocumentControls: React.FC<{ )} )} - {!collectionConfig.disableDuplicate && isEditing && ( + {collectionConfig.disableDuplicate !== true && isEditing && ( .tabs-field, - & > .group-field { - margin-right: calc(var(--base) * -2); + [dir='rtl'] & { + top: 0; + left: 0; + border-left: 1px solid var(--theme-elevation-100); + padding-left: calc(var(--base) * 2); + } + } + + &__fields { + & > .tabs-field, + & > .group-field { + margin-right: calc(var(--base) * -2); + } } } } - } - &__main { - width: 100%; - display: flex; - flex-direction: column; - min-height: 100%; - flex-grow: 1; - } + &__main { + width: 100%; + display: flex; + flex-direction: column; + min-height: 100%; + flex-grow: 1; + } - &__edit { - padding-top: calc(var(--base) * 1.5); - padding-bottom: var(--spacing-view-bottom); - flex-grow: 1; - } + &__edit { + padding-top: calc(var(--base) * 1.5); + padding-bottom: var(--spacing-view-bottom); + flex-grow: 1; + } - &__sidebar-wrap { - position: sticky; - top: var(--doc-controls-height); - width: 33.33%; - height: calc(100vh - var(--doc-controls-height)); - min-width: var(--doc-sidebar-width); - flex-shrink: 0; - } + &__sidebar-wrap { + position: sticky; + top: var(--doc-controls-height); + width: 33.33%; + height: calc(100vh - var(--doc-controls-height)); + min-width: var(--doc-sidebar-width); + flex-shrink: 0; + } - &__sidebar { - width: 100%; - height: 100%; - overflow-y: auto; - display: flex; - flex-direction: column; - min-height: 100%; - } + &__sidebar { + width: 100%; + height: 100%; + overflow-y: auto; + display: flex; + flex-direction: column; + min-height: 100%; + } - &__sidebar-fields { - display: flex; - flex-direction: column; - gap: var(--base); - padding-top: calc(var(--base) * 1.5); - padding-left: calc(var(--base) * 2); - padding-right: var(--gutter-h); - padding-bottom: var(--spacing-view-bottom); - } + &__sidebar-fields { + display: flex; + flex-direction: column; + gap: var(--base); + padding-top: calc(var(--base) * 1.5); + padding-left: calc(var(--base) * 2); + padding-right: var(--gutter-h); + padding-bottom: var(--spacing-view-bottom); + } - &__label { - color: var(--theme-elevation-400); - } + &__label { + color: var(--theme-elevation-400); + } - &--force-sidebar-wrap { - display: block; + &--force-sidebar-wrap { + display: block; + + .document-fields { + &__main { + width: 100%; + min-height: initial; + } + + &__sidebar-wrap { + position: static; + width: 100%; + height: initial; + border-left: 0; + } + + &__sidebar { + padding-bottom: base(3.5); + overflow: visible; + } + + &__sidebar-fields { + padding-top: 0; + padding-left: var(--gutter-h); + padding-bottom: 0; + } + } + } + + @include mid-break { + display: block; + + &--has-sidebar { + .document-fields { + &__main { + width: 100%; + } + + &__edit { + [dir='ltr'] & { + border-right: 0; + padding-right: var(--gutter-h); + } + + [dir='rtl'] & { + border-left: 0; + padding-left: var(--gutter-h); + } + } + + &__fields { + & > .tabs-field, + & > .group-field { + margin-right: calc(var(--gutter-h) * -1); + } + } + } + } - .document-fields { &__main { width: 100%; min-height: initial; @@ -98,95 +154,41 @@ border-left: 0; } - &__sidebar { - padding-bottom: base(3.5); - overflow: visible; + &__form { + display: block; } &__sidebar-fields { padding-top: 0; padding-left: var(--gutter-h); - padding-bottom: 0; - } - } - } - - @include mid-break { - display: block; - - &--has-sidebar { - .document-fields { - &__main { - width: 100%; - } - - &__edit { - [dir='ltr'] & { - border-right: 0; - padding-right: var(--gutter-h); - } - - [dir='rtl'] & { - border-left: 0; - padding-left: var(--gutter-h); - } - } - - &__fields { - & > .tabs-field, - & > .group-field { - margin-right: calc(var(--gutter-h) * -1); - } - } - } - } - - &__main { - width: 100%; - min-height: initial; - } - - &__sidebar-wrap { - position: static; - width: 100%; - height: initial; - border-left: 0; - } - - &__form { - display: block; - } - - &__sidebar-fields { - padding-top: 0; - padding-left: var(--gutter-h); - padding-right: var(--gutter-h); - padding-bottom: 0; - gap: base(0.5); - - [dir='ltr'] & { padding-right: var(--gutter-h); + padding-bottom: 0; + gap: base(0.5); + + [dir='ltr'] & { + padding-right: var(--gutter-h); + } + + [dir='rtl'] & { + padding-left: var(--gutter-h); + } } - [dir='rtl'] & { - padding-left: var(--gutter-h); + &__sidebar { + padding-bottom: base(3.5); + overflow: visible; } } - &__sidebar { - padding-bottom: base(3.5); - overflow: visible; - } - } + @include small-break { + &__sidebar-wrap { + min-width: initial; + width: 100%; + } - @include small-break { - &__sidebar-wrap { - min-width: initial; - width: 100%; - } - - &__edit { - padding-top: calc(var(--base) / 2); + &__edit { + padding-top: calc(var(--base) / 2); + } } } } diff --git a/packages/ui/src/elements/Drawer/index.scss b/packages/ui/src/elements/Drawer/index.scss index e95855fd98..ea3b5ce247 100644 --- a/packages/ui/src/elements/Drawer/index.scss +++ b/packages/ui/src/elements/Drawer/index.scss @@ -2,139 +2,141 @@ $transTime: 200; -.drawer { - display: flex; - overflow: hidden; - position: fixed; - height: 100vh; - - &__blur-bg { - @include blur-bg; - position: absolute; - z-index: 1; - top: 0; - right: 0; - bottom: 0; - left: 0; - opacity: 0; - transition: all #{$transTime}ms linear; - } - - &__content { - opacity: 0; - transform: translateX(calc(var(--base) * 4)); - position: relative; - z-index: 2; - // NOTE: width is controlled by js - // width: calc(100% - var(--gutter-h)); - overflow: hidden; - transition: all #{$transTime}ms linear; - background-color: var(--theme-bg); - } - - &__content-children { - position: relative; - z-index: 1; - overflow: auto; - height: 100%; - } - - &--is-open { - .drawer { - &__content, - &__blur-bg { - opacity: 1; - } - - &__close { - opacity: 0.1; - transition: opacity #{$transTime}ms linear; - transition-delay: #{calc($transTime / 2)}ms; - } - - &__content { - transform: translateX(0); - } - } - } - - &__close { - @extend %btn-reset; - position: relative; - z-index: 2; - flex-shrink: 0; - text-indent: -9999px; - cursor: pointer; - opacity: 0; - will-change: opacity; - transition: none; - transition-delay: 0ms; - flex-grow: 1; - background: var(--theme-elevation-800); - - &:active, - &:focus { - outline: 0; - } - } - - &__header { +@layer payload-default { + .drawer { display: flex; - align-items: center; - margin-top: base(2.5); - margin-bottom: base(1); - width: 100%; + overflow: hidden; + position: fixed; + height: 100vh; - &__title { - margin: 0; - flex-grow: 1; + &__blur-bg { + @include blur-bg; + position: absolute; + z-index: 1; + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 0; + transition: all #{$transTime}ms linear; + } + + &__content { + opacity: 0; + transform: translateX(calc(var(--base) * 4)); + position: relative; + z-index: 2; + // NOTE: width is controlled by js + // width: calc(100% - var(--gutter-h)); + overflow: hidden; + transition: all #{$transTime}ms linear; + background-color: var(--theme-bg); + } + + &__content-children { + position: relative; + z-index: 1; + overflow: auto; + height: 100%; + } + + &--is-open { + .drawer { + &__content, + &__blur-bg { + opacity: 1; + } + + &__close { + opacity: 0.1; + transition: opacity #{$transTime}ms linear; + transition-delay: #{calc($transTime / 2)}ms; + } + + &__content { + transform: translateX(0); + } + } } &__close { - border: 0; - background-color: transparent; - padding: 0; + @extend %btn-reset; + position: relative; + z-index: 2; + flex-shrink: 0; + text-indent: -9999px; cursor: pointer; - overflow: hidden; - direction: ltr; + opacity: 0; + will-change: opacity; + transition: none; + transition-delay: 0ms; + flex-grow: 1; + background: var(--theme-elevation-800); + + &:active, + &:focus { + outline: 0; + } + } + + &__header { display: flex; align-items: center; - justify-content: center; - width: base(1.2); - height: base(1.2); + margin-top: base(2.5); + margin-bottom: base(1); + width: 100%; - svg { - margin: base(-1.2); - width: base(2.4); - height: base(2.4); + &__title { + margin: 0; + flex-grow: 1; + } - position: relative; + &__close { + border: 0; + background-color: transparent; + padding: 0; + cursor: pointer; + overflow: hidden; + direction: ltr; + display: flex; + align-items: center; + justify-content: center; + width: base(1.2); + height: base(1.2); - .stroke { - stroke-width: 1px; - vector-effect: non-scaling-stroke; + svg { + margin: base(-1.2); + width: base(2.4); + height: base(2.4); + + position: relative; + + .stroke { + stroke-width: 1px; + vector-effect: non-scaling-stroke; + } + } + } + } + + @include mid-break { + &__header { + margin-top: base(1.5); + } + } + } + + html[data-theme='dark'] { + .drawer { + &__close { + background: var(--color-base-1000); + } + + &--is-open { + .drawer__close { + opacity: 0.25; } } } } - - @include mid-break { - &__header { - margin-top: base(1.5); - } - } -} - -html[data-theme='dark'] { - .drawer { - &__close { - background: var(--color-base-1000); - } - - &--is-open { - .drawer__close { - opacity: 0.25; - } - } - } } diff --git a/packages/ui/src/elements/Dropzone/index.scss b/packages/ui/src/elements/Dropzone/index.scss index 6a1ef6d90d..9ad40b205d 100644 --- a/packages/ui/src/elements/Dropzone/index.scss +++ b/packages/ui/src/elements/Dropzone/index.scss @@ -1,41 +1,43 @@ @import '../../scss/styles.scss'; -.dropzone { - position: relative; - display: flex; - align-items: center; - padding: calc(var(--base) * 0.9) var(--base); - background: transparent; - border: 1px dotted var(--theme-elevation-400); - border-radius: var(--style-radius-s); - height: 100%; - width: 100%; - box-shadow: 0 0 0 0 transparent; - transition: all 100ms cubic-bezier(0, 0.2, 0.2, 1); - - .btn { - margin: 0; +@layer payload-default { + .dropzone { + position: relative; display: flex; - justify-content: center; align-items: center; - } + padding: calc(var(--base) * 0.9) var(--base); + background: transparent; + border: 1px dotted var(--theme-elevation-400); + border-radius: var(--style-radius-s); + height: 100%; + width: 100%; + box-shadow: 0 0 0 0 transparent; + transition: all 100ms cubic-bezier(0, 0.2, 0.2, 1); - &.dragging { - border-color: var(--theme-success-500); - background: var(--theme-success-150); - @include shadow-m; + .btn { + margin: 0; + display: flex; + justify-content: center; + align-items: center; + } - * { - pointer-events: none; + &.dragging { + border-color: var(--theme-success-500); + background: var(--theme-success-150); + @include shadow-m; + + * { + pointer-events: none; + } + } + + @include mid-break { + display: block; + text-align: center; + } + + &.dropzoneStyle--none { + all: unset; } } - - @include mid-break { - display: block; - text-align: center; - } - - &.dropzoneStyle--none { - all: unset; - } } diff --git a/packages/ui/src/elements/DuplicateDocument/index.scss b/packages/ui/src/elements/DuplicateDocument/index.scss index dd584a53af..ca14d13470 100644 --- a/packages/ui/src/elements/DuplicateDocument/index.scss +++ b/packages/ui/src/elements/DuplicateDocument/index.scss @@ -1,40 +1,42 @@ @import '../../scss/styles.scss'; -.duplicate { - &__modal { - @include blur-bg; - display: flex; - align-items: center; - justify-content: center; - height: 100%; - } - - &__wrapper { - z-index: 1; - position: relative; - display: flex; - flex-direction: column; - gap: base(0.8); - padding: base(2); - max-width: base(36); - } - - &__content { - display: flex; - flex-direction: column; - gap: base(0.4); - - > * { - margin: 0; +@layer payload-default { + .duplicate { + &__modal { + @include blur-bg; + display: flex; + align-items: center; + justify-content: center; + height: 100%; } - } - &__controls { - display: flex; - gap: base(0.4); + &__wrapper { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + gap: base(0.8); + padding: base(2); + max-width: base(36); + } - .btn { - margin: 0; + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); + + > * { + margin: 0; + } + } + + &__controls { + display: flex; + gap: base(0.4); + + .btn { + margin: 0; + } } } } diff --git a/packages/ui/src/elements/EditMany/index.scss b/packages/ui/src/elements/EditMany/index.scss index 3fb212f247..25a1c10441 100644 --- a/packages/ui/src/elements/EditMany/index.scss +++ b/packages/ui/src/elements/EditMany/index.scss @@ -1,199 +1,201 @@ @import '../../scss/styles.scss'; -.edit-many { - &__toggle { - font-size: 1rem; - line-height: base(1.2); - display: inline-flex; - background: var(--theme-elevation-150); - color: var(--theme-elevation-800); - border-radius: $style-radius-s; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - border: 0; - padding: 0 base(0.4); - align-items: center; - cursor: pointer; - text-decoration: none; - - &:active, - &:focus { - outline: none; - } - - &:hover { - background: var(--theme-elevation-100); - } - - &:active { - background: var(--theme-elevation-100); - } - } - - &__form { - height: 100%; - } - - &__main { - width: calc(100% - #{base(15)}); - display: flex; - flex-direction: column; - min-height: 100%; - } - - &__header { - display: flex; - margin-top: base(2.5); - margin-bottom: base(1); - width: 100%; - - &__title { - margin: 0; - flex-grow: 1; - } - - &__close { - border: 0; - background-color: transparent; - padding: 0; - cursor: pointer; +@layer payload-default { + .edit-many { + &__toggle { + font-size: 1rem; + line-height: base(1.2); + display: inline-flex; + background: var(--theme-elevation-150); + color: var(--theme-elevation-800); + border-radius: $style-radius-s; + white-space: nowrap; overflow: hidden; - width: base(1); - height: base(1); + text-overflow: ellipsis; + border: 0; + padding: 0 base(0.4); + align-items: center; + cursor: pointer; + text-decoration: none; - svg { - width: base(2); - height: base(2); - position: relative; - inset-inline-start: base(-0.5); - top: base(-0.5); - - .stroke { - stroke-width: 2px; - vector-effect: non-scaling-stroke; - } - } - } - } - - &__edit { - padding-top: base(1); - padding-bottom: base(2); - flex-grow: 1; - } - [dir='rtl'] &__sidebar-wrap { - left: 0; - border-right: 1px solid var(--theme-elevation-100); - right: auto; - } - - &__sidebar-wrap { - position: fixed; - width: base(15); - height: 100%; - top: 0; - right: 0; - overflow: visible; - border-left: 1px solid var(--theme-elevation-100); - } - - &__sidebar { - width: 100%; - height: 100%; - overflow-y: auto; - } - - &__sidebar-sticky-wrap { - display: flex; - flex-direction: column; - min-height: 100%; - } - - &__collection-actions, - &__meta, - &__sidebar-fields { - [dir='ltr'] & { - padding-left: base(1.5); - } - [dir='rtl'] & { - padding-right: base(1.5); - } - } - - &__document-actions { - padding-right: $baseline; - position: sticky; - top: 0; - z-index: var(--z-nav); - - > * { - position: relative; - z-index: 1; - } - - @include mid-break { - @include blur-bg; - } - } - - &__document-actions { - display: flex; - flex-wrap: wrap; - padding: base(1); - gap: base(0.5); - - .form-submit { - width: calc(50% - #{base(1)}); - - @include mid-break { - width: auto; - flex-grow: 1; + &:active, + &:focus { + outline: none; } - .btn { - width: 100%; - padding-left: base(0.5); - padding-right: base(0.5); - margin-bottom: 0; + &:hover { + background: var(--theme-elevation-100); } - } - } - @include mid-break { - &__main { - width: 100%; - min-height: initial; - } - - &__sidebar-wrap { - position: static; - width: 100%; - height: initial; + &:active { + background: var(--theme-elevation-100); + } } &__form { - display: block; + height: 100%; + } + + &__main { + width: calc(100% - #{base(15)}); + display: flex; + flex-direction: column; + min-height: 100%; + } + + &__header { + display: flex; + margin-top: base(2.5); + margin-bottom: base(1); + width: 100%; + + &__title { + margin: 0; + flex-grow: 1; + } + + &__close { + border: 0; + background-color: transparent; + padding: 0; + cursor: pointer; + overflow: hidden; + width: base(1); + height: base(1); + + svg { + width: base(2); + height: base(2); + position: relative; + inset-inline-start: base(-0.5); + top: base(-0.5); + + .stroke { + stroke-width: 2px; + vector-effect: non-scaling-stroke; + } + } + } } &__edit { - padding-top: 0; - padding-bottom: 0; + padding-top: base(1); + padding-bottom: base(2); + flex-grow: 1; + } + [dir='rtl'] &__sidebar-wrap { + left: 0; + border-right: 1px solid var(--theme-elevation-100); + right: auto; + } + + &__sidebar-wrap { + position: fixed; + width: base(15); + height: 100%; + top: 0; + right: 0; + overflow: visible; + border-left: 1px solid var(--theme-elevation-100); + } + + &__sidebar { + width: 100%; + height: 100%; + overflow-y: auto; + } + + &__sidebar-sticky-wrap { + display: flex; + flex-direction: column; + min-height: 100%; + } + + &__collection-actions, + &__meta, + &__sidebar-fields { + [dir='ltr'] & { + padding-left: base(1.5); + } + [dir='rtl'] & { + padding-right: base(1.5); + } } &__document-actions { - position: fixed; - bottom: 0; - left: 0; - right: 0; - top: auto; + padding-right: $baseline; + position: sticky; + top: 0; z-index: var(--z-nav); + + > * { + position: relative; + z-index: 1; + } + + @include mid-break { + @include blur-bg; + } } - &__document-actions, - &__sidebar-fields { - padding-left: var(--gutter-h); - padding-right: var(--gutter-h); + &__document-actions { + display: flex; + flex-wrap: wrap; + padding: base(1); + gap: base(0.5); + + .form-submit { + width: calc(50% - #{base(1)}); + + @include mid-break { + width: auto; + flex-grow: 1; + } + + .btn { + width: 100%; + padding-left: base(0.5); + padding-right: base(0.5); + margin-bottom: 0; + } + } + } + + @include mid-break { + &__main { + width: 100%; + min-height: initial; + } + + &__sidebar-wrap { + position: static; + width: 100%; + height: initial; + } + + &__form { + display: block; + } + + &__edit { + padding-top: 0; + padding-bottom: 0; + } + + &__document-actions { + position: fixed; + bottom: 0; + left: 0; + right: 0; + top: auto; + z-index: var(--z-nav); + } + + &__document-actions, + &__sidebar-fields { + padding-left: var(--gutter-h); + padding-right: var(--gutter-h); + } } } } diff --git a/packages/ui/src/elements/EditMany/index.tsx b/packages/ui/src/elements/EditMany/index.tsx index af5cb7f12d..f496b97ecc 100644 --- a/packages/ui/src/elements/EditMany/index.tsx +++ b/packages/ui/src/elements/EditMany/index.tsx @@ -111,7 +111,7 @@ export const EditMany: React.FC = (props) => { }, } = useConfig() - const { serverFunction } = useServerFunctions() + const { getFormState } = useServerFunctions() const { count, getQueryParams, selectAll } = useSelection() const { i18n, t } = useTranslation() @@ -130,15 +130,12 @@ export const EditMany: React.FC = (props) => { React.useEffect(() => { if (!hasInitializedState.current) { const getInitialState = async () => { - const { state: result } = (await serverFunction({ - name: 'form-state', - args: { - collectionSlug: slug, - data: {}, - operation: 'update', - schemaPath: slug, - }, - })) as { state: FormState } // TODO: remove this when strictNullChecks is enabled and the return type can be inferred + const { state: result } = await getFormState({ + collectionSlug: slug, + data: {}, + operation: 'update', + schemaPath: slug, + }) setInitialState(result) hasInitializedState.current = true @@ -146,23 +143,20 @@ export const EditMany: React.FC = (props) => { void getInitialState() } - }, [apiRoute, hasInitializedState, serverURL, slug, serverFunction, user]) + }, [apiRoute, hasInitializedState, serverURL, slug, getFormState, user]) const onChange: FormProps['onChange'][0] = useCallback( async ({ formState: prevFormState }) => { - const { state } = (await serverFunction({ - name: 'form-state', - args: { - collectionSlug: slug, - formState: prevFormState, - operation: 'update', - schemaPath: slug, - }, - })) as { state: FormState } // TODO: remove this when strictNullChecks is enabled and the return type can be inferred + const { state } = await getFormState({ + collectionSlug: slug, + formState: prevFormState, + operation: 'update', + schemaPath: slug, + }) return state }, - [slug, serverFunction], + [slug, getFormState], ) if (selectAll === SelectAllStatus.None || !hasUpdatePermission) { diff --git a/packages/ui/src/elements/EditUpload/index.scss b/packages/ui/src/elements/EditUpload/index.scss index 6ad21e3cad..d887b82cf1 100644 --- a/packages/ui/src/elements/EditUpload/index.scss +++ b/packages/ui/src/elements/EditUpload/index.scss @@ -2,225 +2,227 @@ $header-height: base(5); -.edit-upload { - --edit-upload-cell-spacing: calc(var(--base) * 1.5); - --edit-upload-sidebar-width: calc(350px + var(--gutter-h)); - height: 100%; - margin-right: calc(var(--gutter-h) * -1); - margin-left: calc(var(--gutter-h) * -1); - - &__header { - height: $header-height; - border-bottom: 1px solid var(--theme-elevation-150); - padding: 0 var(--gutter-h); - display: flex; - justify-content: space-between; - align-items: center; - - & h2 { - margin: 0; - text-wrap: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - - [dir='rtl'] &__actions { - margin-right: auto; - margin-left: unset; - } - - &__actions { - min-width: 350px; - margin-left: auto; - padding: base(0.5) 0 base(0.5) base(1.5); - justify-content: flex-end; - display: flex; - gap: base(1); - text-wrap: nowrap; - } - - &__toolWrap { - display: flex; - justify-content: flex-end; - height: (calc(100% - #{$header-height})); - } - - .ReactCrop__selection-addon, - &__crop-window { +@layer payload-default { + .edit-upload { + --edit-upload-cell-spacing: calc(var(--base) * 1.5); + --edit-upload-sidebar-width: calc(350px + var(--gutter-h)); height: 100%; - width: 100%; - } + margin-right: calc(var(--gutter-h) * -1); + margin-left: calc(var(--gutter-h) * -1); - &__focal-wrapper { - position: relative; - display: inline-flex; - max-height: 100%; - } + &__header { + height: $header-height; + border-bottom: 1px solid var(--theme-elevation-150); + padding: 0 var(--gutter-h); + display: flex; + justify-content: space-between; + align-items: center; - &__draggable-container { - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 0; - pointer-events: none; - - &--dragging { - pointer-events: all; - - .edit-upload__focalPoint { - cursor: grabbing; + & h2 { + margin: 0; + text-wrap: nowrap; + overflow: hidden; + text-overflow: ellipsis; } } - } - &__draggable { - @include btn-reset; - position: absolute; - } + [dir='rtl'] &__actions { + margin-right: auto; + margin-left: unset; + } - &__focalPoint { - position: absolute; - top: 50%; - left: 50%; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - cursor: grab; - width: 50px; - height: 50px; - transform: translate3d(-50%, -50%, 0); - pointer-events: all; + &__actions { + min-width: 350px; + margin-left: auto; + padding: base(0.5) 0 base(0.5) base(1.5); + justify-content: flex-end; + display: flex; + gap: base(1); + text-wrap: nowrap; + } - svg { + &__toolWrap { + display: flex; + justify-content: flex-end; + height: (calc(100% - #{$header-height})); + } + + .ReactCrop__selection-addon, + &__crop-window { + height: 100%; + width: 100%; + } + + &__focal-wrapper { + position: relative; + display: inline-flex; + max-height: 100%; + } + + &__draggable-container { position: absolute; left: 0; right: 0; - top: 0; bottom: 0; - background: rgba(0, 0, 0, 0.5); - border-radius: 100%; - width: base(2); - height: base(2); - color: white; + top: 0; + pointer-events: none; + + &--dragging { + pointer-events: all; + + .edit-upload__focalPoint { + cursor: grabbing; + } + } } - } - &__crop, - &__focalOnly { - padding: base(1.5) base(1.5) base(1.5) 0; - width: 100%; - display: flex; - justify-content: center; - } - - &__crop { - padding: var(--edit-upload-cell-spacing); - padding-left: var(--gutter-h); - display: flex; - align-items: flex-start; - height: 100%; - } - - &__imageWrap { - position: relative; - } - - &__point { - cursor: move; - position: absolute; - background: rgba(0, 0, 0, 0.5); - border-radius: 100%; - - & svg { - width: base(2); - height: base(2); + &__draggable { + @include btn-reset; + position: absolute; } - } - - &__sidebar { - border-left: 1px solid var(--theme-elevation-150); - padding-top: var(--edit-upload-cell-spacing); - min-width: var(--edit-upload-sidebar-width); - - & > div:first-child { - margin-bottom: base(1); - } - } - - &__groupWrap { - display: flex; - flex-direction: column; - gap: base(0.5); - padding-right: var(--gutter-h); - padding-left: var(--edit-upload-cell-spacing); - width: 100%; - - + .edit-upload__groupWrap { - padding-top: var(--edit-upload-cell-spacing); - margin-top: var(--edit-upload-cell-spacing); - border-top: 1px solid var(--theme-elevation-150); - } - } - - &__inputsWrap, - &__titleWrap { - display: flex; - gap: base(1); - } - - &__titleWrap { - justify-content: space-between; - align-items: center; - - & h3 { - margin: 0; - } - } - - &__reset { - height: fit-content; - border-radius: var(--style-radius-s); - background-color: var(--theme-elevation-150); - padding: 0 base(0.4); - } - - &__input { - flex: 1; - & input { - @include formInput; - } - } - - @include mid-break { - --edit-upload-cell-spacing: var(--gutter-h); - &__sidebar { - padding-left: 0; - border-left: 0; - width: 100%; - } - &__toolWrap { - flex-direction: column-reverse; - } - } - - @include small-break { - flex-direction: column; &__focalPoint { - border-right: none; - padding: base(1) 0; + position: absolute; + top: 50%; + left: 50%; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: grab; + width: 50px; + height: 50px; + transform: translate3d(-50%, -50%, 0); + pointer-events: all; + + svg { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + border-radius: 100%; + width: base(2); + height: base(2); + color: white; + } } - &__inputsWrap { + &__crop, + &__focalOnly { + padding: base(1.5) base(1.5) base(1.5) 0; + width: 100%; + display: flex; + justify-content: center; + } + + &__crop { + padding: var(--edit-upload-cell-spacing); + padding-left: var(--gutter-h); + display: flex; + align-items: flex-start; + height: 100%; + } + + &__imageWrap { + position: relative; + } + + &__point { + cursor: move; + position: absolute; + background: rgba(0, 0, 0, 0.5); + border-radius: 100%; + + & svg { + width: base(2); + height: base(2); + } + } + + &__sidebar { + border-left: 1px solid var(--theme-elevation-150); + padding-top: var(--edit-upload-cell-spacing); + min-width: var(--edit-upload-sidebar-width); + + & > div:first-child { + margin-bottom: base(1); + } + } + + &__groupWrap { + display: flex; flex-direction: column; + gap: base(0.5); + padding-right: var(--gutter-h); + padding-left: var(--edit-upload-cell-spacing); + width: 100%; + + + .edit-upload__groupWrap { + padding-top: var(--edit-upload-cell-spacing); + margin-top: var(--edit-upload-cell-spacing); + border-top: 1px solid var(--theme-elevation-150); + } + } + + &__inputsWrap, + &__titleWrap { + display: flex; gap: base(1); } - &__sidebar { - min-width: 0; + &__titleWrap { + justify-content: space-between; + align-items: center; + + & h3 { + margin: 0; + } + } + + &__reset { + height: fit-content; + border-radius: var(--style-radius-s); + background-color: var(--theme-elevation-150); + padding: 0 base(0.4); + } + + &__input { + flex: 1; + & input { + @include formInput; + } + } + + @include mid-break { + --edit-upload-cell-spacing: var(--gutter-h); + &__sidebar { + padding-left: 0; + border-left: 0; + width: 100%; + } + &__toolWrap { + flex-direction: column-reverse; + } + } + + @include small-break { + flex-direction: column; + + &__focalPoint { + border-right: none; + padding: base(1) 0; + } + + &__inputsWrap { + flex-direction: column; + gap: base(1); + } + + &__sidebar { + min-width: 0; + } } } } diff --git a/packages/ui/src/elements/ErrorPill/index.scss b/packages/ui/src/elements/ErrorPill/index.scss index ba24e29991..39ab442e9e 100644 --- a/packages/ui/src/elements/ErrorPill/index.scss +++ b/packages/ui/src/elements/ErrorPill/index.scss @@ -1,31 +1,33 @@ @import '../../scss/styles.scss'; -.error-pill { - align-self: center; - align-items: center; - border: 0; - padding: 0 base(0.25); - flex-shrink: 0; - border-radius: var(--style-radius-l); - line-height: 18px; - font-size: 11px; - text-align: center; - font-weight: 500; - display: flex; - align-items: center; - justify-content: center; - background: var(--theme-error-300); - color: var(--theme-error-950); +@layer payload-default { + .error-pill { + align-self: center; + align-items: center; + border: 0; + padding: 0 base(0.25); + flex-shrink: 0; + border-radius: var(--style-radius-l); + line-height: 18px; + font-size: 11px; + text-align: center; + font-weight: 500; + display: flex; + align-items: center; + justify-content: center; + background: var(--theme-error-300); + color: var(--theme-error-950); - &--fixed-width { - width: 18px; - height: 18px; - border-radius: 50%; - position: relative; - } + &--fixed-width { + width: 18px; + height: 18px; + border-radius: 50%; + position: relative; + } - &__count { - letter-spacing: 0.5px; - margin-left: 0.5px; + &__count { + letter-spacing: 0.5px; + margin-left: 0.5px; + } } } diff --git a/packages/ui/src/elements/FieldSelect/index.scss b/packages/ui/src/elements/FieldSelect/index.scss index 2330be078b..37281463ba 100644 --- a/packages/ui/src/elements/FieldSelect/index.scss +++ b/packages/ui/src/elements/FieldSelect/index.scss @@ -1,5 +1,7 @@ @import '../../scss/styles.scss'; -.field-select { - margin-bottom: base(1); +@layer payload-default { + .field-select { + margin-bottom: base(1); + } } diff --git a/packages/ui/src/elements/FileDetails/DraggableFileDetails/index.scss b/packages/ui/src/elements/FileDetails/DraggableFileDetails/index.scss index 1aa27226e3..0943d23e72 100644 --- a/packages/ui/src/elements/FileDetails/DraggableFileDetails/index.scss +++ b/packages/ui/src/elements/FileDetails/DraggableFileDetails/index.scss @@ -1,33 +1,35 @@ @import '../../../scss/styles.scss'; -.file-details-draggable { - display: flex; - gap: 0.6rem; - //justify-content: space-between; - align-items: center; - background: var(--theme-elevation-50); - border-radius: 3px; - padding: 0.7rem 0.8rem; - - &--drag-wrapper { +@layer payload-default { + .file-details-draggable { display: flex; gap: 0.6rem; + //justify-content: space-between; align-items: center; - } + background: var(--theme-elevation-50); + border-radius: 3px; + padding: 0.7rem 0.8rem; - &__thumbnail { - max-width: 1.5rem; - } + &--drag-wrapper { + display: flex; + gap: 0.6rem; + align-items: center; + } - &__actions { - flex-grow: 2; - display: flex; - gap: 0.6rem; - align-items: center; - justify-content: flex-end; - } + &__thumbnail { + max-width: 1.5rem; + } - &__remove.btn--style-icon-label { - margin: 0; + &__actions { + flex-grow: 2; + display: flex; + gap: 0.6rem; + align-items: center; + justify-content: flex-end; + } + + &__remove.btn--style-icon-label { + margin: 0; + } } } diff --git a/packages/ui/src/elements/FileDetails/FileMeta/index.scss b/packages/ui/src/elements/FileDetails/FileMeta/index.scss index ce70e35d41..f47c795de9 100644 --- a/packages/ui/src/elements/FileDetails/FileMeta/index.scss +++ b/packages/ui/src/elements/FileDetails/FileMeta/index.scss @@ -1,29 +1,31 @@ @import '../../../scss/styles.scss'; -.file-meta { - &__url { - display: flex; - gap: base(0.4); +@layer payload-default { + .file-meta { + &__url { + display: flex; + gap: base(0.4); - a { - font-weight: 600; - text-decoration: none; + a { + font-weight: 600; + text-decoration: none; - &:hover, - &:focus-visible { - text-decoration: underline; + &:hover, + &:focus-visible { + text-decoration: underline; + } } } - } - &__size-type, - &__url a { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } + &__size-type, + &__url a { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } - &__edit { - position: relative; + &__edit { + position: relative; + } } } diff --git a/packages/ui/src/elements/FileDetails/StaticFileDetails/index.scss b/packages/ui/src/elements/FileDetails/StaticFileDetails/index.scss index f89be36c98..17f0e69772 100644 --- a/packages/ui/src/elements/FileDetails/StaticFileDetails/index.scss +++ b/packages/ui/src/elements/FileDetails/StaticFileDetails/index.scss @@ -1,132 +1,134 @@ @import '../../../scss/styles.scss'; -.file-details { - background: var(--theme-elevation-50); - border: 1px solid var(--theme-border-color); - border-radius: var(--style-radius-m); - @include inputShadow; +@layer payload-default { + .file-details { + background: var(--theme-elevation-50); + border: 1px solid var(--theme-border-color); + border-radius: var(--style-radius-m); + @include inputShadow; - header { - display: flex; - flex-direction: row; - flex-wrap: wrap; - position: relative; - } + header { + display: flex; + flex-direction: row; + flex-wrap: wrap; + position: relative; + } - &__remove { - position: absolute; - margin: 0; - top: $baseline; - right: $baseline; + &__remove { + position: absolute; + margin: 0; + top: $baseline; + right: $baseline; - & .btn__icon { - border: 1px solid var(--theme-border-color); - background: var(--theme-input-bg); - @include inputShadow; - transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1); + & .btn__icon { + border: 1px solid var(--theme-border-color); + background: var(--theme-input-bg); + @include inputShadow; + transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1); - &:hover { - border: 1px solid var(--theme-elevation-400); + &:hover { + border: 1px solid var(--theme-elevation-400); + } } } - } - &__main-detail { - padding: base(0.8) base(1.2); - width: auto; - flex-grow: 1; - min-width: 280px; - max-width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-self: stretch; - gap: base(0.2); - } - - &__toggle-more-info { - font-weight: 600; - text-decoration: none; - - &:hover, - &:focus-visible { - text-decoration: underline; - } - } - - &__toggle-icon { - padding: calc(var(--base) / 4); - } - - &__sizes { - margin: 0; - padding: base(1.5) $baseline 0; - list-style: none; - display: flex; - flex-wrap: wrap; - - li { - width: 50%; - padding: 0 base(0.5); - margin-bottom: $baseline; - } - } - - &__size-label { - color: var(--theme-elevation-400); - } - - &__file-mutation { - display: flex; - margin-top: base(0.25); - gap: calc(var(--base) / 2); - } - - &__edit { - cursor: pointer; - background-color: var(--theme-elevation-150); - border: none; - border-radius: $style-radius-m; - padding: base(0.25) base(0.5); - - &:hover { - background-color: var(--theme-elevation-100); - } - } - - @include large-break { &__main-detail { - padding: $baseline; + padding: base(0.8) base(1.2); + width: auto; + flex-grow: 1; + min-width: 280px; + max-width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-self: stretch; + gap: base(0.2); + } + + &__toggle-more-info { + font-weight: 600; + text-decoration: none; + + &:hover, + &:focus-visible { + text-decoration: underline; + } + } + + &__toggle-icon { + padding: calc(var(--base) / 4); } &__sizes { - display: block; - padding: $baseline $baseline base(0.5); + margin: 0; + padding: base(1.5) $baseline 0; + list-style: none; + display: flex; + flex-wrap: wrap; li { - padding: 0; + width: 50%; + padding: 0 base(0.5); + margin-bottom: $baseline; + } + } + + &__size-label { + color: var(--theme-elevation-400); + } + + &__file-mutation { + display: flex; + margin-top: base(0.25); + gap: calc(var(--base) / 2); + } + + &__edit { + cursor: pointer; + background-color: var(--theme-elevation-150); + border: none; + border-radius: $style-radius-m; + padding: base(0.25) base(0.5); + + &:hover { + background-color: var(--theme-elevation-100); + } + } + + @include large-break { + &__main-detail { + padding: $baseline; + } + + &__sizes { + display: block; + padding: $baseline $baseline base(0.5); + + li { + padding: 0; + width: 100%; + } + } + } + + @include mid-break { + header { + flex-wrap: wrap; + } + + .thumbnail { + width: 50%; + order: 1; + } + + &__remove { + order: 2; + } + + &__main-detail { + order: 3; width: 100%; } } } - - @include mid-break { - header { - flex-wrap: wrap; - } - - .thumbnail { - width: 50%; - order: 1; - } - - &__remove { - order: 2; - } - - &__main-detail { - order: 3; - width: 100%; - } - } } diff --git a/packages/ui/src/elements/GenerateConfirmation/index.scss b/packages/ui/src/elements/GenerateConfirmation/index.scss index eb60c3459e..0294ef71b2 100644 --- a/packages/ui/src/elements/GenerateConfirmation/index.scss +++ b/packages/ui/src/elements/GenerateConfirmation/index.scss @@ -1,38 +1,40 @@ @import '../../scss/styles.scss'; -.generate-confirmation { - @include blur-bg; - display: flex; - align-items: center; - justify-content: center; - height: 100%; - - &__wrapper { - z-index: 1; - position: relative; +@layer payload-default { + .generate-confirmation { + @include blur-bg; display: flex; - flex-direction: column; - gap: base(0.8); - padding: base(2); - max-width: base(36); - } + align-items: center; + justify-content: center; + height: 100%; - &__content { - display: flex; - flex-direction: column; - gap: base(0.4); - - > * { - margin: 0; + &__wrapper { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + gap: base(0.8); + padding: base(2); + max-width: base(36); } - } - &__controls { - display: flex; - gap: base(0.4); + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); - .btn { - margin: 0; + > * { + margin: 0; + } + } + + &__controls { + display: flex; + gap: base(0.4); + + .btn { + margin: 0; + } } } } diff --git a/packages/ui/src/elements/Gutter/index.scss b/packages/ui/src/elements/Gutter/index.scss index 5222d27575..f094a5bc80 100644 --- a/packages/ui/src/elements/Gutter/index.scss +++ b/packages/ui/src/elements/Gutter/index.scss @@ -1,19 +1,21 @@ @import '../../scss/styles.scss'; -.gutter { - &--left { - padding-left: var(--gutter-h); - } +@layer payload-default { + .gutter { + &--left { + padding-left: var(--gutter-h); + } - &--right { - padding-right: var(--gutter-h); - } + &--right { + padding-right: var(--gutter-h); + } - &--negative-left { - margin-left: calc(-1 * var(--gutter-h)); - } + &--negative-left { + margin-left: calc(-1 * var(--gutter-h)); + } - &--negative-right { - margin-right: calc(-1 * var(--gutter-h)); + &--negative-right { + margin-right: calc(-1 * var(--gutter-h)); + } } } diff --git a/packages/ui/src/elements/Hamburger/index.scss b/packages/ui/src/elements/Hamburger/index.scss index ec67bf9d61..efdfc9e35e 100644 --- a/packages/ui/src/elements/Hamburger/index.scss +++ b/packages/ui/src/elements/Hamburger/index.scss @@ -1,44 +1,46 @@ @import '../../scss/styles'; -.hamburger { - padding: 0; - border: 0; - cursor: pointer; - background-color: var(--theme-bg); - outline: none; - position: relative; - color: var(--theme-text); - box-shadow: 0px 0px 0px 1px var(--theme-elevation-150); - padding: base(0.1); - border-radius: 3px; - position: relative; - z-index: 1; - height: 100%; - width: 100%; - transition-property: box-shadow, background-color; - transition-duration: 100ms; - transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1); - --hamburger-size: var(--base); - - &:hover { - background-color: var(--theme-elevation-100); - box-shadow: 0px 0px 0px 1px var(--theme-elevation-500); - } - - &:focus { +@layer payload-default { + .hamburger { + padding: 0; + border: 0; + cursor: pointer; + background-color: var(--theme-bg); outline: none; - } + position: relative; + color: var(--theme-text); + box-shadow: 0px 0px 0px 1px var(--theme-elevation-150); + padding: base(0.1); + border-radius: 3px; + position: relative; + z-index: 1; + height: 100%; + width: 100%; + transition-property: box-shadow, background-color; + transition-duration: 100ms; + transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1); + --hamburger-size: var(--base); - &::after { - z-index: -1; - } + &:hover { + background-color: var(--theme-elevation-100); + box-shadow: 0px 0px 0px 1px var(--theme-elevation-500); + } - &__open-icon, - &__close-icon { - width: var(--hamburger-size); - height: var(--hamburger-size); - display: flex; - align-items: center; - justify-content: center; + &:focus { + outline: none; + } + + &::after { + z-index: -1; + } + + &__open-icon, + &__close-icon { + width: var(--hamburger-size); + height: var(--hamburger-size); + display: flex; + align-items: center; + justify-content: center; + } } } diff --git a/packages/ui/src/elements/IDLabel/index.scss b/packages/ui/src/elements/IDLabel/index.scss index 803ed6bb43..274268cf5f 100644 --- a/packages/ui/src/elements/IDLabel/index.scss +++ b/packages/ui/src/elements/IDLabel/index.scss @@ -1,12 +1,14 @@ @import '../../scss/styles'; -.id-label { - font-size: base(0.8); - line-height: base(1.2); - font-weight: normal; - color: var(--theme-elevation-600); - background: var(--theme-elevation-100); - padding: base(0.2) base(0.4); - border-radius: $style-radius-m; - display: inline-flex; +@layer payload-default { + .id-label { + font-size: base(0.8); + line-height: base(1.2); + font-weight: normal; + color: var(--theme-elevation-600); + background: var(--theme-elevation-100); + padding: base(0.2) base(0.4); + border-radius: $style-radius-m; + display: inline-flex; + } } diff --git a/packages/ui/src/elements/ListControls/index.scss b/packages/ui/src/elements/ListControls/index.scss index 8a11e6c72b..c79a78ee1b 100644 --- a/packages/ui/src/elements/ListControls/index.scss +++ b/packages/ui/src/elements/ListControls/index.scss @@ -1,95 +1,97 @@ @import '../../scss/styles'; -.list-controls { - &__wrap { - display: flex; - align-items: center; - background-color: var(--theme-elevation-50); - border-radius: var(--style-radius-m); - padding: base(0.6); - gap: base(0.6); - } - - .search-filter { - flex-grow: 1; - - input { - margin: 0; - } - } - - &__buttons-wrap { - display: flex; - align-items: center; - gap: base(0.2); - - .pill { - background-color: var(--theme-elevation-150); - - &:hover { - background-color: var(--theme-elevation-100); - } - } - } - - .column-selector, - .where-builder, - .sort-complex { - margin-top: base(1); - } - - @include small-break { +@layer payload-default { + .list-controls { &__wrap { - flex-wrap: wrap; - background-color: unset; - padding: 0; - position: relative; - } - - .icon--search { - position: absolute; - top: base(0.4); - inset-inline-start: base(0.4); - z-index: 1; + display: flex; + align-items: center; + background-color: var(--theme-elevation-50); + border-radius: var(--style-radius-m); + padding: base(0.6); + gap: base(0.6); } .search-filter { - width: 100%; + flex-grow: 1; + input { - padding: base(0.4) base(2); + margin: 0; } } &__buttons-wrap { - [dir='ltr'] & { - margin-right: 0; - } - - [dir='rtl'] & { - margin-left: 0; - } + display: flex; + align-items: center; + gap: base(0.2); .pill { - padding: base(0.2) base(0.2) base(0.2) base(0.4); - justify-content: space-between; - } - } + background-color: var(--theme-elevation-150); - &__buttons { - margin: 0; - width: 100%; + &:hover { + background-color: var(--theme-elevation-100); + } + } } .column-selector, .where-builder, .sort-complex { - margin-top: calc(var(--base) / 2); + margin-top: base(1); } - &__toggle-columns, - &__toggle-where, - &__toggle-sort { - flex: 1; + @include small-break { + &__wrap { + flex-wrap: wrap; + background-color: unset; + padding: 0; + position: relative; + } + + .icon--search { + position: absolute; + top: base(0.4); + inset-inline-start: base(0.4); + z-index: 1; + } + + .search-filter { + width: 100%; + input { + padding: base(0.4) base(2); + } + } + + &__buttons-wrap { + [dir='ltr'] & { + margin-right: 0; + } + + [dir='rtl'] & { + margin-left: 0; + } + + .pill { + padding: base(0.2) base(0.2) base(0.2) base(0.4); + justify-content: space-between; + } + } + + &__buttons { + margin: 0; + width: 100%; + } + + .column-selector, + .where-builder, + .sort-complex { + margin-top: calc(var(--base) / 2); + } + + &__toggle-columns, + &__toggle-where, + &__toggle-sort { + flex: 1; + } } } } diff --git a/packages/ui/src/elements/ListDrawer/index.scss b/packages/ui/src/elements/ListDrawer/index.scss index ccda4f21a7..1dd3174100 100644 --- a/packages/ui/src/elements/ListDrawer/index.scss +++ b/packages/ui/src/elements/ListDrawer/index.scss @@ -1,116 +1,118 @@ @import '../../scss/styles.scss'; -.list-drawer { - &__header { - margin-top: base(2.5); - width: 100%; +@layer payload-default { + .list-drawer { + &__header { + margin-top: base(2.5); + width: 100%; - @include mid-break { - margin-top: base(1.5); - } - } - - &__header-wrap { - display: flex; - gap: base(1); - } - - &__header-content { - display: flex; - flex-wrap: wrap; - flex-grow: 1; - align-items: flex-start; - align-items: center; - - button .pill { - pointer-events: none; - margin: 0; - top: 4px; - margin-left: base(0.5); - } - } - - &__header-text { - margin: 0; - } - - &__header-close { - flex-shrink: 0; - } - - &__toggler { - background: transparent; - border: 0; - padding: 0; - cursor: pointer; - color: inherit; - border-radius: var(--style-radius-s); - - &:focus:not(:focus-visible), - &:focus-within:not(:focus-visible) { - outline: none; - } - - &:focus-visible { - outline: var(--accessibility-outline); - outline-offset: var(--accessibility-outline-offset); - } - - &:disabled { - pointer-events: none; - } - } - - &__header-close { - border: 0; - background-color: transparent; - padding: 0; - margin: 0; - cursor: pointer; - overflow: hidden; - width: base(1); - height: base(1); - - svg { - width: base(2); - height: base(2); - position: relative; - inset-inline-start: base(-0.5); - top: base(-0.5); - - .stroke { - stroke-width: 2px; - vector-effect: non-scaling-stroke; + @include mid-break { + margin-top: base(1.5); } } - } - &__select-collection-wrap { - margin-top: base(1); - } - - &__first-cell { - border: 0; - background-color: transparent; - padding: 0; - cursor: pointer; - text-decoration: underline; - text-align: left; - white-space: nowrap; - } - - @include mid-break { - .collection-list__header { - margin-bottom: base(0.5); - } - - &__select-collection-wrap { - margin-top: calc(var(--base) / 2); + &__header-wrap { + display: flex; + gap: base(1); } &__header-content { + display: flex; + flex-wrap: wrap; + flex-grow: 1; + align-items: flex-start; + align-items: center; + button .pill { - top: 2px; + pointer-events: none; + margin: 0; + top: 4px; + margin-left: base(0.5); + } + } + + &__header-text { + margin: 0; + } + + &__header-close { + flex-shrink: 0; + } + + &__toggler { + background: transparent; + border: 0; + padding: 0; + cursor: pointer; + color: inherit; + border-radius: var(--style-radius-s); + + &:focus:not(:focus-visible), + &:focus-within:not(:focus-visible) { + outline: none; + } + + &:focus-visible { + outline: var(--accessibility-outline); + outline-offset: var(--accessibility-outline-offset); + } + + &:disabled { + pointer-events: none; + } + } + + &__header-close { + border: 0; + background-color: transparent; + padding: 0; + margin: 0; + cursor: pointer; + overflow: hidden; + width: base(1); + height: base(1); + + svg { + width: base(2); + height: base(2); + position: relative; + inset-inline-start: base(-0.5); + top: base(-0.5); + + .stroke { + stroke-width: 2px; + vector-effect: non-scaling-stroke; + } + } + } + + &__select-collection-wrap { + margin-top: base(1); + } + + &__first-cell { + border: 0; + background-color: transparent; + padding: 0; + cursor: pointer; + text-decoration: underline; + text-align: left; + white-space: nowrap; + } + + @include mid-break { + .collection-list__header { + margin-bottom: base(0.5); + } + + &__select-collection-wrap { + margin-top: calc(var(--base) / 2); + } + + &__header-content { + button .pill { + top: 2px; + } } } } diff --git a/packages/ui/src/elements/ListHeader/index.scss b/packages/ui/src/elements/ListHeader/index.scss index 994ede3aa9..2a908a8bd7 100644 --- a/packages/ui/src/elements/ListHeader/index.scss +++ b/packages/ui/src/elements/ListHeader/index.scss @@ -1,10 +1,12 @@ -.list-header { - display: flex; - align-items: flex-end; - flex-wrap: wrap; - gap: calc(var(--base) * 0.8); +@layer payload-default { + .list-header { + display: flex; + align-items: flex-end; + flex-wrap: wrap; + gap: calc(var(--base) * 0.8); - h1 { - margin: 0; + h1 { + margin: 0; + } } } diff --git a/packages/ui/src/elements/ListSelection/index.scss b/packages/ui/src/elements/ListSelection/index.scss index 4e1103f974..d2dd8b8675 100644 --- a/packages/ui/src/elements/ListSelection/index.scss +++ b/packages/ui/src/elements/ListSelection/index.scss @@ -1,18 +1,20 @@ @import '../../scss/styles.scss'; -.list-selection { - margin-left: auto; - color: var(--theme-elevation-500); - - &__button { +@layer payload-default { + .list-selection { + margin-left: auto; color: var(--theme-elevation-500); - background: unset; - border: none; - text-decoration: underline; - cursor: pointer; - } - @include small-break { - margin-bottom: base(0.5); + &__button { + color: var(--theme-elevation-500); + background: unset; + border: none; + text-decoration: underline; + cursor: pointer; + } + + @include small-break { + margin-bottom: base(0.5); + } } } diff --git a/packages/ui/src/elements/Loading/index.scss b/packages/ui/src/elements/Loading/index.scss index ad7b00bd7a..be90a3bdce 100644 --- a/packages/ui/src/elements/Loading/index.scss +++ b/packages/ui/src/elements/Loading/index.scss @@ -1,136 +1,138 @@ @import '../../scss/styles'; -.loading-overlay { - isolation: isolate; - height: 100%; - width: 100%; - left: 0; - top: 0; - bottom: 0; - position: fixed; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - pointer-events: none; - z-index: calc(var(--z-status) + 1); - transition-property: left, width; - transition: 250ms ease; - - &.loading-overlay--entering { - opacity: 1; - animation: fade-in ease; - pointer-events: all; - } - - &.loading-overlay--exiting { - opacity: 0; - animation: fade-out ease; - } - - &:after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; +@layer payload-default { + .loading-overlay { + isolation: isolate; height: 100%; - background-color: var(--theme-elevation-0); - opacity: 0.85; - z-index: -1; - } - - &__bars { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr; - gap: 7px; + width: 100%; + left: 0; + top: 0; + bottom: 0; + position: fixed; + display: flex; align-items: center; - } + justify-content: center; + flex-direction: column; + pointer-events: none; + z-index: calc(var(--z-status) + 1); + transition-property: left, width; + transition: 250ms ease; - &__bar { - width: 2px; - background-color: currentColor; - height: 15px; - - &:nth-child(1) { - transform: translateY(0); - animation: animate-bar--odd 1.25s infinite; + &.loading-overlay--entering { + opacity: 1; + animation: fade-in ease; + pointer-events: all; } - &:nth-child(2) { + &.loading-overlay--exiting { + opacity: 0; + animation: fade-out ease; + } + + &:after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--theme-elevation-0); + opacity: 0.85; + z-index: -1; + } + + &__bars { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + gap: 7px; + align-items: center; + } + + &__bar { + width: 2px; + background-color: currentColor; + height: 15px; + + &:nth-child(1) { + transform: translateY(0); + animation: animate-bar--odd 1.25s infinite; + } + + &:nth-child(2) { + transform: translateY(-2px); + animation: animate-bar--even 1.25s infinite; + } + + &:nth-child(3) { + transform: translateY(0); + animation: animate-bar--odd 1.25s infinite; + } + + &:nth-child(4) { + transform: translateY(-2px); + animation: animate-bar--even 1.25s infinite; + } + + &:nth-child(5) { + transform: translateY(0); + animation: animate-bar--odd 1.25s infinite; + } + } + + &__text { + margin-top: base(0.75); + text-transform: uppercase; + font-family: var(--font-body); + font-size: base(0.65); + letter-spacing: 3px; + } + } + + @keyframes animate-bar--even { + 0% { + transform: translateY(2px); + } + + 50% { transform: translateY(-2px); - animation: animate-bar--even 1.25s infinite; } - &:nth-child(3) { - transform: translateY(0); - animation: animate-bar--odd 1.25s infinite; + 100% { + transform: translateY(2px); } + } - &:nth-child(4) { + @keyframes animate-bar--odd { + 0% { transform: translateY(-2px); - animation: animate-bar--even 1.25s infinite; } - &:nth-child(5) { - transform: translateY(0); - animation: animate-bar--odd 1.25s infinite; + 50% { + transform: translateY(2px); + } + + 100% { + transform: translateY(-2px); } } - &__text { - margin-top: base(0.75); - text-transform: uppercase; - font-family: var(--font-body); - font-size: base(0.65); - letter-spacing: 3px; - } -} - -@keyframes animate-bar--even { - 0% { - transform: translateY(2px); - } - - 50% { - transform: translateY(-2px); - } - - 100% { - transform: translateY(2px); - } -} - -@keyframes animate-bar--odd { - 0% { - transform: translateY(-2px); - } - - 50% { - transform: translateY(2px); - } - - 100% { - transform: translateY(-2px); - } -} - -@keyframes fade-in { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -@keyframes fade-out { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; + @keyframes fade-in { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } + } + + @keyframes fade-out { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } } } diff --git a/packages/ui/src/elements/Localizer/LocalizerLabel/index.scss b/packages/ui/src/elements/Localizer/LocalizerLabel/index.scss index 3b47858559..545fc80954 100644 --- a/packages/ui/src/elements/Localizer/LocalizerLabel/index.scss +++ b/packages/ui/src/elements/Localizer/LocalizerLabel/index.scss @@ -1,55 +1,57 @@ @import '../../../scss/styles.scss'; -.localizer-button { - display: flex; - align-items: center; - white-space: nowrap; - display: flex; - padding-inline-start: base(0.4); - padding-inline-end: base(0.4); - background-color: var(--theme-elevation-100); - border-radius: var(--style-radius-s); - - &__label { - color: var(--theme-elevation-500); - } - - &__chevron { - .stroke { - stroke: currentColor; - } - } - - &__current { +@layer payload-default { + .localizer-button { display: flex; align-items: center; - gap: base(0.3); - } + white-space: nowrap; + display: flex; + padding-inline-start: base(0.4); + padding-inline-end: base(0.4); + background-color: var(--theme-elevation-100); + border-radius: var(--style-radius-s); - button { - color: currentColor; - padding: 0; - font-size: 1rem; - line-height: base(1); - background: transparent; - border: 0; - font-weight: 600; - cursor: pointer; - - &:hover, - &:focus-visible { - text-decoration: underline; - } - - &:active, - &:focus { - outline: none; - } - } - - @include small-break { &__label { - display: none; + color: var(--theme-elevation-500); + } + + &__chevron { + .stroke { + stroke: currentColor; + } + } + + &__current { + display: flex; + align-items: center; + gap: base(0.3); + } + + button { + color: currentColor; + padding: 0; + font-size: 1rem; + line-height: base(1); + background: transparent; + border: 0; + font-weight: 600; + cursor: pointer; + + &:hover, + &:focus-visible { + text-decoration: underline; + } + + &:active, + &:focus { + outline: none; + } + } + + @include small-break { + &__label { + display: none; + } } } } diff --git a/packages/ui/src/elements/Localizer/index.scss b/packages/ui/src/elements/Localizer/index.scss index b692fad79f..f56b961bc2 100644 --- a/packages/ui/src/elements/Localizer/index.scss +++ b/packages/ui/src/elements/Localizer/index.scss @@ -1,8 +1,10 @@ @import '../../scss/styles.scss'; -.localizer { - position: relative; - display: flex; - align-items: center; - flex-wrap: nowrap; +@layer payload-default { + .localizer { + position: relative; + display: flex; + align-items: center; + flex-wrap: nowrap; + } } diff --git a/packages/ui/src/elements/Locked/index.scss b/packages/ui/src/elements/Locked/index.scss index 95cf809c63..6963fda2a5 100644 --- a/packages/ui/src/elements/Locked/index.scss +++ b/packages/ui/src/elements/Locked/index.scss @@ -1,14 +1,16 @@ @import '../../scss/styles.scss'; -.locked { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - pointer-events: all; +@layer payload-default { + .locked { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + pointer-events: all; - &__tooltip { - left: 0; - transform: translate3d(-0%, calc(var(--caret-size) * -1), 0); + &__tooltip { + left: 0; + transform: translate3d(-0%, calc(var(--caret-size) * -1), 0); + } } } diff --git a/packages/ui/src/elements/Nav/NavToggler/index.scss b/packages/ui/src/elements/Nav/NavToggler/index.scss index ba1e3b4d5b..e2e108f437 100644 --- a/packages/ui/src/elements/Nav/NavToggler/index.scss +++ b/packages/ui/src/elements/Nav/NavToggler/index.scss @@ -1,10 +1,12 @@ @import '../../../scss/styles.scss'; -.nav-toggler { - position: relative; - background: transparent; - padding: 0; - margin: 0; - border: 0; - cursor: pointer; +@layer payload-default { + .nav-toggler { + position: relative; + background: transparent; + padding: 0; + margin: 0; + border: 0; + cursor: pointer; + } } diff --git a/packages/ui/src/elements/NavGroup/index.scss b/packages/ui/src/elements/NavGroup/index.scss index b2f8ac64be..d0681b3179 100644 --- a/packages/ui/src/elements/NavGroup/index.scss +++ b/packages/ui/src/elements/NavGroup/index.scss @@ -1,56 +1,58 @@ @import '../../scss/styles.scss'; -.nav-group { - width: 100%; - margin-bottom: base(0.5); - - &__toggle { - cursor: pointer; - color: var(--theme-elevation-400); - background: transparent; - padding-left: 0; - border: 0; - margin-bottom: base(0.25); +@layer payload-default { + .nav-group { width: 100%; - text-align: left; - display: flex; - align-items: flex-start; - padding: 0; - gap: base(0.5); - justify-content: space-between; + margin-bottom: base(0.5); - svg { - flex-shrink: 0; - margin-top: base(-0.2); - } + &__toggle { + cursor: pointer; + color: var(--theme-elevation-400); + background: transparent; + padding-left: 0; + border: 0; + margin-bottom: base(0.25); + width: 100%; + text-align: left; + display: flex; + align-items: flex-start; + padding: 0; + gap: base(0.5); + justify-content: space-between; - &:hover, - &:focus-visible { - color: var(--theme-elevation-1000); + svg { + flex-shrink: 0; + margin-top: base(-0.2); + } - .stroke { - stroke: var(--theme-elevation-1000); + &:hover, + &:focus-visible { + color: var(--theme-elevation-1000); + + .stroke { + stroke: var(--theme-elevation-1000); + } + } + + &:focus-visible { + outline: none; } } - &:focus-visible { - outline: none; + &__indicator { + position: relative; + flex-shrink: 0; + + svg .stroke { + stroke: var(--theme-elevation-200); + } } - } - &__indicator { - position: relative; - flex-shrink: 0; - - svg .stroke { - stroke: var(--theme-elevation-200); - } - } - - &--collapsed { - .collapsible__toggle { - border-bottom-right-radius: $style-radius-m; - border-bottom-left-radius: $style-radius-m; + &--collapsed { + .collapsible__toggle { + border-bottom-right-radius: $style-radius-m; + border-bottom-left-radius: $style-radius-m; + } } } } diff --git a/packages/ui/src/elements/Pagination/ClickableArrow/index.scss b/packages/ui/src/elements/Pagination/ClickableArrow/index.scss index b8d88ee9bc..4cb8c6812e 100644 --- a/packages/ui/src/elements/Pagination/ClickableArrow/index.scss +++ b/packages/ui/src/elements/Pagination/ClickableArrow/index.scss @@ -1,45 +1,47 @@ @import '../../../scss/styles.scss'; -.clickable-arrow { - cursor: pointer; - @extend %btn-reset; - width: base(2); - height: base(2); - display: flex; - justify-content: center; - align-content: center; - align-items: center; - outline: 0; - padding: base(0.5); - color: var(--theme-elevation-800); - line-height: base(1); +@layer payload-default { + .clickable-arrow { + cursor: pointer; + @extend %btn-reset; + width: base(2); + height: base(2); + display: flex; + justify-content: center; + align-content: center; + align-items: center; + outline: 0; + padding: base(0.5); + color: var(--theme-elevation-800); + line-height: base(1); + + &:not(.clickable-arrow--is-disabled) { + &:hover, + &:focus-visible { + background: var(--theme-elevation-100); + } + } - &:not(.clickable-arrow--is-disabled) { - &:hover, &:focus-visible { - background: var(--theme-elevation-100); + outline: var(--accessibility-outline); } - } - &:focus-visible { - outline: var(--accessibility-outline); - } - - &--right { - .icon { - transform: rotate(-90deg); + &--right { + .icon { + transform: rotate(-90deg); + } } - } - &--left .icon { - transform: rotate(90deg); - } + &--left .icon { + transform: rotate(90deg); + } - &--is-disabled { - cursor: default; + &--is-disabled { + cursor: default; - .icon .stroke { - stroke: var(--theme-elevation-400); + .icon .stroke { + stroke: var(--theme-elevation-400); + } } } } diff --git a/packages/ui/src/elements/Pagination/index.scss b/packages/ui/src/elements/Pagination/index.scss index b0b756dd16..e7cb22ceb0 100644 --- a/packages/ui/src/elements/Pagination/index.scss +++ b/packages/ui/src/elements/Pagination/index.scss @@ -1,51 +1,53 @@ @import '../../scss/styles.scss'; -.paginator { - display: flex; - margin-bottom: $baseline; - - &__page { - cursor: pointer; - - &--is-current { - background: var(--theme-elevation-100); - color: var(--theme-elevation-400); - cursor: default; - } - - &--is-last-page { - margin-right: 0; - } - } - - .clickable-arrow--right { - margin-right: base(0.25); - } - - &__page { - @extend %btn-reset; - width: base(2); - height: base(2); +@layer payload-default { + .paginator { display: flex; - justify-content: center; - align-content: center; - outline: 0; - padding: base(0.5); - color: var(--theme-elevation-800); - line-height: base(1); + margin-bottom: $baseline; - &:focus-visible { - outline: var(--accessibility-outline); + &__page { + cursor: pointer; + + &--is-current { + background: var(--theme-elevation-100); + color: var(--theme-elevation-400); + cursor: default; + } + + &--is-last-page { + margin-right: 0; + } } - } - &__page, - &__separator { - margin-right: base(0.25); - } + .clickable-arrow--right { + margin-right: base(0.25); + } - &__separator { - align-self: center; - color: var(--theme-elevation-400); + &__page { + @extend %btn-reset; + width: base(2); + height: base(2); + display: flex; + justify-content: center; + align-content: center; + outline: 0; + padding: base(0.5); + color: var(--theme-elevation-800); + line-height: base(1); + + &:focus-visible { + outline: var(--accessibility-outline); + } + } + + &__page, + &__separator { + margin-right: base(0.25); + } + + &__separator { + align-self: center; + color: var(--theme-elevation-400); + } } } diff --git a/packages/ui/src/elements/PerPage/index.scss b/packages/ui/src/elements/PerPage/index.scss index 81f547eabc..96a24a52c0 100644 --- a/packages/ui/src/elements/PerPage/index.scss +++ b/packages/ui/src/elements/PerPage/index.scss @@ -1,46 +1,48 @@ @import '../../scss/styles.scss'; -.per-page { - ul { - list-style: none; - padding: 0; - margin: 0; - display: flex; - flex-direction: column; - gap: calc(var(--base) / 4); - } - - &__base-button { - display: flex; - align-items: center; - font-weight: bold; - } - - &__button { - @extend %btn-reset; - cursor: pointer; - text-align: left; - width: 100%; - display: flex; - align-items: center; - color: var(--theme-elevation-500); - - &:hover, - &:focus-visible { - text-decoration: underline; +@layer payload-default { + .per-page { + ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: calc(var(--base) / 4); } - svg .stroke { - stroke: currentColor; + &__base-button { + display: flex; + align-items: center; + font-weight: bold; } - } - &__chevron { - padding-left: calc(var(--base) / 4); - } + &__button { + @extend %btn-reset; + cursor: pointer; + text-align: left; + width: 100%; + display: flex; + align-items: center; + color: var(--theme-elevation-500); - &__button-active { - font-weight: bold; - color: var(--theme-text); + &:hover, + &:focus-visible { + text-decoration: underline; + } + + svg .stroke { + stroke: currentColor; + } + } + + &__chevron { + padding-left: calc(var(--base) / 4); + } + + &__button-active { + font-weight: bold; + color: var(--theme-text); + } } } diff --git a/packages/ui/src/elements/Pill/index.scss b/packages/ui/src/elements/Pill/index.scss index 9507e587ed..2394525fd8 100644 --- a/packages/ui/src/elements/Pill/index.scss +++ b/packages/ui/src/elements/Pill/index.scss @@ -1,134 +1,136 @@ @import '../../scss/styles.scss'; -.pill { - font-size: 1rem; - line-height: base(1.2); - display: inline-flex; - background: var(--theme-elevation-150); - color: var(--theme-elevation-800); - border-radius: $style-radius-s; - cursor: default; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - border: 0; - padding: 0 base(0.4); - align-items: center; - flex-shrink: 0; - gap: base(0.2); - - &--rounded { - border-radius: var(--style-radius-l); - line-height: 18px; - font-size: 12px; - } - - &:active, - &:focus:not(:focus-visible) { - outline: none; - } - - &:focus-visible { - outline: var(--accessibility-outline); - outline-offset: var(--accessibility-outline-offset); - } - - .icon { - flex-shrink: 0; - margin: base(0.1); - } - - &__label { +@layer payload-default { + .pill { + font-size: 1rem; + line-height: base(1.2); + display: inline-flex; + background: var(--theme-elevation-150); + color: var(--theme-elevation-800); + border-radius: $style-radius-s; + cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - } + border: 0; + padding: 0 base(0.4); + align-items: center; + flex-shrink: 0; + gap: base(0.2); - &--has-action { - cursor: pointer; - text-decoration: none; - } - - &--is-dragging { - cursor: grabbing; - } - - &--has-icon { - padding-inline-start: base(0.4); - padding-inline-end: base(0.3); - - svg { - display: block; - } - } - - &--align-icon-left { - flex-direction: row-reverse; - padding-inline-start: base(0.1); - padding-inline-end: base(0.4); - } - - &--style-white { - background: var(--theme-elevation-0); - - &.pill--has-action { - &:hover { - background: var(--theme-elevation-100); - } - - &:active { - background: var(--theme-elevation-100); - } - } - } - - &--style-light { - &.pill--has-action { - &:hover { - background: var(--theme-elevation-100); - } - - &:active { - background: var(--theme-elevation-100); - } - } - } - - &--style-light-gray { - background: var(--theme-elevation-100); - color: var(--theme-elevation-800); - } - - &--style-warning { - background: var(--theme-warning-150); - color: var(--theme-warning-800); - } - - &--style-success { - background: var(--theme-success-150); - color: var(--theme-success-800); - } - - &--style-error { - background: var(--theme-error-150); - color: var(--theme-error-800); - } - - &--style-dark { - background: var(--theme-elevation-800); - color: var(--theme-elevation-0); - - svg { - @include color-svg(var(--theme-elevation-0)); + &--rounded { + border-radius: var(--style-radius-l); + line-height: 18px; + font-size: 12px; } - &.pill--has-action { - &:hover { - background: var(--theme-elevation-750); + &:active, + &:focus:not(:focus-visible) { + outline: none; + } + + &:focus-visible { + outline: var(--accessibility-outline); + outline-offset: var(--accessibility-outline-offset); + } + + .icon { + flex-shrink: 0; + margin: base(0.1); + } + + &__label { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &--has-action { + cursor: pointer; + text-decoration: none; + } + + &--is-dragging { + cursor: grabbing; + } + + &--has-icon { + padding-inline-start: base(0.4); + padding-inline-end: base(0.3); + + svg { + display: block; + } + } + + &--align-icon-left { + flex-direction: row-reverse; + padding-inline-start: base(0.1); + padding-inline-end: base(0.4); + } + + &--style-white { + background: var(--theme-elevation-0); + + &.pill--has-action { + &:hover { + background: var(--theme-elevation-100); + } + + &:active { + background: var(--theme-elevation-100); + } + } + } + + &--style-light { + &.pill--has-action { + &:hover { + background: var(--theme-elevation-100); + } + + &:active { + background: var(--theme-elevation-100); + } + } + } + + &--style-light-gray { + background: var(--theme-elevation-100); + color: var(--theme-elevation-800); + } + + &--style-warning { + background: var(--theme-warning-150); + color: var(--theme-warning-800); + } + + &--style-success { + background: var(--theme-success-150); + color: var(--theme-success-800); + } + + &--style-error { + background: var(--theme-error-150); + color: var(--theme-error-800); + } + + &--style-dark { + background: var(--theme-elevation-800); + color: var(--theme-elevation-0); + + svg { + @include color-svg(var(--theme-elevation-0)); } - &:active { - background: var(--theme-elevation-700); + &.pill--has-action { + &:hover { + background: var(--theme-elevation-750); + } + + &:active { + background: var(--theme-elevation-700); + } } } } diff --git a/packages/ui/src/elements/Popup/PopupButtonList/index.scss b/packages/ui/src/elements/Popup/PopupButtonList/index.scss index 7d70602a7c..81f08a684d 100644 --- a/packages/ui/src/elements/Popup/PopupButtonList/index.scss +++ b/packages/ui/src/elements/Popup/PopupButtonList/index.scss @@ -1,56 +1,58 @@ @import '../../../scss/styles.scss'; -.popup-button-list { - --list-button-padding: calc(var(--base) * 0.5); - display: flex; - flex-direction: column; - text-align: left; - gap: 3px; - [dir='rtl'] &__text-align--left { - text-align: right; - } - &__text-align--left { +@layer payload-default { + .popup-button-list { + --list-button-padding: calc(var(--base) * 0.5); + display: flex; + flex-direction: column; text-align: left; - } + gap: 3px; + [dir='rtl'] &__text-align--left { + text-align: right; + } + &__text-align--left { + text-align: left; + } - &__text-align--center { - text-align: center; - } - [dir='rtl'] &__text-align--right { - text-align: left; - } - &__text-align--right { - text-align: right; - } + &__text-align--center { + text-align: center; + } + [dir='rtl'] &__text-align--right { + text-align: left; + } + &__text-align--right { + text-align: right; + } - &__button { - @extend %btn-reset; - padding-left: var(--list-button-padding); - padding-right: var(--list-button-padding); - padding-top: 2px; - padding-bottom: 2px; - cursor: pointer; - text-align: inherit; - line-height: var(--base); - text-decoration: none; - border-radius: 3px; - - button { + &__button { @extend %btn-reset; + padding-left: var(--list-button-padding); + padding-right: var(--list-button-padding); + padding-top: 2px; + padding-bottom: 2px; + cursor: pointer; + text-align: inherit; + line-height: var(--base); + text-decoration: none; + border-radius: 3px; - &:focus-visible { - outline: none; + button { + @extend %btn-reset; + + &:focus-visible { + outline: none; + } + } + + &:hover, + &:focus-visible, + &:focus-within { + background-color: var(--popup-button-highlight); } } - &:hover, - &:focus-visible, - &:focus-within { - background-color: var(--popup-button-highlight); + &__button--selected { + background-color: var(--theme-elevation-150); } } - - &__button--selected { - background-color: var(--theme-elevation-150); - } } diff --git a/packages/ui/src/elements/Popup/PopupTrigger/index.scss b/packages/ui/src/elements/Popup/PopupTrigger/index.scss index 6885746424..65d3f71770 100644 --- a/packages/ui/src/elements/Popup/PopupTrigger/index.scss +++ b/packages/ui/src/elements/Popup/PopupTrigger/index.scss @@ -1,29 +1,31 @@ @import '../../../scss/styles.scss'; -.popup-button { - height: 100%; - color: currentColor; - padding: 0; - font-size: inherit; - line-height: inherit; - font-family: inherit; - border: 0; - cursor: pointer; - display: inline-flex; +@layer payload-default { + .popup-button { + height: 100%; + color: currentColor; + padding: 0; + font-size: inherit; + line-height: inherit; + font-family: inherit; + border: 0; + cursor: pointer; + display: inline-flex; - &--background { - background: transparent; - } + &--background { + background: transparent; + } - &--size-small { - padding: base(0.4); - } + &--size-small { + padding: base(0.4); + } - &--size-medium { - padding: base(0.6); - } + &--size-medium { + padding: base(0.6); + } - &--size-large { - padding: base(0.8); + &--size-large { + padding: base(0.8); + } } } diff --git a/packages/ui/src/elements/Popup/index.scss b/packages/ui/src/elements/Popup/index.scss index 6aaf5835cc..d71c0fbda6 100644 --- a/packages/ui/src/elements/Popup/index.scss +++ b/packages/ui/src/elements/Popup/index.scss @@ -1,216 +1,147 @@ @import '../../scss/styles.scss'; -.popup { - --popup-button-highlight: var(--theme-elevation-200); - --popup-bg: var(--theme-input-bg); - --popup-text: var(--theme-text); - --popup-caret-size: 10px; - --popup-x-padding: calc(var(--base) * 0.33); - --popup-padding: calc(var(--base) * 0.5); - --button-size-offset: -8px; - position: relative; - - &__trigger-wrap { - display: flex; - align-items: stretch; - height: 100%; - } - - &__content { - position: absolute; - background: var(--popup-bg); - opacity: 0; - visibility: hidden; - pointer-events: none; - z-index: var(--z-popup); - max-width: calc(100vw - #{$baseline}); - color: var(--popup-text); - border-radius: 4px; - padding-left: var(--popup-padding); - padding-right: var(--popup-padding); - min-width: var(--popup-width, auto); - } - - &__hide-scrollbar { - overflow: hidden; - } - - &__scroll-container { - overflow-y: auto; - white-space: nowrap; - width: calc(100% + var(--scrollbar-width)); - padding-top: var(--popup-padding); - padding-bottom: var(--popup-padding); - } - - &__scroll-content { - width: calc(100% - var(--scrollbar-width)); - } - - &--show-scrollbar { - .popup__scroll-container, - .popup__scroll-content { - width: 100%; - } - } - - &:focus, - &:active { - outline: none; - } - - //////////////////////////////// - // SIZE - //////////////////////////////// - - &--size-small { - --popup-width: 100px; - .popup__content { - @include shadow-m; - } - } - - &--size-medium { - --popup-width: 150px; - .popup__content { - @include shadow-lg; - } - } - - &--size-large { - --popup-width: 200px; - .popup__content { - @include shadow-lg; - } - } - - //////////////////////////////// - /// BUTTON SIZE - //////////////////////////////// - - &--button-size-small { +@layer payload-default { + .popup { + --popup-button-highlight: var(--theme-elevation-200); + --popup-bg: var(--theme-input-bg); + --popup-text: var(--theme-text); + --popup-caret-size: 10px; + --popup-x-padding: calc(var(--base) * 0.33); + --popup-padding: calc(var(--base) * 0.5); --button-size-offset: -8px; - } + position: relative; - &--button-size-medium { - --button-size-offset: -4px; - } - - &--button-size-large { - --button-size-offset: 0px; - } - - //////////////////////////////// - // HORIZONTAL ALIGNMENT - //////////////////////////////// - [dir='rtl'] &--h-align-left { - .popup__caret { - right: var(--popup-padding); - left: unset; - } - } - &--h-align-left { - .popup__caret { - left: var(--popup-padding); - } - } - &--h-align-center { - .popup__content { - left: 50%; - transform: translateX(-50%); + &__trigger-wrap { + display: flex; + align-items: stretch; + height: 100%; } - .popup__caret { - left: 50%; - transform: translateX(-50%); - } - } - - [dir='rtl'] &--h-align-right { - .popup__content { - right: unset; - left: 0; + &__content { + position: absolute; + background: var(--popup-bg); + opacity: 0; + visibility: hidden; + pointer-events: none; + z-index: var(--z-popup); + max-width: calc(100vw - #{$baseline}); + color: var(--popup-text); + border-radius: 4px; + padding-left: var(--popup-padding); + padding-right: var(--popup-padding); + min-width: var(--popup-width, auto); } - .popup__caret { - right: unset; - left: var(--popup-padding); - } - } - - &--h-align-right { - .popup__content { - right: var(--button-size-offset); + &__hide-scrollbar { + overflow: hidden; } - .popup__caret { - right: var(--popup-padding); - } - } - - //////////////////////////////// - // VERTICAL ALIGNMENT - //////////////////////////////// - - &__caret { - position: absolute; - border: var(--popup-caret-size) solid transparent; - } - - &--v-align-top { - .popup__content { - @include shadow-lg; - bottom: calc(100% + var(--popup-caret-size)); + &__scroll-container { + overflow-y: auto; + white-space: nowrap; + width: calc(100% + var(--scrollbar-width)); + padding-top: var(--popup-padding); + padding-bottom: var(--popup-padding); } - .popup__caret { - top: calc(100% - 1px); - border-top-color: var(--popup-bg); - } - } - - &--v-align-bottom { - .popup__content { - @include shadow-lg-top; - top: calc(100% + var(--popup-caret-size)); + &__scroll-content { + width: calc(100% - var(--scrollbar-width)); } - .popup__caret { - bottom: calc(100% - 1px); - border-bottom-color: var(--popup-bg); + &--show-scrollbar { + .popup__scroll-container, + .popup__scroll-content { + width: 100%; + } } - } - //////////////////////////////// - // ACTIVE - //////////////////////////////// - - &--active { - .popup__content { - opacity: 1; - visibility: visible; - pointer-events: all; + &:focus, + &:active { + outline: none; } - } - @include mid-break { - --popup-padding: calc(var(--base) * 0.25); + //////////////////////////////// + // SIZE + //////////////////////////////// + &--size-small { + --popup-width: 100px; + .popup__content { + @include shadow-m; + } + } + + &--size-medium { + --popup-width: 150px; + .popup__content { + @include shadow-lg; + } + } + + &--size-large { + --popup-width: 200px; + .popup__content { + @include shadow-lg; + } + } + + //////////////////////////////// + /// BUTTON SIZE + //////////////////////////////// + + &--button-size-small { + --button-size-offset: -8px; + } + + &--button-size-medium { + --button-size-offset: -4px; + } + + &--button-size-large { + --button-size-offset: 0px; + } + + //////////////////////////////// + // HORIZONTAL ALIGNMENT + //////////////////////////////// + [dir='rtl'] &--h-align-left { + .popup__caret { + right: var(--popup-padding); + left: unset; + } + } + &--h-align-left { + .popup__caret { + left: var(--popup-padding); + } + } &--h-align-center { .popup__content { left: 50%; - transform: translateX(-0%); + transform: translateX(-50%); } .popup__caret { left: 50%; - transform: translateX(-0%); + transform: translateX(-50%); + } + } + + [dir='rtl'] &--h-align-right { + .popup__content { + right: unset; + left: 0; + } + + .popup__caret { + right: unset; + left: var(--popup-padding); } } &--h-align-right { .popup__content { - right: 0; + right: var(--button-size-offset); } .popup__caret { @@ -218,31 +149,102 @@ } } - &--force-h-align-left { + //////////////////////////////// + // VERTICAL ALIGNMENT + //////////////////////////////// + + &__caret { + position: absolute; + border: var(--popup-caret-size) solid transparent; + } + + &--v-align-top { .popup__content { - left: 0; - right: unset; - transform: unset; + @include shadow-lg; + bottom: calc(100% + var(--popup-caret-size)); } .popup__caret { - left: var(--popup-padding); - right: unset; - transform: unset; + top: calc(100% - 1px); + border-top-color: var(--popup-bg); } } - &--force-h-align-right { + &--v-align-bottom { .popup__content { - right: 0; - left: unset; - transform: unset; + @include shadow-lg-top; + top: calc(100% + var(--popup-caret-size)); } .popup__caret { - right: var(--popup-padding); - left: unset; - transform: unset; + bottom: calc(100% - 1px); + border-bottom-color: var(--popup-bg); + } + } + + //////////////////////////////// + // ACTIVE + //////////////////////////////// + + &--active { + .popup__content { + opacity: 1; + visibility: visible; + pointer-events: all; + } + } + + @include mid-break { + --popup-padding: calc(var(--base) * 0.25); + + &--h-align-center { + .popup__content { + left: 50%; + transform: translateX(-0%); + } + + .popup__caret { + left: 50%; + transform: translateX(-0%); + } + } + + &--h-align-right { + .popup__content { + right: 0; + } + + .popup__caret { + right: var(--popup-padding); + } + } + + &--force-h-align-left { + .popup__content { + left: 0; + right: unset; + transform: unset; + } + + .popup__caret { + left: var(--popup-padding); + right: unset; + transform: unset; + } + } + + &--force-h-align-right { + .popup__content { + right: 0; + left: unset; + transform: unset; + } + + .popup__caret { + right: var(--popup-padding); + left: unset; + transform: unset; + } } } } diff --git a/packages/ui/src/elements/PreviewSizes/index.scss b/packages/ui/src/elements/PreviewSizes/index.scss index c3284362f6..f4d5ac3ac5 100644 --- a/packages/ui/src/elements/PreviewSizes/index.scss +++ b/packages/ui/src/elements/PreviewSizes/index.scss @@ -1,145 +1,147 @@ @import '../../scss/styles.scss'; -.preview-sizes { - margin: base(2) calc(var(--gutter-h) * -1) 0 calc(var(--gutter-h) * -1); - border-top: 1px solid var(--theme-elevation-150); - max-height: calc(100vh - base(6)); - height: 100%; - display: flex; - flex-direction: row; - - &__imageWrap { - min-width: 60%; - border-right: 1px solid var(--theme-elevation-150); - } - - &__preview { - max-height: calc(100% - base(6)); - padding: base(1.5) base(1.5) base(1.5) var(--gutter-h); - object-fit: contain; - } - - &__meta { - border-bottom: 1px solid var(--theme-elevation-150); - padding: base(1) var(--gutter-h); +@layer payload-default { + .preview-sizes { + margin: base(2) calc(var(--gutter-h) * -1) 0 calc(var(--gutter-h) * -1); + border-top: 1px solid var(--theme-elevation-150); + max-height: calc(100vh - base(6)); + height: 100%; display: flex; - flex-wrap: wrap; - column-gap: base(1); + flex-direction: row; - .file-meta { + &__imageWrap { + min-width: 60%; + border-right: 1px solid var(--theme-elevation-150); + } + + &__preview { + max-height: calc(100% - base(6)); + padding: base(1.5) base(1.5) base(1.5) var(--gutter-h); + object-fit: contain; + } + + &__meta { + border-bottom: 1px solid var(--theme-elevation-150); + padding: base(1) var(--gutter-h); display: flex; flex-wrap: wrap; column-gap: base(1); - text-wrap: wrap; - width: 100%; + + .file-meta { + display: flex; + flex-wrap: wrap; + column-gap: base(1); + text-wrap: wrap; + width: 100%; + } + + .file-meta__url { + width: 100%; + } } - .file-meta__url { - width: 100%; - } - } - - &__sizeName, - .file-meta__size-type { - color: var(--theme-elevation-600); - } - - &__listWrap { - padding-right: var(--gutter-h); - overflow-y: scroll; - - &::-webkit-scrollbar { - width: 0; - } - - &::after { - content: ''; - display: block; - position: sticky; - bottom: 0; - left: 0; - height: base(4); - width: 100%; - background: linear-gradient(180deg, transparent 0, var(--theme-bg) 100%); - pointer-events: none; - } - } - - &__list { - list-style: none; - display: flex; - flex-direction: column; - gap: base(0.5); - margin: 0; - padding: base(1.5) 0 base(1.5) base(1.5); - } - - &__sizeOption { - padding: base(0.5); - display: flex; - gap: base(1); - cursor: pointer; - transition: background-color 0.2s ease-in-out; - - &:hover { - background-color: var(--theme-elevation-100); - } - } - - &--selected { - background-color: var(--theme-elevation-100); - } - - &__image { - display: flex; - width: 30%; - min-width: 30%; - align-items: center; - justify-content: center; - } - - &__sizeMeta { - padding: base(0.5) 0; - } - - &__sizeName, - &__sizeMeta { - overflow: hidden; - text-overflow: ellipsis; - } - - @include mid-break { - margin-top: base(1); - max-height: calc(100vh - base(4)); - } - - @include small-break { - margin-top: 0; - max-height: calc(100vh - base(3.5)); - flex-direction: column; - justify-content: space-between; - - &__imageWrap { - height: 60%; - border: none; - } - - &__list, - &__preview { - padding: calc(var(--gutter-h) * 2) var(--gutter-h); - } - - &__preview { - max-height: calc(100% - base(4)); - } - - &__sizeOption { - padding: base(0.25); + &__sizeName, + .file-meta__size-type { + color: var(--theme-elevation-600); } &__listWrap { - border-top: 1px solid var(--theme-elevation-150); - height: 40%; + padding-right: var(--gutter-h); + overflow-y: scroll; + + &::-webkit-scrollbar { + width: 0; + } + + &::after { + content: ''; + display: block; + position: sticky; + bottom: 0; + left: 0; + height: base(4); + width: 100%; + background: linear-gradient(180deg, transparent 0, var(--theme-bg) 100%); + pointer-events: none; + } + } + + &__list { + list-style: none; + display: flex; + flex-direction: column; + gap: base(0.5); + margin: 0; + padding: base(1.5) 0 base(1.5) base(1.5); + } + + &__sizeOption { + padding: base(0.5); + display: flex; + gap: base(1); + cursor: pointer; + transition: background-color 0.2s ease-in-out; + + &:hover { + background-color: var(--theme-elevation-100); + } + } + + &--selected { + background-color: var(--theme-elevation-100); + } + + &__image { + display: flex; + width: 30%; + min-width: 30%; + align-items: center; + justify-content: center; + } + + &__sizeMeta { + padding: base(0.5) 0; + } + + &__sizeName, + &__sizeMeta { + overflow: hidden; + text-overflow: ellipsis; + } + + @include mid-break { + margin-top: base(1); + max-height: calc(100vh - base(4)); + } + + @include small-break { + margin-top: 0; + max-height: calc(100vh - base(3.5)); + flex-direction: column; + justify-content: space-between; + + &__imageWrap { + height: 60%; + border: none; + } + + &__list, + &__preview { + padding: calc(var(--gutter-h) * 2) var(--gutter-h); + } + + &__preview { + max-height: calc(100% - base(4)); + } + + &__sizeOption { + padding: base(0.25); + } + + &__listWrap { + border-top: 1px solid var(--theme-elevation-150); + height: 40%; + } } } } diff --git a/packages/ui/src/elements/PublishMany/index.scss b/packages/ui/src/elements/PublishMany/index.scss index 94864a7f1e..804a464089 100644 --- a/packages/ui/src/elements/PublishMany/index.scss +++ b/packages/ui/src/elements/PublishMany/index.scss @@ -1,37 +1,39 @@ @import '../../scss/styles.scss'; -.publish-many { - @include blur-bg; - display: flex; - align-items: center; - justify-content: center; - height: 100%; - - &__wrapper { - z-index: 1; - position: relative; +@layer payload-default { + .publish-many { + @include blur-bg; display: flex; - flex-direction: column; - gap: base(0.8); - padding: base(2); - } + align-items: center; + justify-content: center; + height: 100%; - &__content { - display: flex; - flex-direction: column; - gap: base(0.4); - - > * { - margin: 0; + &__wrapper { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + gap: base(0.8); + padding: base(2); } - } - &__controls { - display: flex; - gap: base(0.4); + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); - .btn { - margin: 0; + > * { + margin: 0; + } + } + + &__controls { + display: flex; + gap: base(0.4); + + .btn { + margin: 0; + } } } } diff --git a/packages/ui/src/elements/ReactSelect/ClearIndicator/index.scss b/packages/ui/src/elements/ReactSelect/ClearIndicator/index.scss index 694307444b..e11e0e9290 100644 --- a/packages/ui/src/elements/ReactSelect/ClearIndicator/index.scss +++ b/packages/ui/src/elements/ReactSelect/ClearIndicator/index.scss @@ -1,9 +1,11 @@ @import '../../../scss/styles.scss'; -.clear-indicator { - cursor: pointer; +@layer payload-default { + .clear-indicator { + cursor: pointer; - &:focus-visible { - outline: var(--accessibility-outline); + &:focus-visible { + outline: var(--accessibility-outline); + } } } diff --git a/packages/ui/src/elements/ReactSelect/DropdownIndicator/index.scss b/packages/ui/src/elements/ReactSelect/DropdownIndicator/index.scss index 3c1af3c3bd..09e4ca8a8e 100644 --- a/packages/ui/src/elements/ReactSelect/DropdownIndicator/index.scss +++ b/packages/ui/src/elements/ReactSelect/DropdownIndicator/index.scss @@ -1,16 +1,18 @@ @import '../../../scss/styles.scss'; -.dropdown-indicator { - cursor: pointer; - @include btn-reset; +@layer payload-default { + .dropdown-indicator { + cursor: pointer; + @include btn-reset; - &:focus-visible { - outline: var(--accessibility-outline); - } + &:focus-visible { + outline: var(--accessibility-outline); + } - &__icon { - .stroke { - stroke-width: 1px; + &__icon { + .stroke { + stroke-width: 1px; + } } } } diff --git a/packages/ui/src/elements/ReactSelect/MultiValue/index.scss b/packages/ui/src/elements/ReactSelect/MultiValue/index.scss index 1960b17725..c1ecec8bf8 100644 --- a/packages/ui/src/elements/ReactSelect/MultiValue/index.scss +++ b/packages/ui/src/elements/ReactSelect/MultiValue/index.scss @@ -1,37 +1,39 @@ @import '../../../scss/styles.scss'; -.multi-value { - &.rs__multi-value { - display: flex; - padding: 0; - border: 1px solid var(--theme-border-color); - border-radius: var(--style-radius-s); - line-height: calc(#{$baseline} - 2px); - margin: base(0.25) base(0.5) base(0.25) 0; - transition: border 0.2s cubic-bezier(0.2, 0, 0, 1); - - &:hover { - border: 1px solid var(--theme-elevation-250); - } - } - - &--is-dragging { - z-index: 2; - } -} - -html[data-theme='light'] { +@layer payload-default { .multi-value { &.rs__multi-value { - background: var(--theme-elevation-50); - } - } -} + display: flex; + padding: 0; + border: 1px solid var(--theme-border-color); + border-radius: var(--style-radius-s); + line-height: calc(#{$baseline} - 2px); + margin: base(0.25) base(0.5) base(0.25) 0; + transition: border 0.2s cubic-bezier(0.2, 0, 0, 1); -html[data-theme='dark'] { - .multi-value { - &.rs__multi-value { - background: var(--theme-elevation-50); + &:hover { + border: 1px solid var(--theme-elevation-250); + } + } + + &--is-dragging { + z-index: 2; + } + } + + html[data-theme='light'] { + .multi-value { + &.rs__multi-value { + background: var(--theme-elevation-50); + } + } + } + + html[data-theme='dark'] { + .multi-value { + &.rs__multi-value { + background: var(--theme-elevation-50); + } } } } diff --git a/packages/ui/src/elements/ReactSelect/MultiValueLabel/index.scss b/packages/ui/src/elements/ReactSelect/MultiValueLabel/index.scss index 93253c7e28..22b5294827 100644 --- a/packages/ui/src/elements/ReactSelect/MultiValueLabel/index.scss +++ b/packages/ui/src/elements/ReactSelect/MultiValueLabel/index.scss @@ -1,20 +1,22 @@ @import '../../../scss/styles.scss'; -.multi-value-label { - @extend %small; - display: flex; - align-items: center; - max-width: 150px; - color: currentColor; - padding: 0 base(0.4); +@layer payload-default { + .multi-value-label { + @extend %small; + display: flex; + align-items: center; + max-width: 150px; + color: currentColor; + padding: 0 base(0.4); - &__text { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } + &__text { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } - &:focus-visible { - outline: var(--accessibility-outline); + &:focus-visible { + outline: var(--accessibility-outline); + } } } diff --git a/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.scss b/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.scss index 3b543655c4..df7399ee20 100644 --- a/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.scss +++ b/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.scss @@ -1,24 +1,26 @@ @import '../../../scss/styles.scss'; -.multi-value-remove { - cursor: pointer; - width: base(1); - display: flex; - align-items: center; - justify-content: center; - position: relative; - background-color: transparent; - border: none; - padding: 0; - color: inherit; +@layer payload-default { + .multi-value-remove { + cursor: pointer; + width: base(1); + display: flex; + align-items: center; + justify-content: center; + position: relative; + background-color: transparent; + border: none; + padding: 0; + color: inherit; - &:hover { - color: var(--theme-elevation-800); - background: var(--theme-elevation-150); - } + &:hover { + color: var(--theme-elevation-800); + background: var(--theme-elevation-150); + } - &__icon { - width: 100%; - height: 100%; + &__icon { + width: 100%; + height: 100%; + } } } diff --git a/packages/ui/src/elements/ReactSelect/ValueContainer/index.scss b/packages/ui/src/elements/ReactSelect/ValueContainer/index.scss index 5aeb03af16..47901e7ef7 100644 --- a/packages/ui/src/elements/ReactSelect/ValueContainer/index.scss +++ b/packages/ui/src/elements/ReactSelect/ValueContainer/index.scss @@ -1,31 +1,33 @@ @import '../../../scss/styles.scss'; -.value-container { - flex-grow: 1; - min-width: 0; +@layer payload-default { + .value-container { + flex-grow: 1; + min-width: 0; - .rs__value-container { - overflow: visible; - padding: 2px; - gap: 2px; + .rs__value-container { + overflow: visible; + padding: 2px; + gap: 2px; - > * { - margin: 0; - padding-top: 0; - padding-bottom: 0; - color: currentColor; - - .field-label { + > * { + margin: 0; + padding-top: 0; padding-bottom: 0; + color: currentColor; + + .field-label { + padding-bottom: 0; + } } - } - &--is-multi { - width: calc(100% + base(0.25)); + &--is-multi { + width: calc(100% + base(0.25)); - &.rs__value-container--has-value { - padding: 0; - margin-inline-start: -4px; + &.rs__value-container--has-value { + padding: 0; + margin-inline-start: -4px; + } } } } diff --git a/packages/ui/src/elements/ReactSelect/index.scss b/packages/ui/src/elements/ReactSelect/index.scss index 29409f6d23..60cc186ee5 100644 --- a/packages/ui/src/elements/ReactSelect/index.scss +++ b/packages/ui/src/elements/ReactSelect/index.scss @@ -1,81 +1,83 @@ @import '../../scss/styles'; -.react-select-container { - width: 100%; -} - -.react-select { - .rs__control { - @include formInput; - height: auto; - padding: base(0.4) base(0.6); - flex-wrap: nowrap; +@layer payload-default { + .react-select-container { + width: 100%; } - .rs__indicators { - gap: calc(var(--base) / 4); - } - - .rs__indicator { - padding: 0px 4px; - cursor: pointer; - } - - .rs__indicator-separator { - display: none; - } - - .rs__input-container { - color: var(--theme-elevation-1000); - } - - .rs__input { - font-family: var(--font-body); - width: 10px; - } - - .rs__menu { - z-index: 4; - border-radius: 0; - @include shadow-lg; - background: var(--theme-input-bg); - } - - .rs__group-heading { - color: var(--theme-elevation-800); - padding-left: base(0.5); - margin-bottom: base(0.25); - } - - .rs__option { - font-family: var(--font-body); - font-size: $baseline-body-size; - padding: base(0.375) base(0.75); - color: var(--theme-elevation-800); - - &--is-focused { - background-color: var(--theme-elevation-100); + .react-select { + .rs__control { + @include formInput; + height: auto; + padding: base(0.4) base(0.6); + flex-wrap: nowrap; } - &--is-selected { - background-color: var(--theme-elevation-300); + .rs__indicators { + gap: calc(var(--base) / 4); } - } - &--error, - &--error:hover, - &--error:focus-within { - div.rs__control { - background-color: var(--theme-error-50); - border: 1px solid var(--theme-error-500); + .rs__indicator { + padding: 0px 4px; + cursor: pointer; + } - & > div.rs__indicator > button.dropdown-indicator[type='button'] { - border: none; + .rs__indicator-separator { + display: none; + } + + .rs__input-container { + color: var(--theme-elevation-1000); + } + + .rs__input { + font-family: var(--font-body); + width: 10px; + } + + .rs__menu { + z-index: 4; + border-radius: 0; + @include shadow-lg; + background: var(--theme-input-bg); + } + + .rs__group-heading { + color: var(--theme-elevation-800); + padding-left: base(0.5); + margin-bottom: base(0.25); + } + + .rs__option { + font-family: var(--font-body); + font-size: $baseline-body-size; + padding: base(0.375) base(0.75); + color: var(--theme-elevation-800); + + &--is-focused { + background-color: var(--theme-elevation-100); + } + + &--is-selected { + background-color: var(--theme-elevation-300); } } - } - &.rs--is-disabled .rs__control { - @include readOnly; + &--error, + &--error:hover, + &--error:focus-within { + div.rs__control { + background-color: var(--theme-error-50); + border: 1px solid var(--theme-error-500); + + & > div.rs__indicator > button.dropdown-indicator[type='button'] { + border: none; + } + } + } + + &.rs--is-disabled .rs__control { + @include readOnly; + } } } diff --git a/packages/ui/src/elements/RelationshipTable/cells/DrawerLink/index.scss b/packages/ui/src/elements/RelationshipTable/cells/DrawerLink/index.scss index 0df588c8cc..42d6e2268d 100644 --- a/packages/ui/src/elements/RelationshipTable/cells/DrawerLink/index.scss +++ b/packages/ui/src/elements/RelationshipTable/cells/DrawerLink/index.scss @@ -1,4 +1,6 @@ -.drawer-link { - display: flex; - gap: calc(var(--base) / 2); +@layer payload-default { + .drawer-link { + display: flex; + gap: calc(var(--base) / 2); + } } diff --git a/packages/ui/src/elements/RelationshipTable/index.scss b/packages/ui/src/elements/RelationshipTable/index.scss index 271e41bc3f..a2ccb6c410 100644 --- a/packages/ui/src/elements/RelationshipTable/index.scss +++ b/packages/ui/src/elements/RelationshipTable/index.scss @@ -1,26 +1,28 @@ -.relationship-table { - position: relative; +@layer payload-default { + .relationship-table { + position: relative; - &__header { - display: flex; - justify-content: space-between; - margin-bottom: var(--base); - } + &__header { + display: flex; + justify-content: space-between; + margin-bottom: var(--base); + } - &__actions { - display: flex; - align-items: center; - gap: var(--base); - } + &__actions { + display: flex; + align-items: center; + gap: var(--base); + } - &__columns-inner { - padding-bottom: var(--base); - } + &__columns-inner { + padding-bottom: var(--base); + } - .table { - th, - td:first-child { - min-width: 0; + .table { + th, + td:first-child { + min-width: 0; + } } } } diff --git a/packages/ui/src/elements/RenderTitle/index.scss b/packages/ui/src/elements/RenderTitle/index.scss index cb6254a4df..33a301fdd7 100644 --- a/packages/ui/src/elements/RenderTitle/index.scss +++ b/packages/ui/src/elements/RenderTitle/index.scss @@ -1,9 +1,11 @@ @import '../../scss/styles.scss'; -.render-title { - display: inline-block; - &__id { - vertical-align: middle; - position: relative; +@layer payload-default { + .render-title { + display: inline-block; + &__id { + vertical-align: middle; + position: relative; + } } } diff --git a/packages/ui/src/elements/SearchFilter/index.scss b/packages/ui/src/elements/SearchFilter/index.scss index bec9c94622..8de168b175 100644 --- a/packages/ui/src/elements/SearchFilter/index.scss +++ b/packages/ui/src/elements/SearchFilter/index.scss @@ -1,36 +1,39 @@ @import '../../scss/styles'; -[dir='rtl'] .search-filter { - svg { - right: base(0.5); - left: 0; - } - &__input { - padding-right: base(2); - padding-left: 0; - } -} -.search-filter { - position: relative; - svg { - position: absolute; - top: 50%; - transform: translateY(-50%); - left: base(0.5); +@layer payload-default { + [dir='rtl'] .search-filter { + svg { + right: base(0.5); + left: 0; + } + &__input { + padding-right: base(2); + padding-left: 0; + } } + .search-filter { + position: relative; - &__input { - @include formInput; - height: auto; - padding: 0; - box-shadow: none; - background-color: var(--theme-elevation-50); - border: none; + svg { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: base(0.5); + } - &:not(:disabled) { - &:hover, - &:focus { - box-shadow: none; + &__input { + @include formInput; + height: auto; + padding: 0; + box-shadow: none; + background-color: var(--theme-elevation-50); + border: none; + + &:not(:disabled) { + &:hover, + &:focus { + box-shadow: none; + } } } } diff --git a/packages/ui/src/elements/SelectAll/index.scss b/packages/ui/src/elements/SelectAll/index.scss index 9530c4e045..c2c74692da 100644 --- a/packages/ui/src/elements/SelectAll/index.scss +++ b/packages/ui/src/elements/SelectAll/index.scss @@ -1,5 +1,7 @@ -.select-all { - &__checkbox { - display: block; +@layer payload-default { + .select-all { + &__checkbox { + display: block; + } } } diff --git a/packages/ui/src/elements/SelectRow/index.scss b/packages/ui/src/elements/SelectRow/index.scss index 9e316db580..f0baca873c 100644 --- a/packages/ui/src/elements/SelectRow/index.scss +++ b/packages/ui/src/elements/SelectRow/index.scss @@ -1,6 +1,8 @@ -.select-row { - &__checkbox { - display: block; - width: min-content; +@layer payload-default { + .select-row { + &__checkbox { + display: block; + width: min-content; + } } } diff --git a/packages/ui/src/elements/ShimmerEffect/index.scss b/packages/ui/src/elements/ShimmerEffect/index.scss index 402542fed1..5c16f0964f 100644 --- a/packages/ui/src/elements/ShimmerEffect/index.scss +++ b/packages/ui/src/elements/ShimmerEffect/index.scss @@ -1,29 +1,31 @@ -.shimmer-effect { - position: relative; - overflow: hidden; - background-color: var(--theme-elevation-50); +@layer payload-default { + .shimmer-effect { + position: relative; + overflow: hidden; + background-color: var(--theme-elevation-50); - &__shine { - position: absolute; - scale: 1.5; - width: 100%; - height: 100%; - transform: translateX(-100%); - animation: shimmer 1.75s infinite; - opacity: 0.75; - background: linear-gradient( - 100deg, - var(--theme-elevation-50) 0%, - var(--theme-elevation-50) 15%, - var(--theme-elevation-150) 50%, - var(--theme-elevation-50) 85%, - var(--theme-elevation-50) 100% - ); - } -} - -@keyframes shimmer { - 100% { - transform: translate3d(100%, 0, 0); + &__shine { + position: absolute; + scale: 1.5; + width: 100%; + height: 100%; + transform: translateX(-100%); + animation: shimmer 1.75s infinite; + opacity: 0.75; + background: linear-gradient( + 100deg, + var(--theme-elevation-50) 0%, + var(--theme-elevation-50) 15%, + var(--theme-elevation-150) 50%, + var(--theme-elevation-50) 85%, + var(--theme-elevation-50) 100% + ); + } + } + + @keyframes shimmer { + 100% { + transform: translate3d(100%, 0, 0); + } } } diff --git a/packages/ui/src/elements/SortColumn/index.scss b/packages/ui/src/elements/SortColumn/index.scss index e3b65b4263..4d62dca9e0 100644 --- a/packages/ui/src/elements/SortColumn/index.scss +++ b/packages/ui/src/elements/SortColumn/index.scss @@ -1,66 +1,68 @@ @import '../../scss/styles.scss'; -.sort-column { - display: flex; - gap: calc(var(--base) / 2); - align-items: center; - - &__label { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - &__label, - .btn { - vertical-align: middle; - display: inline-block; - } - - &__label { - cursor: default; - } - - &__buttons { +@layer payload-default { + .sort-column { display: flex; + gap: calc(var(--base) / 2); align-items: center; - gap: calc(var(--base) / 4); - } - &__button { - margin: 0; - opacity: 0.3; - padding: calc(var(--base) / 4); - display: inline-flex; - align-items: center; - justify-content: center; - background: transparent; - border: none; - outline: none; - cursor: pointer; + &__label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } - &.sort-column--active { - opacity: 1; - visibility: visible; + &__label, + .btn { + vertical-align: middle; + display: inline-block; + } + + &__label { + cursor: default; + } + + &__buttons { + display: flex; + align-items: center; + gap: calc(var(--base) / 4); + } + + &__button { + margin: 0; + opacity: 0.3; + padding: calc(var(--base) / 4); + display: inline-flex; + align-items: center; + justify-content: center; + background: transparent; + border: none; + outline: none; + cursor: pointer; + + &.sort-column--active { + opacity: 1; + visibility: visible; + } + + &:hover { + opacity: 0.7; + } } &:hover { - opacity: 0.7; + .btn { + opacity: 0.4; + visibility: visible; + } } - } - &:hover { - .btn { - opacity: 0.4; - visibility: visible; - } - } + &--appearance-condensed { + gap: calc(var(--base) / 4); - &--appearance-condensed { - gap: calc(var(--base) / 4); - - .sort-column__buttons { - gap: 0; + .sort-column__buttons { + gap: 0; + } } } } diff --git a/packages/ui/src/elements/SortComplex/index.scss b/packages/ui/src/elements/SortComplex/index.scss index ce07889551..a04a32cecd 100644 --- a/packages/ui/src/elements/SortComplex/index.scss +++ b/packages/ui/src/elements/SortComplex/index.scss @@ -1,36 +1,38 @@ @import '../../scss/styles.scss'; -.sort-complex { - background: var(--theme-elevation-100); - padding: base(0.5); - display: flex; - - &__wrap { - width: 100%; +@layer payload-default { + .sort-complex { + background: var(--theme-elevation-100); + padding: base(0.5); display: flex; - align-items: center; - } - &__select { - width: 50%; - margin-bottom: base(0.5); - padding: 0 base(0.5); - flex-grow: 1; - } - - &__label { - color: var(--theme-elevation-400); - margin: base(0.5) 0; - } - - @include mid-break { &__wrap { - display: block; + width: 100%; + display: flex; + align-items: center; } &__select { - margin: 0 0 base(0.5); - width: 100%; + width: 50%; + margin-bottom: base(0.5); + padding: 0 base(0.5); + flex-grow: 1; + } + + &__label { + color: var(--theme-elevation-400); + margin: base(0.5) 0; + } + + @include mid-break { + &__wrap { + display: block; + } + + &__select { + margin: 0 0 base(0.5); + width: 100%; + } } } } diff --git a/packages/ui/src/elements/Status/index.scss b/packages/ui/src/elements/Status/index.scss index 794c45bb4e..8a802c484c 100644 --- a/packages/ui/src/elements/Status/index.scss +++ b/packages/ui/src/elements/Status/index.scss @@ -1,60 +1,62 @@ @import '../../scss/styles.scss'; -.status { - &__label { - color: var(--theme-elevation-500); - } - - &__value { - font-weight: 600; - } - - &__value-wrap { - white-space: nowrap; - } - - &__action { - text-decoration: underline; - } - - &__modal { - @include blur-bg; - display: flex; - align-items: center; - justify-content: center; - height: 100%; - - &__toggle { - @extend %btn-reset; +@layer payload-default { + .status { + &__label { + color: var(--theme-elevation-500); } - } - &__wrapper { - z-index: 1; - position: relative; - display: flex; - flex-direction: column; - gap: base(0.8); - padding: base(2); - max-width: base(36); - } - - &__content { - display: flex; - flex-direction: column; - gap: base(0.4); - - > * { - margin: 0; + &__value { + font-weight: 600; } - } - &__controls { - display: flex; - gap: base(0.4); + &__value-wrap { + white-space: nowrap; + } - .btn { - margin: 0; + &__action { + text-decoration: underline; + } + + &__modal { + @include blur-bg; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + + &__toggle { + @extend %btn-reset; + } + } + + &__wrapper { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + gap: base(0.8); + padding: base(2); + max-width: base(36); + } + + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); + + > * { + margin: 0; + } + } + + &__controls { + display: flex; + gap: base(0.4); + + .btn { + margin: 0; + } } } } diff --git a/packages/ui/src/elements/StayLoggedIn/index.scss b/packages/ui/src/elements/StayLoggedIn/index.scss index 28459881ea..e4b4ed6b0e 100644 --- a/packages/ui/src/elements/StayLoggedIn/index.scss +++ b/packages/ui/src/elements/StayLoggedIn/index.scss @@ -1,37 +1,39 @@ @import '../../scss/styles.scss'; -.stay-logged-in { - @include blur-bg; - display: flex; - align-items: center; - justify-content: center; - height: 100%; - - &__wrapper { - z-index: 1; - position: relative; +@layer payload-default { + .stay-logged-in { + @include blur-bg; display: flex; - flex-direction: column; - gap: var(--base); - padding: base(2); - } + align-items: center; + justify-content: center; + height: 100%; - &__content { - display: flex; - flex-direction: column; - gap: var(--base); - - > * { - margin: 0; + &__wrapper { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + gap: var(--base); + padding: base(2); } - } - &__controls { - display: flex; - gap: var(--base); + &__content { + display: flex; + flex-direction: column; + gap: var(--base); - .btn { - margin: 0; + > * { + margin: 0; + } + } + + &__controls { + display: flex; + gap: var(--base); + + .btn { + margin: 0; + } } } } diff --git a/packages/ui/src/elements/StepNav/index.scss b/packages/ui/src/elements/StepNav/index.scss index 927a6dac92..1de8698382 100644 --- a/packages/ui/src/elements/StepNav/index.scss +++ b/packages/ui/src/elements/StepNav/index.scss @@ -1,80 +1,81 @@ @import '../../scss/styles.scss'; - -.step-nav { - display: flex; - align-items: center; - gap: calc(var(--base) / 2); - - &::after { - content: ' '; - position: sticky; - top: 0; - right: 0; - width: var(--base); - background: linear-gradient(to right, transparent, var(--theme-bg)); - } - - // Use a pseudo element for the accessability so that it doesn't take up DOM space - // Also because the parent element has `overflow: hidden` which would clip an outline - &__home { - width: 18px; - height: 18px; - position: relative; - - &:focus-visible { - outline: none; - - &::after { - content: ''; - border: var(--accessibility-outline); - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - pointer-events: none; - } - } - } - - * { - display: block; - } - - a { - border: 0; +@layer payload-default { + .step-nav { display: flex; align-items: center; - font-weight: 600; - text-decoration: none; + gap: calc(var(--base) / 2); - label { - cursor: pointer; + &::after { + content: ' '; + position: sticky; + top: 0; + right: 0; + width: var(--base); + background: linear-gradient(to right, transparent, var(--theme-bg)); } - &:hover, - &:focus-visible { - text-decoration: underline; - } - } + // Use a pseudo element for the accessability so that it doesn't take up DOM space + // Also because the parent element has `overflow: hidden` which would clip an outline + &__home { + width: 18px; + height: 18px; + position: relative; - span { - max-width: base(8); - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } + &:focus-visible { + outline: none; - @include mid-break { - .step-nav { - &__home { - width: 16px; - height: 16px; + &::after { + content: ''; + border: var(--accessibility-outline); + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; + } } } - } - @include small-break { - gap: base(0.4); + * { + display: block; + } + + a { + border: 0; + display: flex; + align-items: center; + font-weight: 600; + text-decoration: none; + + label { + cursor: pointer; + } + + &:hover, + &:focus-visible { + text-decoration: underline; + } + } + + span { + max-width: base(8); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + @include mid-break { + .step-nav { + &__home { + width: 16px; + height: 16px; + } + } + } + + @include small-break { + gap: base(0.4); + } } } diff --git a/packages/ui/src/elements/Table/DefaultCell/fields/Checkbox/index.scss b/packages/ui/src/elements/Table/DefaultCell/fields/Checkbox/index.scss index eabbcee2b3..d0f99e532b 100644 --- a/packages/ui/src/elements/Table/DefaultCell/fields/Checkbox/index.scss +++ b/packages/ui/src/elements/Table/DefaultCell/fields/Checkbox/index.scss @@ -1,22 +1,24 @@ @import '../../../../../scss/styles.scss'; -.bool-cell { - font-size: 1rem; - line-height: base(1); - border: 0; - display: inline-flex; - vertical-align: middle; - background: var(--theme-elevation-150); - color: var(--theme-elevation-800); - border-radius: $style-radius-s; - padding: 0 base(0.25); - [dir='ltr'] & { - padding-left: base(0.0875 + 0.25); - } - [dir='rtl'] & { - padding-right: base(0.0875 + 0.25); - } +@layer payload-default { + .bool-cell { + font-size: 1rem; + line-height: base(1); + border: 0; + display: inline-flex; + vertical-align: middle; + background: var(--theme-elevation-150); + color: var(--theme-elevation-800); + border-radius: $style-radius-s; + padding: 0 base(0.25); + [dir='ltr'] & { + padding-left: base(0.0875 + 0.25); + } + [dir='rtl'] & { + padding-right: base(0.0875 + 0.25); + } - background: var(--theme-elevation-100); - color: var(--theme-elevation-800); + background: var(--theme-elevation-100); + color: var(--theme-elevation-800); + } } diff --git a/packages/ui/src/elements/Table/DefaultCell/fields/Code/index.scss b/packages/ui/src/elements/Table/DefaultCell/fields/Code/index.scss index 1d488cef2e..182abc6038 100644 --- a/packages/ui/src/elements/Table/DefaultCell/fields/Code/index.scss +++ b/packages/ui/src/elements/Table/DefaultCell/fields/Code/index.scss @@ -1,27 +1,29 @@ @import '../../../../../scss/styles.scss'; -.code-cell { - font-size: 1rem; - line-height: base(1); - border: 0; - display: inline-flex; - vertical-align: middle; - background: var(--theme-elevation-150); - color: var(--theme-elevation-800); - border-radius: $style-radius-m; - padding: 0 base(0.25); - background: var(--theme-elevation-100); - color: var(--theme-elevation-800); +@layer payload-default { + .code-cell { + font-size: 1rem; + line-height: base(1); + border: 0; + display: inline-flex; + vertical-align: middle; + background: var(--theme-elevation-150); + color: var(--theme-elevation-800); + border-radius: $style-radius-m; + padding: 0 base(0.25); + background: var(--theme-elevation-100); + color: var(--theme-elevation-800); - [dir='ltr'] & { - padding-left: base(0.0875 + 0.25); - } + [dir='ltr'] & { + padding-left: base(0.0875 + 0.25); + } - [dir='rtl'] & { - padding-right: base(0.0875 + 0.25); - } + [dir='rtl'] & { + padding-right: base(0.0875 + 0.25); + } - &:hover { - text-decoration: inherit; + &:hover { + text-decoration: inherit; + } } } diff --git a/packages/ui/src/elements/Table/DefaultCell/fields/File/index.scss b/packages/ui/src/elements/Table/DefaultCell/fields/File/index.scss index 846db8b635..7dd490968e 100644 --- a/packages/ui/src/elements/Table/DefaultCell/fields/File/index.scss +++ b/packages/ui/src/elements/Table/DefaultCell/fields/File/index.scss @@ -1,23 +1,25 @@ @import '../../../../../scss/styles.scss'; -.file { - display: flex; - flex-wrap: nowrap; +@layer payload-default { + .file { + display: flex; + flex-wrap: nowrap; - &__thumbnail { - display: inline-block; - max-width: calc(var(--base) * 2); - height: calc(var(--base) * 2); - border-radius: var(--style-radius-s); - } - - &__filename { - align-self: center; - [dir='ltr'] & { - margin-left: var(--base); + &__thumbnail { + display: inline-block; + max-width: calc(var(--base) * 2); + height: calc(var(--base) * 2); + border-radius: var(--style-radius-s); } - [dir='rtl'] & { - margin-right: var(--base); + + &__filename { + align-self: center; + [dir='ltr'] & { + margin-left: var(--base); + } + [dir='rtl'] & { + margin-right: var(--base); + } } } } diff --git a/packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.scss b/packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.scss index 52286f72ec..935aef0b9e 100644 --- a/packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.scss +++ b/packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.scss @@ -1,22 +1,24 @@ @import '../../../../../scss/styles.scss'; -.json-cell { - font-size: 1rem; - line-height: base(1); - border: 0; - display: inline-flex; - vertical-align: middle; - background: var(--theme-elevation-150); - color: var(--theme-elevation-800); - border-radius: $style-radius-m; - padding: 0 base(0.25); - [dir='ltr'] & { - padding-left: base(0.0875 + 0.25); - } - [dir='rtl'] & { - padding-right: base(0.0875 + 0.25); - } +@layer payload-default { + .json-cell { + font-size: 1rem; + line-height: base(1); + border: 0; + display: inline-flex; + vertical-align: middle; + background: var(--theme-elevation-150); + color: var(--theme-elevation-800); + border-radius: $style-radius-m; + padding: 0 base(0.25); + [dir='ltr'] & { + padding-left: base(0.0875 + 0.25); + } + [dir='rtl'] & { + padding-right: base(0.0875 + 0.25); + } - background: var(--theme-elevation-100); - color: var(--theme-elevation-800); + background: var(--theme-elevation-100); + color: var(--theme-elevation-800); + } } diff --git a/packages/ui/src/elements/Table/index.scss b/packages/ui/src/elements/Table/index.scss index 3c757a03e5..f4c5e5bd01 100644 --- a/packages/ui/src/elements/Table/index.scss +++ b/packages/ui/src/elements/Table/index.scss @@ -1,104 +1,106 @@ @import '../../scss/styles.scss'; -.table { - margin-bottom: $baseline; - overflow: auto; - max-width: 100%; +@layer payload-default { + .table { + margin-bottom: $baseline; + overflow: auto; + max-width: 100%; - table { - min-width: 100%; - } - - thead { - color: var(--theme-elevation-400); - - th { - font-weight: normal; - text-align: left; - [dir='rtl'] & { - text-align: right; - } - } - } - - th, - td { - vertical-align: top; - padding: base(0.8) base(0.6); - min-width: 150px; - - &:first-child { - padding-inline-start: base(0.8); + table { + min-width: 100%; } - &:last-child { - padding-inline-end: base(0.8); - } - } - - tbody { - tr { - &:nth-child(odd) { - background: var(--theme-elevation-50); - border-radius: $style-radius-s; - } - } - } - - a:focus-visible { - outline: var(--accessibility-outline); - outline-offset: var(--accessibility-outline-offset); - } - - &--appearance-condensed { thead { - th:first-child { - border-top-left-radius: $style-radius-s; - } + color: var(--theme-elevation-400); - th:last-child { - border-top-right-radius: $style-radius-s; - } - - background: var(--theme-elevation-50); - } - - tbody { - tr { - &:nth-child(odd) { - background: transparent; - border-radius: 0; + th { + font-weight: normal; + text-align: left; + [dir='rtl'] & { + text-align: right; } } } th, td { - padding: base(0.3) base(0.3); + vertical-align: top; + padding: base(0.8) base(0.6); + min-width: 150px; &:first-child { - padding-inline-start: base(0.6); + padding-inline-start: base(0.8); } &:last-child { - padding-inline-end: base(0.6); + padding-inline-end: base(0.8); } } - th { - padding: base(0.3); + tbody { + tr { + &:nth-child(odd) { + background: var(--theme-elevation-50); + border-radius: $style-radius-s; + } + } } - tr td, - th { - border: 0.5px solid var(--theme-elevation-100); + a:focus-visible { + outline: var(--accessibility-outline); + outline-offset: var(--accessibility-outline-offset); } - } - @include mid-break { - th, - td { - max-width: 70vw; + &--appearance-condensed { + thead { + th:first-child { + border-top-left-radius: $style-radius-s; + } + + th:last-child { + border-top-right-radius: $style-radius-s; + } + + background: var(--theme-elevation-50); + } + + tbody { + tr { + &:nth-child(odd) { + background: transparent; + border-radius: 0; + } + } + } + + th, + td { + padding: base(0.3) base(0.3); + + &:first-child { + padding-inline-start: base(0.6); + } + + &:last-child { + padding-inline-end: base(0.6); + } + } + + th { + padding: base(0.3); + } + + tr td, + th { + border: 0.5px solid var(--theme-elevation-100); + } + } + + @include mid-break { + th, + td { + max-width: 70vw; + } } } } diff --git a/packages/ui/src/elements/Thumbnail/index.scss b/packages/ui/src/elements/Thumbnail/index.scss index 6dc513447e..d9ead30174 100644 --- a/packages/ui/src/elements/Thumbnail/index.scss +++ b/packages/ui/src/elements/Thumbnail/index.scss @@ -1,49 +1,51 @@ @import '../../scss/styles.scss'; -.thumbnail { - min-height: 100%; - flex-shrink: 0; - align-self: stretch; - overflow: hidden; - - img, - svg { - width: 100%; - height: 100%; - object-fit: cover; - } - - &--size-expand { - max-height: 100%; - width: 100%; - padding-top: 100%; - position: relative; +@layer payload-default { + .thumbnail { + min-height: 100%; + flex-shrink: 0; + align-self: stretch; + overflow: hidden; img, svg { - position: absolute; - top: 0; + width: 100%; + height: 100%; + object-fit: cover; } - } - &--size-large { - max-height: base(9); - width: base(9); - } + &--size-expand { + max-height: 100%; + width: 100%; + padding-top: 100%; + position: relative; - &--size-medium { - max-height: base(7); - width: base(7); - } + img, + svg { + position: absolute; + top: 0; + } + } - &--size-small { - max-height: base(5); - width: base(5); - } + &--size-large { + max-height: base(9); + width: base(9); + } - @include large-break { - .thumbnail { + &--size-medium { + max-height: base(7); + width: base(7); + } + + &--size-small { + max-height: base(5); width: base(5); } + + @include large-break { + .thumbnail { + width: base(5); + } + } } } diff --git a/packages/ui/src/elements/ThumbnailCard/index.scss b/packages/ui/src/elements/ThumbnailCard/index.scss index c4891d1510..42c805d554 100644 --- a/packages/ui/src/elements/ThumbnailCard/index.scss +++ b/packages/ui/src/elements/ThumbnailCard/index.scss @@ -1,39 +1,41 @@ @import '../../scss/styles.scss'; -.thumbnail-card { - @include btn-reset; - @include shadow-m; - width: 100%; - background: var(--theme-input-bg); - border: 1px solid var(--theme-border-color); - border-radius: var(--style-radius-m); - transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1); +@layer payload-default { + .thumbnail-card { + @include btn-reset; + @include shadow-m; + width: 100%; + background: var(--theme-input-bg); + border: 1px solid var(--theme-border-color); + border-radius: var(--style-radius-m); + transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1); - &__label { - padding: base(0.5); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-weight: 600; - } + &__label { + padding: base(0.5); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: 600; + } - &--has-on-click { - cursor: pointer; + &--has-on-click { + cursor: pointer; - &:hover, - &:focus, - &:active { - border: 1px solid var(--theme-elevation-350); + &:hover, + &:focus, + &:active { + border: 1px solid var(--theme-elevation-350); + } + } + + &--align-label-center { + text-align: center; + } + + &__thumbnail { + display: flex; + align-items: center; + justify-content: center; } } - - &--align-label-center { - text-align: center; - } - - &__thumbnail { - display: flex; - align-items: center; - justify-content: center; - } } diff --git a/packages/ui/src/elements/Tooltip/index.scss b/packages/ui/src/elements/Tooltip/index.scss index 875739afde..74f7f8fb39 100644 --- a/packages/ui/src/elements/Tooltip/index.scss +++ b/packages/ui/src/elements/Tooltip/index.scss @@ -1,99 +1,101 @@ @import '../../scss/styles.scss'; -.tooltip { - --caret-size: 6px; +@layer payload-default { + .tooltip { + --caret-size: 6px; - opacity: 0; - background-color: var(--theme-elevation-800); - position: absolute; - z-index: 3; - left: 50%; - padding: base(0.2) base(0.4); - color: var(--theme-elevation-0); - line-height: base(0.75); - font-weight: normal; - white-space: nowrap; - border-radius: 2px; - visibility: hidden; - - &::after { - content: ' '; - display: block; + opacity: 0; + background-color: var(--theme-elevation-800); position: absolute; - transform: translate3d(-50%, 100%, 0); - width: 0; - height: 0; - border-left: var(--caret-size) solid transparent; - border-right: var(--caret-size) solid transparent; - } + z-index: 3; + left: 50%; + padding: base(0.2) base(0.4); + color: var(--theme-elevation-0); + line-height: base(0.75); + font-weight: normal; + white-space: nowrap; + border-radius: 2px; + visibility: hidden; - &--show { - visibility: visible; - opacity: 1; - transition: opacity 0.2s ease-in-out; - cursor: default; - } - - &--caret-center { &::after { - left: 50%; + content: ' '; + display: block; + position: absolute; + transform: translate3d(-50%, 100%, 0); + width: 0; + height: 0; + border-left: var(--caret-size) solid transparent; + border-right: var(--caret-size) solid transparent; + } + + &--show { + visibility: visible; + opacity: 1; + transition: opacity 0.2s ease-in-out; + cursor: default; + } + + &--caret-center { + &::after { + left: 50%; + } + } + + &--caret-left { + &::after { + left: calc(var(--base) * 0.5); + } + } + + &--caret-right { + &::after { + right: calc(var(--base) * 0.5); + } + } + + &--position-top { + top: calc(var(--base) * -1.25); + transform: translate3d(-50%, calc(var(--caret-size) * -1), 0); + + &::after { + bottom: 1px; + border-top: var(--caret-size) solid var(--theme-elevation-800); + } + } + + &--position-bottom { + bottom: calc(var(--base) * -1.25); + transform: translate3d(-50%, var(--caret-size), 0); + + &::after { + bottom: calc(100% + var(--caret-size) - 1px); + border-bottom: var(--caret-size) solid var(--theme-elevation-800); + } + } + + .tooltip-content { + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + } + + @include mid-break { + display: none; } } - &--caret-left { - &::after { - left: calc(var(--base) * 0.5); + html[data-theme='light'] { + .tooltip:not(.field-error) { + background-color: var(--theme-elevation-100); + color: var(--theme-elevation-1000); } - } - &--caret-right { - &::after { - right: calc(var(--base) * 0.5); + .tooltip--position-top:not(.field-error):after { + border-top-color: var(--theme-elevation-100); } - } - &--position-top { - top: calc(var(--base) * -1.25); - transform: translate3d(-50%, calc(var(--caret-size) * -1), 0); - - &::after { - bottom: 1px; - border-top: var(--caret-size) solid var(--theme-elevation-800); + .tooltip--position-bottom:not(.field-error):after { + border-bottom-color: var(--theme-elevation-100); } } - - &--position-bottom { - bottom: calc(var(--base) * -1.25); - transform: translate3d(-50%, var(--caret-size), 0); - - &::after { - bottom: calc(100% + var(--caret-size) - 1px); - border-bottom: var(--caret-size) solid var(--theme-elevation-800); - } - } - - .tooltip-content { - overflow: hidden; - text-overflow: ellipsis; - width: 100%; - } - - @include mid-break { - display: none; - } -} - -html[data-theme='light'] { - .tooltip:not(.field-error) { - background-color: var(--theme-elevation-100); - color: var(--theme-elevation-1000); - } - - .tooltip--position-top:not(.field-error):after { - border-top-color: var(--theme-elevation-100); - } - - .tooltip--position-bottom:not(.field-error):after { - border-bottom-color: var(--theme-elevation-100); - } } diff --git a/packages/ui/src/elements/UnpublishMany/index.scss b/packages/ui/src/elements/UnpublishMany/index.scss index 42bf200546..8c3ac9ec2a 100644 --- a/packages/ui/src/elements/UnpublishMany/index.scss +++ b/packages/ui/src/elements/UnpublishMany/index.scss @@ -1,37 +1,39 @@ @import '../../scss/styles.scss'; -.unpublish-many { - @include blur-bg; - display: flex; - align-items: center; - justify-content: center; - height: 100%; - - &__wrapper { - z-index: 1; - position: relative; +@layer payload-default { + .unpublish-many { + @include blur-bg; display: flex; - flex-direction: column; - gap: base(0.8); - padding: base(2); - } + align-items: center; + justify-content: center; + height: 100%; - &__content { - display: flex; - flex-direction: column; - gap: base(0.4); - - > * { - margin: 0; + &__wrapper { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + gap: base(0.8); + padding: base(2); } - } - &__controls { - display: flex; - gap: base(0.4); + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); - .btn { - margin: 0; + > * { + margin: 0; + } + } + + &__controls { + display: flex; + gap: base(0.4); + + .btn { + margin: 0; + } } } } diff --git a/packages/ui/src/elements/Upload/index.scss b/packages/ui/src/elements/Upload/index.scss index d45f607c46..bff486ac3b 100644 --- a/packages/ui/src/elements/Upload/index.scss +++ b/packages/ui/src/elements/Upload/index.scss @@ -1,155 +1,157 @@ @import '../../scss/styles.scss'; -.file-field { - position: relative; - margin-bottom: var(--base); - background: var(--theme-elevation-50); - border-radius: var(--style-radius-s); - - &__upload { - display: flex; - } - - .tooltip.error-message { - z-index: 3; - bottom: calc(100% - #{base(0.5)}); - } - - &__file-selected { - display: flex; - } - - &__thumbnail-wrap { +@layer payload-default { + .file-field { position: relative; - width: 150px; + margin-bottom: var(--base); + background: var(--theme-elevation-50); + border-radius: var(--style-radius-s); - .thumbnail { - position: relative; - width: 100%; - height: 100%; - object-fit: contain; - border-radius: var(--style-radius-s) 0 0 var(--style-radius-s); - } - } - - &__remove { - margin: calc($baseline * 1.5) $baseline $baseline 0; - place-self: flex-start; - } - - &__file-adjustments, - &__remote-file-wrap { - padding: $baseline; - width: 100%; - display: flex; - flex-direction: column; - gap: calc(var(--base) / 2); - } - - &__filename, - &__remote-file { - @include formInput; - background-color: var(--theme-bg); - } - - &__upload-actions, - &__add-file-wrap { - display: flex; - gap: calc(var(--base) / 2); - flex-wrap: wrap; - - & button { - cursor: pointer; - background-color: var(--theme-elevation-150); - border: none; - border-radius: $style-radius-m; - padding: base(0.25) base(0.5); - text-wrap: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &:hover { - background-color: var(--theme-elevation-100); - } - } - } - - &__previewDrawer { - & h2 { - margin: 0 base(1) 0 0; - text-wrap: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: calc(100% - base(2)); - } - } - - .dropzone { - background-color: transparent; - padding-block: calc(var(--base) * 2.25); - } - - &__dropzoneContent { - display: flex; - flex-wrap: wrap; - gap: base(0.4); - justify-content: space-between; - width: 100%; - } - - &__dropzoneButtons { - display: flex; - gap: calc(var(--base) * 0.5); - } - - &__orText { - color: var(--theme-elevation-500); - text-transform: lowercase; - } - - &__dragAndDropText { - flex-shrink: 0; - margin: 0; - text-transform: lowercase; - align-self: center; - color: var(--theme-elevation-500); - } - - @include small-break { &__upload { - flex-wrap: wrap; - justify-content: space-between; + display: flex; } - &__remove { - margin: $baseline; - order: 2; + .tooltip.error-message { + z-index: 3; + bottom: calc(100% - #{base(0.5)}); } - &__file-adjustments { - order: 3; - border-top: 2px solid var(--theme-elevation-0); - padding: calc($baseline * 0.5); - gap: 0; + &__file-selected { + display: flex; } &__thumbnail-wrap { - order: 1; - width: 50%; + position: relative; + width: 150px; .thumbnail { + position: relative; width: 100%; + height: 100%; + object-fit: contain; + border-radius: var(--style-radius-s) 0 0 var(--style-radius-s); } } - &__edit { - display: none; + &__remove { + margin: calc($baseline * 1.5) $baseline $baseline 0; + place-self: flex-start; + } + + &__file-adjustments, + &__remote-file-wrap { + padding: $baseline; + width: 100%; + display: flex; + flex-direction: column; + gap: calc(var(--base) / 2); + } + + &__filename, + &__remote-file { + @include formInput; + background-color: var(--theme-bg); + } + + &__upload-actions, + &__add-file-wrap { + display: flex; + gap: calc(var(--base) / 2); + flex-wrap: wrap; + + & button { + cursor: pointer; + background-color: var(--theme-elevation-150); + border: none; + border-radius: $style-radius-m; + padding: base(0.25) base(0.5); + text-wrap: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &:hover { + background-color: var(--theme-elevation-100); + } + } + } + + &__previewDrawer { + & h2 { + margin: 0 base(1) 0 0; + text-wrap: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: calc(100% - base(2)); + } + } + + .dropzone { + background-color: transparent; + padding-block: calc(var(--base) * 2.25); } - } - @include small-break { &__dropzoneContent { - display: none; + display: flex; + flex-wrap: wrap; + gap: base(0.4); + justify-content: space-between; + width: 100%; + } + + &__dropzoneButtons { + display: flex; + gap: calc(var(--base) * 0.5); + } + + &__orText { + color: var(--theme-elevation-500); + text-transform: lowercase; + } + + &__dragAndDropText { + flex-shrink: 0; + margin: 0; + text-transform: lowercase; + align-self: center; + color: var(--theme-elevation-500); + } + + @include small-break { + &__upload { + flex-wrap: wrap; + justify-content: space-between; + } + + &__remove { + margin: $baseline; + order: 2; + } + + &__file-adjustments { + order: 3; + border-top: 2px solid var(--theme-elevation-0); + padding: calc($baseline * 0.5); + gap: 0; + } + + &__thumbnail-wrap { + order: 1; + width: 50%; + + .thumbnail { + width: 100%; + } + } + + &__edit { + display: none; + } + } + + @include small-break { + &__dropzoneContent { + display: none; + } } } } diff --git a/packages/ui/src/elements/WhereBuilder/Condition/Number/index.scss b/packages/ui/src/elements/WhereBuilder/Condition/Number/index.scss index 4babb8b213..51663f4745 100644 --- a/packages/ui/src/elements/WhereBuilder/Condition/Number/index.scss +++ b/packages/ui/src/elements/WhereBuilder/Condition/Number/index.scss @@ -1,5 +1,7 @@ @import '../../../../scss/styles.scss'; -.condition-value-number { - @include formInput; +@layer payload-default { + .condition-value-number { + @include formInput; + } } diff --git a/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.scss b/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.scss index 9611d43264..016fd097a0 100644 --- a/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.scss +++ b/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.scss @@ -1,11 +1,13 @@ @import '../../../../scss/styles.scss'; -.condition-value-relationship { - &__error-loading { - border: 1px solid var(--theme-error-600); - min-height: base(2); - padding: base(0.5) base(0.75); - background-color: var(--theme-error-100); - color: var(--theme-elevation-0); +@layer payload-default { + .condition-value-relationship { + &__error-loading { + border: 1px solid var(--theme-error-600); + min-height: base(2); + padding: base(0.5) base(0.75); + background-color: var(--theme-error-100); + color: var(--theme-elevation-0); + } } } diff --git a/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.tsx b/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.tsx index 7a8cc3b969..e52f8f296d 100644 --- a/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.tsx +++ b/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.tsx @@ -256,7 +256,7 @@ export const RelationshipField: React.FC = (props) => { if (controller.signal) { try { controller.abort() - } catch (error) { + } catch (_err) { // swallow error } } diff --git a/packages/ui/src/elements/WhereBuilder/Condition/Text/index.scss b/packages/ui/src/elements/WhereBuilder/Condition/Text/index.scss index 647c3196ee..52650a604b 100644 --- a/packages/ui/src/elements/WhereBuilder/Condition/Text/index.scss +++ b/packages/ui/src/elements/WhereBuilder/Condition/Text/index.scss @@ -1,5 +1,7 @@ @import '../../../../scss/styles.scss'; -.condition-value-text { - @include formInput; +@layer payload-default { + .condition-value-text { + @include formInput; + } } diff --git a/packages/ui/src/elements/WhereBuilder/Condition/index.scss b/packages/ui/src/elements/WhereBuilder/Condition/index.scss index 2ef1349282..40f0ea3956 100644 --- a/packages/ui/src/elements/WhereBuilder/Condition/index.scss +++ b/packages/ui/src/elements/WhereBuilder/Condition/index.scss @@ -1,57 +1,59 @@ @import '../../../scss/styles.scss'; -.condition { - &__wrap { - display: flex; - align-items: center; - gap: var(--base); - } - - &__inputs { - display: flex; - flex-grow: 1; - align-items: center; - gap: var(--base); - - > div { - flex-basis: 100%; - } - } - - &__field { - .field-label { - padding-bottom: 0; - } - } - - &__actions { - flex-shrink: 0; - display: flex; - gap: calc(var(--base) / 2); - padding: calc(var(--base) / 2) 0; - } - - .btn { - vertical-align: middle; - margin: 0; - } - - @include mid-break { +@layer payload-default { + .condition { &__wrap { - align-items: initial; - gap: calc(var(--base) / 2); + display: flex; + align-items: center; + gap: var(--base); } &__inputs { - flex-direction: column; - gap: calc(var(--base) / 2); - align-items: stretch; + display: flex; + flex-grow: 1; + align-items: center; + gap: var(--base); + + > div { + flex-basis: 100%; + } + } + + &__field { + .field-label { + padding-bottom: 0; + } } &__actions { + flex-shrink: 0; display: flex; - flex-direction: column; - justify-content: space-between; + gap: calc(var(--base) / 2); + padding: calc(var(--base) / 2) 0; + } + + .btn { + vertical-align: middle; + margin: 0; + } + + @include mid-break { + &__wrap { + align-items: initial; + gap: calc(var(--base) / 2); + } + + &__inputs { + flex-direction: column; + gap: calc(var(--base) / 2); + align-items: stretch; + } + + &__actions { + display: flex; + flex-direction: column; + justify-content: space-between; + } } } } diff --git a/packages/ui/src/elements/WhereBuilder/index.scss b/packages/ui/src/elements/WhereBuilder/index.scss index 54d5136d86..71b3b27df0 100644 --- a/packages/ui/src/elements/WhereBuilder/index.scss +++ b/packages/ui/src/elements/WhereBuilder/index.scss @@ -1,40 +1,42 @@ @import '../../scss/styles.scss'; -.where-builder { - background: var(--theme-elevation-50); - padding: var(--base); - display: flex; - flex-direction: column; - gap: calc(var(--base) / 2); - - .btn { - margin: 0; - align-self: flex-start; - } - - &__no-filters { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 2); - } - - &__or-filters, - &__and-filters { - list-style: none; - margin: 0; - padding: 0; +@layer payload-default { + .where-builder { + background: var(--theme-elevation-50); + padding: var(--base); display: flex; flex-direction: column; gap: calc(var(--base) / 2); - li { + .btn { + margin: 0; + align-self: flex-start; + } + + &__no-filters { display: flex; flex-direction: column; gap: calc(var(--base) / 2); } - } - @include small-break { - padding: calc(var(--base) / 2); + &__or-filters, + &__and-filters { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: calc(var(--base) / 2); + + li { + display: flex; + flex-direction: column; + gap: calc(var(--base) / 2); + } + } + + @include small-break { + padding: calc(var(--base) / 2); + } } } diff --git a/packages/ui/src/fields/Array/index.scss b/packages/ui/src/fields/Array/index.scss index 3a1bd74daa..139e0585ba 100644 --- a/packages/ui/src/fields/Array/index.scss +++ b/packages/ui/src/fields/Array/index.scss @@ -1,104 +1,106 @@ @import '../../scss/styles.scss'; -.array-field { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 2); - - &__header { +@layer payload-default { + .array-field { display: flex; flex-direction: column; gap: calc(var(--base) / 2); + &__header { + display: flex; + flex-direction: column; + gap: calc(var(--base) / 2); + + &__header-content { + display: flex; + flex-direction: column; + gap: calc(var(--base) / 4); + } + } + + &--has-no-error { + > .array-field__header .array-field__header-content { + color: var(--theme-text); + } + } + &__header-content { display: flex; - flex-direction: column; - gap: calc(var(--base) / 4); + align-items: center; + gap: base(0.5); } - } - &--has-no-error { - > .array-field__header .array-field__header-content { - color: var(--theme-text); + &__header-wrap { + display: flex; + align-items: flex-end; + width: 100%; + justify-content: space-between; } - } - &__header-content { - display: flex; - align-items: center; - gap: base(0.5); - } - - &__header-wrap { - display: flex; - align-items: flex-end; - width: 100%; - justify-content: space-between; - } - - &__header-actions { - list-style: none; - margin: 0; - padding: 0; - display: flex; - color: var(--theme-elevation-800); - } - - &__header-action { - @extend %btn-reset; - cursor: pointer; - margin-left: base(0.5); - - &:hover, - &:focus-visible { - text-decoration: underline; - color: var(--theme-elevation-600); - } - } - - &__row-header { - display: flex; - align-items: center; - gap: base(0.5); - pointer-events: none; - } - - &__draggable-rows { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 2); - } - - &__title { - margin-bottom: 0; - } - - &__add-row { - align-self: flex-start; - color: var(--theme-elevation-400); - margin: 2px 0; - - &:hover { + &__header-actions { + list-style: none; + margin: 0; + padding: 0; + display: flex; color: var(--theme-elevation-800); } - } -} -html[data-theme='light'] { - .array-field { - &--has-error { - > .array-field__header .array-field__header-content { - color: var(--theme-error-750); - } - } - } -} - -html[data-theme='dark'] { - .array-field { - &--has-error { - > .array-field__header .array-field__header-content { - color: var(--theme-error-500); + &__header-action { + @extend %btn-reset; + cursor: pointer; + margin-left: base(0.5); + + &:hover, + &:focus-visible { + text-decoration: underline; + color: var(--theme-elevation-600); + } + } + + &__row-header { + display: flex; + align-items: center; + gap: base(0.5); + pointer-events: none; + } + + &__draggable-rows { + display: flex; + flex-direction: column; + gap: calc(var(--base) / 2); + } + + &__title { + margin-bottom: 0; + } + + &__add-row { + align-self: flex-start; + color: var(--theme-elevation-400); + margin: 2px 0; + + &:hover { + color: var(--theme-elevation-800); + } + } + } + + html[data-theme='light'] { + .array-field { + &--has-error { + > .array-field__header .array-field__header-content { + color: var(--theme-error-750); + } + } + } + } + + html[data-theme='dark'] { + .array-field { + &--has-error { + > .array-field__header .array-field__header-content { + color: var(--theme-error-500); + } } } } diff --git a/packages/ui/src/fields/Blocks/BlocksDrawer/BlockSearch/index.scss b/packages/ui/src/fields/Blocks/BlocksDrawer/BlockSearch/index.scss index f7857206c5..0d13c3c7cd 100644 --- a/packages/ui/src/fields/Blocks/BlocksDrawer/BlockSearch/index.scss +++ b/packages/ui/src/fields/Blocks/BlocksDrawer/BlockSearch/index.scss @@ -3,34 +3,36 @@ $icon-width: base(2); $icon-margin: base(0.25); -.block-search { - position: sticky; - top: 0; - display: flex; - width: 100%; - align-items: center; - z-index: 1; +@layer payload-default { + .block-search { + position: sticky; + top: 0; + display: flex; + width: 100%; + align-items: center; + z-index: 1; - &__input { - @include formInput; - } - - .icon--search { - position: absolute; - top: 50%; - transform: translate3d(0, -50%, 0); - right: 0; - width: $icon-width; - margin: 0 $icon-margin; - - .stroke { - stroke: var(--theme-elevation-300); - } - } - - @include mid-break { &__input { - margin-bottom: 0; + @include formInput; + } + + .icon--search { + position: absolute; + top: 50%; + transform: translate3d(0, -50%, 0); + right: 0; + width: $icon-width; + margin: 0 $icon-margin; + + .stroke { + stroke: var(--theme-elevation-300); + } + } + + @include mid-break { + &__input { + margin-bottom: 0; + } } } } diff --git a/packages/ui/src/fields/Blocks/BlocksDrawer/index.scss b/packages/ui/src/fields/Blocks/BlocksDrawer/index.scss index a07728e8ed..efe5c5fc9a 100644 --- a/packages/ui/src/fields/Blocks/BlocksDrawer/index.scss +++ b/packages/ui/src/fields/Blocks/BlocksDrawer/index.scss @@ -1,48 +1,50 @@ @import '../../../scss/styles.scss'; -.blocks-drawer { - &__blocks-wrapper { - padding-top: base(1.5); - } - - &__blocks { - position: relative; - padding: 0; - list-style: none; - display: grid; - grid-template-columns: repeat(6, 1fr); - gap: base(1); - } - - &__default-image { - width: 100%; - overflow: hidden; - padding-top: base(0.75); - } - - @include large-break { - &__blocks { - grid-template-columns: repeat(5, 1fr); - } - } - - @include mid-break { +@layer payload-default { + .blocks-drawer { &__blocks-wrapper { - padding-top: base(1.75); + padding-top: base(1.5); } - &__blocks { - grid-template-columns: repeat(3, 1fr); - gap: base(0.5); - } - } - @include small-break { - &__blocks-wrapper { + &__blocks { + position: relative; + padding: 0; + list-style: none; + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: base(1); + } + + &__default-image { + width: 100%; + overflow: hidden; padding-top: base(0.75); } - &__blocks { - grid-template-columns: repeat(2, 1fr); + @include large-break { + &__blocks { + grid-template-columns: repeat(5, 1fr); + } + } + + @include mid-break { + &__blocks-wrapper { + padding-top: base(1.75); + } + &__blocks { + grid-template-columns: repeat(3, 1fr); + gap: base(0.5); + } + } + + @include small-break { + &__blocks-wrapper { + padding-top: base(0.75); + } + + &__blocks { + grid-template-columns: repeat(2, 1fr); + } } } } diff --git a/packages/ui/src/fields/Blocks/SectionTitle/index.scss b/packages/ui/src/fields/Blocks/SectionTitle/index.scss index d1d99ebf99..0736bf691c 100644 --- a/packages/ui/src/fields/Blocks/SectionTitle/index.scss +++ b/packages/ui/src/fields/Blocks/SectionTitle/index.scss @@ -1,61 +1,63 @@ @import '../../../scss/styles.scss'; -.section-title { - position: relative; - min-width: base(4); - max-width: 100%; - pointer-events: all; - display: flex; - overflow: hidden; - - &:after { - display: block; - content: attr(data-value) ' '; - visibility: hidden; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - } - - &:after, - &__input { - font-family: var(--font-body); - font-weight: 600; - font-size: base(0.625); - padding: 0; - width: 100%; - } - - &__input { - color: var(--theme-elevation-800); - background-color: transparent; - border: none; - min-width: min-content; - width: 100%; +@layer payload-default { + .section-title { + position: relative; + min-width: base(4); max-width: 100%; + pointer-events: all; + display: flex; overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - resize: none; - appearance: none; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - &:hover { - box-shadow: inset 0px -2px 0px -1px var(--theme-elevation-150); + &:after { + display: block; + content: attr(data-value) ' '; + visibility: hidden; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; } - &:hover, - &:focus { - outline: 0; + &:after, + &__input { + font-family: var(--font-body); + font-weight: 600; + font-size: base(0.625); + padding: 0; + width: 100%; } - &:focus { - box-shadow: none; + &__input { + color: var(--theme-elevation-800); + background-color: transparent; + border: none; + min-width: min-content; + width: 100%; + max-width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + resize: none; + appearance: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + &:hover { + box-shadow: inset 0px -2px 0px -1px var(--theme-elevation-150); + } + + &:hover, + &:focus { + outline: 0; + } + + &:focus { + box-shadow: none; + } } } } diff --git a/packages/ui/src/fields/Blocks/index.scss b/packages/ui/src/fields/Blocks/index.scss index d3622c3637..c6178f9d5d 100644 --- a/packages/ui/src/fields/Blocks/index.scss +++ b/packages/ui/src/fields/Blocks/index.scss @@ -1,119 +1,121 @@ @import '../../scss/styles.scss'; -.blocks-field { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 2); - - &__header { - h3 { - margin: 0; - } - } - - &__header-wrap { - display: flex; - align-items: flex-end; - width: 100%; - justify-content: space-between; - } - - &__heading-with-error { - display: flex; - align-items: center; - gap: base(0.5); - } - - &--has-no-error { - > .array-field__header .array-field__heading-with-error { - color: var(--theme-text); - } - } - - &--has-error { - > .array-field__header { - color: var(--theme-error-500); - } - } - - &__error-pill { - align-self: center; - } - - &__header-actions { - list-style: none; - margin: 0; - padding: 0; - display: flex; - } - - &__header-action { - @extend %btn-reset; - cursor: pointer; - margin-left: base(0.5); - - &:hover, - &:focus-visible { - text-decoration: underline; - } - } - - &__block-header { - display: inline-flex; - max-width: 100%; - width: 100%; - overflow: hidden; - gap: base(0.375); - } - - &__block-number { - flex-shrink: 0; - } - - &__block-pill { - flex-shrink: 0; - display: block; - line-height: unset; - } - - &__rows { +@layer payload-default { + .blocks-field { display: flex; flex-direction: column; gap: calc(var(--base) / 2); + + &__header { + h3 { + margin: 0; + } + } + + &__header-wrap { + display: flex; + align-items: flex-end; + width: 100%; + justify-content: space-between; + } + + &__heading-with-error { + display: flex; + align-items: center; + gap: base(0.5); + } + + &--has-no-error { + > .array-field__header .array-field__heading-with-error { + color: var(--theme-text); + } + } + + &--has-error { + > .array-field__header { + color: var(--theme-error-500); + } + } + + &__error-pill { + align-self: center; + } + + &__header-actions { + list-style: none; + margin: 0; + padding: 0; + display: flex; + } + + &__header-action { + @extend %btn-reset; + cursor: pointer; + margin-left: base(0.5); + + &:hover, + &:focus-visible { + text-decoration: underline; + } + } + + &__block-header { + display: inline-flex; + max-width: 100%; + width: 100%; + overflow: hidden; + gap: base(0.375); + } + + &__block-number { + flex-shrink: 0; + } + + &__block-pill { + flex-shrink: 0; + display: block; + line-height: unset; + } + + &__rows { + display: flex; + flex-direction: column; + gap: calc(var(--base) / 2); + } + + &__drawer-toggler { + background-color: transparent; + margin: 0; + padding: 0; + border: none; + align-self: flex-start; + + .btn { + color: var(--theme-elevation-400); + margin: 0; + + &:hover { + color: var(--theme-elevation-800); + } + } + } } - &__drawer-toggler { - background-color: transparent; - margin: 0; - padding: 0; - border: none; - align-self: flex-start; + html[data-theme='light'] { + .blocks-field--has-error { + .section-title__input, + .blocks-field__heading-with-error { + color: var(--theme-error-750); + } + } + } - .btn { - color: var(--theme-elevation-400); - margin: 0; - - &:hover { - color: var(--theme-elevation-800); + html[data-theme='dark'] { + .blocks-field--has-error { + .section-title__input, + .blocks-field__heading-with-error { + color: var(--theme-error-500); } } } } - -html[data-theme='light'] { - .blocks-field--has-error { - .section-title__input, - .blocks-field__heading-with-error { - color: var(--theme-error-750); - } - } -} - -html[data-theme='dark'] { - .blocks-field--has-error { - .section-title__input, - .blocks-field__heading-with-error { - color: var(--theme-error-500); - } - } -} diff --git a/packages/ui/src/fields/Checkbox/index.scss b/packages/ui/src/fields/Checkbox/index.scss index 9942664d93..4e930a2577 100644 --- a/packages/ui/src/fields/Checkbox/index.scss +++ b/packages/ui/src/fields/Checkbox/index.scss @@ -1,146 +1,148 @@ @import '../../scss/styles.scss'; -.checkbox { - position: relative; - margin-bottom: $baseline; - - .tooltip:not([aria-hidden='true']) { - right: auto; - position: static; - transform: translateY(calc(var(--caret-size) * -1)); - margin-bottom: 0.2em; - max-width: fit-content; - } -} - -.checkbox-input { - display: inline-flex; - &:hover:not(&--read-only) { - label, - input { - cursor: pointer; - } - } - - label { - padding-bottom: 0; - padding-left: base(0.5); - } - - [dir='rtl'] &__input { - margin-right: 0; - margin-left: base(0.5); - } - - &__input { - @include formInput; - display: flex; - padding: 0; - line-height: 0; +@layer payload-default { + .checkbox { position: relative; - width: $baseline; - height: $baseline; + margin-bottom: $baseline; - & input[type='checkbox'] { - position: absolute; - // Without the extra 4px, there is an uncheckable area due to the border of the parent element - width: calc(100% + 4px); - height: calc(100% + 4px); - padding: 0; - margin: 0; - margin-left: -2px; - margin-top: -2px; - opacity: 0; - border-radius: 0; - z-index: 1; + .tooltip:not([aria-hidden='true']) { + right: auto; + position: static; + transform: translateY(calc(var(--caret-size) * -1)); + margin-bottom: 0.2em; + max-width: fit-content; } } - &__icon { - position: absolute; - - svg { - opacity: 0; - } - } - - &:not(&--read-only) { - &:active, - &:focus-within, - &:focus { - .checkbox-input__input, - & input[type='checkbox'] { - outline: 0; - box-shadow: 0 0 3px 3px var(--theme-success-400) !important; - border: 1px solid var(--theme-elevation-150); + .checkbox-input { + display: inline-flex; + &:hover:not(&--read-only) { + label, + input { + cursor: pointer; } } - &:hover { - .checkbox-input__input, - & input[type='checkbox'] { - border-color: var(--theme-elevation-250); - } - } - } - - &:not(&--read-only):not(&--checked) { - &:hover { - cursor: pointer; - - svg { - opacity: 0.2; - } - } - } - - &--checked { - .checkbox-input__icon { - svg { - opacity: 1; - } - } - } - - .checkbox-input__icon { - .icon--line { - width: 1.4rem; - height: 1.4rem; - } - - &.partial { - svg { - opacity: 1; - } - } - } - - &--read-only { - .checkbox-input__input { - @include readOnly; - } - label { - color: var(--theme-elevation-400); + padding-bottom: 0; + padding-left: base(0.5); + } + + [dir='rtl'] &__input { + margin-right: 0; + margin-left: base(0.5); + } + + &__input { + @include formInput; + display: flex; + padding: 0; + line-height: 0; + position: relative; + width: $baseline; + height: $baseline; + + & input[type='checkbox'] { + position: absolute; + // Without the extra 4px, there is an uncheckable area due to the border of the parent element + width: calc(100% + 4px); + height: calc(100% + 4px); + padding: 0; + margin: 0; + margin-left: -2px; + margin-top: -2px; + opacity: 0; + border-radius: 0; + z-index: 1; + } + } + + &__icon { + position: absolute; + + svg { + opacity: 0; + } + } + + &:not(&--read-only) { + &:active, + &:focus-within, + &:focus { + .checkbox-input__input, + & input[type='checkbox'] { + outline: 0; + box-shadow: 0 0 3px 3px var(--theme-success-400) !important; + border: 1px solid var(--theme-elevation-150); + } + } + + &:hover { + .checkbox-input__input, + & input[type='checkbox'] { + border-color: var(--theme-elevation-250); + } + } + } + + &:not(&--read-only):not(&--checked) { + &:hover { + cursor: pointer; + + svg { + opacity: 0.2; + } + } + } + + &--checked { + .checkbox-input__icon { + svg { + opacity: 1; + } + } + } + + .checkbox-input__icon { + .icon--line { + width: 1.4rem; + height: 1.4rem; + } + + &.partial { + svg { + opacity: 1; + } + } + } + + &--read-only { + .checkbox-input__input { + @include readOnly; + } + + label { + color: var(--theme-elevation-400); + } } } -} -html[data-theme='light'] { - .checkbox { - &.error { - .checkbox-input__input { - @include lightInputError; - } - } - } -} - -html[data-theme='dark'] { - .checkbox { - &.error { - .checkbox-input__input { - @include darkInputError; + html[data-theme='light'] { + .checkbox { + &.error { + .checkbox-input__input { + @include lightInputError; + } + } + } + } + + html[data-theme='dark'] { + .checkbox { + &.error { + .checkbox-input__input { + @include darkInputError; + } } } } diff --git a/packages/ui/src/fields/Code/index.scss b/packages/ui/src/fields/Code/index.scss index d65077ccbd..e6f23b545d 100644 --- a/packages/ui/src/fields/Code/index.scss +++ b/packages/ui/src/fields/Code/index.scss @@ -1,24 +1,26 @@ @import '../../scss/styles.scss'; -.code-field { - position: relative; +@layer payload-default { + .code-field { + position: relative; - &.error { - textarea { - border: 1px solid var(--theme-error-500) !important; + &.error { + textarea { + border: 1px solid var(--theme-error-500) !important; + } + .code-editor { + border-color: var(--theme-error-500); + } + .monaco-editor-background, + .margin { + background-color: var(--theme-error-50); + } } - .code-editor { - border-color: var(--theme-error-500); - } - .monaco-editor-background, - .margin { - background-color: var(--theme-error-50); - } - } - .read-only { - .code-editor { - @include readOnly; + .read-only { + .code-editor { + @include readOnly; + } } } } diff --git a/packages/ui/src/fields/Collapsible/index.scss b/packages/ui/src/fields/Collapsible/index.scss index 559d102dbd..d2b1d2a6f1 100644 --- a/packages/ui/src/fields/Collapsible/index.scss +++ b/packages/ui/src/fields/Collapsible/index.scss @@ -1,10 +1,12 @@ @import '../../scss/styles.scss'; -.collapsible-field { - &__row-label-wrap { - pointer-events: none; - display: flex; - align-items: center; - gap: base(0.5); +@layer payload-default { + .collapsible-field { + &__row-label-wrap { + pointer-events: none; + display: flex; + align-items: center; + gap: base(0.5); + } } } diff --git a/packages/ui/src/fields/ConfirmPassword/index.scss b/packages/ui/src/fields/ConfirmPassword/index.scss index 2db4d78a66..70f7b5c877 100644 --- a/packages/ui/src/fields/ConfirmPassword/index.scss +++ b/packages/ui/src/fields/ConfirmPassword/index.scss @@ -1,28 +1,30 @@ @import '../../scss/styles.scss'; -.field-type.confirm-password { - position: relative; +@layer payload-default { + .field-type.confirm-password { + position: relative; - input { - @include formInput; + input { + @include formInput; + } } -} -html[data-theme='light'] { - .field-type.field-type.confirm-password { - &.error { - input { - @include lightInputError; - } - } - } -} - -html[data-theme='dark'] { - .field-type.field-type.confirm-password { - &.error { - input { - @include darkInputError; + html[data-theme='light'] { + .field-type.field-type.confirm-password { + &.error { + input { + @include lightInputError; + } + } + } + } + + html[data-theme='dark'] { + .field-type.field-type.confirm-password { + &.error { + input { + @include darkInputError; + } } } } diff --git a/packages/ui/src/fields/DateTime/index.scss b/packages/ui/src/fields/DateTime/index.scss index 1ca8b98ace..b4359c6ea1 100644 --- a/packages/ui/src/fields/DateTime/index.scss +++ b/packages/ui/src/fields/DateTime/index.scss @@ -1,20 +1,22 @@ @import '../../scss/styles.scss'; -html[data-theme='light'] { - .date-time-field { - &--has-error { - .react-datepicker__input-container input { - @include lightInputError; +@layer payload-default { + html[data-theme='light'] { + .date-time-field { + &--has-error { + .react-datepicker__input-container input { + @include lightInputError; + } } } } -} -html[data-theme='dark'] { - .date-time-field { - &--has-error { - .react-datepicker__input-container input { - @include darkInputError; + html[data-theme='dark'] { + .date-time-field { + &--has-error { + .react-datepicker__input-container input { + @include darkInputError; + } } } } diff --git a/packages/ui/src/fields/Email/index.scss b/packages/ui/src/fields/Email/index.scss index a44a200240..d12a0171d2 100644 --- a/packages/ui/src/fields/Email/index.scss +++ b/packages/ui/src/fields/Email/index.scss @@ -1,34 +1,36 @@ @import '../../scss/styles.scss'; -.field-type.email { - position: relative; +@layer payload-default { + .field-type.email { + position: relative; - input { - @include formInput; - } - - &.error { input { - background-color: var(--theme-error-200); + @include formInput; } - } -} -html[data-theme='light'] { - .field-type.email { &.error { input { - @include lightInputError; - } - } - } -} - -html[data-theme='dark'] { - .field-type.email { - &.error { - input { - @include darkInputError; + background-color: var(--theme-error-200); + } + } + } + + html[data-theme='light'] { + .field-type.email { + &.error { + input { + @include lightInputError; + } + } + } + } + + html[data-theme='dark'] { + .field-type.email { + &.error { + input { + @include darkInputError; + } } } } diff --git a/packages/ui/src/fields/FieldDescription/index.scss b/packages/ui/src/fields/FieldDescription/index.scss index dd1d35bc32..b1a935f7cc 100644 --- a/packages/ui/src/fields/FieldDescription/index.scss +++ b/packages/ui/src/fields/FieldDescription/index.scss @@ -1,12 +1,14 @@ @import '../../scss/styles.scss'; -.field-description { - display: flex; - color: var(--theme-elevation-400); - margin-top: calc(var(--base) / 4); +@layer payload-default { + .field-description { + display: flex; + color: var(--theme-elevation-400); + margin-top: calc(var(--base) / 4); - &--margin-bottom { - margin-top: 0; - margin-bottom: calc(var(--base) / 2); + &--margin-bottom { + margin-top: 0; + margin-bottom: calc(var(--base) / 2); + } } } diff --git a/packages/ui/src/fields/FieldError/index.scss b/packages/ui/src/fields/FieldError/index.scss index 23613c34a3..835fd6d666 100644 --- a/packages/ui/src/fields/FieldError/index.scss +++ b/packages/ui/src/fields/FieldError/index.scss @@ -1,16 +1,18 @@ @import '../../scss/styles'; -.field-error.tooltip { - font-family: var(--font-body); - left: auto; - max-width: 75%; - right: 0; - transform: translateY(calc(var(--caret-size) * -1)); - color: var(--theme-error-950); - background-color: var(--theme-error-300); +@layer payload-default { + .field-error.tooltip { + font-family: var(--font-body); + left: auto; + max-width: 75%; + right: 0; + transform: translateY(calc(var(--caret-size) * -1)); + color: var(--theme-error-950); + background-color: var(--theme-error-300); - &::after { - border-top-color: var(--theme-error-300); - border-bottom-color: var(--theme-error-300); + &::after { + border-top-color: var(--theme-error-300); + border-bottom-color: var(--theme-error-300); + } } } diff --git a/packages/ui/src/fields/FieldLabel/index.scss b/packages/ui/src/fields/FieldLabel/index.scss index 2fefeff55a..778acb9acf 100644 --- a/packages/ui/src/fields/FieldLabel/index.scss +++ b/packages/ui/src/fields/FieldLabel/index.scss @@ -1,21 +1,23 @@ @import '../../scss/styles.scss'; -label.field-label:not(.unstyled) { - @extend %body; - display: flex; - padding-bottom: base(0.25); - color: var(--theme-elevation-800); - font-family: var(--font-body); +@layer payload-default { + label.field-label:not(.unstyled) { + @extend %body; + display: flex; + padding-bottom: base(0.25); + color: var(--theme-elevation-800); + font-family: var(--font-body); - .required { - color: var(--theme-error-500); - [dir='ltr'] & { - margin-left: base(0.25); - margin-right: auto; - } - [dir='rtl'] & { - margin-right: base(0.25); - margin-left: auto; + .required { + color: var(--theme-error-500); + [dir='ltr'] & { + margin-left: base(0.25); + margin-right: auto; + } + [dir='rtl'] & { + margin-right: base(0.25); + margin-left: auto; + } } } } diff --git a/packages/ui/src/fields/Group/index.scss b/packages/ui/src/fields/Group/index.scss index 635c505f97..a19e00b829 100644 --- a/packages/ui/src/fields/Group/index.scss +++ b/packages/ui/src/fields/Group/index.scss @@ -1,88 +1,14 @@ @import '../../scss/styles.scss'; -.group-field { - margin-left: calc(var(--gutter-h) * -1); - margin-right: calc(var(--gutter-h) * -1); - border-bottom: 1px solid var(--theme-elevation-100); - border-top: 1px solid var(--theme-elevation-100); +@layer payload-default { + .group-field { + margin-left: calc(var(--gutter-h) * -1); + margin-right: calc(var(--gutter-h) * -1); + border-bottom: 1px solid var(--theme-elevation-100); + border-top: 1px solid var(--theme-elevation-100); - &--top-level { - padding: base(2) var(--gutter-h); - - &:first-child { - padding-top: 0; - border-top: 0; - } - } - - &--within-collapsible { - margin-left: calc(var(--base) * -1); - margin-right: calc(var(--base) * -1); - padding: var(--base); - - &:first-child { - border-top: 0; - padding-top: 0; - margin-top: 0; - } - - &:last-child { - padding-bottom: 0; - border-bottom: 0; - } - } - - &--within-group { - margin-left: 0; - margin-right: 0; - padding: 0; - border-top: 0; - border-bottom: 0; - } - - &--within-row { - margin: 0; - border-top: 0; - border-bottom: 0; - } - - &--within-tab:first-child { - margin-top: 0; - border-top: 0; - padding-top: 0; - } - - &--within-tab:last-child { - margin-bottom: 0; - border-bottom: 0; - padding-bottom: 0; - } - - &--gutter { - border-left: 1px solid var(--theme-elevation-100); - padding: 0 0 0 $baseline; - } - - &__header { - margin-bottom: calc(var(--base) / 2); - display: flex; - align-items: center; - gap: base(0.5); - - > header { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 4); - } - } - - &__title { - margin-bottom: 0; - } - - @include small-break { &--top-level { - padding: var(--base) var(--gutter-h); + padding: base(2) var(--gutter-h); &:first-child { padding-top: 0; @@ -90,55 +16,131 @@ } } - &__header { - margin-bottom: calc(var(--base) / 2); - } - &--within-collapsible { - margin-left: calc(var(--gutter-h) * -1); - margin-right: calc(var(--gutter-h) * -1); + margin-left: calc(var(--base) * -1); + margin-right: calc(var(--base) * -1); + padding: var(--base); + + &:first-child { + border-top: 0; + padding-top: 0; + margin-top: 0; + } + + &:last-child { + padding-bottom: 0; + border-bottom: 0; + } } &--within-group { + margin-left: 0; + margin-right: 0; padding: 0; + border-top: 0; + border-bottom: 0; + } + + &--within-row { + margin: 0; + border-top: 0; + border-bottom: 0; + } + + &--within-tab:first-child { + margin-top: 0; + border-top: 0; + padding-top: 0; + } + + &--within-tab:last-child { + margin-bottom: 0; + border-bottom: 0; + padding-bottom: 0; } &--gutter { - padding-left: var(--gutter-h); + border-left: 1px solid var(--theme-elevation-100); + padding: 0 0 0 $baseline; + } + + &__header { + margin-bottom: calc(var(--base) / 2); + display: flex; + align-items: center; + gap: base(0.5); + + > header { + display: flex; + flex-direction: column; + gap: calc(var(--base) / 4); + } + } + + &__title { + margin-bottom: 0; + } + + @include small-break { + &--top-level { + padding: var(--base) var(--gutter-h); + + &:first-child { + padding-top: 0; + border-top: 0; + } + } + + &__header { + margin-bottom: calc(var(--base) / 2); + } + + &--within-collapsible { + margin-left: calc(var(--gutter-h) * -1); + margin-right: calc(var(--gutter-h) * -1); + } + + &--within-group { + padding: 0; + } + + &--gutter { + padding-left: var(--gutter-h); + } } } -} -.group-field + .group-field { - border-top: 0; - padding-top: 0; -} + .group-field + .group-field { + border-top: 0; + padding-top: 0; + } -.group-field--within-row + .group-field--within-row { - margin-top: 0; -} + .group-field--within-row + .group-field--within-row { + margin-top: 0; + } -.group-field--within-tab + .group-field--within-row { - padding-top: 0; -} + .group-field--within-tab + .group-field--within-row { + padding-top: 0; + } -html[data-theme='light'] { - .group-field { - &--has-error { - color: var(--theme-error-750); - &:after { - background: var(--theme-error-500); - } - } - } -} - -html[data-theme='dark'] { - .group-field { - &--has-error { - color: var(--theme-error-500); - &:after { - background: var(--theme-error-500); + html[data-theme='light'] { + .group-field { + &--has-error { + color: var(--theme-error-750); + &:after { + background: var(--theme-error-500); + } + } + } + } + + html[data-theme='dark'] { + .group-field { + &--has-error { + color: var(--theme-error-500); + &:after { + background: var(--theme-error-500); + } } } } diff --git a/packages/ui/src/fields/JSON/index.scss b/packages/ui/src/fields/JSON/index.scss index 3a6e04f146..bfd50ab804 100644 --- a/packages/ui/src/fields/JSON/index.scss +++ b/packages/ui/src/fields/JSON/index.scss @@ -1,16 +1,18 @@ @import '../../scss/styles.scss'; -.json-field { - position: relative; +@layer payload-default { + .json-field { + position: relative; - &.error { - .code-editor { - border-color: var(--theme-error-500); - } + &.error { + .code-editor { + border-color: var(--theme-error-500); + } - .monaco-editor-background, - .margin { - background-color: var(--theme-error-50); + .monaco-editor-background, + .margin { + background-color: var(--theme-error-50); + } } } } diff --git a/packages/ui/src/fields/Number/index.scss b/packages/ui/src/fields/Number/index.scss index ab294a5a1d..50628f1ad2 100644 --- a/packages/ui/src/fields/Number/index.scss +++ b/packages/ui/src/fields/Number/index.scss @@ -1,30 +1,32 @@ @import '../../scss/styles.scss'; -.field-type.number { - position: relative; +@layer payload-default { + .field-type.number { + position: relative; - &:not(.has-many) { - input { - @include formInput; + &:not(.has-many) { + input { + @include formInput; + } } } -} -html[data-theme='light'] { - .field-type.number { - &.error { - input { - @include lightInputError; - } - } - } -} - -html[data-theme='dark'] { - .field-type.number { - &.error { - input { - @include darkInputError; + html[data-theme='light'] { + .field-type.number { + &.error { + input { + @include lightInputError; + } + } + } + } + + html[data-theme='dark'] { + .field-type.number { + &.error { + input { + @include darkInputError; + } } } } diff --git a/packages/ui/src/fields/Password/index.scss b/packages/ui/src/fields/Password/index.scss index 31f091b40a..d10a774637 100644 --- a/packages/ui/src/fields/Password/index.scss +++ b/packages/ui/src/fields/Password/index.scss @@ -1,28 +1,30 @@ @import '../../scss/styles.scss'; -.field-type.password { - position: relative; - - input { - @include formInput; - } -} - -html[data-theme='light'] { +@layer payload-default { .field-type.password { - &.error { - input { - @include lightInputError; - } - } - } -} - -html[data-theme='dark'] { - .field-type.password { - &.error { - input { - @include darkInputError; + position: relative; + + input { + @include formInput; + } + } + + html[data-theme='light'] { + .field-type.password { + &.error { + input { + @include lightInputError; + } + } + } + } + + html[data-theme='dark'] { + .field-type.password { + &.error { + input { + @include darkInputError; + } } } } diff --git a/packages/ui/src/fields/Point/index.scss b/packages/ui/src/fields/Point/index.scss index cbaf1e3d38..7bedfcddc7 100644 --- a/packages/ui/src/fields/Point/index.scss +++ b/packages/ui/src/fields/Point/index.scss @@ -1,47 +1,49 @@ @import '../../scss/styles.scss'; -.point { - position: relative; - - & .input-wrapper { +@layer payload-default { + .point { position: relative; - } - &__wrap { - display: flex; - width: calc(100% + #{base(1)}); - margin: 0; - margin-left: base(-0.5); - margin-right: base(-0.5); - list-style: none; - padding: 0; + & .input-wrapper { + position: relative; + } - li { - padding: 0 base(0.5); - width: 50%; + &__wrap { + display: flex; + width: calc(100% + #{base(1)}); + margin: 0; + margin-left: base(-0.5); + margin-right: base(-0.5); + list-style: none; + padding: 0; + + li { + padding: 0 base(0.5); + width: 50%; + } + } + + input { + @include formInput; } } - input { - @include formInput; + html[data-theme='light'] { + .point { + &.error { + input { + @include lightInputError; + } + } + } } -} -html[data-theme='light'] { - .point { - &.error { - input { - @include lightInputError; - } - } - } -} - -html[data-theme='dark'] { - .point { - &.error { - input { - @include darkInputError; + html[data-theme='dark'] { + .point { + &.error { + input { + @include darkInputError; + } } } } diff --git a/packages/ui/src/fields/RadioGroup/Radio/index.scss b/packages/ui/src/fields/RadioGroup/Radio/index.scss index af75ac13ca..e615943178 100644 --- a/packages/ui/src/fields/RadioGroup/Radio/index.scss +++ b/packages/ui/src/fields/RadioGroup/Radio/index.scss @@ -1,77 +1,79 @@ @import '../../../scss/styles.scss'; -.radio-input { - display: flex; - align-items: center; - cursor: pointer; - margin: base(0.1) 0; - position: relative; - - input[type='radio'] { - opacity: 0; - margin: 0; - position: absolute; - } - - input[type='radio']:focus + .radio-input__styled-radio { - box-shadow: 0 0 3px 3px var(--theme-success-400); - } - - &__styled-radio { - border: 1px solid var(--theme-border-color); - background-color: var(--theme-input-bg); - @include shadow-sm; - width: $baseline; - height: $baseline; +@layer payload-default { + .radio-input { + display: flex; + align-items: center; + cursor: pointer; + margin: base(0.1) 0; position: relative; - padding: 0; - display: inline-block; - border-radius: 50%; - &:before { - content: ' '; - display: block; - border-radius: 100%; - background-color: var(--theme-elevation-800); - width: calc(100% - 8px); - height: calc(100% - 8px); - border: 4px solid var(--theme-elevation-0); + input[type='radio'] { opacity: 0; + margin: 0; + position: absolute; } - &--disabled { - @include readOnly; - &::before { - border-color: var(--theme-elevation-100); + input[type='radio']:focus + .radio-input__styled-radio { + box-shadow: 0 0 3px 3px var(--theme-success-400); + } + + &__styled-radio { + border: 1px solid var(--theme-border-color); + background-color: var(--theme-input-bg); + @include shadow-sm; + width: $baseline; + height: $baseline; + position: relative; + padding: 0; + display: inline-block; + border-radius: 50%; + + &:before { + content: ' '; + display: block; + border-radius: 100%; + background-color: var(--theme-elevation-800); + width: calc(100% - 8px); + height: calc(100% - 8px); + border: 4px solid var(--theme-elevation-0); + opacity: 0; } - } - } - [dir='rtl'] &__label { - margin-left: 0; - margin-right: base(0.5); - } - - &__label { - margin-left: base(0.5); - } - - &--is-selected { - .radio-input { - &__styled-radio { - &:before { - opacity: 1; + &--disabled { + @include readOnly; + &::before { + border-color: var(--theme-elevation-100); } } } - } - &:not(&--is-selected) { - &:hover { + [dir='rtl'] &__label { + margin-left: 0; + margin-right: base(0.5); + } + + &__label { + margin-left: base(0.5); + } + + &--is-selected { .radio-input { &__styled-radio { &:before { - opacity: 0.2; + opacity: 1; + } + } + } + } + + &:not(&--is-selected) { + &:hover { + .radio-input { + &__styled-radio { + &:before { + opacity: 0.2; + } } } } diff --git a/packages/ui/src/fields/RadioGroup/index.scss b/packages/ui/src/fields/RadioGroup/index.scss index 888e5a7332..6862bfce7f 100644 --- a/packages/ui/src/fields/RadioGroup/index.scss +++ b/packages/ui/src/fields/RadioGroup/index.scss @@ -1,84 +1,86 @@ @import '../../scss/styles.scss'; -.radio-group { - .tooltip:not([aria-hidden='true']) { - right: auto; - position: static; - margin-bottom: 0.2em; - max-width: fit-content; - } - - &--layout-horizontal { - ul { - display: flex; - flex-wrap: wrap; +@layer payload-default { + .radio-group { + .tooltip:not([aria-hidden='true']) { + right: auto; + position: static; + margin-bottom: 0.2em; + max-width: fit-content; } - li { - flex-shrink: 0; - [dir='ltr'] & { - padding-right: $baseline; + &--layout-horizontal { + ul { + display: flex; + flex-wrap: wrap; } - [dir='rtl'] & { - padding-left: $baseline; - } - } - } - ul { - list-style: none; - padding: 0; - margin: 0; - } -} - -.radio-group--read-only { - .radio-input { - cursor: default; - - &:hover { - border-color: var(--theme-elevation-50); - } - - &__label { - color: var(--theme-elevation-400); - } - - &--is-selected { - .radio-input__styled-radio { - &:before { - background-color: var(--theme-elevation-250); + li { + flex-shrink: 0; + [dir='ltr'] & { + padding-right: $baseline; + } + [dir='rtl'] & { + padding-left: $baseline; } } } - &:not(.radio-input--is-selected) { + ul { + list-style: none; + padding: 0; + margin: 0; + } + } + + .radio-group--read-only { + .radio-input { + cursor: default; + &:hover { + border-color: var(--theme-elevation-50); + } + + &__label { + color: var(--theme-elevation-400); + } + + &--is-selected { .radio-input__styled-radio { &:before { - opacity: 0; + background-color: var(--theme-elevation-250); + } + } + } + + &:not(.radio-input--is-selected) { + &:hover { + .radio-input__styled-radio { + &:before { + opacity: 0; + } } } } } } -} -html[data-theme='light'] { - .radio-group { - &.error { - .radio-input__styled-radio { - @include lightInputError; - } - } - } -} - -html[data-theme='dark'] { - .radio-group { - &.error { - .radio-input__styled-radio { - @include darkInputError; + html[data-theme='light'] { + .radio-group { + &.error { + .radio-input__styled-radio { + @include lightInputError; + } + } + } + } + + html[data-theme='dark'] { + .radio-group { + &.error { + .radio-input__styled-radio { + @include darkInputError; + } } } } diff --git a/packages/ui/src/fields/Relationship/index.scss b/packages/ui/src/fields/Relationship/index.scss index 5a0c9f2734..cf087bd35d 100644 --- a/packages/ui/src/fields/Relationship/index.scss +++ b/packages/ui/src/fields/Relationship/index.scss @@ -1,64 +1,66 @@ @import '../../scss/styles.scss'; -.field-type.relationship { - position: relative; -} - -.relationship { - &__wrap { - display: flex; - width: 100%; - - div.react-select { - width: 100%; - min-width: 0; - } +@layer payload-default { + .field-type.relationship { + position: relative; } - &__error-loading { - border: 1px solid var(--theme-error-500); - min-height: base(2); - padding: base(0.5) base(0.75); - background-color: var(--theme-error-500); - color: var(--theme-elevation-0); - } - - &--allow-create { - .rs__control { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } -} - -html[data-theme='light'] { .relationship { - &.error { - > .relationship__wrap { - .rs__control { + &__wrap { + display: flex; + width: 100%; + + div.react-select { + width: 100%; + min-width: 0; + } + } + + &__error-loading { + border: 1px solid var(--theme-error-500); + min-height: base(2); + padding: base(0.5) base(0.75); + background-color: var(--theme-error-500); + color: var(--theme-elevation-0); + } + + &--allow-create { + .rs__control { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + } + + html[data-theme='light'] { + .relationship { + &.error { + > .relationship__wrap { + .rs__control { + @include lightInputError; + } + } + + button.relationship-add-new__add-button { @include lightInputError; } } - - button.relationship-add-new__add-button { - @include lightInputError; - } } } -} -html[data-theme='dark'] { - .relationship { - &.error { - > .relationship__wrap { - .rs__control { + html[data-theme='dark'] { + .relationship { + &.error { + > .relationship__wrap { + .rs__control { + @include darkInputError; + } + } + + button.relationship-add-new__add-button { @include darkInputError; } } - - button.relationship-add-new__add-button { - @include darkInputError; - } } } } diff --git a/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.scss b/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.scss index 3bc489235e..170fe89536 100644 --- a/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.scss +++ b/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.scss @@ -1,49 +1,51 @@ @import '../../../../scss/styles.scss'; -.relationship--multi-value-label { - display: flex; - padding-inline-start: base(0.4); - gap: base(0.2); - - &__content { - @extend %small; - line-height: base(1.1); - max-width: 150px; - color: currentColor; +@layer payload-default { + .relationship--multi-value-label { display: flex; - align-items: center; - } + padding-inline-start: base(0.4); + gap: base(0.2); - &__text { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - &__drawer-toggler { - border: none; - background-color: transparent; - padding: 0; - cursor: pointer; - position: relative; - display: flex; - align-items: center; - justify-content: center; - margin-left: base(0.2); - pointer-events: all; - - .icon { - width: base(1); - height: base(1); - padding: base(0.1); + &__content { + @extend %small; + line-height: base(1.1); + max-width: 150px; + color: currentColor; + display: flex; + align-items: center; } - &:hover { - background-color: var(--theme-elevation-150); + &__text { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; } - &:focus-visible { - outline: var(--accessibility-outline); + &__drawer-toggler { + border: none; + background-color: transparent; + padding: 0; + cursor: pointer; + position: relative; + display: flex; + align-items: center; + justify-content: center; + margin-left: base(0.2); + pointer-events: all; + + .icon { + width: base(1); + height: base(1); + padding: base(0.1); + } + + &:hover { + background-color: var(--theme-elevation-150); + } + + &:focus-visible { + outline: var(--accessibility-outline); + } } } } diff --git a/packages/ui/src/fields/Relationship/select-components/SingleValue/index.scss b/packages/ui/src/fields/Relationship/select-components/SingleValue/index.scss index 2fad7cc2ad..321535ea0b 100644 --- a/packages/ui/src/fields/Relationship/select-components/SingleValue/index.scss +++ b/packages/ui/src/fields/Relationship/select-components/SingleValue/index.scss @@ -1,52 +1,54 @@ @import '../../../../scss/styles.scss'; -.relationship--single-value { - &.rs__single-value { - overflow: visible; - min-width: 0; - } - - &__label-text { - max-width: unset; - display: flex; - align-items: center; - overflow: visible; - width: 100%; - flex-shrink: 1; - } - - &__text { - overflow: hidden; - text-overflow: ellipsis; - } - - &__drawer-toggler { - border: none; - background-color: transparent; - padding: 0; - cursor: pointer; - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - margin-left: base(0.25); - pointer-events: all; - - .icon { - width: base(0.75); - height: base(0.75); +@layer payload-default { + .relationship--single-value { + &.rs__single-value { + overflow: visible; + min-width: 0; } - &:focus-visible { - outline: var(--accessibility-outline); + &__label-text { + max-width: unset; + display: flex; + align-items: center; + overflow: visible; + width: 100%; + flex-shrink: 1; } - &:hover { - background-color: var(--theme-elevation-100); + &__text { + overflow: hidden; + text-overflow: ellipsis; } - } - &__label { - flex-grow: 1; + &__drawer-toggler { + border: none; + background-color: transparent; + padding: 0; + cursor: pointer; + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + margin-left: base(0.25); + pointer-events: all; + + .icon { + width: base(0.75); + height: base(0.75); + } + + &:focus-visible { + outline: var(--accessibility-outline); + } + + &:hover { + background-color: var(--theme-elevation-100); + } + } + + &__label { + flex-grow: 1; + } } } diff --git a/packages/ui/src/fields/Row/index.scss b/packages/ui/src/fields/Row/index.scss index 5c0c573f89..b9df288869 100644 --- a/packages/ui/src/fields/Row/index.scss +++ b/packages/ui/src/fields/Row/index.scss @@ -1,42 +1,44 @@ @import '../../scss/styles.scss'; -.field-type.row { - .row__fields { - display: flex; - flex-wrap: wrap; - row-gap: calc(var(--base) * 0.8); - - > * { - flex: 0 1 var(--field-width); +@layer payload-default { + .field-type.row { + .row__fields { display: flex; - flex-direction: column; - justify-content: flex-start; - } - - // If there is more than one child, add inline-margins to space them out. - &:has(> *:nth-child(2)) { - margin-inline: calc(var(--base) / -4); // add negative margin to counteract the gap. + flex-wrap: wrap; + row-gap: calc(var(--base) * 0.8); > * { - flex: 0 1 calc(var(--field-width) - var(--base) * 0.5); - margin-inline: calc(var(--base) / 4); + flex: 0 1 var(--field-width); + display: flex; + flex-direction: column; + justify-content: flex-start; + } + + // If there is more than one child, add inline-margins to space them out. + &:has(> *:nth-child(2)) { + margin-inline: calc(var(--base) / -4); // add negative margin to counteract the gap. + + > * { + flex: 0 1 calc(var(--field-width) - var(--base) * 0.5); + margin-inline: calc(var(--base) / 4); + } } } - } - @include mid-break { - .row__fields { - display: block; - margin-left: 0; - margin-right: 0; - width: 100%; - - > * { + @include mid-break { + .row__fields { + display: block; margin-left: 0; margin-right: 0; - width: 100% !important; - padding-left: 0; - padding-right: 0; + width: 100%; + + > * { + margin-left: 0; + margin-right: 0; + width: 100% !important; + padding-left: 0; + padding-right: 0; + } } } } diff --git a/packages/ui/src/fields/Select/index.scss b/packages/ui/src/fields/Select/index.scss index 9507c99ad4..76f92c188b 100644 --- a/packages/ui/src/fields/Select/index.scss +++ b/packages/ui/src/fields/Select/index.scss @@ -1,24 +1,26 @@ @import '../../scss/styles.scss'; -.field-type.select { - position: relative; -} - -html[data-theme='light'] { +@layer payload-default { .field-type.select { - &.error { - .rs__control { - @include lightInputError; - } - } - } -} - -html[data-theme='dark'] { - .field-type.select { - &.error { - .rs__control { - @include darkInputError; + position: relative; + } + + html[data-theme='light'] { + .field-type.select { + &.error { + .rs__control { + @include lightInputError; + } + } + } + } + + html[data-theme='dark'] { + .field-type.select { + &.error { + .rs__control { + @include darkInputError; + } } } } diff --git a/packages/ui/src/fields/Tabs/Tab/index.scss b/packages/ui/src/fields/Tabs/Tab/index.scss index 2312a65f29..1adf725e2b 100644 --- a/packages/ui/src/fields/Tabs/Tab/index.scss +++ b/packages/ui/src/fields/Tabs/Tab/index.scss @@ -1,78 +1,80 @@ @import '../../../scss/styles.scss'; -.tabs-field__tab-button { - @extend %btn-reset; - @extend %h4; - display: flex; - padding-bottom: base(1); - margin: 0 $baseline 0 0; - cursor: pointer; - opacity: 0.5; - position: relative; - white-space: nowrap; - flex-shrink: 0; - gap: base(0.5); - - &:last-child { - margin: 0; - } - - &:after { - content: ' '; - position: absolute; - right: 0; - bottom: -1px; - left: 0; - height: 1px; - background: var(--theme-elevation-800); - opacity: 0; - } - - &:hover { - opacity: 0.75; - - &:after { - opacity: 0.2; - } - } - - &--active { - opacity: 1 !important; - - &:after { - opacity: 1 !important; - height: 2px; - } - } - - &__description { - margin-bottom: calc(var(--base) / 2); - } - - @include small-break { - margin: 0 base(0.75) 0 0; - padding-bottom: base(0.5); +@layer payload-default { + .tabs-field__tab-button { + @extend %btn-reset; + @extend %h4; + display: flex; + padding-bottom: base(1); + margin: 0 $baseline 0 0; + cursor: pointer; + opacity: 0.5; + position: relative; + white-space: nowrap; + flex-shrink: 0; + gap: base(0.5); &:last-child { margin: 0; } - } -} -html[data-theme='light'] { - .tabs-field__tab-button--has-error { - color: var(--theme-error-750); &:after { - background: var(--theme-error-500); - } - } -} - -html[data-theme='dark'] { - .tabs-field__tab-button--has-error { - color: var(--theme-error-500); - &:after { - background: var(--theme-error-500); + content: ' '; + position: absolute; + right: 0; + bottom: -1px; + left: 0; + height: 1px; + background: var(--theme-elevation-800); + opacity: 0; + } + + &:hover { + opacity: 0.75; + + &:after { + opacity: 0.2; + } + } + + &--active { + opacity: 1 !important; + + &:after { + opacity: 1 !important; + height: 2px; + } + } + + &__description { + margin-bottom: calc(var(--base) / 2); + } + + @include small-break { + margin: 0 base(0.75) 0 0; + padding-bottom: base(0.5); + + &:last-child { + margin: 0; + } + } + } + + html[data-theme='light'] { + .tabs-field__tab-button--has-error { + color: var(--theme-error-750); + &:after { + background: var(--theme-error-500); + } + } + } + + html[data-theme='dark'] { + .tabs-field__tab-button--has-error { + color: var(--theme-error-500); + &:after { + background: var(--theme-error-500); + } } } } diff --git a/packages/ui/src/fields/Tabs/index.scss b/packages/ui/src/fields/Tabs/index.scss index 119d1107fc..07682eb23e 100644 --- a/packages/ui/src/fields/Tabs/index.scss +++ b/packages/ui/src/fields/Tabs/index.scss @@ -1,62 +1,64 @@ @import '../../scss/styles.scss'; -.tabs-field { - margin-top: base(2); - margin-left: calc(var(--gutter-h) * -1); - margin-right: calc(var(--gutter-h) * -1); +@layer payload-default { + .tabs-field { + margin-top: base(2); + margin-left: calc(var(--gutter-h) * -1); + margin-right: calc(var(--gutter-h) * -1); - &__content-wrap { - padding-left: var(--gutter-h); - padding-right: var(--gutter-h); - } - - &--within-collapsible { - margin: 0 calc(#{$baseline} * -1); - - .tabs-field__content-wrap { - padding-left: $baseline; - padding-right: $baseline; + &__content-wrap { + padding-left: var(--gutter-h); + padding-right: var(--gutter-h); } - .tabs-field__tabs { + &--within-collapsible { + margin: 0 calc(#{$baseline} * -1); + + .tabs-field__content-wrap { + padding-left: $baseline; + padding-right: $baseline; + } + + .tabs-field__tabs { + &:before, + &:after { + content: ' '; + display: block; + width: $baseline; + } + } + } + + &__tabs-wrap { + overflow-x: auto; + overflow-y: hidden; + margin-bottom: $baseline; + } + + &__tabs { + border-bottom: 1px solid var(--theme-elevation-100); + display: inline-flex; + min-width: 100%; + vertical-align: bottom; + &:before, &:after { content: ' '; display: block; - width: $baseline; + width: var(--gutter-h); + flex-shrink: 0; + } + } + + &__description { + margin-bottom: calc(var(--base) / 2); + } + + @include small-break { + &--within-collapsible { + margin-left: calc(var(--gutter-h) * -1); + margin-right: calc(var(--gutter-h) * -1); } } } - - &__tabs-wrap { - overflow-x: auto; - overflow-y: hidden; - margin-bottom: $baseline; - } - - &__tabs { - border-bottom: 1px solid var(--theme-elevation-100); - display: inline-flex; - min-width: 100%; - vertical-align: bottom; - - &:before, - &:after { - content: ' '; - display: block; - width: var(--gutter-h); - flex-shrink: 0; - } - } - - &__description { - margin-bottom: calc(var(--base) / 2); - } - - @include small-break { - &--within-collapsible { - margin-left: calc(var(--gutter-h) * -1); - margin-right: calc(var(--gutter-h) * -1); - } - } } diff --git a/packages/ui/src/fields/Text/index.scss b/packages/ui/src/fields/Text/index.scss index fe73e0abe5..fcc03a753e 100644 --- a/packages/ui/src/fields/Text/index.scss +++ b/packages/ui/src/fields/Text/index.scss @@ -1,36 +1,38 @@ @import '../../scss/styles.scss'; -.field-type.text { - position: relative; +@layer payload-default { + .field-type.text { + position: relative; - &:not(.has-many) { - input { - @include formInput; + &:not(.has-many) { + input { + @include formInput; + } } } -} -.has-many { - .rs__input-container { - overflow: hidden; + .has-many { + .rs__input-container { + overflow: hidden; + } } -} -html[data-theme='light'] { - .field-type.text { - &.error { - input { - @include lightInputError; - } - } - } -} - -html[data-theme='dark'] { - .field-type.text { - &.error { - input { - @include darkInputError; + html[data-theme='light'] { + .field-type.text { + &.error { + input { + @include lightInputError; + } + } + } + } + + html[data-theme='dark'] { + .field-type.text { + &.error { + input { + @include darkInputError; + } } } } diff --git a/packages/ui/src/fields/Textarea/index.scss b/packages/ui/src/fields/Textarea/index.scss index 011f70cb10..751fcaefb7 100644 --- a/packages/ui/src/fields/Textarea/index.scss +++ b/packages/ui/src/fields/Textarea/index.scss @@ -1,112 +1,114 @@ @import '../../scss/styles.scss'; -.field-type.textarea { - position: relative; - display: flex; - flex-direction: column; - - .textarea-outer { - @include formInput(); +@layer payload-default { + .field-type.textarea { + position: relative; display: flex; - resize: vertical; - min-height: base(3); - height: 100%; + flex-direction: column; - // Scrollbar for giant content - max-height: calc(100vh - $top-header-offset - calc(#{base(5)})); - overflow: hidden; + .textarea-outer { + @include formInput(); + display: flex; + resize: vertical; + min-height: base(3); + height: 100%; + + // Scrollbar for giant content + max-height: calc(100vh - $top-header-offset - calc(#{base(5)})); + overflow: hidden; + + @include mid-break { + max-height: 60vh; + } + } + + &.read-only { + .textarea-outer { + @include readOnly; + } + } + + // This element takes exactly the same dimensions as the clone + .textarea-inner { + display: block; + position: relative; + line-height: inherit; + flex-grow: 1; + background: none; + outline: none; + } + + // Unstyle the textarea, the border is rendered on .textarea-outer + .textarea-element { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: inherit; + padding: inherit; + font: inherit; + line-height: inherit; + color: inherit; + background: none; + overflow: auto; + resize: none; + outline: none; + text-transform: inherit; + + &::-webkit-scrollbar { + display: none; + } + &[data-rtl='true'] { + direction: rtl; + } + } + + // Clone of textarea with same height + .textarea-clone { + vertical-align: top; + display: inline-block; + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: pre-wrap; + pointer-events: none; + } + + .textarea-clone::before { + content: attr(data-value) ' '; + visibility: hidden; + opacity: 0; + white-space: pre-wrap; + overflow-wrap: break-word; + } + + .textarea-clone::after { + content: attr(data-after); + opacity: 0.5; + } @include mid-break { - max-height: 60vh; + padding: 0; } } - &.read-only { - .textarea-outer { - @include readOnly; + html[data-theme='light'] { + .field-type.textarea { + &.error { + .textarea-outer { + @include lightInputError; + } + } } } - // This element takes exactly the same dimensions as the clone - .textarea-inner { - display: block; - position: relative; - line-height: inherit; - flex-grow: 1; - background: none; - outline: none; - } - - // Unstyle the textarea, the border is rendered on .textarea-outer - .textarea-element { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: inherit; - padding: inherit; - font: inherit; - line-height: inherit; - color: inherit; - background: none; - overflow: auto; - resize: none; - outline: none; - text-transform: inherit; - - &::-webkit-scrollbar { - display: none; - } - &[data-rtl='true'] { - direction: rtl; - } - } - - // Clone of textarea with same height - .textarea-clone { - vertical-align: top; - display: inline-block; - flex-grow: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: pre-wrap; - pointer-events: none; - } - - .textarea-clone::before { - content: attr(data-value) ' '; - visibility: hidden; - opacity: 0; - white-space: pre-wrap; - overflow-wrap: break-word; - } - - .textarea-clone::after { - content: attr(data-after); - opacity: 0.5; - } - - @include mid-break { - padding: 0; - } -} - -html[data-theme='light'] { - .field-type.textarea { - &.error { - .textarea-outer { - @include lightInputError; - } - } - } -} - -html[data-theme='dark'] { - .field-type.textarea { - &.error { - .textarea-outer { - @include darkInputError; + html[data-theme='dark'] { + .field-type.textarea { + &.error { + .textarea-outer { + @include darkInputError; + } } } } diff --git a/packages/ui/src/fields/Upload/HasMany/index.scss b/packages/ui/src/fields/Upload/HasMany/index.scss index 4640ca9661..d733f978cd 100644 --- a/packages/ui/src/fields/Upload/HasMany/index.scss +++ b/packages/ui/src/fields/Upload/HasMany/index.scss @@ -1,27 +1,29 @@ @import '../../../scss/styles.scss'; -.upload--has-many { - position: relative; - max-width: 100%; +@layer payload-default { + .upload--has-many { + position: relative; + max-width: 100%; - &__draggable-rows { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 4); - } - - &__dragItem { - .icon--drag-handle { - color: var(--theme-elevation-400); + &__draggable-rows { + display: flex; + flex-direction: column; + gap: calc(var(--base) / 4); } - .thumbnail { - width: 26px; - height: 26px; - } + &__dragItem { + .icon--drag-handle { + color: var(--theme-elevation-400); + } - .uploadDocRelationshipContent__details { - line-height: 1.2; + .thumbnail { + width: 26px; + height: 26px; + } + + .uploadDocRelationshipContent__details { + line-height: 1.2; + } } } } diff --git a/packages/ui/src/fields/Upload/HasOne/index.scss b/packages/ui/src/fields/Upload/HasOne/index.scss index b07ac1a75c..26754c6897 100644 --- a/packages/ui/src/fields/Upload/HasOne/index.scss +++ b/packages/ui/src/fields/Upload/HasOne/index.scss @@ -1,6 +1,8 @@ @import '../../../scss/styles.scss'; -.upload { - position: relative; - max-width: 100%; +@layer payload-default { + .upload { + position: relative; + max-width: 100%; + } } diff --git a/packages/ui/src/fields/Upload/RelationshipContent/index.scss b/packages/ui/src/fields/Upload/RelationshipContent/index.scss index 9f8437d56f..1ebac55118 100644 --- a/packages/ui/src/fields/Upload/RelationshipContent/index.scss +++ b/packages/ui/src/fields/Upload/RelationshipContent/index.scss @@ -1,54 +1,56 @@ -.upload-relationship-details { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - min-width: 0; - - &__imageAndDetails { +@layer payload-default { + .upload-relationship-details { display: flex; - gap: calc(var(--base) / 2); + justify-content: space-between; align-items: center; + width: 100%; min-width: 0; - } - &__thumbnail { - align-self: center; - border-radius: var(--style-radius-s); - } + &__imageAndDetails { + display: flex; + gap: calc(var(--base) / 2); + align-items: center; + min-width: 0; + } - &__details { - display: flex; - flex-direction: column; - gap: 0; - overflow: hidden; - margin-right: calc(var(--base) * 2); - } + &__thumbnail { + align-self: center; + border-radius: var(--style-radius-s); + } - &__filename { - margin: 0; - text-wrap: nowrap; - text-overflow: ellipsis; - overflow: hidden; - a { - text-decoration: none; + &__details { + display: flex; + flex-direction: column; + gap: 0; + overflow: hidden; + margin-right: calc(var(--base) * 2); + } + + &__filename { + margin: 0; + text-wrap: nowrap; + text-overflow: ellipsis; + overflow: hidden; + a { + text-decoration: none; + } + } + + &__meta { + margin: 0; + color: var(--theme-elevation-500); + text-wrap: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + &__actions { + flex-shrink: 0; + display: flex; + } + + .btn { + margin: 0; } } - - &__meta { - margin: 0; - color: var(--theme-elevation-500); - text-wrap: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - &__actions { - flex-shrink: 0; - display: flex; - } - - .btn { - margin: 0; - } } diff --git a/packages/ui/src/fields/Upload/UploadCard/index.scss b/packages/ui/src/fields/Upload/UploadCard/index.scss index d4a7f57cc1..c1c7366a77 100644 --- a/packages/ui/src/fields/Upload/UploadCard/index.scss +++ b/packages/ui/src/fields/Upload/UploadCard/index.scss @@ -1,26 +1,28 @@ -.upload-field-card { - background: var(--theme-elevation-50); - border: 1px solid var(--theme-border-color); - border-radius: var(--style-radius-s); - display: flex; - align-items: center; - width: 100%; - gap: calc(var(--base) / 2); +@layer payload-default { + .upload-field-card { + background: var(--theme-elevation-50); + border: 1px solid var(--theme-border-color); + border-radius: var(--style-radius-s); + display: flex; + align-items: center; + width: 100%; + gap: calc(var(--base) / 2); - &--size-medium { - padding: calc(var(--base) * 0.5); + &--size-medium { + padding: calc(var(--base) * 0.5); - .thumbnail { - width: 40px; - height: 40px; + .thumbnail { + width: 40px; + height: 40px; + } } - } - &--size-small { - padding: calc(var(--base) / 3) calc(var(--base) / 2); - .thumbnail { - width: 25px; - height: 25px; + &--size-small { + padding: calc(var(--base) / 3) calc(var(--base) / 2); + .thumbnail { + width: 25px; + height: 25px; + } } } } diff --git a/packages/ui/src/fields/Upload/index.scss b/packages/ui/src/fields/Upload/index.scss index 83a62beb5e..bc351538d5 100644 --- a/packages/ui/src/fields/Upload/index.scss +++ b/packages/ui/src/fields/Upload/index.scss @@ -1,62 +1,64 @@ @import '../../scss/styles.scss'; -.upload { - &__dropzoneAndUpload { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 4); - } - - &__dropzoneContent { - display: flex; - flex-wrap: wrap; - gap: base(0.4); - justify-content: space-between; - width: 100%; - } - - &__dropzoneContent__buttons { - display: flex; - gap: calc(var(--base) / 2); - position: relative; - left: -2px; - - .btn .btn__content { - gap: calc(var(--base) / 5); +@layer payload-default { + .upload { + &__dropzoneAndUpload { + display: flex; + flex-direction: column; + gap: calc(var(--base) / 4); } - .btn__label { - font-weight: 100; + &__dropzoneContent { + display: flex; + flex-wrap: wrap; + gap: base(0.4); + justify-content: space-between; + width: 100%; } - } - &__dropzoneContent__orText { - color: var(--theme-elevation-500); - text-transform: lowercase; - } + &__dropzoneContent__buttons { + display: flex; + gap: calc(var(--base) / 2); + position: relative; + left: -2px; - &__dragAndDropText { - flex-shrink: 0; - margin: 0; - text-transform: lowercase; - align-self: center; - color: var(--theme-elevation-500); - } + .btn .btn__content { + gap: calc(var(--base) / 5); + } - &__loadingRows { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 4); - } + .btn__label { + font-weight: 100; + } + } - .shimmer-effect { - border-radius: var(--style-radius-s); - border: 1px solid var(--theme-border-color); - } + &__dropzoneContent__orText { + color: var(--theme-elevation-500); + text-transform: lowercase; + } - @include small-break { &__dragAndDropText { - display: none; + flex-shrink: 0; + margin: 0; + text-transform: lowercase; + align-self: center; + color: var(--theme-elevation-500); + } + + &__loadingRows { + display: flex; + flex-direction: column; + gap: calc(var(--base) / 4); + } + + .shimmer-effect { + border-radius: var(--style-radius-s); + border: 1px solid var(--theme-border-color); + } + + @include small-break { + &__dragAndDropText { + display: none; + } } } } diff --git a/packages/ui/src/forms/Form/index.scss b/packages/ui/src/forms/Form/index.scss index 6e73bcffb9..87afc63f9f 100644 --- a/packages/ui/src/forms/Form/index.scss +++ b/packages/ui/src/forms/Form/index.scss @@ -1,5 +1,7 @@ -.form { - > * { - width: 100%; +@layer payload-default { + .form { + > * { + width: 100%; + } } } diff --git a/packages/ui/src/forms/Form/index.tsx b/packages/ui/src/forms/Form/index.tsx index 056154a7de..972630e2ea 100644 --- a/packages/ui/src/forms/Form/index.tsx +++ b/packages/ui/src/forms/Form/index.tsx @@ -70,8 +70,6 @@ export const Form: React.FC = (props) => { waitForAutocomplete, } = props - const { serverFunction } = useServerFunctions() - const method = 'method' in props ? props?.method : undefined const router = useRouter() @@ -81,6 +79,8 @@ export const Form: React.FC = (props) => { const { refreshCookie, user } = useAuth() const operation = useOperation() + const { getFormState } = useServerFunctions() + const { config } = useConfig() const [disabled, setDisabled] = useState(disabledFromProps || false) @@ -91,6 +91,8 @@ export const Form: React.FC = (props) => { const [submitted, setSubmitted] = useState(false) const formRef = useRef(null) const contextRef = useRef({} as FormContextType) + const abortControllerRef = useRef(new AbortController()) + const abortControllerRef2 = useRef(new AbortController()) const fieldsReducer = useReducer(fieldReducer, {}, () => initialState) @@ -378,7 +380,7 @@ export const Form: React.FC = (props) => { errorToast(message) } } catch (err) { - console.error('Error submitting form', err) + console.error('Error submitting form', err) // eslint-disable-line no-console setProcessing(false) setSubmitted(true) setDisabled(false) @@ -448,23 +450,32 @@ export const Form: React.FC = (props) => { const reset = useCallback( async (data: unknown) => { - const { state: newState } = (await serverFunction({ - name: 'form-state', - args: { - id, - collectionSlug, - data, - globalSlug, - operation, - schemaPath: collectionSlug || globalSlug, - }, - })) as { state: FormState } // TODO: remove this when strictNullChecks is enabled and the return type can be inferred + if (abortControllerRef.current) { + try { + abortControllerRef.current.abort() + } catch (error) { + // swallow error + } + } + + const abortController = new AbortController() + abortControllerRef.current = abortController + + const { state: newState } = await getFormState({ + id, + collectionSlug, + data, + globalSlug, + operation, + schemaPath: collectionSlug || globalSlug, + signal: abortController.signal, + }) contextRef.current = { ...initContextState } as FormContextType setModified(false) dispatchFields({ type: 'REPLACE_STATE', state: newState }) }, - [collectionSlug, dispatchFields, globalSlug, id, operation, serverFunction], + [collectionSlug, dispatchFields, globalSlug, id, operation, getFormState], ) const replaceState = useCallback( @@ -478,19 +489,28 @@ export const Form: React.FC = (props) => { const getFieldStateBySchemaPath = useCallback( async ({ data, schemaPath }) => { - const { state: fieldSchema } = (await serverFunction({ - name: 'form-state', - args: { - collectionSlug, - data, - globalSlug, - schemaPath, - }, - })) as { state: FormState } // TODO: remove this when strictNullChecks is enabled and the return type can be inferred + if (abortControllerRef2.current) { + try { + abortControllerRef2.current.abort() + } catch (_err) { + // swallow error + } + } + + const abortController = new AbortController() + abortControllerRef2.current = abortController + + const { state: fieldSchema } = await getFormState({ + collectionSlug, + data, + globalSlug, + schemaPath, + signal: abortController.signal, + }) return fieldSchema }, - [collectionSlug, globalSlug, serverFunction], + [collectionSlug, globalSlug, getFormState], ) const addFieldRow: FormContextType['addFieldRow'] = useCallback( @@ -530,6 +550,30 @@ export const Form: React.FC = (props) => { [getFieldStateBySchemaPath, dispatchFields], ) + // clean on unmount + useEffect(() => { + const re1 = abortControllerRef.current + const re2 = abortControllerRef2.current + + return () => { + if (re1) { + try { + re1.abort() + } catch (_err) { + // swallow error + } + } + + if (re2) { + try { + re2.abort() + } catch (_err) { + // swallow error + } + } + } + }, []) + useEffect(() => { if (initializingFromProps !== undefined) { setInitializing(initializingFromProps) diff --git a/packages/ui/src/forms/RenderFields/index.scss b/packages/ui/src/forms/RenderFields/index.scss index f5411689e4..767cf2a8fa 100644 --- a/packages/ui/src/forms/RenderFields/index.scss +++ b/packages/ui/src/forms/RenderFields/index.scss @@ -1,63 +1,65 @@ @import '../../scss/styles.scss'; -// Positioned field-type__wrap is needed for correct positioning of field tooltips. -// This is set outside of .render-fields, so that manually rendered fields (e.g. in Auth/index.tsx) -// outside RenderFields also receive this styling. -.field-type__wrap { - position: relative; -} - -.render-fields { - --spacing-field: var(--base); - - &--margins-small { - --spacing-field: var(--base); - } - - &--margins-none { - --spacing-field: 0; - } - - & > .field-type { - margin-bottom: var(--spacing-field); +@layer payload-default { + // Positioned field-type__wrap is needed for correct positioning of field tooltips. + // This is set outside of .render-fields, so that manually rendered fields (e.g. in Auth/index.tsx) + // outside RenderFields also receive this styling. + .field-type__wrap { position: relative; - - &[type='hidden'] { - margin-bottom: 0; - } - - &:first-child { - margin-top: 0; - } - - &:last-of-type { - margin-bottom: 0; - } } - // at the top-level, add extra margins for the following field types - &:not(.render-fields--margins-small) { + .render-fields { + --spacing-field: var(--base); + + &--margins-small { + --spacing-field: var(--base); + } + + &--margins-none { + --spacing-field: 0; + } + & > .field-type { - &.group-field, - &.blocks-field, - &.array-field, - &.collapsible-field, - &.rich-text { - margin-top: calc(var(--spacing-field) * 2); - margin-bottom: calc(var(--spacing-field) * 2); + margin-bottom: var(--spacing-field); + position: relative; - &:first-child { - margin-top: 0; - } + &[type='hidden'] { + margin-bottom: 0; + } - &:last-child { - margin-bottom: 0; + &:first-child { + margin-top: 0; + } + + &:last-of-type { + margin-bottom: 0; + } + } + + // at the top-level, add extra margins for the following field types + &:not(.render-fields--margins-small) { + & > .field-type { + &.group-field, + &.blocks-field, + &.array-field, + &.collapsible-field, + &.rich-text { + margin-top: calc(var(--spacing-field) * 2); + margin-bottom: calc(var(--spacing-field) * 2); + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } } } } - } - @include small-break { - --spacing-field: calc(var(--base) / 2); + @include small-break { + --spacing-field: calc(var(--base) / 2); + } } } diff --git a/packages/ui/src/forms/Submit/index.scss b/packages/ui/src/forms/Submit/index.scss index 66aba3a896..14c7d9ddf9 100644 --- a/packages/ui/src/forms/Submit/index.scss +++ b/packages/ui/src/forms/Submit/index.scss @@ -1,5 +1,7 @@ -form > .form-submit { - .btn { - width: 100%; +@layer payload-default { + form > .form-submit { + .btn { + width: 100%; + } } } diff --git a/packages/ui/src/graphics/Account/Default/index.scss b/packages/ui/src/graphics/Account/Default/index.scss index ba39af22ad..6901e313ea 100644 --- a/packages/ui/src/graphics/Account/Default/index.scss +++ b/packages/ui/src/graphics/Account/Default/index.scss @@ -1,54 +1,38 @@ -.graphic-account { - vector-effect: non-scaling-stroke; - overflow: visible; - position: relative; - - &__bg { - fill: var(--theme-elevation-50); - stroke: var(--theme-elevation-200); - stroke-width: 1px; - } - - &__head, - &__body { - fill: var(--theme-elevation-200); - } - - &--active { - .graphic-account { - &__bg { - fill: var(--theme-elevation-500); - stroke: var(--theme-text); - } - - &__head, - &__body { - fill: var(--theme-text); - } - } - } - - &:hover:not(.graphic-account--active) { - .graphic-account { - &__bg { - fill: var(--theme-elevation-200); - stroke: var(--theme-elevation-600); - } - - &__head, - &__body { - fill: var(--theme-elevation-600); - } - } - } -} - -[data-theme='light'] { +@layer payload-default { .graphic-account { + vector-effect: non-scaling-stroke; + overflow: visible; + position: relative; + + &__bg { + fill: var(--theme-elevation-50); + stroke: var(--theme-elevation-200); + stroke-width: 1px; + } + + &__head, + &__body { + fill: var(--theme-elevation-200); + } + &--active { .graphic-account { &__bg { - fill: var(--theme-elevation-300); + fill: var(--theme-elevation-500); + stroke: var(--theme-text); + } + + &__head, + &__body { + fill: var(--theme-text); + } + } + } + + &:hover:not(.graphic-account--active) { + .graphic-account { + &__bg { + fill: var(--theme-elevation-200); stroke: var(--theme-elevation-600); } @@ -59,4 +43,22 @@ } } } + + [data-theme='light'] { + .graphic-account { + &--active { + .graphic-account { + &__bg { + fill: var(--theme-elevation-300); + stroke: var(--theme-elevation-600); + } + + &__head, + &__body { + fill: var(--theme-elevation-600); + } + } + } + } + } } diff --git a/packages/ui/src/hooks/usePayloadAPI.ts b/packages/ui/src/hooks/usePayloadAPI.ts index 6677289a07..8d3ff2493c 100644 --- a/packages/ui/src/hooks/usePayloadAPI.ts +++ b/packages/ui/src/hooks/usePayloadAPI.ts @@ -94,7 +94,7 @@ export const usePayloadAPI: UsePayloadAPI = (url, options = {}) => { return () => { try { abortController.abort() - } catch (error) { + } catch (_err) { // swallow error } } diff --git a/packages/ui/src/icons/Calendar/index.scss b/packages/ui/src/icons/Calendar/index.scss index 7756ed466f..a619e9fc25 100644 --- a/packages/ui/src/icons/Calendar/index.scss +++ b/packages/ui/src/icons/Calendar/index.scss @@ -1,11 +1,13 @@ @import '../../scss/styles'; -.icon--calendar { - height: $baseline; - width: $baseline; +@layer payload-default { + .icon--calendar { + height: $baseline; + width: $baseline; - .stroke { - stroke: currentColor; - stroke-width: $style-stroke-width-s; + .stroke { + stroke: currentColor; + stroke-width: $style-stroke-width-s; + } } } diff --git a/packages/ui/src/icons/Check/index.scss b/packages/ui/src/icons/Check/index.scss index b077a5f318..5ff197e17b 100644 --- a/packages/ui/src/icons/Check/index.scss +++ b/packages/ui/src/icons/Check/index.scss @@ -1,12 +1,14 @@ @import '../../scss/styles'; -.icon--check { - height: $baseline; - width: $baseline; +@layer payload-default { + .icon--check { + height: $baseline; + width: $baseline; - .stroke { - fill: none; - stroke: currentColor; - stroke-width: $style-stroke-width-m; + .stroke { + fill: none; + stroke: currentColor; + stroke-width: $style-stroke-width-m; + } } } diff --git a/packages/ui/src/icons/Chevron/index.scss b/packages/ui/src/icons/Chevron/index.scss index a826dd4e82..5cad750b50 100644 --- a/packages/ui/src/icons/Chevron/index.scss +++ b/packages/ui/src/icons/Chevron/index.scss @@ -1,23 +1,25 @@ @import '../../scss/styles'; -.icon--chevron { - height: calc(var(--base) / 2); - width: calc(var(--base) / 2); +@layer payload-default { + .icon--chevron { + height: calc(var(--base) / 2); + width: calc(var(--base) / 2); - .stroke { - fill: none; - stroke: currentColor; - stroke-width: $style-stroke-width-s; - vector-effect: non-scaling-stroke; - } + .stroke { + fill: none; + stroke: currentColor; + stroke-width: $style-stroke-width-s; + vector-effect: non-scaling-stroke; + } - &.icon--size-large { - height: var(--base); - width: var(--base); - } + &.icon--size-large { + height: var(--base); + width: var(--base); + } - &.icon--size-small { - height: 8px; - width: 8px; + &.icon--size-small { + height: 8px; + width: 8px; + } } } diff --git a/packages/ui/src/icons/CloseMenu/index.scss b/packages/ui/src/icons/CloseMenu/index.scss index 638890ca3a..1864ad4507 100644 --- a/packages/ui/src/icons/CloseMenu/index.scss +++ b/packages/ui/src/icons/CloseMenu/index.scss @@ -1,10 +1,12 @@ @import '../../scss/styles.scss'; -.icon--close-menu { - height: $baseline; - width: $baseline; +@layer payload-default { + .icon--close-menu { + height: $baseline; + width: $baseline; - .stroke { - stroke: currentColor; + .stroke { + stroke: currentColor; + } } } diff --git a/packages/ui/src/icons/Copy/index.scss b/packages/ui/src/icons/Copy/index.scss index 5129cffd0c..d2b287b2f5 100644 --- a/packages/ui/src/icons/Copy/index.scss +++ b/packages/ui/src/icons/Copy/index.scss @@ -1,12 +1,14 @@ @import '../../scss/styles'; -.icon--copy { - height: $baseline; - width: $baseline; +@layer payload-default { + .icon--copy { + height: $baseline; + width: $baseline; - .stroke { - fill: none; - stroke: currentColor; - stroke-width: $style-stroke-width-s; + .stroke { + fill: none; + stroke: currentColor; + stroke-width: $style-stroke-width-s; + } } } diff --git a/packages/ui/src/icons/DragHandle/index.scss b/packages/ui/src/icons/DragHandle/index.scss index caf94c7638..ea8ec9c787 100644 --- a/packages/ui/src/icons/DragHandle/index.scss +++ b/packages/ui/src/icons/DragHandle/index.scss @@ -1,12 +1,14 @@ @import '../../scss/styles'; -.icon--drag-handle { - height: $baseline; - width: $baseline; +@layer payload-default { + .icon--drag-handle { + height: $baseline; + width: $baseline; - .fill { - stroke: currentColor; - stroke-width: $style-stroke-width-s; - fill: var(--theme-elevation-800); + .fill { + stroke: currentColor; + stroke-width: $style-stroke-width-s; + fill: var(--theme-elevation-800); + } } } diff --git a/packages/ui/src/icons/Edit/index.scss b/packages/ui/src/icons/Edit/index.scss index d997a5b147..5691783d6a 100644 --- a/packages/ui/src/icons/Edit/index.scss +++ b/packages/ui/src/icons/Edit/index.scss @@ -1,12 +1,14 @@ @import '../../scss/styles'; -.icon--edit { - height: $baseline; - width: $baseline; - shape-rendering: auto; +@layer payload-default { + .icon--edit { + height: $baseline; + width: $baseline; + shape-rendering: auto; - .stroke { - fill: none; - stroke: currentColor; + .stroke { + fill: none; + stroke: currentColor; + } } } diff --git a/packages/ui/src/icons/Line/index.scss b/packages/ui/src/icons/Line/index.scss index 98c33bc08b..0dfba36cdd 100644 --- a/packages/ui/src/icons/Line/index.scss +++ b/packages/ui/src/icons/Line/index.scss @@ -1,11 +1,13 @@ @import '../../scss/styles'; -.icon--line { - width: $baseline; - height: $baseline; +@layer payload-default { + .icon--line { + width: $baseline; + height: $baseline; - .stroke { - stroke: currentColor; - stroke-width: $style-stroke-width; + .stroke { + stroke: currentColor; + stroke-width: $style-stroke-width; + } } } diff --git a/packages/ui/src/icons/Link/index.scss b/packages/ui/src/icons/Link/index.scss index b8b9d3892f..ce5d414174 100644 --- a/packages/ui/src/icons/Link/index.scss +++ b/packages/ui/src/icons/Link/index.scss @@ -1,11 +1,13 @@ @import '../../scss/styles'; -.icon--link { - width: $baseline; - height: $baseline; +@layer payload-default { + .icon--link { + width: $baseline; + height: $baseline; - .stroke { - stroke: currentColor; - stroke-width: $style-stroke-width; + .stroke { + stroke: currentColor; + stroke-width: $style-stroke-width; + } } } diff --git a/packages/ui/src/icons/Lock/index.scss b/packages/ui/src/icons/Lock/index.scss index 55504a43de..2a887e655c 100644 --- a/packages/ui/src/icons/Lock/index.scss +++ b/packages/ui/src/icons/Lock/index.scss @@ -1,8 +1,10 @@ @import '../../scss/styles'; -.icon--lock { - .stroke { - stroke: currentColor; - stroke-width: $style-stroke-width; +@layer payload-default { + .icon--lock { + .stroke { + stroke: currentColor; + stroke-width: $style-stroke-width; + } } } diff --git a/packages/ui/src/icons/LogOut/index.scss b/packages/ui/src/icons/LogOut/index.scss index 8bd3ac28d2..a77eb88cba 100644 --- a/packages/ui/src/icons/LogOut/index.scss +++ b/packages/ui/src/icons/LogOut/index.scss @@ -1,11 +1,13 @@ @import '../../scss/styles.scss'; -.icon--logout { - height: $baseline; - width: $baseline; +@layer payload-default { + .icon--logout { + height: $baseline; + width: $baseline; - .stroke { - stroke: currentColor; - stroke-width: 2px; + .stroke { + stroke: currentColor; + stroke-width: 2px; + } } } diff --git a/packages/ui/src/icons/Menu/index.scss b/packages/ui/src/icons/Menu/index.scss index c9e0182ba4..25849b4d13 100644 --- a/packages/ui/src/icons/Menu/index.scss +++ b/packages/ui/src/icons/Menu/index.scss @@ -1,8 +1,10 @@ @import '../../scss/styles.scss'; -.icon--menu { - .stroke { - stroke-width: $style-stroke-width-s; - stroke: currentColor; +@layer payload-default { + .icon--menu { + .stroke { + stroke-width: $style-stroke-width-s; + stroke: currentColor; + } } } diff --git a/packages/ui/src/icons/More/index.scss b/packages/ui/src/icons/More/index.scss index 46c7807ee1..09afad740a 100644 --- a/packages/ui/src/icons/More/index.scss +++ b/packages/ui/src/icons/More/index.scss @@ -1,11 +1,13 @@ @import '../../scss/styles'; -.icon--more { - height: $baseline; - width: $baseline; +@layer payload-default { + .icon--more { + height: $baseline; + width: $baseline; - .fill { - fill: var(--theme-elevation-800); - stroke: currentColor; + .fill { + fill: var(--theme-elevation-800); + stroke: currentColor; + } } } diff --git a/packages/ui/src/icons/Plus/index.scss b/packages/ui/src/icons/Plus/index.scss index 71b58d54cf..10348a339e 100644 --- a/packages/ui/src/icons/Plus/index.scss +++ b/packages/ui/src/icons/Plus/index.scss @@ -1,8 +1,10 @@ @import '../../scss/styles'; -.icon--plus { - .stroke { - stroke: currentColor; - stroke-width: $style-stroke-width; +@layer payload-default { + .icon--plus { + .stroke { + stroke: currentColor; + stroke-width: $style-stroke-width; + } } } diff --git a/packages/ui/src/icons/Search/index.scss b/packages/ui/src/icons/Search/index.scss index 902016a440..697c3aa4ff 100644 --- a/packages/ui/src/icons/Search/index.scss +++ b/packages/ui/src/icons/Search/index.scss @@ -1,11 +1,13 @@ @import '../../scss/styles'; -.icon--search { - height: $baseline; - width: $baseline; +@layer payload-default { + .icon--search { + height: $baseline; + width: $baseline; - .stroke { - stroke: currentColor; - stroke-width: $style-stroke-width-s; + .stroke { + stroke: currentColor; + stroke-width: $style-stroke-width-s; + } } } diff --git a/packages/ui/src/icons/Swap/index.scss b/packages/ui/src/icons/Swap/index.scss index 02706567f1..5b33e0559c 100644 --- a/packages/ui/src/icons/Swap/index.scss +++ b/packages/ui/src/icons/Swap/index.scss @@ -1,12 +1,14 @@ @import '../../scss/styles'; -.icon--swap { - height: $baseline; - width: $baseline; +@layer payload-default { + .icon--swap { + height: $baseline; + width: $baseline; - .stroke { - fill: none; - stroke: currentColor; - stroke-width: $style-stroke-width-s; + .stroke { + fill: none; + stroke: currentColor; + stroke-width: $style-stroke-width-s; + } } } diff --git a/packages/ui/src/icons/X/index.scss b/packages/ui/src/icons/X/index.scss index 80d4a4b0cf..b85863a607 100644 --- a/packages/ui/src/icons/X/index.scss +++ b/packages/ui/src/icons/X/index.scss @@ -1,8 +1,10 @@ @import '../../scss/styles'; -.icon--x { - .stroke { - stroke: currentColor; - stroke-width: $style-stroke-width-s; +@layer payload-default { + .icon--x { + .stroke { + stroke: currentColor; + stroke-width: $style-stroke-width-s; + } } } diff --git a/packages/ui/src/providers/DocumentInfo/index.tsx b/packages/ui/src/providers/DocumentInfo/index.tsx index bc52df116b..179b4f8986 100644 --- a/packages/ui/src/providers/DocumentInfo/index.tsx +++ b/packages/ui/src/providers/DocumentInfo/index.tsx @@ -21,6 +21,7 @@ import React, { createContext, useCallback, useContext, useEffect, useRef, useSt import type { DocumentInfoContext, DocumentInfoProps } from './types.js' +import { useServerFunctions } from '../../providers/ServerFunctions/index.js' import { requests } from '../../utilities/api.js' import { formatDocTitle } from '../../utilities/formatDocTitle.js' import { hasSavePermission as getHasSavePermission } from '../../utilities/hasSavePermission.js' @@ -29,7 +30,6 @@ import { useAuth } from '../Auth/index.js' import { useConfig } from '../Config/index.js' import { useLocale } from '../Locale/index.js' import { usePreferences } from '../Preferences/index.js' -import { useServerFunctions } from '../ServerFunctions/index.js' import { useTranslation } from '../Translation/index.js' import { UploadEditsProvider, useUploadEdits } from '../UploadEdits/index.js' @@ -57,8 +57,6 @@ const DocumentInfo: React.FC< onSave: onSaveFromProps, } = props - const { serverFunction } = useServerFunctions() - const { config: { admin: { dateFormat }, @@ -72,6 +70,9 @@ const DocumentInfo: React.FC< const globalConfig = getEntityConfig({ globalSlug }) as ClientGlobalConfig + const { getFormState } = useServerFunctions() + + const abortControllerRef = useRef(new AbortController()) const docConfig = collectionConfig || globalConfig const lockDocumentsProp = docConfig?.lockDocuments !== undefined ? docConfig?.lockDocuments : true @@ -161,15 +162,7 @@ const DocumentInfo: React.FC< } void getNewConfig() } - }, [ - serverFunction, - collectionSlug, - initialState, - i18n.language, - globalSlug, - collectionConfig, - globalConfig, - ]) + }, [collectionSlug, initialState, i18n.language, globalSlug, collectionConfig, globalConfig]) const unlockDocument = useCallback( async (docId: number | string, slug: string) => { @@ -511,6 +504,17 @@ const DocumentInfo: React.FC< const onSave = React.useCallback( async (json) => { + if (abortControllerRef.current) { + try { + abortControllerRef.current.abort() + } catch (_err) { + // swallow error + } + } + + const abortController = new AbortController() + abortControllerRef.current = abortController + if (typeof onSaveFromProps === 'function') { void onSaveFromProps(json) } @@ -519,19 +523,17 @@ const DocumentInfo: React.FC< const newData = collectionSlug ? json.doc : json.result - const { state: newState } = (await serverFunction({ - name: 'form-state', - args: { - id, - collectionSlug, - data: newData, - docPreferences, - globalSlug, - locale, - operation, - schemaPath: collectionSlug || globalSlug, - }, - })) as { state: FormState } + const { state: newState } = await getFormState({ + id, + collectionSlug, + data: newData, + docPreferences, + globalSlug, + locale, + operation, + schemaPath: collectionSlug || globalSlug, + signal: abortController.signal, + }) setInitialState(newState) setData(newData) @@ -547,7 +549,7 @@ const DocumentInfo: React.FC< locale, onSaveFromProps, getDocPermissions, - serverFunction, + getFormState, ], ) @@ -565,30 +567,33 @@ const DocumentInfo: React.FC< setIsLoading(true) try { - const { state: result } = (await serverFunction({ - name: 'form-state', - args: { - id, - collectionSlug, - globalSlug, - locale, - operation, - schemaPath: collectionSlug || globalSlug, - }, - })) as { state: FormState } + const result = await getFormState({ + id, + collectionSlug, + globalSlug, + locale, + operation, + schemaPath: collectionSlug || globalSlug, + signal: abortController.signal, + }) - const data = reduceFieldsToValues(result, true) + if ('errors' in result) { + await onLoadError(result.errors) + return + } + + const data = reduceFieldsToValues(result.state, true) setData(data) if (localeChanged) { void getDocPermissions(data) } - setInitialState(result) - } catch (err) { + setInitialState(result.state) + } catch (_err) { if (!abortController.signal.aborted) { if (typeof onLoadError === 'function') { - void onLoadError(err) + void onLoadError() } setIsError(true) setIsLoading(false) @@ -603,7 +608,7 @@ const DocumentInfo: React.FC< return () => { try { abortController.abort() - } catch (error) { + } catch (_err) { // swallow error } } @@ -619,7 +624,7 @@ const DocumentInfo: React.FC< initialDataFromProps, initialStateFromProps, getDocPermissions, - serverFunction, + getFormState, ]) useEffect(() => { @@ -667,6 +672,21 @@ const DocumentInfo: React.FC< hasPublishPermission, ]) + // clean on unmount + useEffect(() => { + const re1 = abortControllerRef.current + + return () => { + if (re1) { + try { + re1.abort() + } catch (_err) { + // swallow error + } + } + } + }, []) + const action: string = React.useMemo(() => { const docURL = `${baseURL}${pluralType === 'globals' ? `/globals` : ''}/${slug}${id ? `/${id}` : ''}` const params = { diff --git a/packages/ui/src/providers/ServerFunctions/index.tsx b/packages/ui/src/providers/ServerFunctions/index.tsx index ad7ab86111..601cb30f6a 100644 --- a/packages/ui/src/providers/ServerFunctions/index.tsx +++ b/packages/ui/src/providers/ServerFunctions/index.tsx @@ -1,8 +1,21 @@ -import type { RenderFieldBySchemaPathClient, ServerFunctionClient } from 'payload' +import type { + BuildFormStateArgs, + RenderFieldBySchemaPathClient, + ServerFunctionClient, +} from 'payload' import React, { createContext, useCallback } from 'react' +import type { buildFormState } from '../../utilities/buildFormState.js' + +type GetFormState = ( + args: { + signal?: AbortSignal + } & Omit, +) => ReturnType + type ServerFunctionsContextType = { + getFormState: GetFormState renderFieldBySchemaPath: RenderFieldBySchemaPathClient serverFunction: ServerFunctionClient } @@ -41,8 +54,36 @@ export const ServerFunctionsProvider: React.FC<{ [serverFunction], ) + const getFormState = useCallback( + async (args) => { + const { signal, ...rest } = args + + try { + if (!signal?.aborted) { + const result = (await serverFunction({ + name: 'form-state', + args: rest, + })) as ReturnType // TODO: infer this type when `strictNullChecks` is enabled + + if (signal?.aborted) { + throw new Error('Request was aborted, ignoring result') + } + + return result + } + } catch (error) { + console.error(error) // eslint-disable-line no-console + } + + return { state: args.formState } + }, + [serverFunction], + ) + return ( - + {children} ) diff --git a/packages/ui/src/scss/app.scss b/packages/ui/src/scss/app.scss index 90254443b0..b0c575df89 100644 --- a/packages/ui/src/scss/app.scss +++ b/packages/ui/src/scss/app.scss @@ -1,203 +1,207 @@ +@layer payload-default, payload; + @import 'styles'; @import './toasts.scss'; @import './colors.scss'; -:root { - --base-px: 20; - --base-body-size: 13; - --base: calc((var(--base-px) / var(--base-body-size)) * 1rem); +@layer payload-default { + :root { + --base-px: 20; + --base-body-size: 13; + --base: calc((var(--base-px) / var(--base-body-size)) * 1rem); - --breakpoint-xs-width: #{$breakpoint-xs-width}; - --breakpoint-s-width: #{$breakpoint-s-width}; - --breakpoint-m-width: #{$breakpoint-m-width}; - --breakpoint-l-width: #{$breakpoint-l-width}; - --scrollbar-width: 17px; + --breakpoint-xs-width: #{$breakpoint-xs-width}; + --breakpoint-s-width: #{$breakpoint-s-width}; + --breakpoint-m-width: #{$breakpoint-m-width}; + --breakpoint-l-width: #{$breakpoint-l-width}; + --scrollbar-width: 17px; - --theme-bg: var(--theme-elevation-0); - --theme-input-bg: var(--theme-elevation-0); - --theme-text: var(--theme-elevation-800); - --theme-overlay: rgba(5, 5, 5, 0.5); - --theme-baseline: #{$baseline-px}; - --theme-baseline-body-size: #{$baseline-body-size}; - --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, - sans-serif; - --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}; - --style-radius-l: #{$style-radius-l}; - - --z-popup: 10; - --z-nav: 20; - --z-modal: 30; - --z-status: 40; - - --accessibility-outline: 2px solid var(--theme-text); - --accessibility-outline-offset: 2px; - - --gutter-h: #{base(3)}; - --spacing-view-bottom: var(--gutter-h); - --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.4); - --doc-controls-height: calc(var(--base) * 2.4); - } - - @include small-break { - --gutter-h: #{base(0.8)}; - --spacing-view-bottom: calc(var(--base) * 2); - --nav-width: 100vw; - } -} - -///////////////////////////// -// GLOBAL STYLES -///////////////////////////// - -* { - box-sizing: border-box; -} - -html { - @extend %body; - 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); - --theme-overlay: rgba(5, 5, 5, 0.75); - color-scheme: dark; + --theme-input-bg: var(--theme-elevation-0); + --theme-text: var(--theme-elevation-800); + --theme-overlay: rgba(5, 5, 5, 0.5); + --theme-baseline: #{$baseline-px}; + --theme-baseline-body-size: #{$baseline-body-size}; + --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, + sans-serif; + --font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif; + --font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace; - ::selection { - color: var(--color-base-1000); + --style-radius-s: #{$style-radius-s}; + --style-radius-m: #{$style-radius-m}; + --style-radius-l: #{$style-radius-l}; + + --z-popup: 10; + --z-nav: 20; + --z-modal: 30; + --z-status: 40; + + --accessibility-outline: 2px solid var(--theme-text); + --accessibility-outline-offset: 2px; + + --gutter-h: #{base(3)}; + --spacing-view-bottom: var(--gutter-h); + --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.4); + --doc-controls-height: calc(var(--base) * 2.4); } - ::-moz-selection { - color: var(--color-base-1000); + @include small-break { + --gutter-h: #{base(0.8)}; + --spacing-view-bottom: calc(var(--base) * 2); + --nav-width: 100vw; } } - @include mid-break { - font-size: 12px; + ///////////////////////////// + // GLOBAL STYLES + ///////////////////////////// + + * { + box-sizing: border-box; } -} -html, -body, -#app { - height: 100%; -} + html { + @extend %body; + background: var(--theme-bg); + -webkit-font-smoothing: antialiased; -body { - font-family: var(--font-body); - font-weight: 400; - color: var(--theme-text); - margin: 0; - // this is for the nav to be able to push the document over - overflow-x: hidden; -} + &[data-theme='dark'] { + --theme-bg: var(--theme-elevation-0); + --theme-text: var(--theme-elevation-1000); + --theme-input-bg: var(--theme-elevation-50); + --theme-overlay: rgba(5, 5, 5, 0.75); + color-scheme: dark; -::selection { - background: var(--color-success-250); - color: var(--theme-base-800); -} + ::selection { + color: var(--color-base-1000); + } -::-moz-selection { - background: var(--color-success-250); - color: var(--theme-base-800); -} - -img { - max-width: 100%; - height: auto; - display: block; -} - -h1 { - @extend %h1; -} - -h2 { - @extend %h2; -} - -h3 { - @extend %h3; -} - -h4 { - @extend %h4; -} - -h5 { - @extend %h5; -} - -h6 { - @extend %h6; -} - -p { - margin: 0; -} - -ul, -ol { - padding-left: $baseline; - margin: 0; -} - -:focus-visible { - outline: var(--accessibility-outline); -} - -a { - color: currentColor; - - &:focus { - &:not(:focus-visible) { - opacity: 0.8; + ::-moz-selection { + color: var(--color-base-1000); + } + } + + @include mid-break { + font-size: 12px; } - outline: none; } - &:active { - opacity: 0.7; - outline: none; + html, + body, + #app { + height: 100%; } -} -svg { - vertical-align: middle; -} + body { + font-family: var(--font-body); + font-weight: 400; + color: var(--theme-text); + margin: 0; + // this is for the nav to be able to push the document over + overflow-x: hidden; + } -dialog { - width: 100%; - border: 0; - padding: 0; - color: currentColor; -} + ::selection { + background: var(--color-success-250); + color: var(--theme-base-800); + } -.payload__modal-item { - min-height: 100%; - background: transparent; -} + ::-moz-selection { + background: var(--color-success-250); + color: var(--theme-base-800); + } -.payload__modal-container--enterDone { - overflow: auto; -} + img { + max-width: 100%; + height: auto; + display: block; + } -.payload__modal-item--enter, -.payload__modal-item--enterDone { - z-index: var(--z-modal); -} + h1 { + @extend %h1; + } -// @import '~payload-user-css'; TODO: re-enable this + h2 { + @extend %h2; + } + + h3 { + @extend %h3; + } + + h4 { + @extend %h4; + } + + h5 { + @extend %h5; + } + + h6 { + @extend %h6; + } + + p { + margin: 0; + } + + ul, + ol { + padding-left: $baseline; + margin: 0; + } + + :focus-visible { + outline: var(--accessibility-outline); + } + + a { + color: currentColor; + + &:focus { + &:not(:focus-visible) { + opacity: 0.8; + } + outline: none; + } + + &:active { + opacity: 0.7; + outline: none; + } + } + + svg { + vertical-align: middle; + } + + dialog { + width: 100%; + border: 0; + padding: 0; + color: currentColor; + } + + .payload__modal-item { + min-height: 100%; + background: transparent; + } + + .payload__modal-container--enterDone { + overflow: auto; + } + + .payload__modal-item--enter, + .payload__modal-item--enterDone { + z-index: var(--z-modal); + } + + // @import '~payload-user-css'; TODO: re-enable this +} diff --git a/packages/ui/src/scss/colors.scss b/packages/ui/src/scss/colors.scss index 42cea05859..1eaa88cb0a 100644 --- a/packages/ui/src/scss/colors.scss +++ b/packages/ui/src/scss/colors.scss @@ -1,269 +1,271 @@ -: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); +@layer payload-default { + :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(237, 245, 249); - --color-success-100: rgb(218, 237, 248); - --color-success-150: rgb(188, 225, 248); - --color-success-200: rgb(156, 216, 253); - --color-success-250: rgb(125, 204, 248); - --color-success-300: rgb(97, 190, 241); - --color-success-350: rgb(65, 178, 236); - --color-success-400: rgb(36, 164, 223); - --color-success-450: rgb(18, 148, 204); - --color-success-500: rgb(21, 135, 186); - --color-success-550: rgb(12, 121, 168); - --color-success-600: rgb(11, 110, 153); - --color-success-650: rgb(11, 97, 135); - --color-success-700: rgb(17, 88, 121); - --color-success-750: rgb(17, 76, 105); - --color-success-800: rgb(18, 66, 90); - --color-success-850: rgb(18, 56, 76); - --color-success-900: rgb(19, 44, 58); - --color-success-950: rgb(22, 33, 39); + --color-success-50: rgb(237, 245, 249); + --color-success-100: rgb(218, 237, 248); + --color-success-150: rgb(188, 225, 248); + --color-success-200: rgb(156, 216, 253); + --color-success-250: rgb(125, 204, 248); + --color-success-300: rgb(97, 190, 241); + --color-success-350: rgb(65, 178, 236); + --color-success-400: rgb(36, 164, 223); + --color-success-450: rgb(18, 148, 204); + --color-success-500: rgb(21, 135, 186); + --color-success-550: rgb(12, 121, 168); + --color-success-600: rgb(11, 110, 153); + --color-success-650: rgb(11, 97, 135); + --color-success-700: rgb(17, 88, 121); + --color-success-750: rgb(17, 76, 105); + --color-success-800: rgb(18, 66, 90); + --color-success-850: rgb(18, 56, 76); + --color-success-900: rgb(19, 44, 58); + --color-success-950: rgb(22, 33, 39); - --color-error-50: rgb(250, 241, 240); - --color-error-100: rgb(252, 229, 227); - --color-error-150: rgb(247, 208, 204); - --color-error-200: rgb(254, 193, 188); - --color-error-250: rgb(253, 177, 170); - --color-error-300: rgb(253, 154, 146); - --color-error-350: rgb(253, 131, 123); - --color-error-400: rgb(246, 109, 103); - --color-error-450: rgb(234, 90, 86); - --color-error-500: rgb(218, 75, 72); - --color-error-550: rgb(200, 62, 61); - --color-error-600: rgb(182, 54, 54); - --color-error-650: rgb(161, 47, 47); - --color-error-700: rgb(144, 44, 43); - --color-error-750: rgb(123, 41, 39); - --color-error-800: rgb(105, 39, 37); - --color-error-850: rgb(86, 36, 33); - --color-error-900: rgb(64, 32, 29); - --color-error-950: rgb(44, 26, 24); + --color-error-50: rgb(250, 241, 240); + --color-error-100: rgb(252, 229, 227); + --color-error-150: rgb(247, 208, 204); + --color-error-200: rgb(254, 193, 188); + --color-error-250: rgb(253, 177, 170); + --color-error-300: rgb(253, 154, 146); + --color-error-350: rgb(253, 131, 123); + --color-error-400: rgb(246, 109, 103); + --color-error-450: rgb(234, 90, 86); + --color-error-500: rgb(218, 75, 72); + --color-error-550: rgb(200, 62, 61); + --color-error-600: rgb(182, 54, 54); + --color-error-650: rgb(161, 47, 47); + --color-error-700: rgb(144, 44, 43); + --color-error-750: rgb(123, 41, 39); + --color-error-800: rgb(105, 39, 37); + --color-error-850: rgb(86, 36, 33); + --color-error-900: rgb(64, 32, 29); + --color-error-950: rgb(44, 26, 24); - --color-warning-50: rgb(249, 242, 237); - --color-warning-100: rgb(248, 232, 219); - --color-warning-150: rgb(243, 212, 186); - --color-warning-200: rgb(243, 200, 162); - --color-warning-250: rgb(240, 185, 136); - --color-warning-300: rgb(238, 166, 98); - --color-warning-350: rgb(234, 148, 58); - --color-warning-400: rgb(223, 132, 17); - --color-warning-450: rgb(204, 120, 15); - --color-warning-500: rgb(185, 108, 13); - --color-warning-550: rgb(167, 97, 10); - --color-warning-600: rgb(150, 87, 11); - --color-warning-650: rgb(134, 78, 11); - --color-warning-700: rgb(120, 70, 13); - --color-warning-750: rgb(105, 61, 13); - --color-warning-800: rgb(90, 55, 19); - --color-warning-850: rgb(73, 47, 21); - --color-warning-900: rgb(56, 38, 20); - --color-warning-950: rgb(38, 29, 21); + --color-warning-50: rgb(249, 242, 237); + --color-warning-100: rgb(248, 232, 219); + --color-warning-150: rgb(243, 212, 186); + --color-warning-200: rgb(243, 200, 162); + --color-warning-250: rgb(240, 185, 136); + --color-warning-300: rgb(238, 166, 98); + --color-warning-350: rgb(234, 148, 58); + --color-warning-400: rgb(223, 132, 17); + --color-warning-450: rgb(204, 120, 15); + --color-warning-500: rgb(185, 108, 13); + --color-warning-550: rgb(167, 97, 10); + --color-warning-600: rgb(150, 87, 11); + --color-warning-650: rgb(134, 78, 11); + --color-warning-700: rgb(120, 70, 13); + --color-warning-750: rgb(105, 61, 13); + --color-warning-800: rgb(90, 55, 19); + --color-warning-850: rgb(73, 47, 21); + --color-warning-900: rgb(56, 38, 20); + --color-warning-950: rgb(38, 29, 21); - --color-blue-50: rgb(237, 245, 249); - --color-blue-100: rgb(218, 237, 248); - --color-blue-150: rgb(188, 225, 248); - --color-blue-200: rgb(156, 216, 253); - --color-blue-250: rgb(125, 204, 248); - --color-blue-300: rgb(97, 190, 241); - --color-blue-350: rgb(65, 178, 236); - --color-blue-400: rgb(36, 164, 223); - --color-blue-450: rgb(18, 148, 204); - --color-blue-500: rgb(21, 135, 186); - --color-blue-550: rgb(12, 121, 168); - --color-blue-600: rgb(11, 110, 153); - --color-blue-650: rgb(11, 97, 135); - --color-blue-700: rgb(17, 88, 121); - --color-blue-750: rgb(17, 76, 105); - --color-blue-800: rgb(18, 66, 90); - --color-blue-850: rgb(18, 56, 76); - --color-blue-900: rgb(19, 44, 58); - --color-blue-950: rgb(22, 33, 39); + --color-blue-50: rgb(237, 245, 249); + --color-blue-100: rgb(218, 237, 248); + --color-blue-150: rgb(188, 225, 248); + --color-blue-200: rgb(156, 216, 253); + --color-blue-250: rgb(125, 204, 248); + --color-blue-300: rgb(97, 190, 241); + --color-blue-350: rgb(65, 178, 236); + --color-blue-400: rgb(36, 164, 223); + --color-blue-450: rgb(18, 148, 204); + --color-blue-500: rgb(21, 135, 186); + --color-blue-550: rgb(12, 121, 168); + --color-blue-600: rgb(11, 110, 153); + --color-blue-650: rgb(11, 97, 135); + --color-blue-700: rgb(17, 88, 121); + --color-blue-750: rgb(17, 76, 105); + --color-blue-800: rgb(18, 66, 90); + --color-blue-850: rgb(18, 56, 76); + --color-blue-900: rgb(19, 44, 58); + --color-blue-950: rgb(22, 33, 39); - --theme-border-color: var(--theme-elevation-150); + --theme-border-color: var(--theme-elevation-150); - --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-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-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-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-border-color: var(--theme-elevation-150); - - --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); + --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-border-color: var(--theme-elevation-150); + + --theme-elevation-0: var(--color-base-900); + --theme-elevation-50: var(--color-base-850); + --theme-elevation-100: var(--color-base-800); + --theme-elevation-150: var(--color-base-750); + --theme-elevation-200: var(--color-base-700); + --theme-elevation-250: var(--color-base-650); + --theme-elevation-300: var(--color-base-600); + --theme-elevation-350: var(--color-base-550); + --theme-elevation-400: var(--color-base-450); + --theme-elevation-450: var(--color-base-400); + --theme-elevation-550: var(--color-base-350); + --theme-elevation-600: var(--color-base-300); + --theme-elevation-650: var(--color-base-250); + --theme-elevation-700: var(--color-base-200); + --theme-elevation-750: var(--color-base-150); + --theme-elevation-800: var(--color-base-100); + --theme-elevation-850: var(--color-base-50); + --theme-elevation-900: var(--color-base-0); + --theme-elevation-950: var(--color-base-0); + --theme-elevation-1000: var(--color-base-0); + + --theme-success-50: var(--color-success-950); + --theme-success-100: var(--color-success-900); + --theme-success-150: var(--color-success-850); + --theme-success-200: var(--color-success-800); + --theme-success-250: var(--color-success-750); + --theme-success-300: var(--color-success-700); + --theme-success-350: var(--color-success-650); + --theme-success-400: var(--color-success-600); + --theme-success-450: var(--color-success-550); + --theme-success-550: var(--color-success-450); + --theme-success-600: var(--color-success-400); + --theme-success-650: var(--color-success-350); + --theme-success-700: var(--color-success-300); + --theme-success-750: var(--color-success-250); + --theme-success-800: var(--color-success-200); + --theme-success-850: var(--color-success-150); + --theme-success-900: var(--color-success-100); + --theme-success-950: var(--color-success-50); + + --theme-warning-50: var(--color-warning-950); + --theme-warning-100: var(--color-warning-900); + --theme-warning-150: var(--color-warning-850); + --theme-warning-200: var(--color-warning-800); + --theme-warning-250: var(--color-warning-750); + --theme-warning-300: var(--color-warning-700); + --theme-warning-350: var(--color-warning-650); + --theme-warning-400: var(--color-warning-600); + --theme-warning-450: var(--color-warning-550); + --theme-warning-550: var(--color-warning-450); + --theme-warning-600: var(--color-warning-400); + --theme-warning-650: var(--color-warning-350); + --theme-warning-700: var(--color-warning-300); + --theme-warning-750: var(--color-warning-250); + --theme-warning-800: var(--color-warning-200); + --theme-warning-850: var(--color-warning-150); + --theme-warning-900: var(--color-warning-100); + --theme-warning-950: var(--color-warning-50); + + --theme-error-50: var(--color-error-950); + --theme-error-100: var(--color-error-900); + --theme-error-150: var(--color-error-850); + --theme-error-200: var(--color-error-800); + --theme-error-250: var(--color-error-750); + --theme-error-300: var(--color-error-700); + --theme-error-350: var(--color-error-650); + --theme-error-400: var(--color-error-600); + --theme-error-450: var(--color-error-550); + --theme-error-550: var(--color-error-450); + --theme-error-600: var(--color-error-400); + --theme-error-650: var(--color-error-350); + --theme-error-700: var(--color-error-300); + --theme-error-750: var(--color-error-250); + --theme-error-800: var(--color-error-200); + --theme-error-850: var(--color-error-150); + --theme-error-900: var(--color-error-100); + --theme-error-950: var(--color-error-50); + } } diff --git a/packages/ui/src/scss/resets.scss b/packages/ui/src/scss/resets.scss index eeda892c2d..e73efa9c00 100644 --- a/packages/ui/src/scss/resets.scss +++ b/packages/ui/src/scss/resets.scss @@ -1,10 +1,12 @@ -%btn-reset { - border: 0; - background: none; - box-shadow: none; - border-radius: 0; - padding: 0; - color: currentColor; +@layer payload-default { + %btn-reset { + border: 0; + background: none; + box-shadow: none; + border-radius: 0; + padding: 0; + color: currentColor; + } } @mixin btn-reset { diff --git a/packages/ui/src/scss/toastify.scss b/packages/ui/src/scss/toastify.scss index a5bf4c35fd..33192936a4 100644 --- a/packages/ui/src/scss/toastify.scss +++ b/packages/ui/src/scss/toastify.scss @@ -1,59 +1,61 @@ @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 { +@layer payload-default { + .Toastify { .Toastify__toast-container { - left: $baseline; - right: $baseline; + 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; + } } } } diff --git a/packages/ui/src/scss/toasts.scss b/packages/ui/src/scss/toasts.scss index 116845ac34..4d3b0bc378 100644 --- a/packages/ui/src/scss/toasts.scss +++ b/packages/ui/src/scss/toasts.scss @@ -1,140 +1,142 @@ @import './styles.scss'; -.payload-toast-container { - padding: 0; - margin: 0; +@layer payload-default { + .payload-toast-container { + padding: 0; + margin: 0; - .payload-toast-close-button { - position: absolute; - order: 3; - left: unset; - inset-inline-end: base(0.8); - top: 50%; - transform: translateY(-50%); - color: var(--theme-elevation-600); - background: unset; - border: none; + .payload-toast-close-button { + position: absolute; + order: 3; + left: unset; + inset-inline-end: base(0.8); + top: 50%; + transform: translateY(-50%); + color: var(--theme-elevation-600); + background: unset; + border: none; - svg { - width: base(0.8); - height: base(0.8); - } + svg { + width: base(0.8); + height: base(0.8); + } - &:hover { - color: var(--theme-elevation-250); - background: none; - } + &:hover { + color: var(--theme-elevation-250); + background: none; + } - [dir='RTL'] & { - right: unset; - left: 0.5rem; - } - } - - .toast-title { - line-height: base(1); - margin-right: base(1); - } - - .payload-toast-item { - 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: 4px; - border: 1px solid var(--theme-border-color); - background: var(--theme-input-bg); - box-shadow: - 0px 10px 4px -8px rgba(0, 2, 4, 0.02), - 0px 2px 3px 0px rgba(0, 2, 4, 0.05); - - .toast-content { - transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19); - width: 100%; - } - - &[data-front='false'] { - .toast-content { - opacity: 0; + [dir='RTL'] & { + right: unset; + left: 0.5rem; } } - &[data-expanded='true'] { - .toast-content { - opacity: 1; - } + .toast-title { + line-height: base(1); + margin-right: base(1); } - .toast-icon { - 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 { - 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 { - 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 { - 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 { + .payload-toast-item { + padding: base(0.8); color: var(--theme-elevation-800); - border-color: var(--theme-elevation-250); - background-color: var(--theme-elevation-100); + font-style: normal; + font-weight: 600; + display: flex; + gap: 1rem; + align-items: center; + width: 100%; + border-radius: 4px; + border: 1px solid var(--theme-border-color); + background: var(--theme-input-bg); + box-shadow: + 0px 10px 4px -8px rgba(0, 2, 4, 0.02), + 0px 2px 3px 0px rgba(0, 2, 4, 0.05); - .payload-toast-close-button { - color: var(--theme-elevation-600); + .toast-content { + transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19); + width: 100%; + } - &:hover { - color: var(--theme-elevation-250); + &[data-front='false'] { + .toast-content { + opacity: 0; + } + } + + &[data-expanded='true'] { + .toast-content { + opacity: 1; + } + } + + .toast-icon { + 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 { + 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 { + 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 { + 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); + + .payload-toast-close-button { + color: var(--theme-elevation-600); + + &:hover { + color: var(--theme-elevation-250); + } } } } diff --git a/packages/ui/src/scss/type.scss b/packages/ui/src/scss/type.scss index 997e43e24a..652940b27b 100644 --- a/packages/ui/src/scss/type.scss +++ b/packages/ui/src/scss/type.scss @@ -5,105 +5,107 @@ // HEADINGS ///////////////////////////// -%h1, -%h2, -%h3, -%h4, -%h5, -%h6 { - font-family: var(--font-body); - font-weight: 500; -} - -%h1 { - margin: 0; - font-size: base(1.6); - line-height: base(1.8); - - @include small-break { - letter-spacing: -0.5px; - font-size: base(1.25); +@layer payload-default { + %h1, + %h2, + %h3, + %h4, + %h5, + %h6 { + font-family: var(--font-body); + font-weight: 500; } -} -%h2 { - margin: 0; - font-size: base(1.3); - line-height: base(1.6); + %h1 { + margin: 0; + font-size: base(1.6); + line-height: base(1.8); - @include small-break { - font-size: base(0.85); + @include small-break { + letter-spacing: -0.5px; + font-size: base(1.25); + } } -} -%h3 { - margin: 0; - font-size: base(1); - line-height: base(1.2); + %h2 { + margin: 0; + font-size: base(1.3); + line-height: base(1.6); - @include small-break { - font-size: base(0.65); - line-height: 1.25; + @include small-break { + font-size: base(0.85); + } } -} -%h4 { - margin: 0; - font-size: base(0.8); - line-height: base(1); - letter-spacing: -0.375px; -} + %h3 { + margin: 0; + font-size: base(1); + line-height: base(1.2); -%h5 { - margin: 0; - font-size: base(0.65); - line-height: base(0.8); -} + @include small-break { + font-size: base(0.65); + line-height: 1.25; + } + } -%h6 { - margin: 0; - font-size: base(0.6); - line-height: base(0.8); -} - -%small { - margin: 0; - font-size: 12px; - line-height: 20px; -} - -///////////////////////////// -// TYPE STYLES -///////////////////////////// - -%large-body { - font-size: base(0.6); - line-height: base(1); - letter-spacing: base(0.02); - - @include mid-break { - font-size: base(0.7); + %h4 { + margin: 0; + font-size: base(0.8); line-height: base(1); + letter-spacing: -0.375px; } - @include small-break { - font-size: base(0.55); - line-height: base(0.75); - } -} - -%body { - font-size: $baseline-body-size; - line-height: $baseline-px; - font-weight: normal; - font-family: var(--font-body); -} - -%code { - font-size: base(0.4); - color: var(--theme-elevation-400); - - span { - color: var(--theme-elevation-800); + %h5 { + margin: 0; + font-size: base(0.65); + line-height: base(0.8); + } + + %h6 { + margin: 0; + font-size: base(0.6); + line-height: base(0.8); + } + + %small { + margin: 0; + font-size: 12px; + line-height: 20px; + } + + ///////////////////////////// + // TYPE STYLES + ///////////////////////////// + + %large-body { + font-size: base(0.6); + line-height: base(1); + letter-spacing: base(0.02); + + @include mid-break { + font-size: base(0.7); + line-height: base(1); + } + + @include small-break { + font-size: base(0.55); + line-height: base(0.75); + } + } + + %body { + font-size: $baseline-body-size; + line-height: $baseline-px; + font-weight: normal; + font-family: var(--font-body); + } + + %code { + font-size: base(0.4); + color: var(--theme-elevation-400); + + span { + color: var(--theme-elevation-800); + } } } diff --git a/packages/ui/src/utilities/buildFormState.ts b/packages/ui/src/utilities/buildFormState.ts index 37335e137c..56d7116ba6 100644 --- a/packages/ui/src/utilities/buildFormState.ts +++ b/packages/ui/src/utilities/buildFormState.ts @@ -1,14 +1,13 @@ -import { type I18nClient, type SupportedLanguages } from '@payloadcms/translations' +import { type I18nClient } from '@payloadcms/translations' import { + type BuildFormStateArgs, type ClientUser, - type Data, type DocumentPreferences, type ErrorResult, type Field, formatErrors, type FormState, type Payload, - type PayloadRequest, type SanitizedConfig, type TypeWithID, } from 'payload' @@ -77,35 +76,23 @@ export const getFieldBySchemaPath = (args: { return fieldSchema } -export type BuildFormStateArgs = { - collectionSlug?: string - data?: Data - docPreferences?: DocumentPreferences - formState?: FormState - globalSlug?: string - id?: number | string - /* - If not i18n was passed, the language can be passed to init i18n - */ - language?: keyof SupportedLanguages - locale?: string - operation?: 'create' | 'update' - req: PayloadRequest - returnLockStatus?: boolean - schemaPath: string - updateLastEdited?: boolean -} - -export const buildFormState = async ( - args: BuildFormStateArgs, -): Promise< +export type BuildFormStateResult = | { errors?: never lockedState?: { isLocked: boolean; user: ClientUser | number | string } state: FormState } - | ({ state?: never } & ErrorResult) -> => { + | { + lockedState?: never + message: string + state?: never + } + | ({ + lockedState?: never + state?: never + } & ErrorResult) + +export const buildFormState = async (args: BuildFormStateArgs): Promise => { const { req } = args try { @@ -115,18 +102,20 @@ export const buildFormState = async ( req.payload.logger.error({ err, msg: `There was an error building form state` }) if (err.message === 'Could not find field schema for given path') { - throw new Error(err.message) + return { + message: err.message, + } } if (err.message === 'Unauthorized') { - throw new Error() + return null } return formatErrors(err) } } -const buildFormStateFn = async ( +export const buildFormStateFn = async ( args: BuildFormStateArgs, ): Promise<{ lockedState?: { isLocked: boolean; user: ClientUser | number | string } @@ -142,26 +131,17 @@ const buildFormStateFn = async ( locale, operation, req, + req: { + i18n, + payload, + payload: { config }, + user, + }, returnLockStatus, schemaPath, updateLastEdited, } = args - if (!req.payload) { - throw new Error('No Payload instance provided') - } - - if (!req.payload.config) { - throw new Error('No config provided') - } - - const { - i18n, - payload, - payload: { config }, - user, - } = req - const incomingUserSlug = user?.collection const adminUserSlug = config.admin.user diff --git a/packages/ui/src/views/Edit/Auth/index.scss b/packages/ui/src/views/Edit/Auth/index.scss index 593de43f4d..0dd1b83caa 100644 --- a/packages/ui/src/views/Edit/Auth/index.scss +++ b/packages/ui/src/views/Edit/Auth/index.scss @@ -1,76 +1,78 @@ @import '../../../scss/styles.scss'; -.auth-fields { - padding: calc(var(--base) * 2); - background: var(--theme-elevation-50); - display: flex; - flex-direction: column; - gap: var(--base); - - &__controls { - display: flex; - align-items: center; - gap: calc(var(--base) / 2); - flex-wrap: wrap; - } - - &__changing-password { +@layer payload-default { + .auth-fields { + padding: calc(var(--base) * 2); + background: var(--theme-elevation-50); display: flex; flex-direction: column; gap: var(--base); - } - .btn { - margin: 0; - } - - &__api-key-label { - position: relative; - } - - @include mid-break { - padding: var(--base); - gap: calc(var(--base) / 2); + &__controls { + display: flex; + align-items: center; + gap: calc(var(--base) / 2); + flex-wrap: wrap; + } &__changing-password { + display: flex; + flex-direction: column; + gap: var(--base); + } + + .btn { + margin: 0; + } + + &__api-key-label { + position: relative; + } + + @include mid-break { + padding: var(--base); gap: calc(var(--base) / 2); + + &__changing-password { + gap: calc(var(--base) / 2); + } } } -} -.field-type.api-key { - margin-bottom: var(--base); + .field-type.api-key { + margin-bottom: var(--base); - input { - @include formInput; + input { + @include formInput; + } + } + + @keyframes highlight { + 0% { + background: var(--theme-success-250); + border: 1px solid var(--theme-success-500); + } + + 20% { + background: var(--theme-input-bg); + border: 1px solid var(--theme-elevation-250); + color: var(--theme-text); + } + + 80% { + background: var(--theme-input-bg); + border: 1px solid var(--theme-elevation-250); + color: var(--theme-text); + } + + 100% { + background: var(--theme-elevation-200); + border: 1px solid transparent; + color: var(--theme-elevation-400); + } + } + + .highlight { + animation: highlight 10s; } } - -@keyframes highlight { - 0% { - background: var(--theme-success-250); - border: 1px solid var(--theme-success-500); - } - - 20% { - background: var(--theme-input-bg); - border: 1px solid var(--theme-elevation-250); - color: var(--theme-text); - } - - 80% { - background: var(--theme-input-bg); - border: 1px solid var(--theme-elevation-250); - color: var(--theme-text); - } - - 100% { - background: var(--theme-elevation-200); - border: 1px solid transparent; - color: var(--theme-elevation-400); - } -} - -.highlight { - animation: highlight 10s; -} diff --git a/packages/ui/src/views/Edit/index.scss b/packages/ui/src/views/Edit/index.scss index 03e40d6b89..9df0a1a958 100644 --- a/packages/ui/src/views/Edit/index.scss +++ b/packages/ui/src/views/Edit/index.scss @@ -1,21 +1,23 @@ @import '../../scss/styles.scss'; -.collection-edit { - width: 100%; +@layer payload-default { + .collection-edit { + width: 100%; - &__form { - height: 100%; - } + &__form { + height: 100%; + } - &__auth { - margin-bottom: base(1.6); - border-radius: var(--style-radius-s); - } - - @include small-break { &__auth { - margin-top: 0; - margin-bottom: var(--base); + margin-bottom: base(1.6); + border-radius: var(--style-radius-s); + } + + @include small-break { + &__auth { + margin-top: 0; + margin-bottom: var(--base); + } } } } diff --git a/packages/ui/src/views/Edit/index.tsx b/packages/ui/src/views/Edit/index.tsx index 643c8dd237..ea04634a86 100644 --- a/packages/ui/src/views/Edit/index.tsx +++ b/packages/ui/src/views/Edit/index.tsx @@ -5,7 +5,6 @@ import type { ClientGlobalConfig, ClientSideEditViewProps, ClientUser, - FormState, } from 'payload' import { useRouter, useSearchParams } from 'next/navigation.js' @@ -88,8 +87,6 @@ export const DefaultEditView: React.FC = ({ const { refreshCookieAsync, user } = useAuth() - const { serverFunction } = useServerFunctions() - const { config, config: { @@ -108,6 +105,9 @@ export const DefaultEditView: React.FC = ({ const params = useSearchParams() const { reportUpdate } = useDocumentEvents() const { resetUploadEdits } = useUploadEdits() + const { getFormState } = useServerFunctions() + + const abortControllerRef = useRef(new AbortController()) const locale = params.get('locale') @@ -242,6 +242,17 @@ export const DefaultEditView: React.FC = ({ const onChange: FormProps['onChange'][0] = useCallback( async ({ formState: prevFormState }) => { + if (abortControllerRef.current) { + try { + abortControllerRef.current.abort() + } catch (e) { + // swallow error + } + } + + const abortController = new AbortController() + abortControllerRef.current = abortController + const currentTime = Date.now() const timeSinceLastUpdate = currentTime - lastUpdateTime @@ -253,20 +264,18 @@ export const DefaultEditView: React.FC = ({ const docPreferences = await getDocPreferences() - const { lockedState, state } = (await serverFunction({ - name: 'form-state', - args: { - id, - collectionSlug, - docPreferences, - formState: prevFormState, - globalSlug, - operation, - returnLockStatus: isLockingEnabled ? true : false, - schemaPath, - updateLastEdited, - }, - })) as { lockedState: any; state: FormState } // TODO: remove this when strictNullChecks is enabled and the return type can be inferred + const { lockedState, state } = await getFormState({ + id, + collectionSlug, + docPreferences, + formState: prevFormState, + globalSlug, + operation, + returnLockStatus: isLockingEnabled ? true : false, + schemaPath, + signal: abortController.signal, + updateLastEdited, + }) setDocumentIsLocked(true) @@ -274,8 +283,13 @@ export const DefaultEditView: React.FC = ({ const previousOwnerId = documentLockStateRef.current?.user?.id if (lockedState) { - if (!documentLockStateRef.current || lockedState.user.id !== previousOwnerId) { - if (previousOwnerId === user.id && lockedState.user.id !== user.id) { + const lockedUserID = + typeof lockedState.user === 'string' || typeof lockedState.user === 'number' + ? lockedState.user + : lockedState.user.id + + if (!documentLockStateRef.current || lockedUserID !== previousOwnerId) { + if (previousOwnerId === user.id && lockedUserID !== user.id) { setShowTakeOverModal(true) documentLockStateRef.current.hasShownLockedModal = true } @@ -283,9 +297,9 @@ export const DefaultEditView: React.FC = ({ documentLockStateRef.current = documentLockStateRef.current = { hasShownLockedModal: documentLockStateRef.current?.hasShownLockedModal || false, isLocked: true, - user: lockedState.user, + user: lockedState.user as ClientUser, } - setCurrentEditor(lockedState.user) + setCurrentEditor(lockedState.user as ClientUser) } } } @@ -305,13 +319,21 @@ export const DefaultEditView: React.FC = ({ isLockingEnabled, setDocumentIsLocked, lastUpdateTime, - serverFunction, + getFormState, ], ) // Clean up when the component unmounts or when the document is unlocked useEffect(() => { return () => { + if (abortControllerRef.current) { + try { + abortControllerRef.current.abort() + } catch (e) { + // swallow error + } + } + if (!isLockingEnabled) { return } diff --git a/packages/ui/src/views/List/index.scss b/packages/ui/src/views/List/index.scss index 6675756c7d..f600fffafb 100644 --- a/packages/ui/src/views/List/index.scss +++ b/packages/ui/src/views/List/index.scss @@ -1,177 +1,179 @@ @import '../../scss/styles.scss'; -.collection-list { - width: 100%; - - &__wrap { - padding-bottom: var(--spacing-view-bottom); - - & > *:not(:last-child) { - margin-bottom: var(--base); - } - } - - .list-header { - a { - text-decoration: none; - } - - .btn--withoutPopup, - .btn--withPopup { - position: relative; - margin: 0 0 base(0.2); - } - } - - &__sub-header { - flex-basis: 100%; - } - - .table { - table { - width: 100%; - overflow: auto; - - [class^='cell'] > p, - [class^='cell'] > span, - [class^='cell'] > a { - line-clamp: 4; - -webkit-box-orient: vertical; - -webkit-line-clamp: 4; - overflow: hidden; - display: -webkit-box; - max-width: 100vw; - } - - #heading-_select, - .cell-_select { - display: flex; - min-width: unset; - } - } - } - - &__no-results { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: var(--base); - - & > * { - margin: 0; - } - } - - &__page-controls { +@layer payload-default { + .collection-list { width: 100%; - display: flex; - align-items: center; - } - - .paginator { - margin-bottom: 0; - } - - &__page-info { - [dir='ltr'] & { - margin-right: base(1); - margin-left: auto; - } - [dir='rtl'] & { - margin-left: base(1); - margin-right: auto; - } - } - - &__list-selection { - position: fixed; - bottom: 0; - z-index: 10; - padding: base(0.8) 0; - width: 100%; - background-color: var(--theme-bg); - - .btn { - margin: 0 0 0 base(0.4); - } - - .btn { - background-color: var(--theme-elevation-100); - cursor: pointer; - padding: 0 base(0.4); - border-radius: $style-radius-s; - - &:hover { - background-color: var(--theme-elevation-200); - } - } - } - - &__list-selection-actions { - display: flex; - gap: base(0.25); - } - - &__shimmer { - margin-top: base(1.75); - width: 100%; - > div { - margin-top: 8px; - } - } - - @include mid-break { - margin-top: base(0.25); &__wrap { - padding-top: 0; - padding-bottom: 0; + padding-bottom: var(--spacing-view-bottom); + + & > *:not(:last-child) { + margin-bottom: var(--base); + } } - &__header { - gap: base(0.5); + .list-header { + a { + text-decoration: none; + } + + .btn--withoutPopup, + .btn--withPopup { + position: relative; + margin: 0 0 base(0.2); + } } &__sub-header { - margin-top: 0; + flex-basis: 100%; } - &__search-input { - margin: 0; - } - - // on mobile, extend the table all the way to the viewport edges - // this is to visually indicate overflowing content .table { - display: flex; - width: calc(100% + calc(var(--gutter-h) * 2)); - max-width: unset; - left: calc(var(--gutter-h) * -1); - position: relative; - padding-left: var(--gutter-h); + table { + width: 100%; + overflow: auto; - &::after { - content: ''; - height: 1px; - padding-right: var(--gutter-h); + [class^='cell'] > p, + [class^='cell'] > span, + [class^='cell'] > a { + line-clamp: 4; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; + overflow: hidden; + display: -webkit-box; + max-width: 100vw; + } + + #heading-_select, + .cell-_select { + display: flex; + min-width: unset; + } + } + } + + &__no-results { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--base); + + & > * { + margin: 0; } } &__page-controls { - flex-wrap: wrap; - } - - &__page-info { - margin-left: 0; + width: 100%; + display: flex; + align-items: center; } .paginator { + margin-bottom: 0; + } + + &__page-info { + [dir='ltr'] & { + margin-right: base(1); + margin-left: auto; + } + [dir='rtl'] & { + margin-left: base(1); + margin-right: auto; + } + } + + &__list-selection { + position: fixed; + bottom: 0; + z-index: 10; + padding: base(0.8) 0; width: 100%; - margin-bottom: $baseline; + background-color: var(--theme-bg); + + .btn { + margin: 0 0 0 base(0.4); + } + + .btn { + background-color: var(--theme-elevation-100); + cursor: pointer; + padding: 0 base(0.4); + border-radius: $style-radius-s; + + &:hover { + background-color: var(--theme-elevation-200); + } + } + } + + &__list-selection-actions { + display: flex; + gap: base(0.25); + } + + &__shimmer { + margin-top: base(1.75); + width: 100%; + > div { + margin-top: 8px; + } + } + + @include mid-break { + margin-top: base(0.25); + + &__wrap { + padding-top: 0; + padding-bottom: 0; + } + + &__header { + gap: base(0.5); + } + + &__sub-header { + margin-top: 0; + } + + &__search-input { + margin: 0; + } + + // on mobile, extend the table all the way to the viewport edges + // this is to visually indicate overflowing content + .table { + display: flex; + width: calc(100% + calc(var(--gutter-h) * 2)); + max-width: unset; + left: calc(var(--gutter-h) * -1); + position: relative; + padding-left: var(--gutter-h); + + &::after { + content: ''; + height: 1px; + padding-right: var(--gutter-h); + } + } + + &__page-controls { + flex-wrap: wrap; + } + + &__page-info { + margin-left: 0; + } + + .paginator { + width: 100%; + margin-bottom: $baseline; + } + } + + @include small-break { + margin-bottom: base(2.4); } } - - @include small-break { - margin-bottom: base(2.4); - } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3a2125a4ec..ba9becdf2d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -302,6 +302,9 @@ importers: '@payloadcms/drizzle': specifier: workspace:* version: link:../drizzle + '@types/pg': + specifier: 8.10.2 + version: 8.10.2 console-table-printer: specifier: 2.11.2 version: 2.11.2 @@ -330,9 +333,6 @@ importers: '@payloadcms/eslint-config': specifier: workspace:* version: link:../eslint-config - '@types/pg': - specifier: 8.10.2 - version: 8.10.2 '@types/to-snake-case': specifier: 1.0.0 version: 1.0.0 diff --git a/templates/_template/package.json b/templates/_template/package.json index 3a225b24e9..2699cf71f3 100644 --- a/templates/_template/package.json +++ b/templates/_template/package.json @@ -21,10 +21,10 @@ "@payloadcms/richtext-lexical": "beta", "cross-env": "^7.0.3", "graphql": "^16.8.1", - "next": "15.0.0-canary.160", + "next": "15.0.0-canary.173", "payload": "beta", - "react": "19.0.0-rc-5dcb0097-20240918", - "react-dom": "19.0.0-rc-5dcb0097-20240918", + "react": "19.0.0-rc-3edc000d-20240926", + "react-dom": "19.0.0-rc-3edc000d-20240926", "sharp": "0.32.6" }, "devDependencies": { @@ -32,7 +32,7 @@ "@types/react": "npm:types-react@19.0.0-rc.1", "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1", "eslint": "^8", - "eslint-config-next": "15.0.0-canary.160", + "eslint-config-next": "15.0.0-canary.173", "typescript": "5.6.2" }, "engines": { diff --git a/templates/_template/src/app/(payload)/admin/[[...segments]]/page.tsx b/templates/_template/src/app/(payload)/admin/[[...segments]]/page.tsx index 75241971d5..0de685cd62 100644 --- a/templates/_template/src/app/(payload)/admin/[[...segments]]/page.tsx +++ b/templates/_template/src/app/(payload)/admin/[[...segments]]/page.tsx @@ -7,12 +7,12 @@ import { RootPage, generatePageMetadata } from '@payloadcms/next/views' import { importMap } from '../importMap' type Args = { - params: { + params: Promise<{ segments: string[] - } - searchParams: { + }> + searchParams: Promise<{ [key: string]: string | string[] - } + }> } export const generateMetadata = ({ params, searchParams }: Args): Promise => diff --git a/templates/blank/package.json b/templates/blank/package.json index 3a225b24e9..2699cf71f3 100644 --- a/templates/blank/package.json +++ b/templates/blank/package.json @@ -21,10 +21,10 @@ "@payloadcms/richtext-lexical": "beta", "cross-env": "^7.0.3", "graphql": "^16.8.1", - "next": "15.0.0-canary.160", + "next": "15.0.0-canary.173", "payload": "beta", - "react": "19.0.0-rc-5dcb0097-20240918", - "react-dom": "19.0.0-rc-5dcb0097-20240918", + "react": "19.0.0-rc-3edc000d-20240926", + "react-dom": "19.0.0-rc-3edc000d-20240926", "sharp": "0.32.6" }, "devDependencies": { @@ -32,7 +32,7 @@ "@types/react": "npm:types-react@19.0.0-rc.1", "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1", "eslint": "^8", - "eslint-config-next": "15.0.0-canary.160", + "eslint-config-next": "15.0.0-canary.173", "typescript": "5.6.2" }, "engines": { diff --git a/templates/blank/src/app/(payload)/admin/[[...segments]]/not-found.tsx b/templates/blank/src/app/(payload)/admin/[[...segments]]/not-found.tsx index ade432a48d..64108365fd 100644 --- a/templates/blank/src/app/(payload)/admin/[[...segments]]/not-found.tsx +++ b/templates/blank/src/app/(payload)/admin/[[...segments]]/not-found.tsx @@ -7,12 +7,12 @@ import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views' import { importMap } from '../importMap' type Args = { - params: { + params: Promise<{ segments: string[] - } - searchParams: { + }> + searchParams: Promise<{ [key: string]: string | string[] - } + }> } export const generateMetadata = ({ params, searchParams }: Args): Promise => diff --git a/templates/blank/src/app/(payload)/admin/[[...segments]]/page.tsx b/templates/blank/src/app/(payload)/admin/[[...segments]]/page.tsx index 75241971d5..0de685cd62 100644 --- a/templates/blank/src/app/(payload)/admin/[[...segments]]/page.tsx +++ b/templates/blank/src/app/(payload)/admin/[[...segments]]/page.tsx @@ -7,12 +7,12 @@ import { RootPage, generatePageMetadata } from '@payloadcms/next/views' import { importMap } from '../importMap' type Args = { - params: { + params: Promise<{ segments: string[] - } - searchParams: { + }> + searchParams: Promise<{ [key: string]: string | string[] - } + }> } export const generateMetadata = ({ params, searchParams }: Args): Promise => diff --git a/templates/vercel-postgres/package.json b/templates/vercel-postgres/package.json index 6b188bc198..e237a28458 100644 --- a/templates/vercel-postgres/package.json +++ b/templates/vercel-postgres/package.json @@ -18,10 +18,10 @@ "@payloadcms/storage-vercel-blob": "beta", "@vercel/blob": "^0.22.3", "cross-env": "^7.0.3", - "next": "15.0.0-canary.53", + "next": "15.0.0-canary.173", "payload": "beta", - "react": "19.0.0-rc-6230622a1a-20240610", - "react-dom": "19.0.0-rc-6230622a1a-20240610", + "react": "19.0.0-rc-3edc000d-20240926", + "react-dom": "19.0.0-rc-3edc000d-20240926", "sharp": "0.32.6" }, "devDependencies": { @@ -30,7 +30,7 @@ "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1", "autoprefixer": "^10.0.1", "eslint": "^8", - "eslint-config-next": "15.0.0-canary.53", + "eslint-config-next": "15.0.0-canary.173", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "5.6.2" diff --git a/templates/vercel-postgres/src/app/(payload)/admin/[[...segments]]/page.tsx b/templates/vercel-postgres/src/app/(payload)/admin/[[...segments]]/page.tsx index 559298711a..1d56bc94ab 100644 --- a/templates/vercel-postgres/src/app/(payload)/admin/[[...segments]]/page.tsx +++ b/templates/vercel-postgres/src/app/(payload)/admin/[[...segments]]/page.tsx @@ -6,12 +6,12 @@ import config from '@payload-config' import { RootPage, generatePageMetadata } from '@payloadcms/next/views' type Args = { - params: { + params: Promise<{ segments: string[] - } - searchParams: { + }> + searchParams: Promise<{ [key: string]: string | string[] - } + }> } export const generateMetadata = ({ params, searchParams }: Args): Promise => diff --git a/templates/website/package.json b/templates/website/package.json index adc83ea516..e7f0d8a53d 100644 --- a/templates/website/package.json +++ b/templates/website/package.json @@ -41,12 +41,12 @@ "jsonwebtoken": "9.0.2", "lexical": "0.18.0", "lucide-react": "^0.378.0", - "next": "15.0.0-canary.160", + "next": "15.0.0-canary.173", "payload": "beta", "payload-admin-bar": "^1.0.6", "prism-react-renderer": "^2.3.1", - "react": "19.0.0-rc-5dcb0097-20240918", - "react-dom": "19.0.0-rc-5dcb0097-20240918", + "react": "19.0.0-rc-3edc000d-20240926", + "react-dom": "19.0.0-rc-3edc000d-20240926", "react-hook-form": "7.45.4", "sharp": "0.32.6", "tailwind-merge": "^2.3.0", @@ -64,7 +64,7 @@ "autoprefixer": "^10.4.19", "copyfiles": "^2.4.1", "eslint": "^8", - "eslint-config-next": "15.0.0-canary.160", + "eslint-config-next": "15.0.0-canary.173", "postcss": "^8.4.38", "prettier": "^3.0.3", "tailwindcss": "^3.4.3", diff --git a/templates/website/src/app/(frontend)/[slug]/page.tsx b/templates/website/src/app/(frontend)/[slug]/page.tsx index 295817b547..926f91ce8e 100644 --- a/templates/website/src/app/(frontend)/[slug]/page.tsx +++ b/templates/website/src/app/(frontend)/[slug]/page.tsx @@ -34,7 +34,14 @@ export async function generateStaticParams() { return params } -export default async function Page({ params: { slug = 'home' } }) { +type Args = { + params: Promise<{ + slug?: string + }> +} + +export default async function Page({ params: paramsPromise }: Args) { + const { slug = 'home' } = await paramsPromise const url = '/' + slug let page: PageType | null @@ -66,7 +73,8 @@ export default async function Page({ params: { slug = 'home' } }) { ) } -export async function generateMetadata({ params: { slug = 'home' } }): Promise { +export async function generateMetadata({ params: paramsPromise }): Promise { + const { slug = 'home' } = await paramsPromise const page = await queryPageBySlug({ slug, }) @@ -75,7 +83,7 @@ export async function generateMetadata({ params: { slug = 'home' } }): Promise { - const { isEnabled: draft } = draftMode() + const { isEnabled: draft } = await draftMode() const payload = await getPayloadHMR({ config: configPromise }) diff --git a/templates/website/src/app/(frontend)/layout.tsx b/templates/website/src/app/(frontend)/layout.tsx index 2a3ee55ffd..b7edb6bad2 100644 --- a/templates/website/src/app/(frontend)/layout.tsx +++ b/templates/website/src/app/(frontend)/layout.tsx @@ -17,7 +17,7 @@ import { draftMode } from 'next/headers' import './globals.css' export default async function RootLayout({ children }: { children: React.ReactNode }) { - const { isEnabled } = draftMode() + const { isEnabled } = await draftMode() return ( diff --git a/templates/website/src/app/(frontend)/next/exit-preview/GET.ts b/templates/website/src/app/(frontend)/next/exit-preview/GET.ts index 0c15caea1e..a8e3e69b57 100644 --- a/templates/website/src/app/(frontend)/next/exit-preview/GET.ts +++ b/templates/website/src/app/(frontend)/next/exit-preview/GET.ts @@ -1,6 +1,7 @@ import { draftMode } from 'next/headers' export async function GET(): Promise { - draftMode().disable() + const draft = await draftMode() + draft.disable() return new Response('Draft mode is disabled') } diff --git a/templates/website/src/app/(frontend)/next/exit-preview/route.ts b/templates/website/src/app/(frontend)/next/exit-preview/route.ts index 0c15caea1e..a8e3e69b57 100644 --- a/templates/website/src/app/(frontend)/next/exit-preview/route.ts +++ b/templates/website/src/app/(frontend)/next/exit-preview/route.ts @@ -1,6 +1,7 @@ import { draftMode } from 'next/headers' export async function GET(): Promise { - draftMode().disable() + const draft = await draftMode() + draft.disable() return new Response('Draft mode is disabled') } diff --git a/templates/website/src/app/(frontend)/next/preview/route.ts b/templates/website/src/app/(frontend)/next/preview/route.ts index 5def48eb49..4a36569531 100644 --- a/templates/website/src/app/(frontend)/next/preview/route.ts +++ b/templates/website/src/app/(frontend)/next/preview/route.ts @@ -56,9 +56,11 @@ export async function GET( payload.logger.error('Error verifying token for live preview:', error) } + const draft = await draftMode() + // You can add additional checks here to see if the user is allowed to preview this page if (!user) { - draftMode().disable() + draft.disable() return new Response('You are not allowed to preview this page', { status: 403 }) } @@ -80,7 +82,8 @@ export async function GET( payload.logger.error('Error verifying token for live preview:', error) } - draftMode().enable() + draft.enable() + redirect(path) } } diff --git a/templates/website/src/app/(frontend)/posts/[slug]/page.tsx b/templates/website/src/app/(frontend)/posts/[slug]/page.tsx index 045440ce75..6aac4b77c5 100644 --- a/templates/website/src/app/(frontend)/posts/[slug]/page.tsx +++ b/templates/website/src/app/(frontend)/posts/[slug]/page.tsx @@ -30,7 +30,14 @@ export async function generateStaticParams() { return params } -export default async function Post({ params: { slug = '' } }) { +type Args = { + params: Promise<{ + slug?: string + }> +} + +export default async function Post({ params: paramsPromise }: Args) { + const { slug = '' } = await paramsPromise const url = '/posts/' + slug const post = await queryPostBySlug({ slug }) @@ -65,18 +72,15 @@ export default async function Post({ params: { slug = '' } }) { ) } -export async function generateMetadata({ - params: { slug }, -}: { - params: { slug: string } -}): Promise { +export async function generateMetadata({ params: paramsPromise }: Args): Promise { + const { slug = '' } = await paramsPromise const post = await queryPostBySlug({ slug }) return generateMeta({ doc: post }) } const queryPostBySlug = cache(async ({ slug }: { slug: string }) => { - const { isEnabled: draft } = draftMode() + const { isEnabled: draft } = await draftMode() const payload = await getPayloadHMR({ config: configPromise }) diff --git a/templates/website/src/app/(frontend)/posts/page/[pageNumber]/page.tsx b/templates/website/src/app/(frontend)/posts/page/[pageNumber]/page.tsx index 3987bad6a4..4f4d1e8c09 100644 --- a/templates/website/src/app/(frontend)/posts/page/[pageNumber]/page.tsx +++ b/templates/website/src/app/(frontend)/posts/page/[pageNumber]/page.tsx @@ -7,17 +7,29 @@ import configPromise from '@payload-config' import { getPayloadHMR } from '@payloadcms/next/utilities' import React from 'react' import PageClient from './page.client' +import { notFound } from 'next/navigation' export const revalidate = 600 -export default async function Page({ params: { pageNumber } }) { +type Args = { + params: Promise<{ + pageNumber: string + }> +} + +export default async function Page({ params: paramsPromise }: Args) { + const { pageNumber } = await paramsPromise const payload = await getPayloadHMR({ config: configPromise }) + const sanitizedPageNumber = Number(pageNumber) + + if (!Number.isInteger(sanitizedPageNumber)) notFound() + const posts = await payload.find({ collection: 'posts', depth: 1, limit: 12, - page: pageNumber, + page: sanitizedPageNumber, overrideAccess: false, }) @@ -50,7 +62,8 @@ export default async function Page({ params: { pageNumber } }) { ) } -export function generateMetadata({ params: { pageNumber } }): Metadata { +export async function generateMetadata({ params: paramsPromise }: Args): Promise { + const { pageNumber } = await paramsPromise return { title: `Payload Website Template Posts Page ${pageNumber || ''}`, } diff --git a/templates/website/src/app/(frontend)/search/page.tsx b/templates/website/src/app/(frontend)/search/page.tsx index 4220b99fec..aac8fe9e79 100644 --- a/templates/website/src/app/(frontend)/search/page.tsx +++ b/templates/website/src/app/(frontend)/search/page.tsx @@ -7,8 +7,14 @@ import React from 'react' import { Post } from '@/payload-types' import { Search } from '@/search/Component' import PageClient from './page.client' -export default async function Page({ searchParams }: { searchParams: { q: string } }) { - const query = searchParams.q + +type Args = { + searchParams: Promise<{ + q: string + }> +} +export default async function Page({ searchParams: searchParamsPromise }: Args) { + const { q: query } = await searchParamsPromise const payload = await getPayloadHMR({ config: configPromise }) const posts = await payload.find({ diff --git a/templates/website/src/app/(payload)/admin/[[...segments]]/not-found.tsx b/templates/website/src/app/(payload)/admin/[[...segments]]/not-found.tsx index ade432a48d..64108365fd 100644 --- a/templates/website/src/app/(payload)/admin/[[...segments]]/not-found.tsx +++ b/templates/website/src/app/(payload)/admin/[[...segments]]/not-found.tsx @@ -7,12 +7,12 @@ import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views' import { importMap } from '../importMap' type Args = { - params: { + params: Promise<{ segments: string[] - } - searchParams: { + }> + searchParams: Promise<{ [key: string]: string | string[] - } + }> } export const generateMetadata = ({ params, searchParams }: Args): Promise => diff --git a/templates/website/src/app/(payload)/admin/[[...segments]]/page.tsx b/templates/website/src/app/(payload)/admin/[[...segments]]/page.tsx index 75241971d5..0de685cd62 100644 --- a/templates/website/src/app/(payload)/admin/[[...segments]]/page.tsx +++ b/templates/website/src/app/(payload)/admin/[[...segments]]/page.tsx @@ -7,12 +7,12 @@ import { RootPage, generatePageMetadata } from '@payloadcms/next/views' import { importMap } from '../importMap' type Args = { - params: { + params: Promise<{ segments: string[] - } - searchParams: { + }> + searchParams: Promise<{ [key: string]: string | string[] - } + }> } export const generateMetadata = ({ params, searchParams }: Args): Promise => diff --git a/templates/website/src/utilities/getMeUser.ts b/templates/website/src/utilities/getMeUser.ts index 516d4e7348..a899596df4 100644 --- a/templates/website/src/utilities/getMeUser.ts +++ b/templates/website/src/utilities/getMeUser.ts @@ -11,7 +11,7 @@ export const getMeUser = async (args?: { user: User }> => { const { nullUserRedirect, validUserRedirect } = args || {} - const cookieStore = cookies() + const cookieStore = await cookies() const token = cookieStore.get('payload-token')?.value const meUserReq = await fetch(`${process.env.NEXT_PUBLIC_SERVER_URL}/api/users/me`, { diff --git a/templates/with-payload-cloud/package.json b/templates/with-payload-cloud/package.json index af8aaa464f..064b75604d 100644 --- a/templates/with-payload-cloud/package.json +++ b/templates/with-payload-cloud/package.json @@ -21,10 +21,10 @@ "@payloadcms/richtext-lexical": "beta", "cross-env": "^7.0.3", "graphql": "^16.8.1", - "next": "15.0.0-canary.160", + "next": "15.0.0-canary.173", "payload": "beta", - "react": "19.0.0-rc-5dcb0097-20240918", - "react-dom": "19.0.0-rc-5dcb0097-20240918", + "react": "19.0.0-rc-3edc000d-20240926", + "react-dom": "19.0.0-rc-3edc000d-20240926", "sharp": "0.32.6" }, "devDependencies": { @@ -32,7 +32,7 @@ "@types/react": "npm:types-react@19.0.0-rc.1", "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1", "eslint": "^8", - "eslint-config-next": "15.0.0-canary.160", + "eslint-config-next": "15.0.0-canary.173", "typescript": "5.6.2" }, "engines": { diff --git a/templates/with-payload-cloud/src/app/(payload)/admin/[[...segments]]/not-found.tsx b/templates/with-payload-cloud/src/app/(payload)/admin/[[...segments]]/not-found.tsx index ade432a48d..64108365fd 100644 --- a/templates/with-payload-cloud/src/app/(payload)/admin/[[...segments]]/not-found.tsx +++ b/templates/with-payload-cloud/src/app/(payload)/admin/[[...segments]]/not-found.tsx @@ -7,12 +7,12 @@ import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views' import { importMap } from '../importMap' type Args = { - params: { + params: Promise<{ segments: string[] - } - searchParams: { + }> + searchParams: Promise<{ [key: string]: string | string[] - } + }> } export const generateMetadata = ({ params, searchParams }: Args): Promise => diff --git a/templates/with-postgres/package.json b/templates/with-postgres/package.json index 2a3eaa5141..be24aee8b4 100644 --- a/templates/with-postgres/package.json +++ b/templates/with-postgres/package.json @@ -22,10 +22,10 @@ "@payloadcms/richtext-lexical": "beta", "cross-env": "^7.0.3", "graphql": "^16.8.1", - "next": "15.0.0-canary.160", + "next": "15.0.0-canary.173", "payload": "beta", - "react": "19.0.0-rc-5dcb0097-20240918", - "react-dom": "19.0.0-rc-5dcb0097-20240918", + "react": "19.0.0-rc-3edc000d-20240926", + "react-dom": "19.0.0-rc-3edc000d-20240926", "sharp": "0.32.6" }, "devDependencies": { @@ -33,7 +33,7 @@ "@types/react": "npm:types-react@19.0.0-rc.1", "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1", "eslint": "^8", - "eslint-config-next": "15.0.0-canary.160", + "eslint-config-next": "15.0.0-canary.173", "typescript": "5.6.2" }, "engines": { diff --git a/templates/with-postgres/src/app/(payload)/admin/[[...segments]]/not-found.tsx b/templates/with-postgres/src/app/(payload)/admin/[[...segments]]/not-found.tsx index ade432a48d..64108365fd 100644 --- a/templates/with-postgres/src/app/(payload)/admin/[[...segments]]/not-found.tsx +++ b/templates/with-postgres/src/app/(payload)/admin/[[...segments]]/not-found.tsx @@ -7,12 +7,12 @@ import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views' import { importMap } from '../importMap' type Args = { - params: { + params: Promise<{ segments: string[] - } - searchParams: { + }> + searchParams: Promise<{ [key: string]: string | string[] - } + }> } export const generateMetadata = ({ params, searchParams }: Args): Promise => diff --git a/templates/with-vercel-mongodb/package.json b/templates/with-vercel-mongodb/package.json index 7a2fb9f403..f95887b8bc 100644 --- a/templates/with-vercel-mongodb/package.json +++ b/templates/with-vercel-mongodb/package.json @@ -22,17 +22,17 @@ "@payloadcms/storage-vercel-blob": "beta", "cross-env": "^7.0.3", "graphql": "^16.8.1", - "next": "15.0.0-canary.160", + "next": "15.0.0-canary.173", "payload": "beta", - "react": "19.0.0-rc-5dcb0097-20240918", - "react-dom": "19.0.0-rc-5dcb0097-20240918" + "react": "19.0.0-rc-3edc000d-20240926", + "react-dom": "19.0.0-rc-3edc000d-20240926" }, "devDependencies": { "@types/node": "^22.5.4", "@types/react": "npm:types-react@19.0.0-rc.1", "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1", "eslint": "^8", - "eslint-config-next": "15.0.0-canary.160", + "eslint-config-next": "15.0.0-canary.173", "typescript": "5.6.2" }, "engines": { diff --git a/templates/with-vercel-mongodb/src/app/(payload)/admin/[[...segments]]/not-found.tsx b/templates/with-vercel-mongodb/src/app/(payload)/admin/[[...segments]]/not-found.tsx index ade432a48d..64108365fd 100644 --- a/templates/with-vercel-mongodb/src/app/(payload)/admin/[[...segments]]/not-found.tsx +++ b/templates/with-vercel-mongodb/src/app/(payload)/admin/[[...segments]]/not-found.tsx @@ -7,12 +7,12 @@ import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views' import { importMap } from '../importMap' type Args = { - params: { + params: Promise<{ segments: string[] - } - searchParams: { + }> + searchParams: Promise<{ [key: string]: string | string[] - } + }> } export const generateMetadata = ({ params, searchParams }: Args): Promise => diff --git a/templates/with-vercel-postgres/package.json b/templates/with-vercel-postgres/package.json index 0672d1dd68..ccd60b25f6 100644 --- a/templates/with-vercel-postgres/package.json +++ b/templates/with-vercel-postgres/package.json @@ -23,17 +23,17 @@ "@payloadcms/storage-vercel-blob": "beta", "cross-env": "^7.0.3", "graphql": "^16.8.1", - "next": "15.0.0-canary.160", + "next": "15.0.0-canary.173", "payload": "beta", - "react": "19.0.0-rc-5dcb0097-20240918", - "react-dom": "19.0.0-rc-5dcb0097-20240918" + "react": "19.0.0-rc-3edc000d-20240926", + "react-dom": "19.0.0-rc-3edc000d-20240926" }, "devDependencies": { "@types/node": "^22.5.4", "@types/react": "npm:types-react@19.0.0-rc.1", "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1", "eslint": "^8", - "eslint-config-next": "15.0.0-canary.160", + "eslint-config-next": "15.0.0-canary.173", "typescript": "5.6.2" }, "engines": { diff --git a/templates/with-vercel-postgres/src/app/(payload)/admin/[[...segments]]/not-found.tsx b/templates/with-vercel-postgres/src/app/(payload)/admin/[[...segments]]/not-found.tsx index ade432a48d..64108365fd 100644 --- a/templates/with-vercel-postgres/src/app/(payload)/admin/[[...segments]]/not-found.tsx +++ b/templates/with-vercel-postgres/src/app/(payload)/admin/[[...segments]]/not-found.tsx @@ -7,12 +7,12 @@ import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views' import { importMap } from '../importMap' type Args = { - params: { + params: Promise<{ segments: string[] - } - searchParams: { + }> + searchParams: Promise<{ [key: string]: string | string[] - } + }> } export const generateMetadata = ({ params, searchParams }: Args): Promise => diff --git a/test/fields/collections/Lexical/e2e/blocks/e2e.spec.ts b/test/fields/collections/Lexical/e2e/blocks/e2e.spec.ts index 60c881ed07..d26a4e04ca 100644 --- a/test/fields/collections/Lexical/e2e/blocks/e2e.spec.ts +++ b/test/fields/collections/Lexical/e2e/blocks/e2e.spec.ts @@ -272,7 +272,8 @@ describe('lexicalBlocks', () => { const urlField = drawerContent.locator('input#field-url').first() await expect(urlField).toBeVisible() - // Fill with https://www.payloadcms.com + await expect(urlField).toHaveValue('https://') + await wait(1000) await urlField.fill('https://www.payloadcms.com') await expect(urlField).toHaveValue('https://www.payloadcms.com') await drawerContent.locator('.form-submit button').click({ delay: 100 }) @@ -870,7 +871,8 @@ describe('lexicalBlocks', () => { // navigate to list view await page.locator('.step-nav a').nth(1).click() - await page.waitForURL('**/lexical-fields?limit=10') + + await page.waitForURL(/^.*\/lexical-fields(\?.*)?$/) // Click on lexical document in list view (navigateToLexicalFields is client-side navigation which is what we need to reproduce the issue here) await navigateToLexicalFields(false) diff --git a/test/fields/collections/Lexical/e2e/main/e2e.spec.ts b/test/fields/collections/Lexical/e2e/main/e2e.spec.ts index 885bd9157f..83ee7550d1 100644 --- a/test/fields/collections/Lexical/e2e/main/e2e.spec.ts +++ b/test/fields/collections/Lexical/e2e/main/e2e.spec.ts @@ -498,6 +498,7 @@ describe('lexicalMain', () => { await expect(uploadExtraFieldsDrawer).toBeHidden() await wait(500) await saveDocAndAssert(page) + await wait(500) // Reload page, open the extra fields drawer again and check if the text is still there await page.reload() await wait(300) diff --git a/test/joins/e2e.spec.ts b/test/joins/e2e.spec.ts index 7f607d7f98..81221a61ed 100644 --- a/test/joins/e2e.spec.ts +++ b/test/joins/e2e.spec.ts @@ -191,6 +191,7 @@ test.describe('Admin Panel', () => { const joinField = page.locator('.field-type.join').first() await expect(joinField).toBeVisible() + // TODO: change this to edit the first row in the join table const addButton = joinField.locator('.relationship-table__actions button.doc-drawer__toggler', { hasText: exactText('Add new'), }) @@ -206,12 +207,12 @@ test.describe('Admin Panel', () => { await expect(uploadValue).toBeVisible() const titleField = drawer.locator('#field-title') await expect(titleField).toBeVisible() - await titleField.fill('Test post with upload') + await titleField.fill('Edited title for upload') await drawer.locator('button[id="action-save"]').click() await expect(drawer).toBeHidden() await expect( joinField.locator('tbody tr td:nth-child(2)', { - hasText: exactText('Test post with upload'), + hasText: exactText('Edited title for upload'), }), ).toBeVisible() }) diff --git a/test/localization/collections/Group/index.ts b/test/localization/collections/Group/index.ts index 47caceda87..d33fb5c4bb 100644 --- a/test/localization/collections/Group/index.ts +++ b/test/localization/collections/Group/index.ts @@ -1,10 +1,26 @@ -import type { CollectionConfig } from 'payload/types' +import type { CollectionConfig } from 'payload' export const groupSlug = 'groups' export const Group: CollectionConfig = { slug: groupSlug, fields: [ + { + name: 'groupLocalizedRow', + type: 'group', + localized: true, + fields: [ + { + type: 'row', + fields: [ + { + name: 'text', + type: 'text', + }, + ], + }, + ], + }, { name: 'groupLocalized', type: 'group', @@ -16,6 +32,7 @@ export const Group: CollectionConfig = { ], localized: true, }, + { name: 'group', type: 'group', diff --git a/test/localization/int.spec.ts b/test/localization/int.spec.ts index 3c2c1cb032..4598952664 100644 --- a/test/localization/int.spec.ts +++ b/test/localization/int.spec.ts @@ -1452,6 +1452,42 @@ describe('Localization', () => { expect(docEs.deep.blocks[0].title).toBe('hello es') }) + it('should create/updated/read localized group with row field', async () => { + const doc = await payload.create({ + collection: 'groups', + data: { + groupLocalizedRow: { + text: 'hello world', + }, + }, + locale: 'en', + }) + + expect(doc.groupLocalizedRow.text).toBe('hello world') + + const docES = await payload.update({ + collection: 'groups', + data: { + groupLocalizedRow: { + text: 'hola world or something', + }, + }, + locale: 'es', + id: doc.id, + }) + + expect(docES.groupLocalizedRow.text).toBe('hola world or something') + + // check if docES didnt break EN + const docEN = await payload.findByID({ collection: 'groups', id: doc.id, locale: 'en' }) + expect(docEN.groupLocalizedRow.text).toBe('hello world') + + const all = await payload.findByID({ collection: 'groups', id: doc.id, locale: 'all' }) + + expect(all.groupLocalizedRow.en.text).toBe('hello world') + expect(all.groupLocalizedRow.es.text).toBe('hola world or something') + }) + it('should properly create/update/read localized tab field', async () => { const result = await payload.create({ collection: tabSlug, diff --git a/test/localization/payload-types.ts b/test/localization/payload-types.ts index ef01c5059b..07df3c3d94 100644 --- a/test/localization/payload-types.ts +++ b/test/localization/payload-types.ts @@ -402,6 +402,9 @@ export interface Group { groupLocalized?: { title?: string | null; }; + groupLocalizedRow?: { + text?: string | null; + }; group?: { title?: string | null; }; diff --git a/test/plugin-nested-docs/e2e.spec.ts b/test/plugin-nested-docs/e2e.spec.ts index 5ade24e7ad..94cee6c3dc 100644 --- a/test/plugin-nested-docs/e2e.spec.ts +++ b/test/plugin-nested-docs/e2e.spec.ts @@ -6,7 +6,7 @@ import { fileURLToPath } from 'url' import type { Config, Page as PayloadPage } from './payload-types.js' -import { ensureCompilationIsDone, initPageConsoleErrorCatch } from '../helpers.js' +import { ensureCompilationIsDone, initPageConsoleErrorCatch, saveDocAndAssert } from '../helpers.js' import { AdminUrlUtil } from '../helpers/adminUrlUtil.js' import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js' import { TEST_TIMEOUT_LONG } from '../playwright.config.js' @@ -98,6 +98,7 @@ describe('Nested Docs Plugin', () => { await slug.fill('updated-parent-slug') await expect(slug).toHaveValue('updated-parent-slug') await page.locator(publishButtonClass).nth(0).click() + await expect(page.locator('.payload-toast-container')).toContainText('successfully') await page.goto(url.edit(childId)) // TODO: remove when error states are fixed @@ -126,6 +127,7 @@ describe('Nested Docs Plugin', () => { await page.goto(url.edit(parentId)) await page.locator(slugClass).nth(0).fill('parent-updated-draft') await page.locator(draftButtonClass).nth(0).click() + await expect(page.locator('.payload-toast-container')).toContainText('successfully') await page.goto(url.edit(draftChildId)) await apiTabButton.click() diff --git a/test/plugin-nested-docs/payload-types.ts b/test/plugin-nested-docs/payload-types.ts index 20bcd1dcd3..543fbfc6b2 100644 --- a/test/plugin-nested-docs/payload-types.ts +++ b/test/plugin-nested-docs/payload-types.ts @@ -14,6 +14,7 @@ export interface Config { pages: Page; categories: Category; users: User; + 'payload-locked-documents': PayloadLockedDocument; 'payload-preferences': PayloadPreference; 'payload-migrations': PayloadMigration; }; @@ -103,6 +104,33 @@ export interface User { lockUntil?: string | null; password?: string | null; } +/** + * This interface was referenced by `Config`'s JSON-Schema + * via the `definition` "payload-locked-documents". + */ +export interface PayloadLockedDocument { + id: string; + document?: + | ({ + relationTo: 'pages'; + value: string | Page; + } | null) + | ({ + relationTo: 'categories'; + value: string | Category; + } | null) + | ({ + relationTo: 'users'; + value: string | User; + } | null); + globalSlug?: string | null; + user: { + relationTo: 'users'; + value: string | User; + }; + updatedAt: string; + createdAt: string; +} /** * This interface was referenced by `Config`'s JSON-Schema * via the `definition` "payload-preferences". diff --git a/test/uploads/.gitignore b/test/uploads/.gitignore index 05332aba7f..80b78bfe86 100644 --- a/test/uploads/.gitignore +++ b/test/uploads/.gitignore @@ -4,3 +4,4 @@ media uploads versions /media-gif +/custom-file-name-media diff --git a/test/uploads/config.ts b/test/uploads/config.ts index aa8dbc9c49..10758b097b 100644 --- a/test/uploads/config.ts +++ b/test/uploads/config.ts @@ -17,8 +17,8 @@ import { enlargeSlug, focalNoSizesSlug, mediaSlug, - mediaWithRelationPreviewSlug, mediaWithoutRelationPreviewSlug, + mediaWithRelationPreviewSlug, reduceSlug, relationPreviewSlug, relationSlug, diff --git a/test/uploads/int.spec.ts b/test/uploads/int.spec.ts index ea54983eed..927eb333a0 100644 --- a/test/uploads/int.spec.ts +++ b/test/uploads/int.spec.ts @@ -779,6 +779,31 @@ describe('Collections - Uploads', () => { ) }) }) + + describe('Duplicate', () => { + it('should duplicate upload collection doc', async () => { + const filePath = path.resolve(dirname, './image.png') + const file = await getFileByPath(filePath) + file.name = 'file-to-duplicate.png' + + const mediaDoc = await payload.create({ + collection: 'media', + data: {}, + file, + }) + + expect(mediaDoc).toBeDefined() + + const duplicatedDoc = await payload.duplicate({ + collection: 'media', + id: mediaDoc.id, + }) + + const expectedPath = path.join(dirname, './media') + + expect(await fileExists(path.join(expectedPath, duplicatedDoc.filename))).toBe(true) + }) + }) }) async function fileExists(fileName: string): Promise { diff --git a/test/uploads/payload-types.ts b/test/uploads/payload-types.ts index b2ec78689c..9ad3ec6e01 100644 --- a/test/uploads/payload-types.ts +++ b/test/uploads/payload-types.ts @@ -43,6 +43,7 @@ export interface Config { 'media-without-relation-preview': MediaWithoutRelationPreview; 'relation-preview': RelationPreview; users: User; + 'payload-locked-documents': PayloadLockedDocument; 'payload-preferences': PayloadPreference; 'payload-migrations': PayloadMigration; }; @@ -1092,6 +1093,149 @@ export interface User { lockUntil?: string | null; password?: string | null; } +/** + * This interface was referenced by `Config`'s JSON-Schema + * via the `definition` "payload-locked-documents". + */ +export interface PayloadLockedDocument { + id: string; + document?: + | ({ + relationTo: 'relation'; + value: string | Relation; + } | null) + | ({ + relationTo: 'audio'; + value: string | Audio; + } | null) + | ({ + relationTo: 'gif-resize'; + value: string | GifResize; + } | null) + | ({ + relationTo: 'filename-compound-index'; + value: string | FilenameCompoundIndex; + } | null) + | ({ + relationTo: 'no-image-sizes'; + value: string | NoImageSize; + } | null) + | ({ + relationTo: 'object-fit'; + value: string | ObjectFit; + } | null) + | ({ + relationTo: 'with-meta-data'; + value: string | WithMetaDatum; + } | null) + | ({ + relationTo: 'without-meta-data'; + value: string | WithoutMetaDatum; + } | null) + | ({ + relationTo: 'with-only-jpeg-meta-data'; + value: string | WithOnlyJpegMetaDatum; + } | null) + | ({ + relationTo: 'crop-only'; + value: string | CropOnly; + } | null) + | ({ + relationTo: 'focal-only'; + value: string | FocalOnly; + } | null) + | ({ + relationTo: 'focal-no-sizes'; + value: string | FocalNoSize; + } | null) + | ({ + relationTo: 'media'; + value: string | Media; + } | null) + | ({ + relationTo: 'animated-type-media'; + value: string | AnimatedTypeMedia; + } | null) + | ({ + relationTo: 'enlarge'; + value: string | Enlarge; + } | null) + | ({ + relationTo: 'reduce'; + value: string | Reduce; + } | null) + | ({ + relationTo: 'media-trim'; + value: string | MediaTrim; + } | null) + | ({ + relationTo: 'custom-file-name-media'; + value: string | CustomFileNameMedia; + } | null) + | ({ + relationTo: 'unstored-media'; + value: string | UnstoredMedia; + } | null) + | ({ + relationTo: 'externally-served-media'; + value: string | ExternallyServedMedia; + } | null) + | ({ + relationTo: 'uploads-1'; + value: string | Uploads1; + } | null) + | ({ + relationTo: 'uploads-2'; + value: string | Uploads2; + } | null) + | ({ + relationTo: 'admin-thumbnail-function'; + value: string | AdminThumbnailFunction; + } | null) + | ({ + relationTo: 'admin-thumbnail-size'; + value: string | AdminThumbnailSize; + } | null) + | ({ + relationTo: 'optional-file'; + value: string | OptionalFile; + } | null) + | ({ + relationTo: 'required-file'; + value: string | RequiredFile; + } | null) + | ({ + relationTo: 'versions'; + value: string | Version; + } | null) + | ({ + relationTo: 'custom-upload-field'; + value: string | CustomUploadField; + } | null) + | ({ + relationTo: 'media-with-relation-preview'; + value: string | MediaWithRelationPreview; + } | null) + | ({ + relationTo: 'media-without-relation-preview'; + value: string | MediaWithoutRelationPreview; + } | null) + | ({ + relationTo: 'relation-preview'; + value: string | RelationPreview; + } | null) + | ({ + relationTo: 'users'; + value: string | User; + } | null); + globalSlug?: string | null; + user: { + relationTo: 'users'; + value: string | User; + }; + updatedAt: string; + createdAt: string; +} /** * This interface was referenced by `Config`'s JSON-Schema * via the `definition` "payload-preferences". diff --git a/test/versions/e2e.spec.ts b/test/versions/e2e.spec.ts index 6b3bc8ca04..b05dcc515c 100644 --- a/test/versions/e2e.spec.ts +++ b/test/versions/e2e.spec.ts @@ -116,6 +116,11 @@ describe('versions', () => { }) beforeEach(async () => { + /* await throttleTest({ + page, + context, + delay: 'Slow 4G', + }) */ await reInitializeDB({ serverURL, snapshotKey: 'versionsTest',