From 0128eedf70600bcc8e3041716ca10982e86c2905 Mon Sep 17 00:00:00 2001 From: Sasha <64744993+r1tsuu@users.noreply.github.com> Date: Fri, 4 Oct 2024 19:25:05 +0300 Subject: [PATCH 01/20] fix(drizzle)!: make radio and select column names to snake_case (#8439) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes https://github.com/payloadcms/payload/issues/8402 and https://github.com/payloadcms/payload/issues/8027 Before DB column names were camelCase: ![image](https://github.com/user-attachments/assets/d2965bcf-290a-4f86-9bf4-dfe7e8613934) After this change, they are snake_case: ![Screenshot 2024-10-04 114226](https://github.com/user-attachments/assets/bbc8c20b-6745-4dd3-b0c8-56263a4e37b1) #### Breaking SQLite / Postgres ⚠️ If you had any select (not `hasMany: true`) or radio fields with the name in camelCase, for example: ```ts { name: 'selectReadOnly', type: 'select', admin: { readOnly: true, }, options: [ { label: 'Value One', value: 'one', }, { label: 'Value Two', value: 'two', }, ], }, ``` This previously was mapped to the db column name `"selectReadOnly"`. Now it's `select_read_only`. Generate a new migration to rename your columns. ```sh pnpm payload migrate:create ``` Then select "rename column" for targeted columns and Drizzle will handle the migration. --------- Co-authored-by: Dan Ribbens --- packages/db-sqlite/src/schema/traverseFields.ts | 7 ++++++- packages/drizzle/src/postgres/schema/traverseFields.ts | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/db-sqlite/src/schema/traverseFields.ts b/packages/db-sqlite/src/schema/traverseFields.ts index 2678350b054..727abdabbfe 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/drizzle/src/postgres/schema/traverseFields.ts b/packages/drizzle/src/postgres/schema/traverseFields.ts index 22a02769821..40c942260af 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 } From 0d3416c96d857127bbfc178f9bf7e562ee59fd5c Mon Sep 17 00:00:00 2001 From: Alessio Gravili Date: Fri, 4 Oct 2024 13:39:03 -0400 Subject: [PATCH 02/20] fix(db-postgres): missing types for db.pool by moving @types/pg from devDependencies to dependencies (#8556) Fixes lack of types in installed project: ![CleanShot 2024-10-04 at 19 18 58@2x](https://github.com/user-attachments/assets/e7c519ee-72fd-424b-8f6c-41032322fa5e) Since we expose stuff from @types/pg to the end user, we need it to be installed in the end users project => move to dependencies. --- packages/db-postgres/package.json | 2 +- pnpm-lock.yaml | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/db-postgres/package.json b/packages/db-postgres/package.json index 3e8b0a85b09..26a107fcd32 100644 --- a/packages/db-postgres/package.json +++ b/packages/db-postgres/package.json @@ -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/pnpm-lock.yaml b/pnpm-lock.yaml index 42679c2b5fd..be88bd8a801 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 From b99590f47799fb474040e5925bc257baee6eeceb Mon Sep 17 00:00:00 2001 From: Sasha <64744993+r1tsuu@users.noreply.github.com> Date: Fri, 4 Oct 2024 21:28:43 +0300 Subject: [PATCH 03/20] chore(templates): update templates with next.js promises (#8547) Updates templates according to this PR https://github.com/payloadcms/payload/pull/8489 --- templates/_template/package.json | 8 ++++---- .../(payload)/admin/[[...segments]]/page.tsx | 8 ++++---- templates/blank/package.json | 8 ++++---- .../admin/[[...segments]]/not-found.tsx | 8 ++++---- .../(payload)/admin/[[...segments]]/page.tsx | 8 ++++---- templates/vercel-postgres/package.json | 8 ++++---- .../(payload)/admin/[[...segments]]/page.tsx | 8 ++++---- templates/website/package.json | 8 ++++---- .../src/app/(frontend)/[slug]/page.tsx | 11 +++++++++-- .../website/src/app/(frontend)/layout.tsx | 2 +- .../app/(frontend)/next/exit-preview/GET.ts | 3 ++- .../app/(frontend)/next/exit-preview/route.ts | 3 ++- .../src/app/(frontend)/next/preview/route.ts | 7 +++++-- .../src/app/(frontend)/posts/[slug]/page.tsx | 18 +++++++++++------- .../posts/page/[pageNumber]/page.tsx | 19 ++++++++++++++++--- .../src/app/(frontend)/search/page.tsx | 10 ++++++++-- .../admin/[[...segments]]/not-found.tsx | 8 ++++---- templates/with-payload-cloud/package.json | 8 ++++---- .../admin/[[...segments]]/not-found.tsx | 8 ++++---- templates/with-postgres/package.json | 8 ++++---- .../admin/[[...segments]]/not-found.tsx | 8 ++++---- templates/with-vercel-mongodb/package.json | 8 ++++---- .../admin/[[...segments]]/not-found.tsx | 8 ++++---- templates/with-vercel-postgres/package.json | 8 ++++---- .../admin/[[...segments]]/not-found.tsx | 8 ++++---- 25 files changed, 122 insertions(+), 87 deletions(-) diff --git a/templates/_template/package.json b/templates/_template/package.json index 3a225b24e96..2699cf71f38 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 75241971d57..0de685cd62b 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 3a225b24e96..2699cf71f38 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 ade432a48d5..64108365fd9 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 75241971d57..0de685cd62b 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 6b188bc198e..e237a284581 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 559298711a1..1d56bc94ab1 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 adc83ea516f..e7f0d8a53d3 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 295817b547f..3a864dfe25d 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 @@ -75,7 +82,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 2a3ee55ffd9..b7edb6bad26 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 0c15caea1ea..a8e3e69b577 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 0c15caea1ea..a8e3e69b577 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 5def48eb49f..4a36569531d 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 045440ce757..6aac4b77c50 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 3987bad6a47..4f4d1e8c09f 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 4220b99fec6..aac8fe9e795 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 ade432a48d5..64108365fd9 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/with-payload-cloud/package.json b/templates/with-payload-cloud/package.json index af8aaa464fa..064b75604d7 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 ade432a48d5..64108365fd9 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 2a3eaa51419..be24aee8b4c 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 ade432a48d5..64108365fd9 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 7a2fb9f4036..f95887b8bca 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 ade432a48d5..64108365fd9 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 0672d1dd68a..ccd60b25f67 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 ade432a48d5..64108365fd9 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 => From e4a413eb9a829a27a29340462214ebcf1d157ce7 Mon Sep 17 00:00:00 2001 From: Elliot DeNolf Date: Fri, 4 Oct 2024 11:31:06 -0700 Subject: [PATCH 04/20] chore(release): v3.0.0-beta.111 [skip ci] --- package.json | 2 +- packages/create-payload-app/package.json | 2 +- packages/db-mongodb/package.json | 2 +- packages/db-postgres/package.json | 2 +- packages/db-sqlite/package.json | 2 +- packages/db-vercel-postgres/package.json | 2 +- packages/drizzle/package.json | 2 +- packages/email-nodemailer/package.json | 2 +- packages/email-resend/package.json | 2 +- packages/graphql/package.json | 2 +- packages/live-preview-react/package.json | 2 +- packages/live-preview-vue/package.json | 2 +- packages/live-preview/package.json | 2 +- packages/next/package.json | 2 +- packages/payload/package.json | 2 +- packages/plugin-cloud-storage/package.json | 2 +- packages/plugin-cloud/package.json | 2 +- packages/plugin-form-builder/package.json | 2 +- packages/plugin-nested-docs/package.json | 2 +- packages/plugin-redirects/package.json | 2 +- packages/plugin-search/package.json | 2 +- packages/plugin-seo/package.json | 2 +- packages/plugin-stripe/package.json | 2 +- packages/richtext-lexical/package.json | 2 +- packages/richtext-slate/package.json | 2 +- packages/storage-azure/package.json | 2 +- packages/storage-gcs/package.json | 2 +- packages/storage-s3/package.json | 2 +- packages/storage-uploadthing/package.json | 2 +- packages/storage-vercel-blob/package.json | 2 +- packages/translations/package.json | 2 +- packages/ui/package.json | 2 +- 32 files changed, 32 insertions(+), 32 deletions(-) diff --git a/package.json b/package.json index 3e3ccc94f82..1b54e29d149 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 5fa2d63891d..57fa6e0812a 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 714d72fb628..90a87a6f0c5 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 26a107fcd32..0e7bc34546d 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": { diff --git a/packages/db-sqlite/package.json b/packages/db-sqlite/package.json index e7b2c320958..c47a98a591e 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-vercel-postgres/package.json b/packages/db-vercel-postgres/package.json index 928d10d5150..428907d446d 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 43315735482..6ef9550330f 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/email-nodemailer/package.json b/packages/email-nodemailer/package.json index 3a0582b92a6..07636793ce0 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 af067852118..66ddf12eb5d 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 5af948aac94..750006bfbe9 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 507dd1a999b..05d64850806 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 5b590b75ad1..a238d452742 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 0b757dfad2b..083f41ec23a 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 a46c1e57cef..99997d3e07b 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/payload/package.json b/packages/payload/package.json index 25fea442074..6ec84c32d4d 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/plugin-cloud-storage/package.json b/packages/plugin-cloud-storage/package.json index eb715a8cf52..8627d6bd6ce 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 07194af466b..c4491ac0edf 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 17e702072b3..9d09326d1d1 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 f93c9a9e967..df124bfaf61 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 af66ea646bd..8c908a40382 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 85aab7733af..d5fa35c0f15 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 35366ccb7ac..7f15e140df5 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-stripe/package.json b/packages/plugin-stripe/package.json index f176201d56d..e16e41dbade 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 54987d2abee..d3ea631302d 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-slate/package.json b/packages/richtext-slate/package.json index c61fc0e56e2..fe9d37921d3 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/storage-azure/package.json b/packages/storage-azure/package.json index c0308d7a3b9..ca55de80899 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 77708ae57aa..ca1ce5ddd1d 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 141f6243af4..c2fec733ea0 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 e5671dc8c4d..1c62c6e9ee9 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 11337a41551..c81952cd103 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 6515a89088b..6de4d33fae3 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 3ace00f6ee2..446c9d146f7 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", From 400293b8ee7ef0341f6b1e0e07c62474d63fce02 Mon Sep 17 00:00:00 2001 From: Sasha <64744993+r1tsuu@users.noreply.github.com> Date: Fri, 4 Oct 2024 21:46:41 +0300 Subject: [PATCH 05/20] fix: duplicate with upload collections (#8552) Fixes the duplicate operation with uploads Enables duplicate for upload collections by default --- .gitignore | 3 +++ .../src/collections/config/sanitize.ts | 5 +--- .../src/collections/operations/duplicate.ts | 24 +++++++++++++++++- .../collections/operations/local/duplicate.ts | 2 +- .../payload/src/uploads/generateFileData.ts | 15 ++++++++--- .../src/elements/DocumentControls/index.tsx | 2 +- test/uploads/config.ts | 2 +- test/uploads/int.spec.ts | 25 +++++++++++++++++++ 8 files changed, 67 insertions(+), 11 deletions(-) diff --git a/.gitignore b/.gitignore index 1071eaf9fa4..c4e5c6d72dd 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/packages/payload/src/collections/config/sanitize.ts b/packages/payload/src/collections/config/sanitize.ts index 43ac041232b..2ca62c29dec 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 c1d0fac4241..9b65fecf66d 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 74a2d7b00d4..fb2463400f4 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 ee23210807e..7c62ddd1f10 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/ui/src/elements/DocumentControls/index.tsx b/packages/ui/src/elements/DocumentControls/index.tsx index b81fadff44d..9a75be31631 100644 --- a/packages/ui/src/elements/DocumentControls/index.tsx +++ b/packages/ui/src/elements/DocumentControls/index.tsx @@ -279,7 +279,7 @@ export const DocumentControls: React.FC<{ )} )} - {!collectionConfig.disableDuplicate && isEditing && ( + {collectionConfig.disableDuplicate !== true && isEditing && ( { ) }) }) + + 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 { From 7c62e2a327c6bfecf1114411b77ca6d03b361014 Mon Sep 17 00:00:00 2001 From: Paul Date: Fri, 4 Oct 2024 13:02:56 -0600 Subject: [PATCH 06/20] feat(ui)!: scope all payload css to payload-default layer (#8545) All payload css is now encapsulated inside CSS layers under `@layer payload-default` Any custom css will now have the highest possible specificity. We have also provided a new 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 existing rules of specificity would be respected you can use the default layer like so ```css @layer payload-default { // my styles within the payload specificity } ``` --- docs/admin/customizing-css.mdx | 13 + packages/next/src/scss/app.scss | 328 ++++----- packages/next/src/scss/colors.scss | 510 +++++++------- packages/next/src/scss/resets.scss | 16 +- packages/next/src/scss/toastify.scss | 82 +-- packages/next/src/scss/toasts.scss | 208 +++--- packages/next/src/scss/type.scss | 159 ++--- packages/next/src/views/API/index.scss | 194 +++--- .../src/views/Account/Settings/index.scss | 72 +- .../next/src/views/CreateFirstUser/index.scss | 24 +- .../src/views/Dashboard/Default/index.scss | 100 +-- .../src/views/Edit/Default/Auth/index.scss | 110 +-- .../next/src/views/Edit/Default/index.scss | 28 +- .../next/src/views/List/Default/index.scss | 270 ++++---- .../src/views/LivePreview/IFrame/index.scss | 14 +- .../src/views/LivePreview/Preview/index.scss | 62 +- .../LivePreview/Toolbar/Controls/index.scss | 96 +-- .../LivePreview/Toolbar/SizeInput/index.scss | 20 +- .../src/views/LivePreview/Toolbar/index.scss | 64 +- .../views/LivePreview/ToolbarArea/index.scss | 8 +- .../next/src/views/LivePreview/index.scss | 94 +-- .../next/src/views/Login/LoginForm/index.scss | 14 +- packages/next/src/views/Login/index.scss | 14 +- packages/next/src/views/Logout/index.scss | 32 +- packages/next/src/views/NotFound/index.scss | 74 +- .../next/src/views/ResetPassword/index.scss | 42 +- .../next/src/views/Unauthorized/index.scss | 46 +- packages/next/src/views/Verify/index.scss | 24 +- .../next/src/views/Version/Default/index.scss | 102 +-- .../RenderFieldsToDiff/Label/index.scss | 8 +- .../fields/Iterable/index.scss | 56 +- .../fields/Nested/index.scss | 20 +- .../fields/Relationship/index.scss | 22 +- .../fields/Select/index.scss | 22 +- .../RenderFieldsToDiff/fields/Text/index.scss | 22 +- .../Version/RenderFieldsToDiff/index.scss | 22 +- .../next/src/views/Version/Restore/index.scss | 112 +-- .../views/Version/SelectComparison/index.scss | 22 +- .../views/Version/SelectLocales/index.scss | 10 +- packages/next/src/views/Versions/index.scss | 154 +++-- packages/plugin-seo/src/fields/index.scss | 8 +- .../blocks/client/component/index.scss | 238 +++---- .../blocks/client/componentInline/index.scss | 134 ++-- .../testRecorder/client/plugin/index.scss | 88 +-- .../debug/treeView/client/plugin/index.scss | 114 +-- .../plugins/TableActionMenuPlugin/index.scss | 120 ++-- .../client/plugins/TablePlugin/index.scss | 302 ++++---- .../horizontalRule/client/plugin/index.scss | 32 +- .../plugins/floatingLinkEditor/index.scss | 142 ++-- .../relationship/client/components/index.scss | 146 ++-- .../toolbars/fixed/client/Toolbar/index.scss | 162 ++--- .../toolbars/inline/client/Toolbar/index.scss | 92 +-- .../upload/client/component/index.scss | 238 +++---- .../richtext-lexical/src/field/index.scss | 44 +- .../src/lexical/LexicalEditor.scss | 98 +-- .../src/lexical/plugins/SlashMenu/index.scss | 110 +-- .../handles/AddBlockHandlePlugin/index.scss | 50 +- .../handles/DraggableBlockPlugin/index.scss | 118 ++-- .../src/lexical/theme/EditorTheme.scss | 652 +++++++++--------- .../src/lexical/ui/ContentEditable.scss | 138 ++-- packages/richtext-lexical/src/scss/app.scss | 326 ++++----- .../richtext-lexical/src/scss/colors.scss | 510 +++++++------- .../richtext-lexical/src/scss/resets.scss | 16 +- .../richtext-lexical/src/scss/toastify.scss | 83 +-- .../richtext-lexical/src/scss/toasts.scss | 208 +++--- packages/richtext-lexical/src/scss/type.scss | 159 ++--- .../richtext-slate/src/field/buttons.scss | 21 +- .../src/field/icons/IndentLeft/index.scss | 22 +- .../src/field/icons/IndentRight/index.scss | 22 +- .../src/field/icons/Link/index.scss | 14 +- .../src/field/icons/Relationship/index.scss | 16 +- .../src/field/icons/Upload/index.scss | 14 +- packages/richtext-slate/src/field/index.scss | 333 ++++----- packages/richtext-slate/src/scss/app.scss | 327 ++++----- packages/richtext-slate/src/scss/colors.scss | 510 +++++++------- packages/richtext-slate/src/scss/resets.scss | 16 +- .../richtext-slate/src/scss/toastify.scss | 83 +-- packages/richtext-slate/src/scss/toasts.scss | 207 +++--- packages/richtext-slate/src/scss/type.scss | 159 ++--- .../ui/src/elements/AddNewRelation/index.scss | 70 +- packages/ui/src/elements/AppHeader/index.scss | 302 ++++---- .../ui/src/elements/ArrayAction/index.scss | 44 +- packages/ui/src/elements/Autosave/index.scss | 6 +- packages/ui/src/elements/Banner/index.scss | 100 +-- .../elements/BulkUpload/ActionsBar/index.scss | 88 +-- .../BulkUpload/AddFilesView/index.scss | 44 +- .../BulkUpload/AddingFilesView/index.scss | 30 +- .../BulkUpload/DrawerCloseButton/index.scss | 44 +- .../elements/BulkUpload/EditForm/index.scss | 10 +- .../BulkUpload/FileSidebar/index.scss | 426 ++++++------ .../src/elements/BulkUpload/Header/index.scss | 20 +- packages/ui/src/elements/Button/index.scss | 402 +++++------ packages/ui/src/elements/Card/index.scss | 114 +-- .../ui/src/elements/CodeEditor/index.scss | 30 +- .../ui/src/elements/Collapsible/index.scss | 248 +++---- .../ui/src/elements/ColumnSelector/index.scss | 70 +- .../src/elements/CopyToClipboard/index.scss | 40 +- .../ui/src/elements/DatePicker/index.scss | 616 ++++++++--------- .../ui/src/elements/DeleteDocument/index.scss | 62 +- .../ui/src/elements/DeleteMany/index.scss | 56 +- .../src/elements/DocumentControls/index.scss | 378 +++++----- .../ui/src/elements/DocumentDrawer/index.scss | 108 +-- .../ui/src/elements/DocumentFields/index.scss | 286 ++++---- packages/ui/src/elements/Drawer/index.scss | 220 +++--- packages/ui/src/elements/Dropzone/index.scss | 62 +- .../src/elements/DuplicateDocument/index.scss | 60 +- packages/ui/src/elements/EditMany/index.scss | 322 ++++----- .../ui/src/elements/EditUpload/index.scss | 358 +++++----- packages/ui/src/elements/ErrorPill/index.scss | 52 +- .../ui/src/elements/FieldSelect/index.scss | 6 +- .../DraggableFileDetails/index.scss | 48 +- .../elements/FileDetails/FileMeta/index.scss | 40 +- .../FileDetails/StaticFileDetails/index.scss | 206 +++--- .../elements/GenerateConfirmation/index.scss | 56 +- packages/ui/src/elements/Gutter/index.scss | 26 +- packages/ui/src/elements/Hamburger/index.scss | 74 +- packages/ui/src/elements/IDLabel/index.scss | 20 +- .../ui/src/elements/ListControls/index.scss | 140 ++-- .../ui/src/elements/ListDrawer/index.scss | 184 ++--- .../ui/src/elements/ListHeader/index.scss | 16 +- .../ui/src/elements/ListSelection/index.scss | 26 +- packages/ui/src/elements/Loading/index.scss | 214 +++--- .../Localizer/LocalizerLabel/index.scss | 86 +-- packages/ui/src/elements/Localizer/index.scss | 12 +- packages/ui/src/elements/Locked/index.scss | 20 +- .../ui/src/elements/Nav/NavToggler/index.scss | 16 +- packages/ui/src/elements/NavGroup/index.scss | 84 +-- .../Pagination/ClickableArrow/index.scss | 66 +- .../ui/src/elements/Pagination/index.scss | 78 ++- packages/ui/src/elements/PerPage/index.scss | 72 +- packages/ui/src/elements/Pill/index.scss | 204 +++--- .../elements/Popup/PopupButtonList/index.scss | 88 +-- .../elements/Popup/PopupTrigger/index.scss | 44 +- packages/ui/src/elements/Popup/index.scss | 368 +++++----- .../ui/src/elements/PreviewSizes/index.scss | 228 +++--- .../ui/src/elements/PublishMany/index.scss | 54 +- .../ReactSelect/ClearIndicator/index.scss | 10 +- .../ReactSelect/DropdownIndicator/index.scss | 20 +- .../ReactSelect/MultiValue/index.scss | 50 +- .../ReactSelect/MultiValueLabel/index.scss | 30 +- .../ReactSelect/MultiValueRemove/index.scss | 38 +- .../ReactSelect/ValueContainer/index.scss | 42 +- .../ui/src/elements/ReactSelect/index.scss | 122 ++-- .../cells/DrawerLink/index.scss | 8 +- .../src/elements/RelationshipTable/index.scss | 40 +- .../ui/src/elements/RenderTitle/index.scss | 12 +- .../ui/src/elements/SearchFilter/index.scss | 59 +- packages/ui/src/elements/SelectAll/index.scss | 8 +- packages/ui/src/elements/SelectRow/index.scss | 10 +- .../ui/src/elements/ShimmerEffect/index.scss | 50 +- .../ui/src/elements/SortColumn/index.scss | 100 +-- .../ui/src/elements/SortComplex/index.scss | 52 +- packages/ui/src/elements/Status/index.scss | 88 +-- .../ui/src/elements/StayLoggedIn/index.scss | 54 +- packages/ui/src/elements/StepNav/index.scss | 123 ++-- .../DefaultCell/fields/Checkbox/index.scss | 38 +- .../Table/DefaultCell/fields/Code/index.scss | 42 +- .../Table/DefaultCell/fields/File/index.scss | 34 +- .../Table/DefaultCell/fields/JSON/index.scss | 38 +- packages/ui/src/elements/Table/index.scss | 146 ++-- packages/ui/src/elements/Thumbnail/index.scss | 72 +- .../ui/src/elements/ThumbnailCard/index.scss | 60 +- packages/ui/src/elements/Tooltip/index.scss | 152 ++-- .../ui/src/elements/UnpublishMany/index.scss | 54 +- packages/ui/src/elements/Upload/index.scss | 242 +++---- .../WhereBuilder/Condition/Number/index.scss | 6 +- .../Condition/Relationship/index.scss | 16 +- .../WhereBuilder/Condition/Text/index.scss | 6 +- .../WhereBuilder/Condition/index.scss | 84 +-- .../ui/src/elements/WhereBuilder/index.scss | 54 +- packages/ui/src/fields/Array/index.scss | 146 ++-- .../BlocksDrawer/BlockSearch/index.scss | 48 +- .../src/fields/Blocks/BlocksDrawer/index.scss | 70 +- .../src/fields/Blocks/SectionTitle/index.scss | 100 +-- packages/ui/src/fields/Blocks/index.scss | 176 ++--- packages/ui/src/fields/Checkbox/index.scss | 212 +++--- packages/ui/src/fields/Code/index.scss | 34 +- packages/ui/src/fields/Collapsible/index.scss | 14 +- .../ui/src/fields/ConfirmPassword/index.scss | 34 +- packages/ui/src/fields/DateTime/index.scss | 24 +- packages/ui/src/fields/Email/index.scss | 40 +- .../ui/src/fields/FieldDescription/index.scss | 16 +- packages/ui/src/fields/FieldError/index.scss | 24 +- packages/ui/src/fields/FieldLabel/index.scss | 32 +- packages/ui/src/fields/Group/index.scss | 212 +++--- packages/ui/src/fields/JSON/index.scss | 20 +- packages/ui/src/fields/Number/index.scss | 36 +- packages/ui/src/fields/Password/index.scss | 34 +- packages/ui/src/fields/Point/index.scss | 64 +- .../ui/src/fields/RadioGroup/Radio/index.scss | 114 +-- packages/ui/src/fields/RadioGroup/index.scss | 112 +-- .../ui/src/fields/Relationship/index.scss | 86 +-- .../MultiValueLabel/index.scss | 78 ++- .../select-components/SingleValue/index.scss | 84 +-- packages/ui/src/fields/Row/index.scss | 60 +- packages/ui/src/fields/Select/index.scss | 30 +- packages/ui/src/fields/Tabs/Tab/index.scss | 114 +-- packages/ui/src/fields/Tabs/index.scss | 90 +-- packages/ui/src/fields/Text/index.scss | 44 +- packages/ui/src/fields/Textarea/index.scss | 176 ++--- .../ui/src/fields/Upload/HasMany/index.scss | 38 +- .../ui/src/fields/Upload/HasOne/index.scss | 8 +- .../Upload/RelationshipContent/index.scss | 86 +-- .../src/fields/Upload/UploadCard/index.scss | 40 +- packages/ui/src/fields/Upload/index.scss | 96 +-- packages/ui/src/forms/Form/index.scss | 8 +- packages/ui/src/forms/RenderFields/index.scss | 92 +-- packages/ui/src/forms/Submit/index.scss | 8 +- .../src/graphics/Account/Default/index.scss | 84 +-- packages/ui/src/icons/Calendar/index.scss | 14 +- packages/ui/src/icons/Check/index.scss | 16 +- packages/ui/src/icons/Chevron/index.scss | 34 +- packages/ui/src/icons/CloseMenu/index.scss | 12 +- packages/ui/src/icons/Copy/index.scss | 16 +- packages/ui/src/icons/DragHandle/index.scss | 16 +- packages/ui/src/icons/Edit/index.scss | 16 +- packages/ui/src/icons/Line/index.scss | 14 +- packages/ui/src/icons/Link/index.scss | 14 +- packages/ui/src/icons/Lock/index.scss | 10 +- packages/ui/src/icons/LogOut/index.scss | 14 +- packages/ui/src/icons/Menu/index.scss | 10 +- packages/ui/src/icons/More/index.scss | 14 +- packages/ui/src/icons/Plus/index.scss | 10 +- packages/ui/src/icons/Search/index.scss | 14 +- packages/ui/src/icons/Swap/index.scss | 16 +- packages/ui/src/icons/X/index.scss | 10 +- packages/ui/src/scss/app.scss | 328 ++++----- packages/ui/src/scss/colors.scss | 510 +++++++------- packages/ui/src/scss/resets.scss | 16 +- packages/ui/src/scss/toastify.scss | 82 +-- packages/ui/src/scss/toasts.scss | 208 +++--- packages/ui/src/scss/type.scss | 160 ++--- test/admin-root/next-env.d.ts | 2 +- test/admin-root/payload-types.ts | 24 + 234 files changed, 11662 insertions(+), 11168 deletions(-) diff --git a/docs/admin/customizing-css.mdx b/docs/admin/customizing-css.mdx index 593f845a22b..4ed40e70700 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/packages/next/src/scss/app.scss b/packages/next/src/scss/app.scss index 90254443b00..b0c575df896 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); - - --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; - } -} +@layer payload-default { + :root { + --base-px: 20; + --base-body-size: 13; + --base: calc((var(--base-px) / var(--base-body-size)) * 1rem); -///////////////////////////// -// GLOBAL STYLES -///////////////////////////// + --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; -* { - box-sizing: border-box; -} + --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); + } -html { - @extend %body; - background: var(--theme-bg); - -webkit-font-smoothing: antialiased; + @include small-break { + --gutter-h: #{base(0.8)}; + --spacing-view-bottom: calc(var(--base) * 2); + --nav-width: 100vw; + } + } - &[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; + ///////////////////////////// + // GLOBAL STYLES + ///////////////////////////// + + * { + box-sizing: border-box; + } - ::selection { - color: var(--color-base-1000); + 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; + + ::selection { + color: var(--color-base-1000); + } + + ::-moz-selection { + color: var(--color-base-1000); + } } - ::-moz-selection { - color: var(--color-base-1000); + @include mid-break { + font-size: 12px; } } - @include mid-break { - font-size: 12px; + html, + body, + #app { + height: 100%; } -} -html, -body, -#app { - height: 100%; -} + 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; + } -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; -} + ::selection { + background: var(--color-success-250); + color: var(--theme-base-800); + } -::selection { - background: var(--color-success-250); - color: var(--theme-base-800); -} + ::-moz-selection { + background: var(--color-success-250); + color: var(--theme-base-800); + } -::-moz-selection { - background: var(--color-success-250); - color: var(--theme-base-800); -} + img { + max-width: 100%; + height: auto; + display: block; + } -img { - max-width: 100%; - height: auto; - display: block; -} + h1 { + @extend %h1; + } -h1 { - @extend %h1; -} + h2 { + @extend %h2; + } -h2 { - @extend %h2; -} + h3 { + @extend %h3; + } -h3 { - @extend %h3; -} + h4 { + @extend %h4; + } -h4 { - @extend %h4; -} + h5 { + @extend %h5; + } -h5 { - @extend %h5; -} + h6 { + @extend %h6; + } -h6 { - @extend %h6; -} + p { + margin: 0; + } -p { - margin: 0; -} + ul, + ol { + padding-left: $baseline; + margin: 0; + } -ul, -ol { - padding-left: $baseline; - margin: 0; -} + :focus-visible { + outline: var(--accessibility-outline); + } -:focus-visible { - outline: var(--accessibility-outline); -} + a { + color: currentColor; -a { - color: currentColor; + &:focus { + &:not(:focus-visible) { + opacity: 0.8; + } + outline: none; + } - &:focus { - &:not(:focus-visible) { - opacity: 0.8; + &:active { + opacity: 0.7; + outline: none; } - outline: none; } - &:active { - opacity: 0.7; - outline: none; + svg { + vertical-align: middle; } -} -svg { - vertical-align: middle; -} + dialog { + width: 100%; + border: 0; + padding: 0; + color: currentColor; + } -dialog { - width: 100%; - border: 0; - padding: 0; - color: currentColor; -} + .payload__modal-item { + min-height: 100%; + background: transparent; + } -.payload__modal-item { - min-height: 100%; - background: transparent; -} + .payload__modal-container--enterDone { + overflow: auto; + } -.payload__modal-container--enterDone { - overflow: auto; -} + .payload__modal-item--enter, + .payload__modal-item--enterDone { + z-index: var(--z-modal); + } -.payload__modal-item--enter, -.payload__modal-item--enterDone { - z-index: var(--z-modal); + // @import '~payload-user-css'; TODO: re-enable this } - -// @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 42cea058596..1eaa88cb0a9 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); -} + --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); + 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-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-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-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-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 eeda892c2df..e73efa9c003 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 a5bf4c35fd7..33192936a4b 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; - } +@layer payload-default { + .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__toast { + padding: base(0.5); + border-radius: $style-radius-m; + font-weight: 600; + } - .Toastify__close-button { - align-self: center; - opacity: 0.7; + .Toastify__close-button { + align-self: center; + opacity: 0.7; - &:hover { - opacity: 1; + &:hover { + opacity: 1; + } } - } - .Toastify__toast--success { - color: var(--color-success-900); - background: var(--color-success-500); + .Toastify__toast--success { + color: var(--color-success-900); + background: var(--color-success-500); - .Toastify__progress-bar { - background-color: var(--color-success-900); + .Toastify__progress-bar { + background-color: var(--color-success-900); + } } - } - .Toastify__close-button--success { - 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__toast--error { + background: var(--theme-error-500); + color: #fff; - .Toastify__progress-bar { - background-color: #fff; + .Toastify__progress-bar { + background-color: #fff; + } } - } - .Toastify__close-button--light { - color: inherit; - } + .Toastify__close-button--light { + color: inherit; + } - @include mid-break { - .Toastify__toast-container { - left: $baseline; - right: $baseline; + @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 116845ac341..4d3b0bc3782 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; - - .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); - } +@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; + + 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; + [dir='RTL'] & { + right: unset; + left: 0.5rem; + } } - } - .toast-title { - line-height: base(1); - margin-right: base(1); - } + .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); + .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); - &[data-front='false'] { .toast-content { - opacity: 0; + transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19); + width: 100%; } - } - &[data-expanded='true'] { - .toast-content { - opacity: 1; + &[data-front='false'] { + .toast-content { + opacity: 0; + } } - } - .toast-icon { - width: base(0.8); - height: base(0.8); - margin: 0; - display: flex; - align-items: center; - justify-content: center; + &[data-expanded='true'] { + .toast-content { + opacity: 1; + } + } - & > * { - width: base(1.2); - height: base(1.2); + .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); + &.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); + .payload-toast-close-button { + color: var(--theme-warning-600); - &:hover { - color: var(--theme-warning-250); + &: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); + &.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); + .payload-toast-close-button { + color: var(--theme-error-600); - &:hover { - color: var(--theme-error-250); + &: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); + &.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); + .payload-toast-close-button { + color: var(--theme-success-600); - &:hover { - color: var(--theme-success-250); + &: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); + &.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); + .payload-toast-close-button { + color: var(--theme-elevation-600); - &:hover { - color: var(--theme-elevation-250); + &:hover { + color: var(--theme-elevation-250); + } } } } diff --git a/packages/next/src/scss/type.scss b/packages/next/src/scss/type.scss index 997e43e24a3..9fe3e34be52 100644 --- a/packages/next/src/scss/type.scss +++ b/packages/next/src/scss/type.scss @@ -4,106 +4,107 @@ ///////////////////////////// // HEADINGS ///////////////////////////// +@layer payload-default { + %h1, + %h2, + %h3, + %h4, + %h5, + %h6 { + font-family: var(--font-body); + font-weight: 500; + } -%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); + } + } -%h1 { - margin: 0; - font-size: base(1.6); - line-height: base(1.8); + %h2 { + margin: 0; + font-size: base(1.3); + line-height: base(1.6); - @include small-break { - letter-spacing: -0.5px; - font-size: base(1.25); + @include small-break { + font-size: base(0.85); + } } -} -%h2 { - margin: 0; - font-size: base(1.3); - line-height: base(1.6); + %h3 { + margin: 0; + font-size: base(1); + line-height: base(1.2); - @include small-break { - font-size: base(0.85); + @include small-break { + font-size: base(0.65); + line-height: 1.25; + } } -} -%h3 { - margin: 0; - font-size: base(1); - line-height: base(1.2); + %h4 { + margin: 0; + font-size: base(0.8); + line-height: base(1); + letter-spacing: -0.375px; + } - @include small-break { + %h5 { + margin: 0; font-size: base(0.65); - line-height: 1.25; + line-height: base(0.8); } -} -%h4 { - margin: 0; - font-size: base(0.8); - line-height: base(1); - letter-spacing: -0.375px; -} - -%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); + } -%h6 { - margin: 0; - font-size: base(0.6); - line-height: base(0.8); -} + %small { + margin: 0; + font-size: 12px; + line-height: 20px; + } -%small { - margin: 0; - font-size: 12px; - line-height: 20px; -} + ///////////////////////////// + // TYPE STYLES + ///////////////////////////// -///////////////////////////// -// TYPE STYLES -///////////////////////////// + %large-body { + font-size: base(0.6); + line-height: base(1); + letter-spacing: base(0.02); -%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 mid-break { - font-size: base(0.7); - line-height: base(1); + @include small-break { + font-size: base(0.55); + line-height: base(0.75); + } } - @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); } -} - -%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); + %code { + font-size: base(0.4); + color: var(--theme-elevation-400); - span { - color: var(--theme-elevation-800); + 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 9b549bc47d9..4eea92bfe31 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; - - ul { - padding-left: calc(var(--base) * 1); - } +@layer payload-default { + .query-inspector { + --string-color: #11b102; + --number-color: #62c3f3; + display: flex; + gap: calc(var(--base) * 2); + align-items: flex-start; - &--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); - } + &__form-fields { + display: flex; + flex-direction: column; + gap: var(--base); + } - &__filter-query-checkboxes { - display: flex; - gap: var(--base); - } + &__label { + color: var(--theme-elevation-400); + } - &__results-wrapper { - font-family: var(--font-mono); - width: 100%; - ul { - margin: 0; + &__filter-query-checkboxes { + display: flex; + gap: var(--base); } - li { - list-style: none; + + &__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; + &__toggle-fullscreen-button-container { + position: sticky; + top: 0; + z-index: 1; - @include mid-break { - display: none; + @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); + &__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; + &__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; + } - .query-inspector__configuration { - position: relative; - width: 100%; - top: 0; - padding-inline-end: var(--gutter-h); + @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 23eb53b7bb3..18d6522c68d 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; - } + &::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; - } + &::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); + 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); + @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; + &::after { + display: block; + } } } } diff --git a/packages/next/src/views/CreateFirstUser/index.scss b/packages/next/src/views/CreateFirstUser/index.scss index 750018a60b8..3b17b5e3f42 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 cbd00878ab5..385dfd38c4f 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; +@layer payload-default { + .dashboard { + width: 100%; + --gap: var(--base); + --cols: 5; - &__wrap { - padding-bottom: var(--spacing-view-bottom); - display: flex; - flex-direction: column; - gap: var(--base); - } + &__wrap { + padding-bottom: var(--spacing-view-bottom); + display: flex; + flex-direction: column; + gap: var(--base); + } - &__group { - display: flex; - flex-direction: column; - gap: var(--gap); - } + &__group { + display: flex; + flex-direction: column; + gap: var(--gap); + } - &__label { - margin: 0; - } + &__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-list { + padding: 0; + margin: 0; + list-style: none; + gap: var(--gap); + display: grid; + grid-template-columns: repeat(var(--cols), 1fr); - .card { - height: 100%; + .card { + height: 100%; + } } - } - &__locked.locked { - align-items: unset; - justify-content: unset; - } + &__locked.locked { + align-items: unset; + justify-content: unset; + } - @include large-break { - --cols: 4; - } + @include large-break { + --cols: 4; + } - @include mid-break { - --gap: var(--base); - --cols: 2; - } + @include mid-break { + --gap: var(--base); + --cols: 2; + } - @include small-break { - --cols: 2; + @include small-break { + --cols: 2; - &__wrap { - gap: var(--base); - } + &__wrap { + gap: var(--base); + } - &__card-list { - gap: base(0.4); + &__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/Edit/Default/Auth/index.scss b/packages/next/src/views/Edit/Default/Auth/index.scss index f94e00fd385..3193be62057 100644 --- a/packages/next/src/views/Edit/Default/Auth/index.scss +++ b/packages/next/src/views/Edit/Default/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; - } + &__controls { + display: flex; + align-items: center; + gap: calc(var(--base) / 2); + flex-wrap: wrap; + } - &__api-key-label { - position: relative; - } + &__changing-password { + display: flex; + flex-direction: column; + gap: var(--base); + } - @include mid-break { - padding: var(--base); - gap: calc(var(--base) / 2); + .btn { + margin: 0; + } - &__changing-password { + &__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); - } + @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); - } + 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); - } + 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); + 100% { + background: var(--theme-elevation-200); + border: 1px solid transparent; + color: var(--theme-elevation-400); + } } -} -.highlight { - animation: highlight 10s; + .highlight { + animation: highlight 10s; + } } diff --git a/packages/next/src/views/Edit/Default/index.scss b/packages/next/src/views/Edit/Default/index.scss index 460bf8c205e..59e2ddafe42 100644 --- a/packages/next/src/views/Edit/Default/index.scss +++ b/packages/next/src/views/Edit/Default/index.scss @@ -1,21 +1,23 @@ @import '../../../scss/styles.scss'; -.collection-edit { - width: 100%; +@layer payload-default { + .collection-edit { + width: 100%; - &__form { - height: 100%; - } - - &__auth { - margin-bottom: base(1.6); - border-radius: var(--style-radius-s); - } + &__form { + height: 100%; + } - @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/next/src/views/List/Default/index.scss b/packages/next/src/views/List/Default/index.scss index 066a70388f9..c7410a637ee 100644 --- a/packages/next/src/views/List/Default/index.scss +++ b/packages/next/src/views/List/Default/index.scss @@ -1,177 +1,179 @@ @import '../../../scss/styles.scss'; -.collection-list { - width: 100%; +@layer payload-default { + .collection-list { + width: 100%; - &__wrap { - padding-bottom: var(--spacing-view-bottom); + &__wrap { + padding-bottom: var(--spacing-view-bottom); - & > *:not(:last-child) { - margin-bottom: var(--base); + & > *:not(:last-child) { + margin-bottom: var(--base); + } } - } - .list-header { - a { - text-decoration: none; - } + .list-header { + a { + text-decoration: none; + } - .btn--withoutPopup, - .btn--withPopup { - position: relative; - margin: 0 0 base(0.2); + .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; - } + &__sub-header { + flex-basis: 100%; + } - #heading-_select, - .cell-_select { - display: flex; - min-width: unset; + .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); + &__no-results { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--base); - & > * { - margin: 0; + & > * { + margin: 0; + } } - } - &__page-controls { - width: 100%; - display: flex; - align-items: center; - } - - .paginator { - margin-bottom: 0; - } + &__page-controls { + width: 100%; + display: flex; + align-items: center; + } - &__page-info { - [dir='ltr'] & { - margin-right: base(1); - margin-left: auto; + .paginator { + margin-bottom: 0; } - [dir='rtl'] & { - margin-left: base(1); - margin-right: auto; + + &__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); + &__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 { + 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; + .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); + &:hover { + background-color: var(--theme-elevation-200); + } } } - } - &__list-selection-actions { - display: flex; - gap: base(0.25); - } + &__list-selection-actions { + display: flex; + gap: base(0.25); + } - &__shimmer { - margin-top: base(1.75); - width: 100%; - > div { - margin-top: 8px; + &__shimmer { + margin-top: base(1.75); + width: 100%; + > div { + margin-top: 8px; + } } - } - @include mid-break { - margin-top: base(0.25); + @include mid-break { + margin-top: base(0.25); - &__wrap { - padding-top: 0; - padding-bottom: 0; - } + &__wrap { + padding-top: 0; + padding-bottom: 0; + } - &__header { - gap: base(0.5); - } + &__header { + gap: base(0.5); + } - &__sub-header { - margin-top: 0; - } + &__sub-header { + margin-top: 0; + } - &__search-input { - margin: 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); + // 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); + } + } - &::after { - content: ''; - height: 1px; - padding-right: var(--gutter-h); + &__page-controls { + flex-wrap: wrap; } - } - &__page-controls { - flex-wrap: wrap; - } + &__page-info { + margin-left: 0; + } - &__page-info { - margin-left: 0; + .paginator { + width: 100%; + margin-bottom: $baseline; + } } - .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/packages/next/src/views/LivePreview/IFrame/index.scss b/packages/next/src/views/LivePreview/IFrame/index.scss index 8d2c97a1e3f..4296d4d3164 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 a93a2c62545..029d7f54289 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%; - } + &__wrapper { + display: flex; + flex-direction: column; + height: 100%; + justify-content: flex-start; + } - &--has-breakpoint { - .live-preview-iframe { - border: 1px solid var(--theme-elevation-100); + &__main { + flex-grow: 1; + height: 100%; + width: 100%; } - .live-preview-window { - &__main { - padding: var(--base); + &--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 ca90b419544..0d7e4359eb4 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); - - &__breakpoint { - border: none; - background: transparent; - height: var(--base); - - &:focus { - outline: none; - } - } - - &__device-size { +@layer payload-default { + .live-preview-toolbar-controls { display: flex; align-items: center; - } + gap: calc(var(--base) / 3); - &__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; - } + &__breakpoint { + border: none; + background: transparent; + height: var(--base); - &__zoom { - width: 55px; - border: none; - background: transparent; - height: var(--base); + &:focus { + outline: none; + } + } - &: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 242fc2b1ea8..0dbd78d6793 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 8dfdf751d8d..957bbbb44b1 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); - } + &--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; - } + &--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; + &__drag-handle { + background: transparent; + border: 0; + padding: 0; + cursor: grab; - .icon--drag-handle .fill { - fill: var(--theme-elevation-300); - } + .icon--drag-handle .fill { + fill: var(--theme-elevation-300); + } - &:active { - cursor: grabbing; + &:active { + cursor: grabbing; + } } } } diff --git a/packages/next/src/views/LivePreview/ToolbarArea/index.scss b/packages/next/src/views/LivePreview/ToolbarArea/index.scss index bbf897ad8e2..7eb3e64e6b3 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.scss b/packages/next/src/views/LivePreview/index.scss index 62113bbe176..2aae4d07da5 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%); +@layer payload-default { + .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; - } + [dir='rtl'] & { + flex-direction: row-reverse; + } - &--popup-open { - .live-preview { - &__edit { - padding-right: var(--gutter-h); + &--popup-open { + .live-preview { + &__edit { + padding-right: var(--gutter-h); + } } } - } - &__main { - width: 40%; - display: flex; - flex-direction: column; - min-height: 100%; - position: relative; + &__main { + width: 40%; + display: flex; + flex-direction: column; + min-height: 100%; + position: relative; - &--popup-open { - width: 100%; - } + &--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; + &::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; + @include mid-break { + flex-direction: column; - &__main { - min-height: initial; - width: 100%; + &__main { + min-height: initial; + width: 100%; - &::after { - display: none; + &::after { + display: none; + } } - } - &__form { - display: block; + &__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 cdd85ab4570..77ba4a0cedc 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 828c7ac97e2..37721af4335 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 21aa20a4e0f..dfdaadb504f 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; + + &__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; + & > * { + margin: 0; + } } } } diff --git a/packages/next/src/views/NotFound/index.scss b/packages/next/src/views/NotFound/index.scss index ebd6c219450..d426819715f 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; +@layer payload-default { + .not-found { + margin-top: var(--base); + display: flex; - & > * { - &:first-child { - margin-top: 0; + & > * { + &:first-child { + margin-top: 0; + } + &:last-child { + margin-bottom: 0; + } } - &:last-child { - margin-bottom: 0; + + &__wrap { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: base(0.8); + max-width: base(36); } - } - &__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); - &__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 2ef1a8c7968..112d55478c8 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 fda11639e67..697c9b9975b 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; - } - - &--margin-top-large { - margin-top: calc(var(--base) * 2); - } + &__button { + margin: 0; + } - @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/Verify/index.scss b/packages/next/src/views/Verify/index.scss index 83481597daa..77b4a8841c0 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 401c0cebb59..4f3cd400eff 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; + &__wrap { + padding-top: calc(var(--base) * 1.5); + display: flex; + flex-direction: column; + gap: var(--base); } - } - &__created-at { - margin: 0; - color: var(--theme-elevation-500); - } + &__header-wrap { + display: flex; + flex-direction: column; + gap: calc(var(--base) / 4); + } - &__controls { - display: flex; - gap: var(--base); + &__header { + display: flex; + align-items: center; + flex-wrap: wrap; - > * { - flex-basis: 100%; + h2 { + margin: 0; + } } - } - - &__restore { - margin: 0 0 0 var(--base); - } - @include mid-break { - &__intro, - &__header { - display: block; + &__created-at { + margin: 0; + color: var(--theme-elevation-500); } &__controls { - flex-direction: column; - gap: calc(var(--base) / 4); + display: flex; + gap: var(--base); + + > * { + flex-basis: 100%; + } } &__restore { - margin: calc(var(--base) * 0.5) 0 0 0; + margin: 0 0 0 var(--base); } - } - @include small-break { - &__wrap { - padding-top: calc(var(--base) / 2); - gap: calc(var(--base) / 2); + @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 beffc17b524..61e50c4cdee 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 f4694eb943d..a795f2a757d 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); - } - [dir='rtl'] & { - padding-right: calc(var(--base) * 0.5); - // border-right: $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); + } } - } - &__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 5765f877953..5e6af605577 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 1d543b42980..57f56a97910 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 926ecf178c2..9d31d6dfa65 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 b9e00dc7554..d0c265402e5 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 372a4651efa..ad5dd5f4cc5 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 4e260973c0b..7dc2909a8dd 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; + display: flex; - .stroke { - stroke-width: 1px; + .popup-button { + display: flex; } - &:hover { - background: var(--theme-elevation-100); + &__chevron { + background-color: var(--theme-elevation-150); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + 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; + &__button { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + margin-right: 2px; - &:focus { - border-radius: 0; - outline-offset: 0; + &:focus { + border-radius: 0; + outline-offset: 0; + } } - } - &__modal { - @include blur-bg; - display: flex; - align-items: center; - justify-content: center; - height: 100%; + &__modal { + @include blur-bg; + display: flex; + align-items: center; + justify-content: center; + height: 100%; - &__toggle { - @extend %btn-reset; + &__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); - } + &__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); + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); - > * { - margin: 0; + > * { + margin: 0; + } } - } - &__controls { - display: flex; - gap: base(0.4); + &__controls { + display: flex; + gap: base(0.4); - .btn { - margin: 0; + .btn { + margin: 0; + } } } } diff --git a/packages/next/src/views/Version/SelectComparison/index.scss b/packages/next/src/views/Version/SelectComparison/index.scss index 8687aabf906..5de71f85762 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 b61b0db84aa..a3ec33aab15 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 d7011b24265..25a146073be 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); - } +@layer payload-default { + .versions { + width: 100%; + margin-bottom: calc(var(--base) * 2); - &__parent-doc { - .banner__content { - display: flex; + &__wrap { + padding-top: 0; + padding-bottom: var(--spacing-view-bottom); + margin-top: calc(var(--base) * 0.75); } - } - &__parent-doc-pills { - [dir='ltr'] & { - margin-left: auto; + &__header { + margin-bottom: var(--base); } - [dir='rtl'] & { - margin-right: auto; + &__no-versions { + margin-top: calc(var(--base) * 1.5); } - } - .table { - table { - width: 100%; - overflow: auto; - } - } - - &__page-controls { - width: 100%; - display: flex; - align-items: center; - } - - .paginator { - margin-bottom: 0; - } - - &__page-info { - [dir='ltr'] & { - margin-right: var(--base); - margin-left: auto; + &__parent-doc { + .banner__content { + display: flex; + } } - [dir='rtl'] & { - margin-left: var(--base); - margin-right: auto; - } - } + &__parent-doc-pills { + [dir='ltr'] & { + margin-left: auto; + } - @include mid-break { - &__wrap { - padding-top: 0; - margin-top: 0; + [dir='rtl'] & { + margin-right: auto; + } } - // 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); + 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/plugin-seo/src/fields/index.scss b/packages/plugin-seo/src/fields/index.scss index bd00870c4e6..0d1a626d6f4 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/richtext-lexical/src/features/blocks/client/component/index.scss b/packages/richtext-lexical/src/features/blocks/client/component/index.scss index 22cd4041440..82f79c66e02 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; -} +@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; + } -.lexical-block { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 2); - @extend %body; + .lexical-block { + display: flex; + flex-direction: column; + gap: calc(var(--base) / 2); + @extend %body; - &__row { - .collapsible__toggle-wrap { - padding-inline-start: base(0.4); + &__row { + .collapsible__toggle-wrap { + padding-inline-start: base(0.4); + } } - } - margin-block: base(0.4); + margin-block: base(0.4); - &__header { - h3 { - margin: 0; + &__header { + h3 { + margin: 0; + } } - } - &__header-wrap { - display: flex; - align-items: flex-end; - width: 100%; - justify-content: space-between; - } + &__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); - } + &__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-no-error { + > .array-field__header .array-field__heading-with-error { + color: var(--theme-text); + } } - } - &--has-error { - > .array-field__header { - color: var(--theme-error-500); + &--has-error { + > .array-field__header { + color: var(--theme-error-500); + } } - } - &__error-pill { - align-self: center; - } + &__error-pill { + align-self: center; + } - &__header-actions { - list-style: none; - margin: 0; - padding: 0; - display: flex; - } + &__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); + &__header-action { + @extend %btn-reset; + cursor: pointer; + margin-left: calc(var(--base) * 0.5); - &:hover, - &:focus-visible { - text-decoration: underline; + &: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); + .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); + &__removeButton.btn { + margin: 0; + &:hover { + background-color: var(--theme-elevation-200); + } } - } - - &__block-header { - pointer-events: none; - } - &__block-header * { - pointer-events: all; - } + &__block-header { + pointer-events: none; + } - &__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; - - & > * { + &__block-header * { pointer-events: all; } - } - &__block-number { - flex-shrink: 0; - } + &__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-pill { - flex-shrink: 0; - display: block; - line-height: unset; - } + &__block-number { + flex-shrink: 0; + } - &__rows { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 2); - } + &__block-pill { + flex-shrink: 0; + display: block; + line-height: unset; + } - &__drawer-toggler { - background-color: transparent; - margin: 0; - padding: 0; - border: none; - align-self: flex-start; + &__rows { + display: flex; + flex-direction: column; + gap: calc(var(--base) / 2); + } - .btn { - color: var(--theme-elevation-400); + &__drawer-toggler { + background-color: transparent; margin: 0; + padding: 0; + border: none; + align-self: flex-start; - &:hover { - color: var(--theme-elevation-800); + .btn { + color: var(--theme-elevation-400); + margin: 0; + + &:hover { + color: var(--theme-elevation-800); + } } } } -} -html[data-theme='light'] { - .blocks-field--has-error { - .section-title__input, - .blocks-field__heading-with-error { - color: var(--theme-error-750); + 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); + 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/componentInline/index.scss b/packages/richtext-lexical/src/features/blocks/client/componentInline/index.scss index d9e88e93b19..8687d849f00 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); - } + .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; + } - &__wrap { - flex-grow: 1; - overflow: hidden; - } + &:hover { + outline: 1px solid var(--theme-elevation-150); + } - &--selected { - background: var(--theme-success-100); - outline: 1px solid var(--theme-success-400); - } + &__wrap { + flex-grow: 1; + overflow: hidden; + } - &__editButton.btn { - margin: 0; - } + &--selected { + background: var(--theme-success-100); + outline: 1px solid var(--theme-success-400); + } - &__editButton { - &:disabled { - color: var(--theme-elevation-300); - pointer-events: none; + &__editButton.btn { + margin: 0; } - } - &__actions { - display: flex; - align-items: center; - flex-shrink: 0; - margin-left: base(0.4); + &__editButton { + &:disabled { + color: var(--theme-elevation-300); + pointer-events: none; + } + } - & > .btn { - width: base(1); - height: base(1); + &__actions { + display: flex; + align-items: center; + flex-shrink: 0; + margin-left: base(0.4); - &:not(:disabled):hover { - background: var(--theme-elevation-100); - } + & > .btn { + width: base(1); + height: base(1); + + &:not(:disabled):hover { + background: var(--theme-elevation-100); + } - & > * { - height: 100%; + & > * { + height: 100%; + } } - } - svg { - width: 16px; - height: 16px; + svg { + width: 16px; + height: 16px; + } } - } - &__removeButton.btn { - margin: 0; + &__removeButton.btn { + margin: 0; - line { - stroke-width: base(0.2); - } + line { + stroke-width: base(0.2); + } - &:disabled { - color: var(--theme-elevation-300); - pointer-events: none; + &: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 65c931d112f..8072b163cc2 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 540089b5051..b06b4308e49 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; + margin: 1px auto 10px auto; + position: relative; + overflow: hidden; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; - &:hover { - text-decoration: underline; + pre { + line-height: 1.1; + background: #222; + color: #fff; + margin: 0; + padding: 10px; + font-size: 12px; + overflow: auto; + max-height: 400px; } - } - .debug-timetravel-button { - border: 0; - padding: 0; - font-size: 12px; - top: 10px; - right: 15px; - position: absolute; - background: none; - color: #fff; + .debug-treetype-button { + border: 0; + padding: 0; + font-size: 12px; + top: 10px; + right: 85px; + position: absolute; + background: none; + color: #fff; - &:hover { - text-decoration: underline; + &:hover { + text-decoration: underline; + } } - } - .debug-timetravel-panel { - overflow: hidden; - padding: 0 0 10px; - margin: auto; - display: flex; - - &-button { - padding: 0; + .debug-timetravel-button { border: 0; + padding: 0; + font-size: 12px; + top: 10px; + right: 15px; + position: absolute; background: none; - flex: 1; color: #fff; - font-size: 12px; &:hover { text-decoration: underline; } } - &-slider { - padding: 0; - flex: 8; + .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 779d0cf4a45..a82b2dfca74 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; -} +@layer payload-default { + .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; + .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); + &:hover { + 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); + 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); + .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); - } + 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%; + .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); + &: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 18c931f8679..b6b73a28ccc 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); +@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; + } } - br::selection { - background: unset; + &__tableRowStriping tr:nth-child(even) { + background-color: var(--theme-elevation-100); } - } - &__tableRowStriping tr:nth-child(even) { - background-color: var(--theme-elevation-100); - } + &__tableSelected { + outline: 2px solid rgb(60, 132, 244); + } - &__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; + } - &__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; + } - &__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; + } - &__tableCellResizer { - position: absolute; - right: -4px; - height: 100%; - width: 8px; - cursor: ew-resize; - z-index: 10; - top: 0; - } + &__tableCellHeader { + background-color: #f2f3f5; + text-align: start; + } - &__tableCellHeader { - background-color: #f2f3f5; - text-align: start; - } + &__tableCellSelected { + background-color: #c9dbf0; + } - &__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; + } - &__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; + } - &__tableCellEditing { - box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); - border-radius: $style-radius-m; - } + &__tableAddColumns { + height: 100%; + } - &__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, - &__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: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); + } - &__tableAddColumns:hover, - &__tableAddRows:hover { - background-color: var(--theme-elevation-200); - } + &__tableAddRows { + width: calc(100% - 25px); + } - &__tableAddRows { - width: calc(100% - 25px); - } + @keyframes table-controls { + 0% { + opacity: 0; + } - @keyframes table-controls { - 0% { - opacity: 0; + 100% { + opacity: 1; + } } - 100% { - opacity: 1; + &__tableCellResizeRuler { + display: block; + position: absolute; + width: 1px; + background-color: rgb(60, 132, 244); + height: 100%; + top: 0; } - } - - &__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; - } + &__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 { + background-color: #eee; + display: block; + border: 0; + border-radius: 20px; + width: 20px; + height: 20px; + color: #222; + cursor: pointer; + } - &__tableCellActionButton:hover { - background-color: #ddd; + &__tableCellActionButton:hover { + background-color: #ddd; + } } -} -html[data-theme='dark'] { - .LexicalEditorTheme { - &__tableCellHeader { - background-color: var(--theme-elevation-50); - } + 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); + &__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 56eb26c892f..72d343d4951 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 7707829a186..e3fa861dfc5 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); + 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); + &:hover { + color: var(--theme-success-850); + } } } - } - 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; + 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); + &: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 f58ad6d1979..a2c6e09d07f 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); - } +@layer payload-default { + .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); - } + &__label { + margin-bottom: calc(var(--base) * 0.25); + } - &__title { - margin: 0; - } + &__title { + margin: 0; + } - &__label, - &__title { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - line-height: 1 !important; - } + &__label, + &__title { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + line-height: 1 !important; + } - &__title { - font-weight: bold; - } + &__title { + font-weight: bold; + } - &__wrap { - flex-grow: 1; - overflow: hidden; - } + &__wrap { + flex-grow: 1; + overflow: hidden; + } - &--selected { - box-shadow: $focus-box-shadow; - outline: none; - } + &--selected { + box-shadow: $focus-box-shadow; + outline: none; + } - &__doc-drawer-toggler { - text-decoration: underline; - pointer-events: all; - line-height: inherit; - & > * { - margin: 0; + &__doc-drawer-toggler { + text-decoration: underline; + pointer-events: all; + line-height: inherit; + & > * { + margin: 0; + } } - } - &__swapButton.btn { - margin: 0; - } + &__swapButton.btn { + margin: 0; + } - &__doc-drawer-toggler, - &__swapButton { - &:disabled { - color: var(--theme-elevation-300); - pointer-events: none; + &__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); + &__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); + & > *:not(:last-child) { + margin-right: calc(var(--base) * 0.25); + } } - } - &__removeButton.btn { - margin: 0; + &__removeButton.btn { + margin: 0; - line { - stroke-width: $style-stroke-width-m; - } + line { + stroke-width: $style-stroke-width-m; + } - &:disabled { - color: var(--theme-elevation-300); - pointer-events: none; + &: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 1b1e133d252..ca911cd01cb 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); - - .toolbar-popup__dropdown-item { - color: var(--theme-elevation-900); - - &:hover:not([disabled]), - &.active { - background: var(--theme-elevation-100); - } - - .icon { - color: var(--theme-elevation-600); +@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); + + &:hover:not([disabled]), + &.active { + background: var(--theme-elevation-100); + } + + .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; - - .icon { - min-width: 20px; - height: 20px; - color: var(--theme-elevation-600); - } + 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 { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 2px; + z-index: 1; + + .icon { + min-width: 20px; + height: 20px; + color: var(--theme-elevation-600); + } - .divider { - width: 1px; - height: 15px; - background-color: var(--theme-elevation-100); - margin: 0 6.25px 0 4.25px; // substract 2px from the gap + .divider { + width: 1px; + height: 15px; + background-color: var(--theme-elevation-100); + margin: 0 6.25px 0 4.25px; // substract 2px from the gap + } } - } - + .editor-container { - > .editor-scroller > .editor { - > .ContentEditable__root { - padding-top: calc(var(--base) * 1.25); + + .editor-container { + > .editor-scroller > .editor { + > .ContentEditable__root { + padding-top: calc(var(--base) * 1.25); + } } - } - > .editor-scroller > .editor > div > .editor-placeholder { - 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; + .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 d65b6187278..6d2f6270edc 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; + 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); - .icon { - min-width: 20px; - height: 20px; - color: var(--theme-elevation-600); + .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); } - .divider { - width: 1px; - height: 15px; - background-color: var(--theme-border-color); - margin: 0 6.25px; + &__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); + 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 a1f7d0b5112..400e0b97d2d 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%; - } + 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); - &__topRow { - display: flex; - } + .btn { + margin: 0; + } - &__thumbnail { - width: calc(var(--base) * 3.25); - height: auto; - position: relative; - overflow: hidden; - flex-shrink: 0; - border-top-left-radius: $style-radius-m; - - img, - svg { - position: absolute; - object-fit: cover; - width: 100%; - height: 100%; - background-color: var(--theme-elevation-800); + &:hover { + border: 1px solid var(--theme-elevation-150); } - } - &__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)}); - } + &__card { + @include soft-shadow-bottom; + display: flex; + flex-direction: column; + width: 100%; + } - &__actions { - display: flex; - align-items: center; - flex-shrink: 0; - margin-left: calc(var(--base) * 0.5); + &__topRow { + display: flex; + } - .lexical-upload__doc-drawer-toggler { - pointer-events: all; + &__thumbnail { + width: calc(var(--base) * 3.25); + height: auto; + position: relative; + overflow: hidden; + flex-shrink: 0; + border-top-left-radius: $style-radius-m; + + img, + svg { + position: absolute; + object-fit: cover; + width: 100%; + height: 100%; + background-color: var(--theme-elevation-800); + } } - & > *:not(:last-child) { - margin-right: calc(var(--base) * 0.25); + &__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)}); } - } - &__removeButton { - margin: 0; + &__actions { + display: flex; + align-items: center; + flex-shrink: 0; + margin-left: calc(var(--base) * 0.5); - line { - stroke-width: $style-stroke-width-m; - } + .lexical-upload__doc-drawer-toggler { + pointer-events: all; + } - &:disabled { - color: var(--theme-elevation-300); - pointer-events: none; + & > *:not(:last-child) { + margin-right: calc(var(--base) * 0.25); + } } - } - &__upload-drawer-toggler { - background-color: transparent; - border: none; - padding: 0; - margin: 0; - outline: none; - line-height: inherit; - } + &__removeButton { + margin: 0; - &__doc-drawer-toggler { - text-decoration: underline; - } + line { + stroke-width: $style-stroke-width-m; + } - &__doc-drawer-toggler, - &__list-drawer-toggler, - &__upload-drawer-toggler { - & > * { + &: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; } - &:disabled { - color: var(--theme-elevation-300); - pointer-events: none; + &__doc-drawer-toggler { + text-decoration: underline; } - } - &__collectionLabel { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } + &__doc-drawer-toggler, + &__list-drawer-toggler, + &__upload-drawer-toggler { + & > * { + margin: 0; + } + + &:disabled { + color: var(--theme-elevation-300); + pointer-events: none; + } + } - &__bottomRow { - padding: calc(var(--base) * 0.5); - border-top: 1px solid var(--theme-elevation-100); - } + &__collectionLabel { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } - h5 { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } + &__bottomRow { + padding: calc(var(--base) * 0.5); + border-top: 1px solid var(--theme-elevation-100); + } - &__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; - } + h5 { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } - &--selected { - box-shadow: $focus-box-shadow; - outline: none; - } + &__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; + } - @include small-break { - &__topRowRightPanel { - padding: calc(var(--base) * 0.75) calc(var(--base) * 0.5); + &--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 37ecb681911..418b7327111 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; - } +@layer payload-default { + .rich-text-lexical { + & > .field-error.tooltip { + right: auto; + position: static; + margin-bottom: 0.2em; + max-width: fit-content; + } - .errorBoundary { - pre { - text-wrap: unset; + .errorBoundary { + pre { + text-wrap: unset; + } } - } - &__wrap { - width: 100%; - position: relative; - } + &__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); + &--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 236af14a255..1c327a66921 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; - } +@layer payload-default { + .rich-text-lexical { + .editor { + position: relative; + } + + .editor-container { + 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; + 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 + &--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; } - } - &: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; - .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; + /* 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 6d52a40717c..3a6d43fbaa7 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); +@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.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 { + padding-bottom: 8px; + } - &__group-title { - padding-left: 10px; - color: var(--theme-elevation-600); - font-size: 10px; - } + &__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; + &__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); - } + &--selected { + background: var(--theme-elevation-100); + } - &-text { - margin-left: 6px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } + &-text { + margin-left: 6px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } - .icon { - color: var(--theme-elevation-500); - min-width: fit-content; + .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); + 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 c887d027089..42905de0e40 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 de36b179bd9..00e71dcd2f4 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); } - } - .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); + } + } } - 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; } -} - -.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; + /* 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; + .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 b0fe93378b0..b15aca50839 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; - } + &__rtl { + text-align: right; + } - &__paragraph { - font-size: base(0.8); - margin-bottom: 0.55em; - position: relative; - line-height: 1.5; - letter-spacing: normal; - } + &__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); - } + // 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); - } + &__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; - } + &__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; - } + &__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; - } + &__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; - } + &__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; - } + &__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; - } + &__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; - } + &__indent { + --lexical-indent-base-value: 40px; + } - &__textBold { - font-weight: bold; - } + &__textBold { + font-weight: bold; + } - &__textItalic { - font-style: italic; - } + &__textItalic { + font-style: italic; + } - &__textUnderline { - text-decoration: underline; - } + &__textUnderline { + text-decoration: underline; + } - &__textStrikethrough { - text-decoration: line-through; - } + &__textStrikethrough { + text-decoration: line-through; + } - &__textUnderlineStrikethrough { - text-decoration: underline line-through; - } + &__textUnderlineStrikethrough { + text-decoration: underline line-through; + } - &__textSubscript { - font-size: 0.8em; - vertical-align: sub !important; - } + &__textSubscript { + font-size: 0.8em; + vertical-align: sub !important; + } - &__textSuperscript { - font-size: 0.8em; - vertical-align: super; - } + &__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; - } + &__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); - } + &__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; - } + .ContentEditable__root &__link { + pointer-events: none; + } - &__link { - color: var(--theme-success-750); - text-decoration: none; - border-bottom: 1px dotted; - } + &__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 { + /*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; - } + &__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; - } + &__characterLimit { + display: inline; + background-color: #ffbbbb !important; + } - &__ol1 { - padding: 0; - list-style-position: outside; - margin: base(0.4) 0 base(0.8); - } + &__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; - } + &__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; - } + &__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; - } + &__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; - } + &__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 { + padding: 0; + margin: base(0.4) 0 base(0.8); + list-style-position: outside; + } - &__ul ul { - margin: 0; - } + &__ul ul { + margin: 0; + } - &__listItem { - font-size: base(0.8); - margin: 0 0 0.4em 40px; - } + &__listItem { + font-size: base(0.8); + margin: 0 0 0.4em 40px; + } - &__listItem[dir='rtl'] { - margin: 0 40px 0.4em 0; - } + &__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; - } + &__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; - } + // 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; - } + &__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: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[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: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; - } + &__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: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; - } + &__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 { + list-style-type: none; + } - &__nestedListItem:before, - &__nestedListItem:after { - display: none; - } + &__nestedListItem:before, + &__nestedListItem:after { + display: none; + } - &__tokenComment { - color: slategray; - } + &__tokenComment { + color: slategray; + } - &__tokenPunctuation { - color: #999; - } + &__tokenPunctuation { + color: #999; + } - &__tokenProperty { - color: #905; - } + &__tokenProperty { + color: #905; + } - &__tokenSelector { - color: #690; - } + &__tokenSelector { + color: #690; + } - &__tokenOperator { - color: #9a6e3a; - } + &__tokenOperator { + color: #9a6e3a; + } - &__tokenAttr { - color: #07a; - } + &__tokenAttr { + color: #07a; + } - &__tokenVariable { - color: #e90; - } + &__tokenVariable { + color: #e90; + } - &__tokenFunction { - color: #dd4a68; - } + &__tokenFunction { + color: #dd4a68; + } - &__mark { - background: rgba(255, 212, 0, 0.14); - border-bottom: 2px solid rgba(255, 212, 0, 0.3); - padding-bottom: 2px; - } + &__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); - } + &__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); - } + &__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); - } + &__markOverlap.selected { + background: rgba(255, 212, 0, 0.7); + border-bottom: 2px solid rgba(255, 212, 0, 0.7); + } - &__embedBlock { - user-select: none; - } + &__embedBlock { + user-select: none; + } - &__embedBlockFocus { - outline: 2px solid rgb(60, 132, 244); - } + &__embedBlockFocus { + outline: 2px solid rgb(60, 132, 244); + } - .ContentEditable__root { - &:first-child { - margin-top: 0; + .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 bea0e4eb3ce..0ab945b2572 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; - } +@layer payload-default { + .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); - & > * { - transition: transform 0.2s ease-in-out; - // will-change: transform; // breaks cursor rendering for empty paragraph blocks in safari, and creates other issues - } -} + &:focus-visible { + outline: none !important; + } -@media (max-width: 768px) { - .ContentEditable__root { - padding-left: 0; - padding-right: 0; + & > * { + transition: transform 0.2s ease-in-out; + // will-change: transform; // breaks cursor rendering for empty paragraph blocks in safari, and creates other issues + } } -} -@media (min-width: 769px) { - .rich-text-lexical--show-gutter - > .rich-text-lexical__wrap - > .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); + @media (max-width: 768px) { + .ContentEditable__root { + padding-left: 0; + padding-right: 0; } } -} -html[data-theme='light'] { - .rich-text-lexical.rich-text-lexical--show-gutter { - &.error:not(:hover) { + @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='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); + 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 90254443b00..f253d986b39 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); - - --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; - } -} +@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; -///////////////////////////// -// GLOBAL STYLES -///////////////////////////// + --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); + } -* { - box-sizing: border-box; -} + @include small-break { + --gutter-h: #{base(0.8)}; + --spacing-view-bottom: calc(var(--base) * 2); + --nav-width: 100vw; + } + } -html { - @extend %body; - background: var(--theme-bg); - -webkit-font-smoothing: antialiased; + ///////////////////////////// + // GLOBAL STYLES + ///////////////////////////// - &[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; + * { + box-sizing: border-box; + } - ::selection { - color: var(--color-base-1000); + 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; + + ::selection { + color: var(--color-base-1000); + } + + ::-moz-selection { + color: var(--color-base-1000); + } } - ::-moz-selection { - color: var(--color-base-1000); + @include mid-break { + font-size: 12px; } } - @include mid-break { - font-size: 12px; + html, + body, + #app { + height: 100%; } -} -html, -body, -#app { - height: 100%; -} + 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; + } -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; -} + ::selection { + background: var(--color-success-250); + color: var(--theme-base-800); + } -::selection { - background: var(--color-success-250); - color: var(--theme-base-800); -} + ::-moz-selection { + background: var(--color-success-250); + color: var(--theme-base-800); + } -::-moz-selection { - background: var(--color-success-250); - color: var(--theme-base-800); -} + img { + max-width: 100%; + height: auto; + display: block; + } -img { - max-width: 100%; - height: auto; - display: block; -} + h1 { + @extend %h1; + } -h1 { - @extend %h1; -} + h2 { + @extend %h2; + } -h2 { - @extend %h2; -} + h3 { + @extend %h3; + } -h3 { - @extend %h3; -} + h4 { + @extend %h4; + } -h4 { - @extend %h4; -} + h5 { + @extend %h5; + } -h5 { - @extend %h5; -} + h6 { + @extend %h6; + } -h6 { - @extend %h6; -} + p { + margin: 0; + } -p { - margin: 0; -} + ul, + ol { + padding-left: $baseline; + margin: 0; + } -ul, -ol { - padding-left: $baseline; - margin: 0; -} + :focus-visible { + outline: var(--accessibility-outline); + } -:focus-visible { - outline: var(--accessibility-outline); -} + a { + color: currentColor; -a { - color: currentColor; + &:focus { + &:not(:focus-visible) { + opacity: 0.8; + } + outline: none; + } - &:focus { - &:not(:focus-visible) { - opacity: 0.8; + &:active { + opacity: 0.7; + outline: none; } - outline: none; } - &:active { - opacity: 0.7; - outline: none; + svg { + vertical-align: middle; } -} -svg { - vertical-align: middle; -} + dialog { + width: 100%; + border: 0; + padding: 0; + color: currentColor; + } -dialog { - width: 100%; - border: 0; - padding: 0; - color: currentColor; -} + .payload__modal-item { + min-height: 100%; + background: transparent; + } -.payload__modal-item { - min-height: 100%; - background: transparent; -} + .payload__modal-container--enterDone { + overflow: auto; + } -.payload__modal-container--enterDone { - overflow: auto; -} + .payload__modal-item--enter, + .payload__modal-item--enterDone { + z-index: var(--z-modal); + } -.payload__modal-item--enter, -.payload__modal-item--enterDone { - z-index: var(--z-modal); + // @import '~payload-user-css'; TODO: re-enable this } - -// @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 42cea058596..1eaa88cb0a9 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); -} + --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); + 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-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-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-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-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 eeda892c2df..e73efa9c003 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 a5bf4c35fd7..3c915f78888 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'; +@layer payload-default { + .Toastify { + .Toastify__toast-container { + left: base(5); + transform: none; + right: base(5); + width: auto; + } -.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__toast { + padding: base(0.5); + border-radius: $style-radius-m; + font-weight: 600; + } - .Toastify__close-button { - align-self: center; - opacity: 0.7; + .Toastify__close-button { + align-self: center; + opacity: 0.7; - &:hover { - opacity: 1; + &:hover { + opacity: 1; + } } - } - .Toastify__toast--success { - color: var(--color-success-900); - background: var(--color-success-500); + .Toastify__toast--success { + color: var(--color-success-900); + background: var(--color-success-500); - .Toastify__progress-bar { - background-color: var(--color-success-900); + .Toastify__progress-bar { + background-color: var(--color-success-900); + } } - } - .Toastify__close-button--success { - 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__toast--error { + background: var(--theme-error-500); + color: #fff; - .Toastify__progress-bar { - background-color: #fff; + .Toastify__progress-bar { + background-color: #fff; + } } - } - .Toastify__close-button--light { - color: inherit; - } + .Toastify__close-button--light { + color: inherit; + } - @include mid-break { - .Toastify__toast-container { - left: $baseline; - right: $baseline; + @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 116845ac341..4d3b0bc3782 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; - - .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); - } +@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; + + 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; + [dir='RTL'] & { + right: unset; + left: 0.5rem; + } } - } - .toast-title { - line-height: base(1); - margin-right: base(1); - } + .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); + .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); - &[data-front='false'] { .toast-content { - opacity: 0; + transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19); + width: 100%; } - } - &[data-expanded='true'] { - .toast-content { - opacity: 1; + &[data-front='false'] { + .toast-content { + opacity: 0; + } } - } - .toast-icon { - width: base(0.8); - height: base(0.8); - margin: 0; - display: flex; - align-items: center; - justify-content: center; + &[data-expanded='true'] { + .toast-content { + opacity: 1; + } + } - & > * { - width: base(1.2); - height: base(1.2); + .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); + &.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); + .payload-toast-close-button { + color: var(--theme-warning-600); - &:hover { - color: var(--theme-warning-250); + &: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); + &.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); + .payload-toast-close-button { + color: var(--theme-error-600); - &:hover { - color: var(--theme-error-250); + &: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); + &.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); + .payload-toast-close-button { + color: var(--theme-success-600); - &:hover { - color: var(--theme-success-250); + &: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); + &.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); + .payload-toast-close-button { + color: var(--theme-elevation-600); - &:hover { - color: var(--theme-elevation-250); + &: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 997e43e24a3..9fe3e34be52 100644 --- a/packages/richtext-lexical/src/scss/type.scss +++ b/packages/richtext-lexical/src/scss/type.scss @@ -4,106 +4,107 @@ ///////////////////////////// // HEADINGS ///////////////////////////// +@layer payload-default { + %h1, + %h2, + %h3, + %h4, + %h5, + %h6 { + font-family: var(--font-body); + font-weight: 500; + } -%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); + } + } -%h1 { - margin: 0; - font-size: base(1.6); - line-height: base(1.8); + %h2 { + margin: 0; + font-size: base(1.3); + line-height: base(1.6); - @include small-break { - letter-spacing: -0.5px; - font-size: base(1.25); + @include small-break { + font-size: base(0.85); + } } -} -%h2 { - margin: 0; - font-size: base(1.3); - line-height: base(1.6); + %h3 { + margin: 0; + font-size: base(1); + line-height: base(1.2); - @include small-break { - font-size: base(0.85); + @include small-break { + font-size: base(0.65); + line-height: 1.25; + } } -} -%h3 { - margin: 0; - font-size: base(1); - line-height: base(1.2); + %h4 { + margin: 0; + font-size: base(0.8); + line-height: base(1); + letter-spacing: -0.375px; + } - @include small-break { + %h5 { + margin: 0; font-size: base(0.65); - line-height: 1.25; + line-height: base(0.8); } -} -%h4 { - margin: 0; - font-size: base(0.8); - line-height: base(1); - letter-spacing: -0.375px; -} - -%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); + } -%h6 { - margin: 0; - font-size: base(0.6); - line-height: base(0.8); -} + %small { + margin: 0; + font-size: 12px; + line-height: 20px; + } -%small { - margin: 0; - font-size: 12px; - line-height: 20px; -} + ///////////////////////////// + // TYPE STYLES + ///////////////////////////// -///////////////////////////// -// TYPE STYLES -///////////////////////////// + %large-body { + font-size: base(0.6); + line-height: base(1); + letter-spacing: base(0.02); -%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 mid-break { - font-size: base(0.7); - line-height: base(1); + @include small-break { + font-size: base(0.55); + line-height: base(0.75); + } } - @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); } -} - -%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); + %code { + font-size: base(0.4); + color: var(--theme-elevation-400); - span { - color: var(--theme-elevation-800); + span { + color: var(--theme-elevation-800); + } } } diff --git a/packages/richtext-slate/src/field/buttons.scss b/packages/richtext-slate/src/field/buttons.scss index b02de5ce4cf..6e529983fc7 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/icons/IndentLeft/index.scss b/packages/richtext-slate/src/field/icons/IndentLeft/index.scss index 62b0f7fe8ad..28cf55c34b0 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 f5984269c58..3110ed8cfa1 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 088b8c26561..2eff6818c13 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 efa651886b9..417693f2b83 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 33742f91d1e..1b3147d6c18 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 51ec4eb07f0..f5247cd819b 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'; +@layer payload-default { + .rich-text { + margin-bottom: base(2); + display: flex; + flex-direction: column; + isolation: isolate; -.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 { + @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; - &__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); + &: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; + &__editor { + font-family: var(--font-serif); + font-size: base(0.8); line-height: 1.5; - letter-spacing: normal; - } - h1, - h2, - h3, - h4, - h5, - h6 { - font-weight: 700; - letter-spacing: normal; - } + *[data-slate-node='element'] { + margin-top: 0.75em; + position: relative; + line-height: 1.5; + 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; - } + h1, + h2, + h3, + h4, + h5, + h6 { + font-weight: 700; + 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; - } + h1[data-slate-node='element'] { + font-size: base(1.4); + margin-block: 0.5em 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; - } + h2[data-slate-node='element'] { + font-size: base(1.25); + margin-block: 0.55em 0.4em; + line-height: base(1.2); + 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; + 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); + } } - h5[data-slate-node='element'] { - font-size: base(0.9); - margin-block: 0.7em 0.4em; - line-height: base(1.5); - letter-spacing: normal; + &--gutter { + .rich-text__editor { + padding-left: $baseline; + border-left: 1px solid var(--theme-elevation-100); + } } - h6[data-slate-node='element'] { - font-size: base(0.8); - margin-block: 0.75em 0.4em; - line-height: base(1.5); + &__input { + min-height: base(10); } - } - &--gutter { - .rich-text__editor { - padding-left: $baseline; - border-left: 1px solid var(--theme-elevation-100); + &__wrap { + width: 100%; + position: relative; } - } - &__input { - min-height: base(10); - } + &__wrapper { + width: 100%; + } - &__wrap { - width: 100%; - position: relative; - } + &--read-only { + .rich-text__editor { + background: var(--theme-elevation-200); + color: var(--theme-elevation-450); + padding: base(0.5); - &__wrapper { - width: 100%; - } + .popup button { + display: none; + } + } - &--read-only { - .rich-text__editor { - background: var(--theme-elevation-200); - color: var(--theme-elevation-450); - padding: base(0.5); + .rich-text__toolbar { + pointer-events: none; + position: relative; + top: 0; - .popup button { - display: none; + &::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; + } } } - .rich-text__toolbar { - pointer-events: none; - position: relative; - top: 0; + &__button { + @extend %btn-reset; + padding: base(0.25); - &::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; + svg { + @include color-svg(var(--theme-elevation-800)); + width: base(0.75); + height: base(0.75); } - } - } - &__button { - @extend %btn-reset; - padding: base(0.25); + &:hover { + background-color: var(--theme-elevation-100); + } - svg { - @include color-svg(var(--theme-elevation-800)); - width: base(0.75); - height: base(0.75); + &__button--active, + &__button--active:hover { + background-color: var(--theme-elevation-150); + } } - &:hover { - background-color: var(--theme-elevation-100); + &__drawerIsOpen { + top: base(1); } - &__button--active, - &__button--active:hover { - background-color: var(--theme-elevation-150); - } - } - - &__drawerIsOpen { - top: base(1); - } - - @include mid-break { - &__toolbar { - top: base(3); - } + @include mid-break { + &__toolbar { + top: base(3); + } - &__drawerIsOpen { - top: base(1); + &__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='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='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 90254443b00..b59af595d36 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); + + --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; -: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; - - --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 -///////////////////////////// + --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); + } -* { - box-sizing: border-box; -} + @include small-break { + --gutter-h: #{base(0.8)}; + --spacing-view-bottom: calc(var(--base) * 2); + --nav-width: 100vw; + } + } -html { - @extend %body; - background: var(--theme-bg); - -webkit-font-smoothing: antialiased; + ///////////////////////////// + // GLOBAL STYLES + ///////////////////////////// - &[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; + * { + box-sizing: border-box; + } - ::selection { - color: var(--color-base-1000); + 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; + + ::selection { + color: var(--color-base-1000); + } + + ::-moz-selection { + color: var(--color-base-1000); + } } - ::-moz-selection { - color: var(--color-base-1000); + @include mid-break { + font-size: 12px; } } - @include mid-break { - font-size: 12px; + html, + body, + #app { + height: 100%; } -} -html, -body, -#app { - height: 100%; -} + 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; + } -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; -} + ::selection { + background: var(--color-success-250); + color: var(--theme-base-800); + } -::selection { - background: var(--color-success-250); - color: var(--theme-base-800); -} + ::-moz-selection { + background: var(--color-success-250); + color: var(--theme-base-800); + } -::-moz-selection { - background: var(--color-success-250); - color: var(--theme-base-800); -} + img { + max-width: 100%; + height: auto; + display: block; + } -img { - max-width: 100%; - height: auto; - display: block; -} + h1 { + @extend %h1; + } -h1 { - @extend %h1; -} + h2 { + @extend %h2; + } -h2 { - @extend %h2; -} + h3 { + @extend %h3; + } -h3 { - @extend %h3; -} + h4 { + @extend %h4; + } -h4 { - @extend %h4; -} + h5 { + @extend %h5; + } -h5 { - @extend %h5; -} + h6 { + @extend %h6; + } -h6 { - @extend %h6; -} + p { + margin: 0; + } -p { - margin: 0; -} + ul, + ol { + padding-left: $baseline; + margin: 0; + } -ul, -ol { - padding-left: $baseline; - margin: 0; -} + :focus-visible { + outline: var(--accessibility-outline); + } -:focus-visible { - outline: var(--accessibility-outline); -} + a { + color: currentColor; -a { - color: currentColor; + &:focus { + &:not(:focus-visible) { + opacity: 0.8; + } + outline: none; + } - &:focus { - &:not(:focus-visible) { - opacity: 0.8; + &:active { + opacity: 0.7; + outline: none; } - outline: none; } - &:active { - opacity: 0.7; - outline: none; + svg { + vertical-align: middle; } -} -svg { - vertical-align: middle; -} + dialog { + width: 100%; + border: 0; + padding: 0; + color: currentColor; + } -dialog { - width: 100%; - border: 0; - padding: 0; - color: currentColor; -} + .payload__modal-item { + min-height: 100%; + background: transparent; + } -.payload__modal-item { - min-height: 100%; - background: transparent; -} + .payload__modal-container--enterDone { + overflow: auto; + } -.payload__modal-container--enterDone { - overflow: auto; -} + .payload__modal-item--enter, + .payload__modal-item--enterDone { + z-index: var(--z-modal); + } -.payload__modal-item--enter, -.payload__modal-item--enterDone { - z-index: var(--z-modal); + // @import '~payload-user-css'; TODO: re-enable this } - -// @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 42cea058596..1eaa88cb0a9 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); -} + --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); + 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-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-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-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-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 eeda892c2df..e73efa9c003 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 a5bf4c35fd7..3c915f78888 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'; +@layer payload-default { + .Toastify { + .Toastify__toast-container { + left: base(5); + transform: none; + right: base(5); + width: auto; + } -.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__toast { + padding: base(0.5); + border-radius: $style-radius-m; + font-weight: 600; + } - .Toastify__close-button { - align-self: center; - opacity: 0.7; + .Toastify__close-button { + align-self: center; + opacity: 0.7; - &:hover { - opacity: 1; + &:hover { + opacity: 1; + } } - } - .Toastify__toast--success { - color: var(--color-success-900); - background: var(--color-success-500); + .Toastify__toast--success { + color: var(--color-success-900); + background: var(--color-success-500); - .Toastify__progress-bar { - background-color: var(--color-success-900); + .Toastify__progress-bar { + background-color: var(--color-success-900); + } } - } - .Toastify__close-button--success { - 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__toast--error { + background: var(--theme-error-500); + color: #fff; - .Toastify__progress-bar { - background-color: #fff; + .Toastify__progress-bar { + background-color: #fff; + } } - } - .Toastify__close-button--light { - color: inherit; - } + .Toastify__close-button--light { + color: inherit; + } - @include mid-break { - .Toastify__toast-container { - left: $baseline; - right: $baseline; + @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 116845ac341..d40a51c4dfb 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-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); + } -.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; - - 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; + } } - [dir='RTL'] & { - right: unset; - left: 0.5rem; + .toast-title { + line-height: base(1); + margin-right: base(1); } - } - - .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); + .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); - &[data-front='false'] { .toast-content { - opacity: 0; + transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19); + width: 100%; } - } - &[data-expanded='true'] { - .toast-content { - opacity: 1; + &[data-front='false'] { + .toast-content { + opacity: 0; + } } - } - .toast-icon { - width: base(0.8); - height: base(0.8); - margin: 0; - display: flex; - align-items: center; - justify-content: center; + &[data-expanded='true'] { + .toast-content { + opacity: 1; + } + } - & > * { - width: base(1.2); - height: base(1.2); + .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); + &.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); + .payload-toast-close-button { + color: var(--theme-warning-600); - &:hover { - color: var(--theme-warning-250); + &: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); + &.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); + .payload-toast-close-button { + color: var(--theme-error-600); - &:hover { - color: var(--theme-error-250); + &: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); + &.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); + .payload-toast-close-button { + color: var(--theme-success-600); - &:hover { - color: var(--theme-success-250); + &: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); + &.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); + .payload-toast-close-button { + color: var(--theme-elevation-600); - &:hover { - color: var(--theme-elevation-250); + &: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 997e43e24a3..9fe3e34be52 100644 --- a/packages/richtext-slate/src/scss/type.scss +++ b/packages/richtext-slate/src/scss/type.scss @@ -4,106 +4,107 @@ ///////////////////////////// // HEADINGS ///////////////////////////// +@layer payload-default { + %h1, + %h2, + %h3, + %h4, + %h5, + %h6 { + font-family: var(--font-body); + font-weight: 500; + } -%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); + } + } -%h1 { - margin: 0; - font-size: base(1.6); - line-height: base(1.8); + %h2 { + margin: 0; + font-size: base(1.3); + line-height: base(1.6); - @include small-break { - letter-spacing: -0.5px; - font-size: base(1.25); + @include small-break { + font-size: base(0.85); + } } -} -%h2 { - margin: 0; - font-size: base(1.3); - line-height: base(1.6); + %h3 { + margin: 0; + font-size: base(1); + line-height: base(1.2); - @include small-break { - font-size: base(0.85); + @include small-break { + font-size: base(0.65); + line-height: 1.25; + } } -} -%h3 { - margin: 0; - font-size: base(1); - line-height: base(1.2); + %h4 { + margin: 0; + font-size: base(0.8); + line-height: base(1); + letter-spacing: -0.375px; + } - @include small-break { + %h5 { + margin: 0; font-size: base(0.65); - line-height: 1.25; + line-height: base(0.8); } -} -%h4 { - margin: 0; - font-size: base(0.8); - line-height: base(1); - letter-spacing: -0.375px; -} - -%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); + } -%h6 { - margin: 0; - font-size: base(0.6); - line-height: base(0.8); -} + %small { + margin: 0; + font-size: 12px; + line-height: 20px; + } -%small { - margin: 0; - font-size: 12px; - line-height: 20px; -} + ///////////////////////////// + // TYPE STYLES + ///////////////////////////// -///////////////////////////// -// TYPE STYLES -///////////////////////////// + %large-body { + font-size: base(0.6); + line-height: base(1); + letter-spacing: base(0.02); -%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 mid-break { - font-size: base(0.7); - line-height: base(1); + @include small-break { + font-size: base(0.55); + line-height: base(0.75); + } } - @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); } -} - -%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); + %code { + font-size: base(0.4); + color: var(--theme-elevation-400); - span { - color: var(--theme-elevation-800); + span { + color: var(--theme-elevation-800); + } } } diff --git a/packages/ui/src/elements/AddNewRelation/index.scss b/packages/ui/src/elements/AddNewRelation/index.scss index c22d4b26ba6..d2d699c0827 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 4be3584bf26..22150e8e1fd 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; +@layer payload-default { + .app-header { + position: relative; width: 100%; - height: 100%; - pointer-events: none; - } + height: var(--app-header-height); + z-index: var(--z-modal); - &--show-bg { - opacity: 1; - } + &__mobile-nav-toggler { + display: none; + } - &__content { - display: flex; - align-items: center; - height: 100%; - padding: 0 var(--gutter-h); - position: relative; - flex-grow: 1; - } + // 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); + } - &__wrapper { - display: flex; - gap: calc(var(--base) / 2); - align-items: center; - height: 100%; - flex-grow: 1; - justify-content: space-between; - width: 100%; - } + &__localizer-spacing { + visibility: hidden; + } - &__account { - position: relative; + &__bg { + opacity: 0; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; + } - &:focus:not(:focus-visible) { + &--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%; } - } - &__controls-wrapper { - display: flex; - align-items: center; - flex-grow: 1; - overflow: hidden; - width: 100%; - } + &__account { + position: relative; - &__step-nav-wrapper { - flex-grow: 0; - overflow: auto; - display: flex; - width: 100%; + &:focus:not(:focus-visible) { + opacity: 1; + } - &::-webkit-scrollbar { - display: none; + // 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; + } + } } - } - &__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)); - } + &__controls-wrapper { + display: flex; + align-items: center; + flex-grow: 1; + overflow: hidden; + width: 100%; + } - &__actions { - display: flex; - align-items: center; - gap: calc(var(--base) / 2); - flex-shrink: 0; - max-width: 600px; - overflow: auto; - white-space: nowrap; + &__step-nav-wrapper { + flex-grow: 0; + overflow: auto; + display: flex; + width: 100%; - &::-webkit-scrollbar { - display: none; + &::-webkit-scrollbar { + display: none; + } } - } - - &__last-action { - margin-right: var(--base); - } - @include large-break { - &__actions { - max-width: 500px; + &__actions-wrapper { + position: relative; + overflow: hidden; + display: flex; + align-items: center; + gap: calc(var(--base) / 2); + margin-right: var(--base); } - } - @include mid-break { &__gradient-placeholder { - right: var(--base); + position: absolute; + top: 0; + right: 0; + width: var(--base); + height: var(--base); + background: linear-gradient(to right, transparent, var(--theme-bg)); } &__actions { - max-width: 300px; - margin-right: var(--base); + 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; + } } - } - @include small-break { - &__localizer.localizer { - right: base(2); + &__last-action { + margin-right: var(--base); } - &--nav-open { - .app-header__localizer { - display: none; + @include large-break { + &__actions { + max-width: 500px; } } - &__mobile-nav-toggler { - display: flex; - align-items: center; + @include mid-break { + &__gradient-placeholder { + right: var(--base); + } - &.nav-toggler--is-open { - opacity: 0.5; + &__actions { + max-width: 300px; + margin-right: var(--base); } } - &__step-header { - // TODO: overflow the step header instead of hide it - display: none; - } + @include small-break { + &__localizer.localizer { + right: base(2); + } - &__gradient-placeholder { - right: 0; - } + &--nav-open { + .app-header__localizer { + display: none; + } + } - &__actions { - max-width: 150px; - margin-right: 0; + &__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 57d1fff245c..10b8e3b0754 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 b51a57d1bf5..bd769aa4c6f 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 5e1a9a3262d..c4707759892 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; + &--has-action { + cursor: pointer; + text-decoration: none; } - } - &--type-default { - &.button--has-action { - &:hover { - background: var(--theme-elevation-900); - } + &--has-icon { + display: flex; - &:active { - background: var(--theme-elevation-950); + svg { + display: block; } } - } - &--type-error { - background: var(--theme-error-100); - color: var(--theme-error-600); + &--type-default { + &.button--has-action { + &:hover { + background: var(--theme-elevation-900); + } - svg { - @include color-svg(var(--theme-error-600)); + &:active { + background: var(--theme-elevation-950); + } + } } - &.button--has-action { - &:hover { - background: var(--theme-error-200); + &--type-error { + background: var(--theme-error-100); + color: var(--theme-error-600); + + svg { + @include color-svg(var(--theme-error-600)); } - &:active { - background: var(--theme-error-300); + &.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); + &--type-success { + background: var(--theme-success-100); + color: var(--theme-success-600); - &.button--has-action { - &:hover { - background: var(--theme-success-200); - } + &.button--has-action { + &:hover { + background: var(--theme-success-200); + } - &:active { - 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 6ea0e24d311..5f09ceb7c25 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; - } + &__navigation { + display: flex; + gap: var(--base); + align-items: center; + width: 100%; + } - &__controls { - display: flex; - gap: calc(var(--base) / 2); + &__locationText { + font-variant-numeric: tabular-nums; + margin: 0; + } - .btn { - background-color: var(--theme-elevation-100); - width: calc(var(--base) * 1.2); - height: calc(var(--base) * 1.2); + &__controls { + display: flex; + gap: calc(var(--base) / 2); - &:hover { - background-color: var(--theme-elevation-200); - } + .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; + &__label { + display: flex; + } } } - } - - &__buttons { - display: flex; - gap: var(--base); - margin-left: auto; - } - @include mid-break { - &__navigation { - justify-content: space-between; + &__buttons { + display: flex; + gap: var(--base); + margin-left: auto; } - &__saveButtons { - display: none; + + @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 d953c728b76..afb4bde4f79 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 { - margin: 0; + &__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 c7e3428e1a1..8612ab94147 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 993de8845b7..3b088ecfbe8 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 943eb5ae174..a1cab90a7bc 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/FileSidebar/index.scss b/packages/ui/src/elements/BulkUpload/FileSidebar/index.scss index b17a358c909..f4147d1825f 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; + width: 300px; + overflow: auto; + max-height: 100%; - .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); + &__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; - .shimmer-effect { - border-radius: var(--style-radius-m); + p { + margin: 0; + } } - } - &__fileRowContainer { - --rowPadding: calc(var(--base) / 4); - position: relative; - &:last-child { - margin-bottom: calc(var(--base) / 4); + &__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); } - } - &__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); + &__header__text { + display: flex; + flex-direction: column; + + .error-pill { + align-self: flex-start; + } } - .thumbnail { - width: base(1.2); - height: base(1.2); - flex-shrink: 0; - object-fit: cover; - border-radius: var(--style-radius-s); + &__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); + } } - p { - margin: 0; + &__fileRowContainer { + --rowPadding: calc(var(--base) / 4); + position: relative; + &:last-child { + margin-bottom: calc(var(--base) / 4); + } } - } - &__fileDetails { - display: flex; - flex-direction: column; - min-width: 0; - } + &__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%; - &__fileRowContainer--active { - .file-selections__fileRow { - background-color: var(--theme-elevation-100); - } + &:hover { + background-color: var(--theme-elevation-100); + } - .file-selections__remove { - .icon--x { - opacity: 1; + .thumbnail { + width: base(1.2); + height: base(1.2); + flex-shrink: 0; + object-fit: cover; + border-radius: var(--style-radius-s); } - } - } - &__fileRowContainer--error { - .file-selections__fileRow { - background-color: var(--theme-error-100); + p { + margin: 0; + } } - &.file-selections__fileRowContainer--active .file-selections__fileRow, - .file-selections__fileRow:hover { - background-color: var(--theme-error-200); + &__fileDetails { + display: flex; + flex-direction: column; + min-width: 0; } - .file-selections__remove--overlay:hover { - background-color: var(--theme-error-50); + &__fileRowContainer--active { + .file-selections__fileRow { + background-color: var(--theme-elevation-100); + } - .icon--x { - opacity: 1; + .file-selections__remove { + .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; - } + &__fileRowContainer--error { + .file-selections__fileRow { + background-color: var(--theme-error-100); + } - &__fileSize { - font-size: calc(var(--base) / 2); - color: var(--theme-elvation-400); - flex-shrink: 0; - } + &.file-selections__fileRowContainer--active .file-selections__fileRow, + .file-selections__fileRow:hover { + background-color: var(--theme-error-200); + } - &__remove { - @include btn-reset; - margin: 0; - margin-left: auto; + .file-selections__remove--overlay:hover { + background-color: var(--theme-error-50); - .icon--x { - opacity: 0.75; + .icon--x { + opacity: 1; + } + } } - } - &__remove--underlay { - pointer-events: none; - opacity: 0; - } + &__errorCount { + margin-left: auto; + position: absolute; + transform: translate(50%, -50%); + top: 0; + right: 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); + &__fileName { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } - } - &__header__actions { - display: flex; - gap: var(--base); - } + &__fileSize { + font-size: calc(var(--base) / 2); + color: var(--theme-elvation-400); + flex-shrink: 0; + } - &__toggler { - display: none; - margin: 0; - padding-block: 0; - } + &__remove { + @include btn-reset; + margin: 0; + margin-left: auto; - &__header__mobileDocActions { - display: none; - } + .icon--x { + opacity: 0.75; + } + } - &__animateWrapper { - overflow: auto; - } + &__remove--underlay { + pointer-events: none; + opacity: 0; + } - &__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); - } + &__remove--overlay { + position: absolute; + transform: translateY(-50%); + top: 50%; + bottom: 50%; + right: var(--rowPadding); + height: 20px; + border-radius: var(--style-radius-m); + cursor: pointer; - &__showingFiles { - .file-selections__mobileBlur { - opacity: 1; + &:hover { + background-color: var(--theme-elevation-200); + } } - } - @include mid-break { - --file-gutter-h: var(--gutter-h); - flex-direction: column-reverse; - width: 100%; - position: sticky; - bottom: 0; - flex-shrink: 0; + &__header__actions { + display: flex; + gap: var(--base); + } - &__showingFiles { - z-index: 2; + &__toggler { + display: none; + margin: 0; + padding-block: 0; } - &__filesContainer { - @include blur-bg; + &__header__mobileDocActions { + display: none; } - &__fileRowContainer { - z-index: 1; + &__animateWrapper { + overflow: auto; } - &__header { - margin-top: 0; + &__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); } - &__headerTopRow { - border-top: 1px solid var(--theme-border-color); - padding-block: calc(var(--base) * 0.8); + &__showingFiles { + .file-selections__mobileBlur { + opacity: 1; + } } - &__header__mobileDocActions { - position: relative; - display: flex; + @include mid-break { + --file-gutter-h: var(--gutter-h); + flex-direction: column-reverse; width: 100%; - padding-block: calc(var(--base) * 0.8); - padding-inline: var(--file-gutter-h); - border-top: 1px solid var(--theme-border-color); + position: sticky; + bottom: 0; + flex-shrink: 0; - > div { + &__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; - justify-content: flex-end; width: 100%; - button { - flex: 0.5; + 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; - } + &__toggler { + padding-right: 0; + display: block; + } - .btn { - margin: 0; + .btn { + margin: 0; + } } } } diff --git a/packages/ui/src/elements/BulkUpload/Header/index.scss b/packages/ui/src/elements/BulkUpload/Header/index.scss index 088a336fbe3..6fe512d7de1 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 ccaa749ade1..e9fc454020d 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; -} - -.btn--withPopup { - margin-block: 24px; - .btn { - margin: 0; +@layer payload-default { + a.btn { + display: inline-block; } -} - -.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--withPopup { + margin-block: 24px; + .btn { + margin: 0; } } - &--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); + .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); + } } - } - &--style-pill { - --bg-color: var(--theme-elevation-150); - --color: var(--theme-elevation-800); - --hover-color: var(--color); - --hover-bg: var(--theme-elevation-100); + &--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); + } + } - &.btn--disabled { - --color: var(--theme-elevation-600); - --hover-bg: var(--bg-color); + &--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--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; + + &:hover, + &:focus-visible, + &:focus, + &:active { + background-color: var(--hover-bg); + color: var(--hover-color); + box-shadow: var(--hover-box-shadow); + } + } + } + .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; - } - &--has-tooltip { - position: relative; - } + &__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; + + .icon { + width: 100%; + height: 100%; + } - &--icon-style-without-border { - .btn__icon { - border: none; + &.btn--size-small { + padding: base(0.2); + } } - } - &--icon-style-none { - .btn__icon { - border: none; + &--withPopup { + display: flex; } - } - &--size-small { - padding: 0 base(0.4); - - &.btn--icon-position-left { - padding-inline-start: base(0.1); - padding-inline-end: base(0.4); + &--has-tooltip { + position: relative; + } - .btn__content { - flex-direction: row-reverse; + &--icon-style-without-border { + .btn__icon { + border: none; } } - &.btn--icon-position-right { - padding-inline-start: base(0.4); - padding-inline-end: base(0.1); + &--icon-style-none { + .btn__icon { + border: none; + } } - } - &--size-medium { - padding: base(0.2) base(0.6); + &--size-small { + padding: 0 base(0.4); - &.btn--icon-position-left { - padding-inline-start: base(0.4); - padding-inline-end: base(0.6); + &.btn--icon-position-left { + padding-inline-start: base(0.1); + padding-inline-end: base(0.4); - .btn__content { - gap: base(0.2); - flex-direction: row-reverse; + .btn__content { + flex-direction: row-reverse; + } + } + + &.btn--icon-position-right { + padding-inline-start: base(0.4); + padding-inline-end: base(0.1); } } - &.btn--icon-position-right { - padding-inline-start: base(0.6); - padding-inline-end: base(0.4); + &--size-medium { + padding: base(0.2) base(0.6); - .btn__content { - gap: base(0.2); + &.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); + &--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--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__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; } - &.btn--icon-position-right { - padding-inline-start: base(0.8); - padding-inline-end: base(0.6); + &--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; } - } - &--style-none { - padding: 0; - } + &:focus:not(:focus-visible) { + .btn__icon { + @include color-svg(var(--theme-elevation-800)); + background: var(--theme-elevation-150); + } - &:focus:not(:focus-visible) { - .btn__icon { - @include color-svg(var(--theme-elevation-800)); - background: var(--theme-elevation-150); + outline: none; } - outline: none; - } - - &:active { - .btn__icon { - @include color-svg(var(--theme-elevation-0)); - background: var(--theme-elevation-700); + &:active { + .btn__icon { + @include color-svg(var(--theme-elevation-0)); + background: var(--theme-elevation-700); + } } - } - &:focus-visible { - outline: var(--accessibility-outline); - outline-offset: var(--accessibility-outline-offset); - } + &:focus-visible { + outline: var(--accessibility-outline); + outline-offset: var(--accessibility-outline-offset); + } - &.btn--disabled { - cursor: not-allowed; + &.btn--disabled { + cursor: not-allowed; + } } } diff --git a/packages/ui/src/elements/Card/index.scss b/packages/ui/src/elements/Card/index.scss index bd24f6c4f25..a5229618554 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; + } + + .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; + &: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 854d72635fd..f6cb6c42669 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 d5d2e76bb8a..d826c408246 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)}; - - 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); - } +@layer payload-default { + .collapsible { + --toggle-pad-h: #{base(0.75)}; + --toggle-pad-v: #{base(0.6)}; + + 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); + &: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); + &__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%; + } + } - icon { + &__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; - &__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; + span { + user-select: none; + } } - } - &--style-default { - border: 1px solid var(--theme-elevation-200); - &:hover { - border: 1px solid var(--theme-elevation-300); - } + &--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); + > .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); + &--style-error { + border: 1px solid var(--theme-error-400); + > .collapsible__toggle-wrap { + background-color: var(--theme-error-100); - &:hover { - background: var(--theme-error-150); - } + &:hover { + background: var(--theme-error-150); + } - .row-label { - color: var(--theme-error-950); + .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 { + 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); - } + &__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; + &--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-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); + &__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); + &.icon { + padding: base(0.1); + } } - } - &__indicator { - display: flex; - align-items: center; - justify-content: center; - width: base(1.2); - height: base(1.2); + &__indicator { + display: flex; + align-items: center; + justify-content: center; + width: base(1.2); + height: base(1.2); - &.icon { - padding: base(0.1); + &.icon { + padding: base(0.1); + } } - } - - &__content { - 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); + 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 deb0e9619bc..a194d629e5f 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); - - &__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; - - &:hover { - background-color: var(--theme-elevation-100); +@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-selector__column { + cursor: pointer; + + &: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 b4a24f13a69..439a6b565da 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 4174567616a..a3dd2d90b08 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; - } - - &__icon-wrap { - position: relative; - z-index: 1; - } - - .icon--calendar, - &__clear-button { - position: absolute; - } - - .icon--calendar, - .icon--x { - @include color-svg(var(--theme-elevation-800)); - height: auto; - } - - &__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--x { - width: base(1); - } - - &__clear-button { - appearance: none; - background-color: transparent; - border: none; - outline: none; - padding: 0; - cursor: pointer; - } - &__appearance--timeOnly { - .react-datepicker { - width: 100%; - - &__month-container, - &__navigation--previous, - &__navigation--next { - display: none; - visibility: hidden; - } - - &-popper, - &__time-container, - &__time-box { - width: base(6); - } - - &__time-container { - .react-datepicker__time { - .react-datepicker__time-box { - width: 100%; - } - } - } + .date-time-picker { + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box, + .react-datepicker__time-container { + width: 120px; } - } - .react-datepicker-wrapper { - display: block; - } + &__icon-wrap { + position: relative; + z-index: 1; + } - .react-datepicker-wrapper, - .react-datepicker__input-container { - width: 100%; - } + .icon--calendar, + &__clear-button { + position: absolute; + } - .react-datepicker__input-container input { - @include formInput; - padding-right: calc(#{base(0.75)} + #{$cal-icon-width}); - } + .icon--calendar, + .icon--x { + @include color-svg(var(--theme-elevation-800)); + height: auto; + } - &--has-error { - .react-datepicker__input-container input { - background-color: var(--theme-error-200); + &__clear-button { + top: base(0.5); + right: base(2); } - } - .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); - - &__header { - padding-top: 0; - text-transform: none; - text-align: center; - border-radius: 0; - border: none; - background-color: var(--theme-input-bg); + .icon--calendar { + top: base(0.625); + right: base(0.75); + width: $cal-icon-width; + pointer-events: none; + } - &--time { - padding: 10px 0; - border-bottom: 1px solid var(--theme-elevation-150); - font-weight: 600; - } + .icon--x { + width: base(1); } - &__navigation { - background: none; - line-height: 1.7rem; - text-align: center; - cursor: pointer; - position: absolute; - top: 10px; - width: 0; + &__clear-button { + appearance: none; + background-color: transparent; + border: none; + outline: none; padding: 0; - border: 0.45rem solid transparent; - z-index: 1; - height: 10px; - width: 10px; - text-indent: -999em; - overflow: hidden; - top: 15px; + cursor: pointer; + } - &--next { - border-left-color: var(--theme-elevation-400); + &__appearance--timeOnly { + .react-datepicker { + width: 100%; - &:focus { - border-left-color: var(--theme-elevation-500); - outline: none; + &__month-container, + &__navigation--previous, + &__navigation--next { + display: none; + visibility: hidden; } - } - &--previous { - border-right-color: var(--theme-elevation-400); + &-popper, + &__time-container, + &__time-box { + width: base(6); + } - &:focus { - border-right-color: var(--theme-elevation-500); - outline: none; + &__time-container { + .react-datepicker__time { + .react-datepicker__time-box { + width: 100%; + } + } } } } - &__current-month, - &__header, - &-year-header, - &__day-name, - &__day, - &__time-name, - &-time__header { - color: var(--theme-elevation-1000); + .react-datepicker-wrapper { + display: block; } - &__current-month { - display: none; + .react-datepicker-wrapper, + .react-datepicker__input-container { + width: 100%; } - &__header__dropdown, - &-year-header { - padding: 10px 0; - font-weight: bold; + .react-datepicker__input-container input { + @include formInput; + padding-right: calc(#{base(0.75)} + #{$cal-icon-width}); } - &__month-container { - border-right: 1px solid var(--theme-elevation-150); + &--has-error { + .react-datepicker__input-container input { + background-color: var(--theme-error-200); + } } - &__time, - &__time-container, - .react-datepicker__time-container .react-datepicker__time { - background: none; - } + .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); + + &__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; + } + } - &__time-container { - border-left: none; - } + &__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; + } + } - &__month-text { - padding: base(0.3); - margin: base(0.15); - font-size: base(0.55); - &:hover { - background: var(--theme-elevation-100); - } - } + &--previous { + border-right-color: var(--theme-elevation-400); - &__month-select, - &__year-select { - min-width: 70px; - border: none; - background: none; - outline: none; - cursor: pointer; + &:focus { + border-right-color: var(--theme-elevation-500); + outline: none; + } + } + } - option { - background-color: var(--theme-elevation-50); + &__current-month, + &__header, + &-year-header, + &__day-name, + &__day, + &__time-name, + &-time__header { + color: var(--theme-elevation-1000); } - } - &__day-names { - background-color: var(--theme-elevation-100); - } + &__current-month { + display: none; + } - &__day { - box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-150); - font-size: base(0.55); + &__header__dropdown, + &-year-header { + padding: 10px 0; + font-weight: bold; + } - &:hover { - background: var(--theme-elevation-100); + &__month-container { + border-right: 1px solid var(--theme-elevation-150); } - &:focus { - outline: 0; - background: var(--theme-elevation-400); + &__time, + &__time-container, + .react-datepicker__time-container .react-datepicker__time { + background: none; } - &--selected { - font-weight: bold; + &__time-container { + border-left: none; + } - &:focus { - background-color: var(--theme-elevation-150); + &__month-text { + padding: base(0.3); + margin: base(0.15); + font-size: base(0.55); + &:hover { + background: var(--theme-elevation-100); } } - &--keyboard-selected { - color: var(--theme-elevation-0); - font-weight: bold; + &__month-select, + &__year-select { + min-width: 70px; + border: none; + background: none; + outline: none; + cursor: pointer; - &: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); + option { + background-color: var(--theme-elevation-50); } } - &--today { - font-weight: bold; + &__day-names { + background-color: var(--theme-elevation-100); } - } - - &__day, - &__day-name { - width: base(1.5); - margin: base(0.15); - line-height: base(1.25); - } - } - .react-datepicker-popper { - z-index: 10; - border: none; - } + &__day { + box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-150); + font-size: base(0.55); - .react-datepicker__time-container - .react-datepicker__time - .react-datepicker__time-box - ul.react-datepicker__time-list { - max-height: 100%; - } + &:hover { + background: var(--theme-elevation-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; - } + &:focus { + outline: 0; + background: var(--theme-elevation-400); + } - .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; - } + &--selected { + font-weight: bold; - .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); - } + &:focus { + background-color: var(--theme-elevation-150); + } + } - .react-datepicker__day:hover, - .react-datepicker__month-text:hover { - border-radius: 0; - } + &--keyboard-selected { + color: var(--theme-elevation-0); + font-weight: bold; - .react-datepicker__navigation--next--with-time:not( - .react-datepicker__navigation--next--with-today-button - ) { - right: 130px; - } + &: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); + } + } - .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); - } + &--today { + font-weight: bold; + } + } - &__appearance--dayOnly, - &__appearance--monthOnly { - .react-datepicker { - &__month-container { - border-right: none; + &__day, + &__day-name { + width: base(1.5); + margin: base(0.15); + line-height: base(1.25); } } - } - @include small-break { - .react-datepicker { - flex-direction: column; + .react-datepicker-popper { + z-index: 10; + border: none; } - .react-datepicker__month-container { - border-right: 0; + + .react-datepicker__time-container + .react-datepicker__time + .react-datepicker__time-box + ul.react-datepicker__time-list { + max-height: 100%; } - .react-datepicker__time-container { - width: auto; + + .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__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 + 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 { - height: 120px; - width: unset; - > ul { - height: 120px; - } + + .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; + } + + .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); } - &__input-wrapper { - .icon { - top: calc(50% - #{base(0.25)}); + + &__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 8458f5305b4..621028b2bb5 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%; +@layer payload-default { + .delete-document { + @include blur-bg; + display: flex; + align-items: center; + justify-content: center; + height: 100%; - &__toggle { - @extend %btn-reset; - } + &__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); - } + &__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); + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); - > * { - margin: 0; + > * { + margin: 0; + } } - } - &__controls { - display: flex; - gap: base(0.4); + &__controls { + display: flex; + gap: base(0.4); - .btn { - margin: 0; + .btn { + margin: 0; + } } } } diff --git a/packages/ui/src/elements/DeleteMany/index.scss b/packages/ui/src/elements/DeleteMany/index.scss index c7c92727844..2dbdd1c517f 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); + &__wrapper { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + gap: base(0.8); + padding: base(2); + max-width: base(36); + } - > * { - margin: 0; + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); + + > * { + margin: 0; + } } - } - &__controls { - display: flex; - gap: base(0.4); + &__controls { + display: flex; + gap: base(0.4); - .btn { - margin: 0; + .btn { + margin: 0; + } } } } diff --git a/packages/ui/src/elements/DocumentControls/index.scss b/packages/ui/src/elements/DocumentControls/index.scss index 4e7ae3833bb..3794d922466 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; + &__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); + } - .tooltip { - top: calc(var(--base) * -0.5); + &__content { + display: flex; + align-items: center; + flex-grow: 1; + overflow: hidden; + padding: base(0.8) 0; } - } - &__list-item { - display: flex; - align-items: center; - margin: 0; - } + &__meta { + flex-grow: 1; + display: flex; + list-style: none; + padding: 0; + gap: var(--base); + margin: 0; + width: 100%; - &__value-wrap { - overflow: hidden; - } + & button { + margin: 0; + } + } - &__value { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - margin: 0; - font-weight: 600; - line-height: base(1.2); - } + &__locked-controls.locked { + position: unset; - &__label { - color: var(--theme-elevation-500); - white-space: nowrap; - margin: 0; - } + .tooltip { + top: calc(var(--base) * -0.5); + } + } - &__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; - } + &__list-item { + display: flex; + align-items: center; + margin: 0; + } - &__controls { - display: flex; - align-items: center; - margin: 0; - gap: calc(var(--base) / 2); + &__value-wrap { + overflow: hidden; + } - button { - margin: 0; + &__value { + overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; + margin: 0; + font-weight: 600; + line-height: base(1.2); } - } - &__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); + &__label { + color: var(--theme-elevation-500); + white-space: nowrap; + margin: 0; + } - &:hover { - border: 1px solid var(--theme-elevation-500); - background-color: var(--theme-elevation-100); + &__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; } - > div { - width: 3px; - height: 3px; - border-radius: 100%; - background-color: currentColor; + &__controls { + display: flex; + align-items: center; + margin: 0; + gap: calc(var(--base) / 2); + + button { + margin: 0; + white-space: nowrap; + } } - } - &__popup { - position: relative; - } + &__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); - .popup--active { - .doc-controls { - &__dots { + &:hover { 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; + > div { + width: 3px; + height: 3px; + border-radius: 100%; + background-color: currentColor; + } + } - &__wrapper { - flex-direction: column; - gap: 0; - height: unset; + &__popup { + position: relative; } - &__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; + .popup--active { + .doc-controls { + &__dots { + border: 1px solid var(--theme-elevation-500); + background-color: var(--theme-elevation-100); + } } } - &__meta { - width: auto; - gap: calc(var(--base) / 2); + .popup__trigger-wrap { + display: flex; + } - &::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; + @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; } - } - &__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); - } + &__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; + } + } - &__controls { - padding-left: var(--gutter-h); - overflow: auto; + &__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; + } + } - // 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; + &__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); } - &::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; + &__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); + @include small-break { + &__content { + padding-inline: base(0.8); + } } } } diff --git a/packages/ui/src/elements/DocumentDrawer/index.scss b/packages/ui/src/elements/DocumentDrawer/index.scss index a02a0ac7bf1..864b9c4c3f2 100644 --- a/packages/ui/src/elements/DocumentDrawer/index.scss +++ b/packages/ui/src/elements/DocumentDrawer/index.scss @@ -1,71 +1,73 @@ @import '../../scss/styles.scss'; -.doc-drawer { - &__header { - width: 100%; - margin-top: base(2.5); - display: flex; - flex-direction: column; - gap: base(0.5); - align-items: flex-start; - } +@layer payload-default { + .doc-drawer { + &__header { + width: 100%; + margin-top: base(2.5); + display: flex; + flex-direction: column; + gap: base(0.5); + align-items: flex-start; + } - &__header-content { - display: flex; - justify-content: space-between; - align-items: flex-start; - width: 100%; - } + &__header-content { + display: flex; + justify-content: space-between; + align-items: flex-start; + width: 100%; + } - &__header-text { - margin: 0; - } + &__header-text { + margin: 0; + } - &__toggler { - background: transparent; - border: 0; - margin: 0; - padding: 0; - cursor: pointer; - color: inherit; + &__toggler { + background: transparent; + border: 0; + margin: 0; + padding: 0; + cursor: pointer; + color: inherit; - &:focus, - &:focus-within { - outline: none; - } + &:focus, + &:focus-within { + outline: none; + } - &:disabled { - pointer-events: none; + &:disabled { + pointer-events: none; + } } - } - - &__header-close { - border: 0; - background-color: transparent; - padding: 0; - cursor: pointer; - overflow: hidden; - width: base(2); - height: base(2); - svg { + &__header-close { + border: 0; + background-color: transparent; + padding: 0; + cursor: pointer; + overflow: hidden; width: base(2); height: base(2); - position: relative; - .stroke { - stroke-width: 2px; - vector-effect: non-scaling-stroke; + svg { + width: base(2); + height: base(2); + position: relative; + + .stroke { + stroke-width: 2px; + vector-effect: non-scaling-stroke; + } } } - } - @include mid-break { - &__header { - margin-top: base(1.5); - margin-bottom: base(0.5); - padding-left: var(--gutter-h); - padding-right: var(--gutter-h); + @include mid-break { + &__header { + margin-top: base(1.5); + margin-bottom: base(0.5); + padding-left: var(--gutter-h); + padding-right: var(--gutter-h); + } } } } diff --git a/packages/ui/src/elements/DocumentFields/index.scss b/packages/ui/src/elements/DocumentFields/index.scss index 5ff812254b0..35cdfb9a3d8 100644 --- a/packages/ui/src/elements/DocumentFields/index.scss +++ b/packages/ui/src/elements/DocumentFields/index.scss @@ -1,91 +1,147 @@ @import '../../scss/styles.scss'; -.document-fields { - width: 100%; - display: flex; - --doc-sidebar-width: 325px; - - &--has-sidebar { - .document-fields { - &__main { - width: 66.66%; - } +@layer payload-default { + .document-fields { + width: 100%; + display: flex; + --doc-sidebar-width: 325px; - &__edit { - [dir='ltr'] & { - top: 0; - right: 0; - border-right: 1px solid var(--theme-elevation-100); - padding-right: calc(var(--base) * 2); + &--has-sidebar { + .document-fields { + &__main { + width: 66.66%; } - [dir='rtl'] & { - top: 0; - left: 0; - border-left: 1px solid var(--theme-elevation-100); - padding-left: calc(var(--base) * 2); + &__edit { + [dir='ltr'] & { + top: 0; + right: 0; + border-right: 1px solid var(--theme-elevation-100); + padding-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); + &__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-right: var(--gutter-h); padding-bottom: 0; - } - } - } - - @include mid-break { - display: block; + gap: base(0.5); - &--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); - } + [dir='ltr'] & { + padding-right: var(--gutter-h); } - &__fields { - & > .tabs-field, - & > .group-field { - margin-right: calc(var(--gutter-h) * -1); - } + [dir='rtl'] & { + padding-left: var(--gutter-h); } } - } - - &__main { - width: 100%; - min-height: initial; - } - - &__sidebar-wrap { - position: static; - width: 100%; - height: initial; - border-left: 0; - } - &__form { - display: block; + &__sidebar { + padding-bottom: base(3.5); + overflow: visible; + } } - &__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); + @include small-break { + &__sidebar-wrap { + min-width: initial; + width: 100%; } - [dir='rtl'] & { - padding-left: var(--gutter-h); + &__edit { + padding-top: calc(var(--base) / 2); } } - - &__sidebar { - padding-bottom: base(3.5); - overflow: visible; - } - } - - @include small-break { - &__sidebar-wrap { - min-width: initial; - width: 100%; - } - - &__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 e95855fd988..ea3b5ce247b 100644 --- a/packages/ui/src/elements/Drawer/index.scss +++ b/packages/ui/src/elements/Drawer/index.scss @@ -2,138 +2,140 @@ $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)); +@layer payload-default { + .drawer { + display: flex; 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; - } + 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 { - transform: translateX(0); - } + &__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); } - } - &__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; + &__content-children { + position: relative; + z-index: 1; + overflow: auto; + height: 100%; } - } - &__header { - display: flex; - align-items: center; - margin-top: base(2.5); - margin-bottom: base(1); - width: 100%; + &--is-open { + .drawer { + &__content, + &__blur-bg { + opacity: 1; + } - &__title { - margin: 0; - flex-grow: 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); - - position: relative; + &__title { + margin: 0; + flex-grow: 1; + } - .stroke { - stroke-width: 1px; - vector-effect: non-scaling-stroke; + &__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); + + 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); + @include mid-break { + &__header { + margin-top: base(1.5); + } } } -} -html[data-theme='dark'] { - .drawer { - &__close { - background: var(--color-base-1000); - } + html[data-theme='dark'] { + .drawer { + &__close { + background: var(--color-base-1000); + } - &--is-open { - .drawer__close { - opacity: 0.25; + &--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 6a1ef6d90d5..9ad40b205d0 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); + + .btn { + margin: 0; + display: flex; + justify-content: center; + align-items: center; + } - &.dragging { - border-color: var(--theme-success-500); - background: var(--theme-success-150); - @include shadow-m; + &.dragging { + border-color: var(--theme-success-500); + background: var(--theme-success-150); + @include shadow-m; - * { - pointer-events: none; + * { + pointer-events: none; + } } - } - @include mid-break { - display: block; - text-align: center; - } + @include mid-break { + display: block; + text-align: center; + } - &.dropzoneStyle--none { - all: unset; + &.dropzoneStyle--none { + all: unset; + } } } diff --git a/packages/ui/src/elements/DuplicateDocument/index.scss b/packages/ui/src/elements/DuplicateDocument/index.scss index dd584a53af0..ca14d13470e 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%; - } +@layer payload-default { + .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); - } + &__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); + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); - > * { - margin: 0; + > * { + margin: 0; + } } - } - &__controls { - display: flex; - gap: base(0.4); + &__controls { + display: flex; + gap: base(0.4); - .btn { - margin: 0; + .btn { + margin: 0; + } } } } diff --git a/packages/ui/src/elements/EditMany/index.scss b/packages/ui/src/elements/EditMany/index.scss index 3fb212f2472..25a1c104410 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); - } +@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; + text-overflow: ellipsis; + border: 0; + padding: 0 base(0.4); + align-items: center; + cursor: pointer; + text-decoration: none; - &:active { - background: var(--theme-elevation-100); - } - } + &:active, + &:focus { + outline: none; + } - &__form { - height: 100%; - } + &:hover { + background: var(--theme-elevation-100); + } - &__main { - width: calc(100% - #{base(15)}); - display: flex; - flex-direction: column; - min-height: 100%; - } + &:active { + background: var(--theme-elevation-100); + } + } - &__header { - display: flex; - margin-top: base(2.5); - margin-bottom: base(1); - width: 100%; + &__form { + height: 100%; + } - &__title { - margin: 0; - flex-grow: 1; + &__main { + width: calc(100% - #{base(15)}); + display: flex; + flex-direction: column; + min-height: 100%; } - &__close { - border: 0; - background-color: transparent; - padding: 0; - cursor: pointer; - overflow: hidden; - width: base(1); - height: base(1); + &__header { + display: flex; + margin-top: base(2.5); + margin-bottom: base(1); + width: 100%; - svg { - width: base(2); - height: base(2); - position: relative; - inset-inline-start: base(-0.5); - top: base(-0.5); + &__title { + margin: 0; + flex-grow: 1; + } - .stroke { - stroke-width: 2px; - vector-effect: non-scaling-stroke; + &__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: 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); + &__edit { + padding-top: base(1); + padding-bottom: base(2); + flex-grow: 1; } - [dir='rtl'] & { - padding-right: base(1.5); + [dir='rtl'] &__sidebar-wrap { + left: 0; + border-right: 1px solid var(--theme-elevation-100); + right: auto; } - } - &__document-actions { - padding-right: $baseline; - position: sticky; - top: 0; - z-index: var(--z-nav); + &__sidebar-wrap { + position: fixed; + width: base(15); + height: 100%; + top: 0; + right: 0; + overflow: visible; + border-left: 1px solid var(--theme-elevation-100); + } - > * { - position: relative; - z-index: 1; + &__sidebar { + width: 100%; + height: 100%; + overflow-y: auto; } - @include mid-break { - @include blur-bg; + &__sidebar-sticky-wrap { + display: flex; + flex-direction: column; + min-height: 100%; } - } - &__document-actions { - display: flex; - flex-wrap: wrap; - padding: base(1); - gap: base(0.5); + &__collection-actions, + &__meta, + &__sidebar-fields { + [dir='ltr'] & { + padding-left: base(1.5); + } + [dir='rtl'] & { + padding-right: base(1.5); + } + } - .form-submit { - width: calc(50% - #{base(1)}); + &__document-actions { + padding-right: $baseline; + position: sticky; + top: 0; + z-index: var(--z-nav); - @include mid-break { - width: auto; - flex-grow: 1; + > * { + position: relative; + z-index: 1; } - .btn { - width: 100%; - padding-left: base(0.5); - padding-right: base(0.5); - margin-bottom: 0; + @include mid-break { + @include blur-bg; } } - } - @include mid-break { - &__main { - width: 100%; - min-height: initial; - } + &__document-actions { + display: flex; + flex-wrap: wrap; + padding: base(1); + gap: base(0.5); - &__sidebar-wrap { - position: static; - width: 100%; - height: initial; - } + .form-submit { + width: calc(50% - #{base(1)}); - &__form { - display: block; - } + @include mid-break { + width: auto; + flex-grow: 1; + } - &__edit { - padding-top: 0; - padding-bottom: 0; + .btn { + width: 100%; + padding-left: base(0.5); + padding-right: base(0.5); + margin-bottom: 0; + } + } } - &__document-actions { - position: fixed; - bottom: 0; - left: 0; - right: 0; - top: auto; - z-index: var(--z-nav); - } + @include mid-break { + &__main { + width: 100%; + min-height: initial; + } - &__document-actions, - &__sidebar-fields { - padding-left: var(--gutter-h); - padding-right: var(--gutter-h); + &__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/EditUpload/index.scss b/packages/ui/src/elements/EditUpload/index.scss index 6ad21e3cad1..d887b82cf1b 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; +@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%; + 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; - } + [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; - } + &__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})); - } + &__toolWrap { + display: flex; + justify-content: flex-end; + height: (calc(100% - #{$header-height})); + } - .ReactCrop__selection-addon, - &__crop-window { - height: 100%; - width: 100%; - } + .ReactCrop__selection-addon, + &__crop-window { + height: 100%; + width: 100%; + } - &__focal-wrapper { - position: relative; - display: inline-flex; - max-height: 100%; - } + &__focal-wrapper { + position: relative; + display: inline-flex; + max-height: 100%; + } - &__draggable-container { - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 0; - pointer-events: none; + &__draggable-container { + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + pointer-events: none; - &--dragging { - pointer-events: all; + &--dragging { + pointer-events: all; - .edit-upload__focalPoint { - cursor: grabbing; + .edit-upload__focalPoint { + cursor: grabbing; + } } } - } - - &__draggable { - @include btn-reset; - position: absolute; - } - &__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; - - svg { + &__draggable { + @include btn-reset; 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; } - } - &__crop, - &__focalOnly { - padding: base(1.5) base(1.5) base(1.5) 0; - width: 100%; - display: flex; - justify-content: center; - } + &__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; - &__crop { - padding: var(--edit-upload-cell-spacing); - padding-left: var(--gutter-h); - display: flex; - align-items: flex-start; - height: 100%; - } + 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; + } + } - &__imageWrap { - position: relative; - } + &__crop, + &__focalOnly { + padding: base(1.5) base(1.5) base(1.5) 0; + width: 100%; + display: flex; + justify-content: center; + } - &__point { - cursor: move; - position: absolute; - background: rgba(0, 0, 0, 0.5); - border-radius: 100%; + &__crop { + padding: var(--edit-upload-cell-spacing); + padding-left: var(--gutter-h); + display: flex; + align-items: flex-start; + height: 100%; + } - & svg { - width: base(2); - height: base(2); + &__imageWrap { + position: relative; } - } - &__sidebar { - border-left: 1px solid var(--theme-elevation-150); - padding-top: var(--edit-upload-cell-spacing); - min-width: var(--edit-upload-sidebar-width); + &__point { + cursor: move; + position: absolute; + background: rgba(0, 0, 0, 0.5); + border-radius: 100%; - & > div:first-child { - margin-bottom: base(1); + & svg { + width: base(2); + height: base(2); + } } - } - - &__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 { + &__sidebar { + border-left: 1px solid var(--theme-elevation-150); padding-top: var(--edit-upload-cell-spacing); - margin-top: var(--edit-upload-cell-spacing); - border-top: 1px solid var(--theme-elevation-150); + min-width: var(--edit-upload-sidebar-width); + + & > div:first-child { + margin-bottom: base(1); + } } - } - &__inputsWrap, - &__titleWrap { - display: flex; - gap: 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%; - &__titleWrap { - justify-content: space-between; - align-items: center; + + .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); + } + } - & h3 { - margin: 0; + &__inputsWrap, + &__titleWrap { + display: flex; + gap: base(1); } - } - &__reset { - height: fit-content; - border-radius: var(--style-radius-s); - background-color: var(--theme-elevation-150); - padding: 0 base(0.4); - } + &__titleWrap { + justify-content: space-between; + align-items: center; - &__input { - flex: 1; - & input { - @include formInput; + & h3 { + margin: 0; + } } - } - @include mid-break { - --edit-upload-cell-spacing: var(--gutter-h); - &__sidebar { - padding-left: 0; - border-left: 0; - width: 100%; + &__reset { + height: fit-content; + border-radius: var(--style-radius-s); + background-color: var(--theme-elevation-150); + padding: 0 base(0.4); } - &__toolWrap { - flex-direction: column-reverse; - } - } - @include small-break { - flex-direction: column; + &__input { + flex: 1; + & input { + @include formInput; + } + } - &__focalPoint { - border-right: none; - padding: base(1) 0; + @include mid-break { + --edit-upload-cell-spacing: var(--gutter-h); + &__sidebar { + padding-left: 0; + border-left: 0; + width: 100%; + } + &__toolWrap { + flex-direction: column-reverse; + } } - &__inputsWrap { + @include small-break { flex-direction: column; - gap: base(1); - } - &__sidebar { - min-width: 0; + &__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 ba24e299918..39ab442e9ee 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 2330be078b9..37281463ba4 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 1aa27226e32..0943d23e722 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; + } + + &__actions { + flex-grow: 2; + display: flex; + gap: 0.6rem; + align-items: center; + justify-content: flex-end; + } - &__remove.btn--style-icon-label { - margin: 0; + &__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 ce70e35d41c..f47c795de97 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 f89be36c98f..17f0e69772a 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; - - header { - display: flex; - flex-direction: row; - flex-wrap: wrap; - position: relative; - } - - &__remove { - position: absolute; - margin: 0; - top: $baseline; - right: $baseline; +@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; - & .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); + header { + display: flex; + flex-direction: row; + flex-wrap: wrap; + position: relative; + } - &:hover { - border: 1px solid var(--theme-elevation-400); + &__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); + + &: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; + &__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-icon { - padding: calc(var(--base) / 4); - } + &__toggle-more-info { + font-weight: 600; + text-decoration: none; - &__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; + &:hover, + &:focus-visible { + text-decoration: underline; + } } - } - &__size-label { - color: var(--theme-elevation-400); - } + &__toggle-icon { + padding: calc(var(--base) / 4); + } - &__file-mutation { - display: flex; - margin-top: base(0.25); - gap: calc(var(--base) / 2); - } + &__sizes { + margin: 0; + padding: base(1.5) $baseline 0; + list-style: none; + display: flex; + flex-wrap: wrap; - &__edit { - cursor: pointer; - background-color: var(--theme-elevation-150); - border: none; - border-radius: $style-radius-m; - padding: base(0.25) base(0.5); + li { + width: 50%; + padding: 0 base(0.5); + margin-bottom: $baseline; + } + } - &:hover { - background-color: var(--theme-elevation-100); + &__size-label { + color: var(--theme-elevation-400); } - } - @include large-break { - &__main-detail { - padding: $baseline; + &__file-mutation { + display: flex; + margin-top: base(0.25); + gap: calc(var(--base) / 2); } - &__sizes { - display: block; - padding: $baseline $baseline base(0.5); + &__edit { + cursor: pointer; + background-color: var(--theme-elevation-150); + border: none; + border-radius: $style-radius-m; + padding: base(0.25) base(0.5); - li { - padding: 0; - width: 100%; + &:hover { + background-color: var(--theme-elevation-100); } } - } - @include mid-break { - header { - flex-wrap: wrap; - } + @include large-break { + &__main-detail { + padding: $baseline; + } - .thumbnail { - width: 50%; - order: 1; - } + &__sizes { + display: block; + padding: $baseline $baseline base(0.5); - &__remove { - order: 2; + li { + padding: 0; + width: 100%; + } + } } - &__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 eb60c3459e2..0294ef71b2d 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); + &__wrapper { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + gap: base(0.8); + padding: base(2); + max-width: base(36); + } - > * { - margin: 0; + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); + + > * { + margin: 0; + } } - } - &__controls { - display: flex; - gap: base(0.4); + &__controls { + display: flex; + gap: base(0.4); - .btn { - margin: 0; + .btn { + margin: 0; + } } } } diff --git a/packages/ui/src/elements/Gutter/index.scss b/packages/ui/src/elements/Gutter/index.scss index 5222d275753..f094a5bc809 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 ec67bf9d613..efdfc9e35e4 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); +@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); - &:hover { - background-color: var(--theme-elevation-100); - box-shadow: 0px 0px 0px 1px var(--theme-elevation-500); - } + &:hover { + background-color: var(--theme-elevation-100); + box-shadow: 0px 0px 0px 1px var(--theme-elevation-500); + } - &:focus { - outline: none; - } + &:focus { + outline: none; + } - &::after { - z-index: -1; - } + &::after { + z-index: -1; + } - &__open-icon, - &__close-icon { - width: var(--hamburger-size); - height: var(--hamburger-size); - display: flex; - align-items: center; - justify-content: center; + &__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 803ed6bb43b..274268cf5f6 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 8a11e6c72b2..c79a78ee1bf 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; +@layer payload-default { + .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); } - } - &__buttons-wrap { - display: flex; - align-items: center; - gap: base(0.2); - - .pill { - background-color: var(--theme-elevation-150); + .search-filter { + flex-grow: 1; - &:hover { - background-color: var(--theme-elevation-100); + input { + margin: 0; } } - } - .column-selector, - .where-builder, - .sort-complex { - margin-top: base(1); - } + &__buttons-wrap { + display: flex; + align-items: center; + gap: base(0.2); - @include small-break { - &__wrap { - flex-wrap: wrap; - background-color: unset; - padding: 0; - position: relative; + .pill { + background-color: var(--theme-elevation-150); + + &:hover { + background-color: var(--theme-elevation-100); + } + } } - .icon--search { - position: absolute; - top: base(0.4); - inset-inline-start: base(0.4); - z-index: 1; + .column-selector, + .where-builder, + .sort-complex { + margin-top: base(1); } - .search-filter { - width: 100%; - input { - padding: base(0.4) base(2); + @include small-break { + &__wrap { + flex-wrap: wrap; + background-color: unset; + padding: 0; + position: relative; } - } - &__buttons-wrap { - [dir='ltr'] & { - margin-right: 0; + .icon--search { + position: absolute; + top: base(0.4); + inset-inline-start: base(0.4); + z-index: 1; } - [dir='rtl'] & { - margin-left: 0; + .search-filter { + width: 100%; + input { + padding: base(0.4) base(2); + } } - .pill { - padding: base(0.2) base(0.2) base(0.2) base(0.4); - justify-content: space-between; + &__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%; - } + &__buttons { + margin: 0; + width: 100%; + } - .column-selector, - .where-builder, - .sort-complex { - margin-top: calc(var(--base) / 2); - } + .column-selector, + .where-builder, + .sort-complex { + margin-top: calc(var(--base) / 2); + } - &__toggle-columns, - &__toggle-where, - &__toggle-sort { - flex: 1; + &__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 ccda4f21a7e..1dd3174100d 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%; - - @include mid-break { - margin-top: base(1.5); +@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-wrap { + display: flex; + gap: base(1); } - } - &__header-text { - margin: 0; - } - - &__header-close { - flex-shrink: 0; - } + &__header-content { + display: flex; + flex-wrap: wrap; + flex-grow: 1; + align-items: flex-start; + align-items: center; - &__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; + button .pill { + pointer-events: none; + margin: 0; + top: 4px; + margin-left: base(0.5); + } } - &:focus-visible { - outline: var(--accessibility-outline); - outline-offset: var(--accessibility-outline-offset); + &__header-text { + margin: 0; } - &:disabled { - pointer-events: none; + &__header-close { + flex-shrink: 0; } - } - &__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; + &__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; } - } - } - &__select-collection-wrap { - margin-top: base(1); - } + &:focus-visible { + outline: var(--accessibility-outline); + outline-offset: var(--accessibility-outline-offset); + } - &__first-cell { - border: 0; - background-color: transparent; - padding: 0; - cursor: pointer; - text-decoration: underline; - text-align: left; - white-space: nowrap; - } + &:disabled { + pointer-events: none; + } + } - @include mid-break { - .collection-list__header { - margin-bottom: base(0.5); + &__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: calc(var(--base) / 2); + margin-top: base(1); } - &__header-content { - button .pill { - top: 2px; + &__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 994ede3aa91..2a908a8bd79 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 4e1103f9748..d2dd8b86751 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 ad7b00bd7a9..be90a3bdce0 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; - } - - &__bar { - width: 2px; - background-color: currentColor; - height: 15px; - - &:nth-child(1) { - transform: translateY(0); - animation: animate-bar--odd 1.25s infinite; + 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; } - &:nth-child(2) { - transform: translateY(-2px); - animation: animate-bar--even 1.25s infinite; + &.loading-overlay--exiting { + opacity: 0; + animation: fade-out ease; } - &:nth-child(3) { - transform: translateY(0); - animation: animate-bar--odd 1.25s infinite; + &:after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--theme-elevation-0); + opacity: 0.85; + z-index: -1; } - &:nth-child(4) { - transform: translateY(-2px); - animation: animate-bar--even 1.25s infinite; + &__bars { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + gap: 7px; + align-items: center; } - &:nth-child(5) { - transform: translateY(0); - animation: animate-bar--odd 1.25s infinite; + &__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; + &__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); - } + @keyframes animate-bar--even { + 0% { + transform: translateY(2px); + } - 50% { - transform: translateY(-2px); - } + 50% { + transform: translateY(-2px); + } - 100% { - transform: translateY(2px); + 100% { + transform: translateY(2px); + } } -} -@keyframes animate-bar--odd { - 0% { - transform: translateY(-2px); - } + @keyframes animate-bar--odd { + 0% { + transform: translateY(-2px); + } - 50% { - transform: translateY(2px); - } + 50% { + transform: translateY(2px); + } - 100% { - transform: translateY(-2px); + 100% { + transform: translateY(-2px); + } } -} -@keyframes fade-in { - 0% { - opacity: 0; - } + @keyframes fade-in { + 0% { + opacity: 0; + } - 100% { - opacity: 1; + 100% { + opacity: 1; + } } -} -@keyframes fade-out { - 0% { - opacity: 1; - } + @keyframes fade-out { + 0% { + opacity: 1; + } - 100% { - opacity: 0; + 100% { + opacity: 0; + } } } diff --git a/packages/ui/src/elements/Localizer/LocalizerLabel/index.scss b/packages/ui/src/elements/Localizer/LocalizerLabel/index.scss index 3b478585598..545fc80954b 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); - } +@layer payload-default { + .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); - &__chevron { - .stroke { - stroke: currentColor; + &__label { + color: var(--theme-elevation-500); } - } - &__current { - display: flex; - align-items: center; - gap: base(0.3); - } + &__chevron { + .stroke { + stroke: currentColor; + } + } - 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; + &__current { + display: flex; + align-items: center; + gap: base(0.3); } - &:active, - &:focus { - outline: none; + 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; + @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 b692fad79f5..f56b961bc2d 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 95cf809c63f..6963fda2a54 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 ba1e3b4d5ba..e2e108f437a 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 b2f8ac64bea..d0681b31799 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; - - svg { - flex-shrink: 0; - margin-top: base(-0.2); - } + 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); + width: 100%; + text-align: left; + display: flex; + align-items: flex-start; + padding: 0; + gap: base(0.5); + justify-content: space-between; + + svg { + flex-shrink: 0; + margin-top: base(-0.2); + } - &:hover, - &:focus-visible { - color: var(--theme-elevation-1000); + &:hover, + &:focus-visible { + color: var(--theme-elevation-1000); - .stroke { - stroke: var(--theme-elevation-1000); + .stroke { + stroke: var(--theme-elevation-1000); + } } - } - &:focus-visible { - outline: none; + &:focus-visible { + outline: none; + } } - } - &__indicator { - position: relative; - flex-shrink: 0; + &__indicator { + position: relative; + flex-shrink: 0; - svg .stroke { - stroke: var(--theme-elevation-200); + 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 b8d88ee9bc9..4cb8c6812e8 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); + } } - } - &:focus-visible { - 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 b0b756dd168..e7cb22ceb09 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; +@layer payload-default { + .paginator { + display: flex; + margin-bottom: $baseline; - &__page { - cursor: pointer; + &__page { + cursor: pointer; - &--is-current { - background: var(--theme-elevation-100); - color: var(--theme-elevation-400); - cursor: default; - } + &--is-current { + background: var(--theme-elevation-100); + color: var(--theme-elevation-400); + cursor: default; + } - &--is-last-page { - margin-right: 0; + &--is-last-page { + margin-right: 0; + } } - } - .clickable-arrow--right { - margin-right: base(0.25); - } + .clickable-arrow--right { + margin-right: base(0.25); + } - &__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 { + @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); - } + &__page, + &__separator { + margin-right: base(0.25); + } - &__separator { - align-self: center; - color: var(--theme-elevation-400); + &__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 81f547eabc4..96a24a52c0e 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); - } +@layer payload-default { + .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; - } + &__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); + &__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; - } + &:hover, + &:focus-visible { + text-decoration: underline; + } - svg .stroke { - stroke: currentColor; + svg .stroke { + stroke: currentColor; + } } - } - &__chevron { - padding-left: calc(var(--base) / 4); - } + &__chevron { + padding-left: calc(var(--base) / 4); + } - &__button-active { - font-weight: bold; - color: var(--theme-text); + &__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 9507e587edc..2394525fd86 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; - } + &--rounded { + border-radius: var(--style-radius-l); + line-height: 18px; + font-size: 12px; + } - &--is-dragging { - cursor: grabbing; - } + &:active, + &:focus:not(:focus-visible) { + outline: none; + } - &--has-icon { - padding-inline-start: base(0.4); - padding-inline-end: base(0.3); + &:focus-visible { + outline: var(--accessibility-outline); + outline-offset: var(--accessibility-outline-offset); + } - svg { - display: block; + .icon { + flex-shrink: 0; + margin: base(0.1); } - } - &--align-icon-left { - flex-direction: row-reverse; - padding-inline-start: base(0.1); - padding-inline-end: base(0.4); - } + &__label { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &--has-action { + cursor: pointer; + text-decoration: none; + } - &--style-white { - background: var(--theme-elevation-0); + &--is-dragging { + cursor: grabbing; + } - &.pill--has-action { - &:hover { - background: var(--theme-elevation-100); - } + &--has-icon { + padding-inline-start: base(0.4); + padding-inline-end: base(0.3); - &:active { - background: var(--theme-elevation-100); + svg { + display: block; } } - } - &--style-light { - &.pill--has-action { - &:hover { - background: var(--theme-elevation-100); - } + &--align-icon-left { + flex-direction: row-reverse; + padding-inline-start: base(0.1); + padding-inline-end: base(0.4); + } - &:active { - background: var(--theme-elevation-100); + &--style-white { + background: var(--theme-elevation-0); + + &.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-light { + &.pill--has-action { + &:hover { + background: var(--theme-elevation-100); + } - &--style-warning { - background: var(--theme-warning-150); - color: var(--theme-warning-800); - } + &:active { + background: var(--theme-elevation-100); + } + } + } - &--style-success { - background: var(--theme-success-150); - color: var(--theme-success-800); - } + &--style-light-gray { + background: var(--theme-elevation-100); + color: var(--theme-elevation-800); + } - &--style-error { - background: var(--theme-error-150); - color: var(--theme-error-800); - } + &--style-warning { + background: var(--theme-warning-150); + color: var(--theme-warning-800); + } - &--style-dark { - background: var(--theme-elevation-800); - color: var(--theme-elevation-0); + &--style-success { + background: var(--theme-success-150); + color: var(--theme-success-800); + } - svg { - @include color-svg(var(--theme-elevation-0)); + &--style-error { + background: var(--theme-error-150); + color: var(--theme-error-800); } - &.pill--has-action { - &:hover { - background: var(--theme-elevation-750); + &--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 7d70602a7cb..81f08a684da 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 { - text-align: left; - } - - &__text-align--center { - text-align: center; - } - [dir='rtl'] &__text-align--right { +@layer payload-default { + .popup-button-list { + --list-button-padding: calc(var(--base) * 0.5); + display: flex; + flex-direction: column; text-align: left; - } - &__text-align--right { - text-align: right; - } + gap: 3px; + [dir='rtl'] &__text-align--left { + text-align: right; + } + &__text-align--left { + text-align: left; + } - &__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; + &__text-align--center { + text-align: center; + } + [dir='rtl'] &__text-align--right { + text-align: left; + } + &__text-align--right { + text-align: right; + } - 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; + + button { + @extend %btn-reset; - &:focus-visible { - outline: none; + &: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 6885746424a..65d3f717703 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 6aaf5835ccb..d71c0fbda66 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)); - } +@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; - &--show-scrollbar { - .popup__scroll-container, - .popup__scroll-content { - width: 100%; + &__trigger-wrap { + display: flex; + align-items: stretch; + height: 100%; } - } - - &:focus, - &:active { - outline: none; - } - - //////////////////////////////// - // SIZE - //////////////////////////////// - &--size-small { - --popup-width: 100px; - .popup__content { - @include shadow-m; + &__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); } - } - &--size-medium { - --popup-width: 150px; - .popup__content { - @include shadow-lg; + &__hide-scrollbar { + overflow: hidden; } - } - &--size-large { - --popup-width: 200px; - .popup__content { - @include shadow-lg; + &__scroll-container { + overflow-y: auto; + white-space: nowrap; + width: calc(100% + var(--scrollbar-width)); + padding-top: var(--popup-padding); + padding-bottom: var(--popup-padding); } - } - - //////////////////////////////// - /// 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(-50%); + &__scroll-content { + width: calc(100% - var(--scrollbar-width)); } - .popup__caret { - left: 50%; - transform: translateX(-50%); + &--show-scrollbar { + .popup__scroll-container, + .popup__scroll-content { + width: 100%; + } } - } - [dir='rtl'] &--h-align-right { - .popup__content { - right: unset; - left: 0; + &:focus, + &:active { + outline: none; } - .popup__caret { - right: unset; - left: var(--popup-padding); - } - } + //////////////////////////////// + // SIZE + //////////////////////////////// - &--h-align-right { - .popup__content { - right: var(--button-size-offset); + &--size-small { + --popup-width: 100px; + .popup__content { + @include shadow-m; + } } - .popup__caret { - right: var(--popup-padding); + &--size-medium { + --popup-width: 150px; + .popup__content { + @include shadow-lg; + } } - } - //////////////////////////////// - // VERTICAL ALIGNMENT - //////////////////////////////// + &--size-large { + --popup-width: 200px; + .popup__content { + @include shadow-lg; + } + } - &__caret { - position: absolute; - border: var(--popup-caret-size) solid transparent; - } + //////////////////////////////// + /// BUTTON SIZE + //////////////////////////////// - &--v-align-top { - .popup__content { - @include shadow-lg; - bottom: calc(100% + var(--popup-caret-size)); + &--button-size-small { + --button-size-offset: -8px; } - .popup__caret { - top: calc(100% - 1px); - border-top-color: var(--popup-bg); + &--button-size-medium { + --button-size-offset: -4px; } - } - &--v-align-bottom { - .popup__content { - @include shadow-lg-top; - top: calc(100% + var(--popup-caret-size)); + &--button-size-large { + --button-size-offset: 0px; } - .popup__caret { - bottom: calc(100% - 1px); - border-bottom-color: var(--popup-bg); + //////////////////////////////// + // HORIZONTAL ALIGNMENT + //////////////////////////////// + [dir='rtl'] &--h-align-left { + .popup__caret { + right: var(--popup-padding); + left: unset; + } } - } - - //////////////////////////////// - // ACTIVE - //////////////////////////////// - - &--active { - .popup__content { - opacity: 1; - visibility: visible; - pointer-events: all; + &--h-align-left { + .popup__caret { + left: var(--popup-padding); + } } - } - - @include mid-break { - --popup-padding: calc(var(--base) * 0.25); - &--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 c3284362f6f..f4d5ac3ac5a 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); - } +@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-direction: row; - &__preview { - max-height: calc(100% - base(6)); - padding: base(1.5) base(1.5) base(1.5) var(--gutter-h); - object-fit: contain; - } + &__imageWrap { + min-width: 60%; + border-right: 1px solid var(--theme-elevation-150); + } - &__meta { - border-bottom: 1px solid var(--theme-elevation-150); - padding: base(1) var(--gutter-h); - display: flex; - flex-wrap: wrap; - column-gap: base(1); + &__preview { + max-height: calc(100% - base(6)); + padding: base(1.5) base(1.5) base(1.5) var(--gutter-h); + object-fit: contain; + } - .file-meta { + &__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__url { - width: 100%; + .file-meta { + display: flex; + flex-wrap: wrap; + column-gap: base(1); + text-wrap: wrap; + 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; + &__sizeName, + .file-meta__size-type { + color: var(--theme-elevation-600); + } - &::-webkit-scrollbar { - width: 0; + &__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; + } } - &::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); } - } - &__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; - &__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); + } + } - &:hover { + &--selected { 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; + &__image { + display: flex; + width: 30%; + min-width: 30%; + align-items: center; + justify-content: center; } - &__list, - &__preview { - padding: calc(var(--gutter-h) * 2) var(--gutter-h); + &__sizeMeta { + padding: base(0.5) 0; } - &__preview { - max-height: calc(100% - base(4)); + &__sizeName, + &__sizeMeta { + overflow: hidden; + text-overflow: ellipsis; } - &__sizeOption { - padding: base(0.25); + @include mid-break { + margin-top: base(1); + max-height: calc(100vh - base(4)); } - &__listWrap { - border-top: 1px solid var(--theme-elevation-150); - height: 40%; + @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 94864a7f1e6..804a464089c 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); + &__wrapper { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + gap: base(0.8); + padding: base(2); + } - > * { - margin: 0; + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); + + > * { + margin: 0; + } } - } - &__controls { - display: flex; - gap: base(0.4); + &__controls { + display: flex; + gap: base(0.4); - .btn { - margin: 0; + .btn { + margin: 0; + } } } } diff --git a/packages/ui/src/elements/ReactSelect/ClearIndicator/index.scss b/packages/ui/src/elements/ReactSelect/ClearIndicator/index.scss index 694307444bf..e11e0e92902 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 3c1af3c3bde..09e4ca8a8e7 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 1960b177252..c1ecec8bf85 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); +@layer payload-default { + .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); + &:hover { + border: 1px solid var(--theme-elevation-250); + } } - } - &--is-dragging { - z-index: 2; + &--is-dragging { + z-index: 2; + } } -} -html[data-theme='light'] { - .multi-value { - &.rs__multi-value { - background: var(--theme-elevation-50); + 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); + 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 93253c7e28a..22b5294827f 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 3b543655c49..df7399ee20a 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 5aeb03af160..47901e7ef77 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 29409f6d237..60cc186ee5b 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; - } - - .rs__indicators { - gap: calc(var(--base) / 4); +@layer payload-default { + .react-select-container { + width: 100%; } - .rs__indicator { - padding: 0px 4px; - cursor: pointer; - } + .react-select { + .rs__control { + @include formInput; + height: auto; + padding: base(0.4) base(0.6); + flex-wrap: nowrap; + } - .rs__indicator-separator { - display: none; - } + .rs__indicators { + gap: calc(var(--base) / 4); + } - .rs__input-container { - color: var(--theme-elevation-1000); - } + .rs__indicator { + padding: 0px 4px; + cursor: pointer; + } - .rs__input { - font-family: var(--font-body); - width: 10px; - } + .rs__indicator-separator { + display: none; + } - .rs__menu { - z-index: 4; - border-radius: 0; - @include shadow-lg; - background: var(--theme-input-bg); - } + .rs__input-container { + color: var(--theme-elevation-1000); + } - .rs__group-heading { - color: var(--theme-elevation-800); - padding-left: base(0.5); - margin-bottom: base(0.25); - } + .rs__input { + font-family: var(--font-body); + width: 10px; + } - .rs__option { - font-family: var(--font-body); - font-size: $baseline-body-size; - padding: base(0.375) base(0.75); - color: var(--theme-elevation-800); + .rs__menu { + z-index: 4; + border-radius: 0; + @include shadow-lg; + background: var(--theme-input-bg); + } - &--is-focused { - background-color: var(--theme-elevation-100); + .rs__group-heading { + color: var(--theme-elevation-800); + padding-left: base(0.5); + margin-bottom: base(0.25); } - &--is-selected { - background-color: var(--theme-elevation-300); + .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); + } } - } - &--error, - &--error:hover, - &--error:focus-within { - div.rs__control { - background-color: var(--theme-error-50); - border: 1px solid var(--theme-error-500); + &--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; + & > div.rs__indicator > button.dropdown-indicator[type='button'] { + border: none; + } } } - } - &.rs--is-disabled .rs__control { - @include readOnly; + &.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 0df588c8cc9..42d6e2268d5 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 271e41bc3f7..a2ccb6c4101 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 cb6254a4df1..33a301fdd7b 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 bec9c946227..8de168b1753 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; + + svg { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: base(0.5); + } - &__input { - @include formInput; - height: auto; - padding: 0; - box-shadow: none; - background-color: var(--theme-elevation-50); - border: 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; + &: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 9530c4e0450..c2c74692dac 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 9e316db5803..f0baca873c7 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 402542fed13..5c16f0964f4 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% - ); + &__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); + @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 e3b65b4263e..4d62dca9e08 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; +@layer payload-default { + .sort-column { + display: flex; + gap: calc(var(--base) / 2); + align-items: center; - &__label { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } + &__label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } - &__label, - .btn { - vertical-align: middle; - display: inline-block; - } + &__label, + .btn { + vertical-align: middle; + display: inline-block; + } - &__label { - cursor: default; - } + &__label { + cursor: default; + } - &__buttons { - display: flex; - align-items: center; - gap: calc(var(--base) / 4); - } + &__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; + &__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; - } + &.sort-column--active { + opacity: 1; + visibility: visible; + } - &:hover { - opacity: 0.7; + &:hover { + opacity: 0.7; + } } - } - &:hover { - .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 ce078895510..a04a32cecd8 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 794c45bb4ea..8a802c484c7 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); - } +@layer payload-default { + .status { + &__label { + color: var(--theme-elevation-500); + } - &__value { - font-weight: 600; - } + &__value { + font-weight: 600; + } - &__value-wrap { - white-space: nowrap; - } + &__value-wrap { + white-space: nowrap; + } - &__action { - text-decoration: underline; - } + &__action { + text-decoration: underline; + } - &__modal { - @include blur-bg; - display: flex; - align-items: center; - justify-content: center; - height: 100%; + &__modal { + @include blur-bg; + display: flex; + align-items: center; + justify-content: center; + height: 100%; - &__toggle { - @extend %btn-reset; + &__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); - } + &__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); + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); - > * { - margin: 0; + > * { + margin: 0; + } } - } - &__controls { - display: flex; - gap: base(0.4); + &__controls { + display: flex; + gap: base(0.4); - .btn { - margin: 0; + .btn { + margin: 0; + } } } } diff --git a/packages/ui/src/elements/StayLoggedIn/index.scss b/packages/ui/src/elements/StayLoggedIn/index.scss index 28459881ea9..e4b4ed6b0ef 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); + &__wrapper { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + gap: var(--base); + padding: base(2); + } - > * { - margin: 0; + &__content { + display: flex; + flex-direction: column; + gap: var(--base); + + > * { + margin: 0; + } } - } - &__controls { - display: flex; - gap: var(--base); + &__controls { + display: flex; + gap: var(--base); - .btn { - margin: 0; + .btn { + margin: 0; + } } } } diff --git a/packages/ui/src/elements/StepNav/index.scss b/packages/ui/src/elements/StepNav/index.scss index 927a6dac926..1de8698382a 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'; +@layer payload-default { + .step-nav { + display: flex; + align-items: center; + gap: calc(var(--base) / 2); -.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)); - } + &::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; + // 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; + &:focus-visible { + outline: none; - &::after { - content: ''; - border: var(--accessibility-outline); - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - pointer-events: none; + &::after { + content: ''; + border: var(--accessibility-outline); + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; + } } } - } - * { - display: block; - } + * { + display: block; + } - a { - border: 0; - display: flex; - align-items: center; - font-weight: 600; - text-decoration: none; + a { + border: 0; + display: flex; + align-items: center; + font-weight: 600; + text-decoration: none; - label { - cursor: pointer; - } + label { + cursor: pointer; + } - &:hover, - &:focus-visible { - text-decoration: underline; + &:hover, + &:focus-visible { + text-decoration: underline; + } } - } - span { - max-width: base(8); - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } + span { + max-width: base(8); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } - @include mid-break { - .step-nav { - &__home { - width: 16px; - height: 16px; + @include mid-break { + .step-nav { + &__home { + width: 16px; + height: 16px; + } } } - } - @include small-break { - gap: base(0.4); + @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 eabbcee2b39..d0f99e532b9 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 1d488cef2ee..182abc6038f 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 846db8b635f..7dd490968e3 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 52286f72ec1..935aef0b9ee 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 3c757a03e5e..f4c5e5bd015 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%; - - 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); +@layer payload-default { + .table { + margin-bottom: $baseline; + overflow: auto; + max-width: 100%; + + table { + min-width: 100%; } - &:last-child { - padding-inline-end: base(0.8); - } - } + thead { + color: var(--theme-elevation-400); - tbody { - tr { - &:nth-child(odd) { - background: var(--theme-elevation-50); - border-radius: $style-radius-s; + th { + font-weight: normal; + text-align: left; + [dir='rtl'] & { + text-align: right; + } } } - } - a:focus-visible { - outline: var(--accessibility-outline); - outline-offset: var(--accessibility-outline-offset); - } + th, + td { + vertical-align: top; + padding: base(0.8) base(0.6); + min-width: 150px; - &--appearance-condensed { - thead { - th:first-child { - border-top-left-radius: $style-radius-s; + &:first-child { + padding-inline-start: base(0.8); } - th:last-child { - border-top-right-radius: $style-radius-s; + &:last-child { + padding-inline-end: base(0.8); } - - background: var(--theme-elevation-50); } tbody { tr { &:nth-child(odd) { - background: transparent; - border-radius: 0; + background: var(--theme-elevation-50); + border-radius: $style-radius-s; } } } - th, - td { - padding: base(0.3) base(0.3); + a:focus-visible { + outline: var(--accessibility-outline); + outline-offset: var(--accessibility-outline-offset); + } - &:first-child { - padding-inline-start: base(0.6); + &--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); } - &:last-child { - padding-inline-end: base(0.6); + tbody { + tr { + &:nth-child(odd) { + background: transparent; + border-radius: 0; + } + } } - } - th { - padding: base(0.3); - } + th, + td { + padding: base(0.3) base(0.3); - tr td, - th { - border: 0.5px solid var(--theme-elevation-100); + &: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; + @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 6dc513447e2..d9ead301743 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; + + img, + svg { + position: absolute; + top: 0; + } + } - &--size-medium { - max-height: base(7); - width: base(7); - } + &--size-large { + max-height: base(9); + width: base(9); + } - &--size-small { - max-height: base(5); - width: base(5); - } + &--size-medium { + max-height: base(7); + width: base(7); + } - @include large-break { - .thumbnail { + &--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 c4891d15105..42c805d554e 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; - } + &--align-label-center { + text-align: center; + } - &__thumbnail { - display: flex; - align-items: center; - justify-content: 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 875739afded..74f7f8fb39a 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; - - 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; - 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; - } +@layer payload-default { + .tooltip { + --caret-size: 6px; - &--show { - visibility: visible; - opacity: 1; - transition: opacity 0.2s ease-in-out; - cursor: default; - } + 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; - &--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; } - } - &--caret-left { - &::after { - left: calc(var(--base) * 0.5); + &--show { + visibility: visible; + opacity: 1; + transition: opacity 0.2s ease-in-out; + cursor: default; } - } - &--caret-right { - &::after { - right: calc(var(--base) * 0.5); + &--caret-center { + &::after { + left: 50%; + } } - } - &--position-top { - top: calc(var(--base) * -1.25); - transform: translate3d(-50%, calc(var(--caret-size) * -1), 0); + &--caret-left { + &::after { + left: calc(var(--base) * 0.5); + } + } - &::after { - bottom: 1px; - border-top: var(--caret-size) solid var(--theme-elevation-800); + &--caret-right { + &::after { + right: calc(var(--base) * 0.5); + } } - } - &--position-bottom { - bottom: calc(var(--base) * -1.25); - transform: translate3d(-50%, var(--caret-size), 0); + &--position-top { + top: calc(var(--base) * -1.25); + transform: translate3d(-50%, calc(var(--caret-size) * -1), 0); - &::after { - bottom: calc(100% + var(--caret-size) - 1px); - border-bottom: var(--caret-size) solid var(--theme-elevation-800); + &::after { + bottom: 1px; + border-top: var(--caret-size) solid var(--theme-elevation-800); + } } - } - .tooltip-content { - overflow: hidden; - text-overflow: ellipsis; - width: 100%; - } + &--position-bottom { + bottom: calc(var(--base) * -1.25); + transform: translate3d(-50%, var(--caret-size), 0); - @include mid-break { - display: none; - } -} + &::after { + bottom: calc(100% + var(--caret-size) - 1px); + border-bottom: var(--caret-size) solid var(--theme-elevation-800); + } + } -html[data-theme='light'] { - .tooltip:not(.field-error) { - background-color: var(--theme-elevation-100); - color: var(--theme-elevation-1000); - } + .tooltip-content { + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + } - .tooltip--position-top:not(.field-error):after { - border-top-color: var(--theme-elevation-100); + @include mid-break { + display: none; + } } - .tooltip--position-bottom:not(.field-error):after { - border-bottom-color: var(--theme-elevation-100); + 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 42bf200546f..8c3ac9ec2af 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); + &__wrapper { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + gap: base(0.8); + padding: base(2); + } - > * { - margin: 0; + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); + + > * { + margin: 0; + } } - } - &__controls { - display: flex; - gap: base(0.4); + &__controls { + display: flex; + gap: base(0.4); - .btn { - margin: 0; + .btn { + margin: 0; + } } } } diff --git a/packages/ui/src/elements/Upload/index.scss b/packages/ui/src/elements/Upload/index.scss index d45f607c460..bff486ac3ba 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); + &__upload { + display: flex; } - } - &__remove { - margin: calc($baseline * 1.5) $baseline $baseline 0; - place-self: flex-start; - } + .tooltip.error-message { + z-index: 3; + bottom: calc(100% - #{base(0.5)}); + } - &__file-adjustments, - &__remote-file-wrap { - padding: $baseline; - width: 100%; - display: flex; - flex-direction: column; - gap: calc(var(--base) / 2); - } + &__file-selected { + display: flex; + } - &__filename, - &__remote-file { - @include formInput; - background-color: var(--theme-bg); - } + &__thumbnail-wrap { + position: relative; + width: 150px; - &__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); + .thumbnail { + position: relative; + width: 100%; + height: 100%; + object-fit: contain; + border-radius: var(--style-radius-s) 0 0 var(--style-radius-s); } } - } - &__previewDrawer { - & h2 { - margin: 0 base(1) 0 0; - text-wrap: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: calc(100% - base(2)); + &__remove { + margin: calc($baseline * 1.5) $baseline $baseline 0; + place-self: flex-start; } - } - .dropzone { - background-color: transparent; - padding-block: calc(var(--base) * 2.25); - } + &__file-adjustments, + &__remote-file-wrap { + padding: $baseline; + width: 100%; + display: flex; + flex-direction: column; + gap: calc(var(--base) / 2); + } - &__dropzoneContent { - display: flex; - flex-wrap: wrap; - gap: base(0.4); - justify-content: space-between; - width: 100%; - } + &__filename, + &__remote-file { + @include formInput; + background-color: var(--theme-bg); + } - &__dropzoneButtons { - display: flex; - gap: calc(var(--base) * 0.5); - } + &__upload-actions, + &__add-file-wrap { + display: flex; + gap: calc(var(--base) / 2); + flex-wrap: wrap; - &__orText { - color: var(--theme-elevation-500); - text-transform: lowercase; - } + & 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); + } + } + } - &__dragAndDropText { - flex-shrink: 0; - margin: 0; - text-transform: lowercase; - align-self: center; - color: var(--theme-elevation-500); - } + &__previewDrawer { + & h2 { + margin: 0 base(1) 0 0; + text-wrap: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: calc(100% - base(2)); + } + } - @include small-break { - &__upload { + .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%; } - &__remove { - margin: $baseline; - order: 2; + &__dropzoneButtons { + display: flex; + gap: calc(var(--base) * 0.5); } - &__file-adjustments { - order: 3; - border-top: 2px solid var(--theme-elevation-0); - padding: calc($baseline * 0.5); - gap: 0; + &__orText { + color: var(--theme-elevation-500); + text-transform: lowercase; } - &__thumbnail-wrap { - order: 1; - width: 50%; + &__dragAndDropText { + flex-shrink: 0; + margin: 0; + text-transform: lowercase; + align-self: center; + color: var(--theme-elevation-500); + } - .thumbnail { - width: 100%; + @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; } - } - &__edit { - display: none; + &__thumbnail-wrap { + order: 1; + width: 50%; + + .thumbnail { + width: 100%; + } + } + + &__edit { + display: none; + } } - } - @include small-break { - &__dropzoneContent { - 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 4babb8b2137..51663f4745f 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 9611d432643..016fd097a00 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/Text/index.scss b/packages/ui/src/elements/WhereBuilder/Condition/Text/index.scss index 647c3196eed..52650a604ba 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 2ef13492829..40f0ea3956b 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); - } +@layer payload-default { + .condition { + &__wrap { + display: flex; + align-items: center; + gap: var(--base); + } - &__inputs { - display: flex; - flex-grow: 1; - align-items: center; - gap: var(--base); + &__inputs { + display: flex; + flex-grow: 1; + align-items: center; + gap: var(--base); - > div { - flex-basis: 100%; + > div { + flex-basis: 100%; + } } - } - &__field { - .field-label { - padding-bottom: 0; + &__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 { - &__wrap { - align-items: initial; + &__actions { + flex-shrink: 0; + display: flex; gap: calc(var(--base) / 2); + padding: calc(var(--base) / 2) 0; } - &__inputs { - flex-direction: column; - gap: calc(var(--base) / 2); - align-items: stretch; + .btn { + vertical-align: middle; + margin: 0; } - &__actions { - display: flex; - flex-direction: column; - justify-content: space-between; + @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 54d5136d86d..71b3b27df0e 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 { +@layer payload-default { + .where-builder { + background: var(--theme-elevation-50); + padding: var(--base); display: flex; flex-direction: column; gap: 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); + .btn { + margin: 0; + align-self: flex-start; + } - li { + &__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 3a1bd74daa1..139e0585ba3 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-content { + &__header { display: flex; flex-direction: column; - gap: calc(var(--base) / 4); + 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); + &--has-no-error { + > .array-field__header .array-field__header-content { + color: var(--theme-text); + } } - } - &__header-content { - display: flex; - align-items: center; - gap: base(0.5); - } + &__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-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-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); + &__header-action { + @extend %btn-reset; + cursor: pointer; + margin-left: base(0.5); - &:hover, - &:focus-visible { - text-decoration: underline; - color: var(--theme-elevation-600); + &: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; - } + &__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); - } + &__draggable-rows { + display: flex; + flex-direction: column; + gap: calc(var(--base) / 2); + } - &__title { - margin-bottom: 0; - } + &__title { + margin-bottom: 0; + } - &__add-row { - align-self: flex-start; - color: var(--theme-elevation-400); - margin: 2px 0; + &__add-row { + align-self: flex-start; + color: var(--theme-elevation-400); + margin: 2px 0; - &:hover { - color: var(--theme-elevation-800); + &: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='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); + 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 f7857206c5c..0d13c3c7cdf 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; - } + &__input { + @include formInput; + } - .icon--search { - position: absolute; - top: 50%; - transform: translate3d(0, -50%, 0); - right: 0; - width: $icon-width; - margin: 0 $icon-margin; + .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); + .stroke { + stroke: var(--theme-elevation-300); + } } - } - @include mid-break { - &__input { - margin-bottom: 0; + @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 a07728e8ed5..efe5c5fc9a0 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); - } +@layer payload-default { + .blocks-drawer { + &__blocks-wrapper { + padding-top: base(1.5); + } - @include large-break { &__blocks { - grid-template-columns: repeat(5, 1fr); + position: relative; + padding: 0; + list-style: none; + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: base(1); } - } - @include mid-break { - &__blocks-wrapper { - padding-top: base(1.75); + &__default-image { + width: 100%; + overflow: hidden; + padding-top: base(0.75); } - &__blocks { - grid-template-columns: repeat(3, 1fr); - gap: base(0.5); + + @include large-break { + &__blocks { + grid-template-columns: repeat(5, 1fr); + } } - } - @include small-break { - &__blocks-wrapper { - padding-top: base(0.75); + @include mid-break { + &__blocks-wrapper { + padding-top: base(1.75); + } + &__blocks { + grid-template-columns: repeat(3, 1fr); + gap: base(0.5); + } } - &__blocks { - grid-template-columns: repeat(2, 1fr); + @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 d1d99ebf990..0736bf691cc 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 d3622c36379..c6178f9d5dc 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); +@layer payload-default { + .blocks-field { + display: flex; + flex-direction: column; + gap: calc(var(--base) / 2); - &__header { - h3 { - margin: 0; + &__header { + h3 { + margin: 0; + } } - } - &__header-wrap { - display: flex; - align-items: flex-end; - width: 100%; - justify-content: space-between; - } + &__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); - } + &__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-no-error { + > .array-field__header .array-field__heading-with-error { + color: var(--theme-text); + } } - } - &--has-error { - > .array-field__header { - color: var(--theme-error-500); + &--has-error { + > .array-field__header { + color: var(--theme-error-500); + } } - } - &__error-pill { - align-self: center; - } + &__error-pill { + align-self: center; + } - &__header-actions { - list-style: none; - margin: 0; - padding: 0; - display: flex; - } + &__header-actions { + list-style: none; + margin: 0; + padding: 0; + display: flex; + } - &__header-action { - @extend %btn-reset; - cursor: pointer; - margin-left: base(0.5); + &__header-action { + @extend %btn-reset; + cursor: pointer; + margin-left: base(0.5); - &:hover, - &:focus-visible { - text-decoration: underline; + &: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-header { + display: inline-flex; + max-width: 100%; + width: 100%; + overflow: hidden; + gap: base(0.375); + } - &__block-pill { - flex-shrink: 0; - display: block; - line-height: unset; - } + &__block-number { + flex-shrink: 0; + } - &__rows { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 2); - } + &__block-pill { + flex-shrink: 0; + display: block; + line-height: unset; + } - &__drawer-toggler { - background-color: transparent; - margin: 0; - padding: 0; - border: none; - align-self: flex-start; + &__rows { + display: flex; + flex-direction: column; + gap: calc(var(--base) / 2); + } - .btn { - color: var(--theme-elevation-400); + &__drawer-toggler { + background-color: transparent; margin: 0; + padding: 0; + border: none; + align-self: flex-start; - &:hover { - color: var(--theme-elevation-800); + .btn { + color: var(--theme-elevation-400); + margin: 0; + + &:hover { + color: var(--theme-elevation-800); + } } } } -} -html[data-theme='light'] { - .blocks-field--has-error { - .section-title__input, - .blocks-field__heading-with-error { - color: var(--theme-error-750); + 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); + 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 9942664d938..4e930a25777 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; +@layer payload-default { + .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; } } - label { - padding-bottom: 0; - padding-left: base(0.5); - } + .checkbox-input { + display: inline-flex; + &:hover:not(&--read-only) { + label, + input { + cursor: pointer; + } + } - [dir='rtl'] &__input { - margin-right: 0; - margin-left: base(0.5); - } + label { + padding-bottom: 0; + padding-left: base(0.5); + } - &__input { - @include formInput; - display: flex; - padding: 0; - line-height: 0; - position: relative; - width: $baseline; - height: $baseline; + [dir='rtl'] &__input { + margin-right: 0; + margin-left: base(0.5); + } - & 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); + &__input { + @include formInput; + display: flex; padding: 0; - margin: 0; - margin-left: -2px; - margin-top: -2px; - opacity: 0; - border-radius: 0; - z-index: 1; + 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; + &__icon { + position: absolute; - svg { - opacity: 0; + 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); + &: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); + &:hover { + .checkbox-input__input, + & input[type='checkbox'] { + border-color: var(--theme-elevation-250); + } } } - } - &:not(&--read-only):not(&--checked) { - &:hover { - cursor: pointer; + &:not(&--read-only):not(&--checked) { + &:hover { + cursor: pointer; - svg { - opacity: 0.2; + svg { + opacity: 0.2; + } } } - } - &--checked { - .checkbox-input__icon { - svg { - opacity: 1; + &--checked { + .checkbox-input__icon { + svg { + opacity: 1; + } } } - } - .checkbox-input__icon { - .icon--line { - width: 1.4rem; - height: 1.4rem; - } + .checkbox-input__icon { + .icon--line { + width: 1.4rem; + height: 1.4rem; + } - &.partial { - svg { - opacity: 1; + &.partial { + svg { + opacity: 1; + } } } - } - &--read-only { - .checkbox-input__input { - @include readOnly; - } + &--read-only { + .checkbox-input__input { + @include readOnly; + } - label { - color: var(--theme-elevation-400); + label { + color: var(--theme-elevation-400); + } } } -} -html[data-theme='light'] { - .checkbox { - &.error { - .checkbox-input__input { - @include lightInputError; + 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='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 d65077ccbd3..e6f23b545de 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 559d102dbd5..d2b1d2a6f17 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 2db4d78a664..70f7b5c877a 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='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='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 1ca8b98ace8..b4359c6ea1a 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 a44a200240d..d12a0171d28 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; - - input { - @include formInput; - } +@layer payload-default { + .field-type.email { + position: relative; - &.error { input { - background-color: var(--theme-error-200); + @include formInput; } - } -} -html[data-theme='light'] { - .field-type.email { &.error { input { - @include lightInputError; + background-color: var(--theme-error-200); } } } -} -html[data-theme='dark'] { - .field-type.email { - &.error { - input { - @include darkInputError; + 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 dd1d35bc32d..b1a935f7cc3 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 23613c34a3b..835fd6d666e 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 2fefeff55a5..778acb9acf4 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 635c505f974..a19e00b8290 100644 --- a/packages/ui/src/fields/Group/index.scss +++ b/packages/ui/src/fields/Group/index.scss @@ -1,144 +1,146 @@ @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); + &--top-level { + padding: base(2) var(--gutter-h); - &:first-child { - padding-top: 0; - border-top: 0; + &: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); + &--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; + &:first-child { + border-top: 0; + padding-top: 0; + margin-top: 0; + } + + &:last-child { + padding-bottom: 0; + border-bottom: 0; + } } - &:last-child { - padding-bottom: 0; + &--within-group { + margin-left: 0; + margin-right: 0; + padding: 0; + border-top: 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-row { + margin: 0; + border-top: 0; + border-bottom: 0; + } - &--within-tab:last-child { - margin-bottom: 0; - border-bottom: 0; - padding-bottom: 0; - } + &--within-tab:first-child { + margin-top: 0; + border-top: 0; + padding-top: 0; + } - &--gutter { - border-left: 1px solid var(--theme-elevation-100); - padding: 0 0 0 $baseline; - } + &--within-tab:last-child { + margin-bottom: 0; + border-bottom: 0; + padding-bottom: 0; + } - &__header { - margin-bottom: calc(var(--base) / 2); - display: flex; - align-items: center; - gap: base(0.5); + &--gutter { + border-left: 1px solid var(--theme-elevation-100); + padding: 0 0 0 $baseline; + } - > header { + &__header { + margin-bottom: calc(var(--base) / 2); display: flex; - flex-direction: column; - gap: calc(var(--base) / 4); + align-items: center; + gap: base(0.5); + + > header { + display: flex; + flex-direction: column; + gap: calc(var(--base) / 4); + } } - } - &__title { - margin-bottom: 0; - } + &__title { + margin-bottom: 0; + } - @include small-break { - &--top-level { - padding: var(--base) var(--gutter-h); + @include small-break { + &--top-level { + padding: var(--base) var(--gutter-h); - &:first-child { - padding-top: 0; - border-top: 0; + &:first-child { + padding-top: 0; + border-top: 0; + } } - } - &__header { - margin-bottom: calc(var(--base) / 2); - } + &__header { + margin-bottom: calc(var(--base) / 2); + } - &--within-collapsible { - margin-left: calc(var(--gutter-h) * -1); - margin-right: calc(var(--gutter-h) * -1); - } + &--within-collapsible { + margin-left: calc(var(--gutter-h) * -1); + margin-right: calc(var(--gutter-h) * -1); + } - &--within-group { - padding: 0; - } + &--within-group { + padding: 0; + } - &--gutter { - padding-left: var(--gutter-h); + &--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='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='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 3a6e04f1463..bfd50ab804e 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 ab294a5a1da..50628f1ad2e 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='light'] { + .field-type.number { + &.error { + input { + @include lightInputError; + } } } } -} -html[data-theme='dark'] { - .field-type.number { - &.error { - input { - @include darkInputError; + 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 31f091b40aa..d10a774637a 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; +@layer payload-default { + .field-type.password { + position: relative; - input { - @include formInput; + input { + @include formInput; + } } -} -html[data-theme='light'] { - .field-type.password { - &.error { - input { - @include lightInputError; + html[data-theme='light'] { + .field-type.password { + &.error { + input { + @include lightInputError; + } } } } -} -html[data-theme='dark'] { - .field-type.password { - &.error { - input { - @include darkInputError; + 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 cbaf1e3d381..7bedfcddc7b 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; + } + + &__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%; + 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 af75ac13ca7..e615943178a 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); } - } - [dir='rtl'] &__label { - margin-left: 0; - margin-right: base(0.5); - } + &__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%; - &__label { - margin-left: base(0.5); - } + &: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; + } - &--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 888e5a7332a..6862bfce7f6 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; + + li { + flex-shrink: 0; + [dir='ltr'] & { + padding-right: $baseline; + } + [dir='rtl'] & { + padding-left: $baseline; + } } } - } - ul { - list-style: none; - padding: 0; - margin: 0; + ul { + list-style: none; + padding: 0; + margin: 0; + } } -} - -.radio-group--read-only { - .radio-input { - cursor: default; - &:hover { - border-color: var(--theme-elevation-50); - } + .radio-group--read-only { + .radio-input { + cursor: default; - &__label { - color: var(--theme-elevation-400); - } + &:hover { + border-color: var(--theme-elevation-50); + } - &--is-selected { - .radio-input__styled-radio { - &:before { - background-color: var(--theme-elevation-250); - } + &__label { + color: var(--theme-elevation-400); } - } - &:not(.radio-input--is-selected) { - &:hover { + &--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='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='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 5a0c9f2734d..cf087bd35d7 100644 --- a/packages/ui/src/fields/Relationship/index.scss +++ b/packages/ui/src/fields/Relationship/index.scss @@ -1,63 +1,65 @@ @import '../../scss/styles.scss'; -.field-type.relationship { - position: relative; -} - -.relationship { - &__wrap { - display: flex; - width: 100%; +@layer payload-default { + .field-type.relationship { + position: relative; + } - div.react-select { + .relationship { + &__wrap { + display: flex; width: 100%; - min-width: 0; + + 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); - } + &__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; + &--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; + 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 { - @include darkInputError; + 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 3bc489235ef..170fe895366 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 2fad7cc2ad8..321535ea0be 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; - } +@layer payload-default { + .relationship--single-value { + &.rs__single-value { + overflow: visible; + min-width: 0; + } - &__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); + &__label-text { + max-width: unset; + display: flex; + align-items: center; + overflow: visible; + width: 100%; + flex-shrink: 1; } - &:focus-visible { - outline: var(--accessibility-outline); + &__text { + overflow: hidden; + text-overflow: ellipsis; } - &:hover { - background-color: var(--theme-elevation-100); + &__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; + &__label { + flex-grow: 1; + } } } diff --git a/packages/ui/src/fields/Row/index.scss b/packages/ui/src/fields/Row/index.scss index 5c0c573f89d..b9df2888697 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; } - } - } - @include mid-break { - .row__fields { - display: block; - margin-left: 0; - margin-right: 0; - width: 100%; + // 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% !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 9507c99ad41..76f92c188b8 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; + 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; + 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 2312a65f294..1adf725e2b6 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); +@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; - } - - &:after { - content: ' '; - position: absolute; - right: 0; - bottom: -1px; - left: 0; - height: 1px; - background: var(--theme-elevation-800); - opacity: 0; - } - - &:hover { - opacity: 0.75; + &:last-child { + margin: 0; + } &:after { - opacity: 0.2; + content: ' '; + position: absolute; + right: 0; + bottom: -1px; + left: 0; + height: 1px; + background: var(--theme-elevation-800); + opacity: 0; } - } - &--active { - opacity: 1 !important; + &:hover { + opacity: 0.75; - &:after { + &:after { + opacity: 0.2; + } + } + + &--active { opacity: 1 !important; - height: 2px; + + &:after { + opacity: 1 !important; + height: 2px; + } } - } - &__description { - margin-bottom: calc(var(--base) / 2); - } + &__description { + margin-bottom: calc(var(--base) / 2); + } - @include small-break { - margin: 0 base(0.75) 0 0; - padding-bottom: base(0.5); + @include small-break { + margin: 0 base(0.75) 0 0; + padding-bottom: base(0.5); - &:last-child { - margin: 0; + &: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='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); + 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 119d1107fc2..07682eb23e1 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); - - &__content-wrap { - padding-left: var(--gutter-h); - padding-right: var(--gutter-h); - } +@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); - &--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-field__content-wrap { - padding-left: $baseline; - padding-right: $baseline; + &__tabs-wrap { + overflow-x: auto; + overflow-y: hidden; + margin-bottom: $baseline; } - .tabs-field__tabs { + &__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; } } - } - &__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); } - } - &__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); + @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 fe73e0abe53..fcc03a753ea 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='light'] { + .field-type.text { + &.error { + input { + @include lightInputError; + } } } } -} -html[data-theme='dark'] { - .field-type.text { - &.error { - input { - @include darkInputError; + 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 011f70cb107..751fcaefb70 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%; - @include mid-break { - max-height: 60vh; + // 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; + &.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; - } + // 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; + // 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; + &::-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; - } + // 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::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; - } + .textarea-clone::after { + content: attr(data-after); + opacity: 0.5; + } - @include mid-break { - padding: 0; + @include mid-break { + padding: 0; + } } -} -html[data-theme='light'] { - .field-type.textarea { - &.error { - .textarea-outer { - @include lightInputError; + 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 4640ca9661b..d733f978cd7 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); + } + + .thumbnail { + width: 26px; + height: 26px; + } - .uploadDocRelationshipContent__details { - line-height: 1.2; + .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 b07ac1a75ce..26754c6897b 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 9f8437d56fa..1ebac551184 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); } - } - &__meta { - margin: 0; - color: var(--theme-elevation-500); - text-wrap: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } + &__filename { + margin: 0; + text-wrap: nowrap; + text-overflow: ellipsis; + overflow: hidden; + a { + text-decoration: none; + } + } - &__actions { - flex-shrink: 0; - display: flex; - } + &__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; + .btn { + margin: 0; + } } } diff --git a/packages/ui/src/fields/Upload/UploadCard/index.scss b/packages/ui/src/fields/Upload/UploadCard/index.scss index d4a7f57cc1d..c1c7366a773 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 83a62beb5e2..bc351538d5b 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); - } +@layer payload-default { + .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 { + 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; + &__dropzoneContent__buttons { + display: flex; + gap: calc(var(--base) / 2); + position: relative; + left: -2px; - .btn .btn__content { - gap: calc(var(--base) / 5); - } + .btn .btn__content { + gap: calc(var(--base) / 5); + } - .btn__label { - font-weight: 100; + .btn__label { + font-weight: 100; + } } - } - &__dropzoneContent__orText { - color: var(--theme-elevation-500); - text-transform: lowercase; - } + &__dropzoneContent__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); - } + &__dragAndDropText { + 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); - } + &__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); - } + .shimmer-effect { + border-radius: var(--style-radius-s); + border: 1px solid var(--theme-border-color); + } - @include small-break { - &__dragAndDropText { - display: none; + @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 6e73bcffb93..87afc63f9fc 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/RenderFields/index.scss b/packages/ui/src/forms/RenderFields/index.scss index f5411689e46..767cf2a8fa5 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; +@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; } - & > .field-type { - margin-bottom: var(--spacing-field); - position: relative; + .render-fields { + --spacing-field: var(--base); - &[type='hidden'] { - margin-bottom: 0; + &--margins-small { + --spacing-field: var(--base); } - &:first-child { - margin-top: 0; + &--margins-none { + --spacing-field: 0; } - &:last-of-type { - margin-bottom: 0; + & > .field-type { + margin-bottom: var(--spacing-field); + 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) { - & > .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; - } + // 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; + &: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 66aba3a8969..14c7d9ddf92 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 ba39af22ad5..6901e313ea3 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); - } +@layer payload-default { + .graphic-account { + vector-effect: non-scaling-stroke; + overflow: visible; + position: relative; - &--active { - .graphic-account { - &__bg { - fill: var(--theme-elevation-500); - stroke: var(--theme-text); - } + &__bg { + fill: var(--theme-elevation-50); + stroke: var(--theme-elevation-200); + stroke-width: 1px; + } - &__head, - &__body { - fill: var(--theme-text); - } + &__head, + &__body { + fill: var(--theme-elevation-200); } - } - &:hover:not(.graphic-account--active) { - .graphic-account { - &__bg { - fill: var(--theme-elevation-200); - stroke: var(--theme-elevation-600); - } + &--active { + .graphic-account { + &__bg { + fill: var(--theme-elevation-500); + stroke: var(--theme-text); + } - &__head, - &__body { - fill: var(--theme-elevation-600); + &__head, + &__body { + fill: var(--theme-text); + } } } - } -} -[data-theme='light'] { - .graphic-account { - &--active { + &:hover:not(.graphic-account--active) { .graphic-account { &__bg { - fill: var(--theme-elevation-300); + 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/icons/Calendar/index.scss b/packages/ui/src/icons/Calendar/index.scss index 7756ed466f2..a619e9fc253 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 b077a5f3180..5ff197e17bb 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 a826dd4e82b..5cad750b50d 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 638890ca3af..1864ad45070 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 5129cffd0cb..d2b287b2f5d 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 caf94c76383..ea8ec9c7871 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 d997a5b1475..5691783d6a1 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 98c33bc08b0..0dfba36cdde 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 b8b9d3892f1..ce5d4141743 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 55504a43deb..2a887e655cd 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 8bd3ac28d22..a77eb88cbae 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 c9e0182ba43..25849b4d13c 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 46c7807ee1a..09afad740aa 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 71b58d54cfc..10348a339e8 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 902016a440f..697c3aa4ff0 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 02706567f1a..5b33e0559ca 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 80d4a4b0cf8..b85863a6070 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/scss/app.scss b/packages/ui/src/scss/app.scss index 90254443b00..b0c575df896 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); - - --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; - } -} +@layer payload-default { + :root { + --base-px: 20; + --base-body-size: 13; + --base: calc((var(--base-px) / var(--base-body-size)) * 1rem); -///////////////////////////// -// GLOBAL STYLES -///////////////////////////// + --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; -* { - box-sizing: border-box; -} + --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); + } -html { - @extend %body; - background: var(--theme-bg); - -webkit-font-smoothing: antialiased; + @include small-break { + --gutter-h: #{base(0.8)}; + --spacing-view-bottom: calc(var(--base) * 2); + --nav-width: 100vw; + } + } - &[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; + ///////////////////////////// + // GLOBAL STYLES + ///////////////////////////// + + * { + box-sizing: border-box; + } - ::selection { - color: var(--color-base-1000); + 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; + + ::selection { + color: var(--color-base-1000); + } + + ::-moz-selection { + color: var(--color-base-1000); + } } - ::-moz-selection { - color: var(--color-base-1000); + @include mid-break { + font-size: 12px; } } - @include mid-break { - font-size: 12px; + html, + body, + #app { + height: 100%; } -} -html, -body, -#app { - height: 100%; -} + 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; + } -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; -} + ::selection { + background: var(--color-success-250); + color: var(--theme-base-800); + } -::selection { - background: var(--color-success-250); - color: var(--theme-base-800); -} + ::-moz-selection { + background: var(--color-success-250); + color: var(--theme-base-800); + } -::-moz-selection { - background: var(--color-success-250); - color: var(--theme-base-800); -} + img { + max-width: 100%; + height: auto; + display: block; + } -img { - max-width: 100%; - height: auto; - display: block; -} + h1 { + @extend %h1; + } -h1 { - @extend %h1; -} + h2 { + @extend %h2; + } -h2 { - @extend %h2; -} + h3 { + @extend %h3; + } -h3 { - @extend %h3; -} + h4 { + @extend %h4; + } -h4 { - @extend %h4; -} + h5 { + @extend %h5; + } -h5 { - @extend %h5; -} + h6 { + @extend %h6; + } -h6 { - @extend %h6; -} + p { + margin: 0; + } -p { - margin: 0; -} + ul, + ol { + padding-left: $baseline; + margin: 0; + } -ul, -ol { - padding-left: $baseline; - margin: 0; -} + :focus-visible { + outline: var(--accessibility-outline); + } -:focus-visible { - outline: var(--accessibility-outline); -} + a { + color: currentColor; -a { - color: currentColor; + &:focus { + &:not(:focus-visible) { + opacity: 0.8; + } + outline: none; + } - &:focus { - &:not(:focus-visible) { - opacity: 0.8; + &:active { + opacity: 0.7; + outline: none; } - outline: none; } - &:active { - opacity: 0.7; - outline: none; + svg { + vertical-align: middle; } -} -svg { - vertical-align: middle; -} + dialog { + width: 100%; + border: 0; + padding: 0; + color: currentColor; + } -dialog { - width: 100%; - border: 0; - padding: 0; - color: currentColor; -} + .payload__modal-item { + min-height: 100%; + background: transparent; + } -.payload__modal-item { - min-height: 100%; - background: transparent; -} + .payload__modal-container--enterDone { + overflow: auto; + } -.payload__modal-container--enterDone { - overflow: auto; -} + .payload__modal-item--enter, + .payload__modal-item--enterDone { + z-index: var(--z-modal); + } -.payload__modal-item--enter, -.payload__modal-item--enterDone { - z-index: var(--z-modal); + // @import '~payload-user-css'; TODO: re-enable this } - -// @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 42cea058596..1eaa88cb0a9 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); -} + --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); + 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-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-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-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-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 eeda892c2df..e73efa9c003 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 a5bf4c35fd7..33192936a4b 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; - } +@layer payload-default { + .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__toast { + padding: base(0.5); + border-radius: $style-radius-m; + font-weight: 600; + } - .Toastify__close-button { - align-self: center; - opacity: 0.7; + .Toastify__close-button { + align-self: center; + opacity: 0.7; - &:hover { - opacity: 1; + &:hover { + opacity: 1; + } } - } - .Toastify__toast--success { - color: var(--color-success-900); - background: var(--color-success-500); + .Toastify__toast--success { + color: var(--color-success-900); + background: var(--color-success-500); - .Toastify__progress-bar { - background-color: var(--color-success-900); + .Toastify__progress-bar { + background-color: var(--color-success-900); + } } - } - .Toastify__close-button--success { - 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__toast--error { + background: var(--theme-error-500); + color: #fff; - .Toastify__progress-bar { - background-color: #fff; + .Toastify__progress-bar { + background-color: #fff; + } } - } - .Toastify__close-button--light { - color: inherit; - } + .Toastify__close-button--light { + color: inherit; + } - @include mid-break { - .Toastify__toast-container { - left: $baseline; - right: $baseline; + @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 116845ac341..4d3b0bc3782 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; - - .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); - } +@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; + + 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; + [dir='RTL'] & { + right: unset; + left: 0.5rem; + } } - } - .toast-title { - line-height: base(1); - margin-right: base(1); - } + .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); + .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); - &[data-front='false'] { .toast-content { - opacity: 0; + transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19); + width: 100%; } - } - &[data-expanded='true'] { - .toast-content { - opacity: 1; + &[data-front='false'] { + .toast-content { + opacity: 0; + } } - } - .toast-icon { - width: base(0.8); - height: base(0.8); - margin: 0; - display: flex; - align-items: center; - justify-content: center; + &[data-expanded='true'] { + .toast-content { + opacity: 1; + } + } - & > * { - width: base(1.2); - height: base(1.2); + .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); + &.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); + .payload-toast-close-button { + color: var(--theme-warning-600); - &:hover { - color: var(--theme-warning-250); + &: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); + &.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); + .payload-toast-close-button { + color: var(--theme-error-600); - &:hover { - color: var(--theme-error-250); + &: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); + &.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); + .payload-toast-close-button { + color: var(--theme-success-600); - &:hover { - color: var(--theme-success-250); + &: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); + &.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); + .payload-toast-close-button { + color: var(--theme-elevation-600); - &:hover { - color: var(--theme-elevation-250); + &:hover { + color: var(--theme-elevation-250); + } } } } diff --git a/packages/ui/src/scss/type.scss b/packages/ui/src/scss/type.scss index 997e43e24a3..652940b27b7 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; -} +@layer payload-default { + %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); + %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); + @include small-break { + letter-spacing: -0.5px; + font-size: base(1.25); + } } -} -%h2 { - margin: 0; - font-size: base(1.3); - line-height: base(1.6); + %h2 { + margin: 0; + font-size: base(1.3); + line-height: base(1.6); - @include small-break { - font-size: base(0.85); + @include small-break { + font-size: base(0.85); + } } -} -%h3 { - margin: 0; - font-size: base(1); - line-height: base(1.2); + %h3 { + margin: 0; + font-size: base(1); + line-height: base(1.2); - @include small-break { - font-size: base(0.65); - line-height: 1.25; + @include small-break { + font-size: base(0.65); + line-height: 1.25; + } } -} -%h4 { - margin: 0; - font-size: base(0.8); - line-height: base(1); - letter-spacing: -0.375px; -} - -%h5 { - margin: 0; - font-size: base(0.65); - line-height: base(0.8); -} + %h4 { + margin: 0; + font-size: base(0.8); + line-height: base(1); + letter-spacing: -0.375px; + } -%h6 { - margin: 0; - font-size: base(0.6); - line-height: base(0.8); -} + %h5 { + margin: 0; + font-size: base(0.65); + line-height: base(0.8); + } -%small { - margin: 0; - font-size: 12px; - line-height: 20px; -} + %h6 { + margin: 0; + font-size: base(0.6); + line-height: base(0.8); + } -///////////////////////////// -// TYPE STYLES -///////////////////////////// + %small { + margin: 0; + font-size: 12px; + line-height: 20px; + } -%large-body { - font-size: base(0.6); - line-height: base(1); - letter-spacing: base(0.02); + ///////////////////////////// + // TYPE STYLES + ///////////////////////////// - @include mid-break { - font-size: base(0.7); + %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); + @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); -} + %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); + %code { + font-size: base(0.4); + color: var(--theme-elevation-400); - span { - color: var(--theme-elevation-800); + span { + color: var(--theme-elevation-800); + } } } diff --git a/test/admin-root/next-env.d.ts b/test/admin-root/next-env.d.ts index 4f11a03dc6c..40c3d68096c 100644 --- a/test/admin-root/next-env.d.ts +++ b/test/admin-root/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information. diff --git a/test/admin-root/payload-types.ts b/test/admin-root/payload-types.ts index 9c7218106e3..38ca6e9ff4e 100644 --- a/test/admin-root/payload-types.ts +++ b/test/admin-root/payload-types.ts @@ -13,6 +13,7 @@ export interface Config { collections: { posts: Post; users: User; + 'payload-locked-documents': PayloadLockedDocument; 'payload-preferences': PayloadPreference; 'payload-migrations': PayloadMigration; }; @@ -73,6 +74,29 @@ 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: 'posts'; + value: string | Post; + } | 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". From d564cd44e950cedcd4a78bec5fae76c72130b4f6 Mon Sep 17 00:00:00 2001 From: Jacob Fletcher Date: Fri, 4 Oct 2024 17:29:38 -0400 Subject: [PATCH 07/20] chore: deflakes lexical e2e test (#8559) This has caused me great pain. The problem with this test is that the page was waiting for a URL which includes a search query that never arrives. This moves the check into a regex pattern for a more accurate catch. --- test/fields/collections/Lexical/e2e/blocks/e2e.spec.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/fields/collections/Lexical/e2e/blocks/e2e.spec.ts b/test/fields/collections/Lexical/e2e/blocks/e2e.spec.ts index 60c881ed07f..76d02ce1399 100644 --- a/test/fields/collections/Lexical/e2e/blocks/e2e.spec.ts +++ b/test/fields/collections/Lexical/e2e/blocks/e2e.spec.ts @@ -870,7 +870,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) From 463490f670d5a1e71d34a1c65f3d708369934680 Mon Sep 17 00:00:00 2001 From: Elliot DeNolf Date: Fri, 4 Oct 2024 18:38:27 -0700 Subject: [PATCH 08/20] fix(templates): await params/cookies properly (#8560) --- templates/website/src/app/(frontend)/[slug]/page.tsx | 3 ++- .../src/app/(payload)/admin/[[...segments]]/page.tsx | 8 ++++---- templates/website/src/utilities/getMeUser.ts | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/templates/website/src/app/(frontend)/[slug]/page.tsx b/templates/website/src/app/(frontend)/[slug]/page.tsx index 3a864dfe25d..926f91ce8ed 100644 --- a/templates/website/src/app/(frontend)/[slug]/page.tsx +++ b/templates/website/src/app/(frontend)/[slug]/page.tsx @@ -73,7 +73,8 @@ export default async function Page({ params: paramsPromise }: Args) { ) } -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, }) diff --git a/templates/website/src/app/(payload)/admin/[[...segments]]/page.tsx b/templates/website/src/app/(payload)/admin/[[...segments]]/page.tsx index 75241971d57..0de685cd62b 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 516d4e7348d..a899596df42 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`, { From 2ba40f33357c6123c3bbfa50a31e87755791bb6d Mon Sep 17 00:00:00 2001 From: Jacob Fletcher Date: Sat, 5 Oct 2024 09:13:43 -0400 Subject: [PATCH 09/20] chore: removes duplicative join field test (#8558) There are two of the exact same e2e tests for the join field, which throws an error when running these tests locally because they have identical names. --- test/joins/e2e.spec.ts | 30 ------------------------------ 1 file changed, 30 deletions(-) diff --git a/test/joins/e2e.spec.ts b/test/joins/e2e.spec.ts index e6e078e4bdf..81221a61ed7 100644 --- a/test/joins/e2e.spec.ts +++ b/test/joins/e2e.spec.ts @@ -186,36 +186,6 @@ test.describe('Admin Panel', () => { await expect(joinField.locator('.relationship-table tbody tr')).toBeHidden() }) - test('should update relationship table when new upload is created', async () => { - await navigateToDoc(page, uploadsURL) - const joinField = page.locator('.field-type.join').first() - await expect(joinField).toBeVisible() - - const addButton = joinField.locator('.relationship-table__actions button.doc-drawer__toggler', { - hasText: exactText('Add new'), - }) - - await expect(addButton).toBeVisible() - - await addButton.click() - const drawer = page.locator('[id^=doc-drawer_posts_1_]') - await expect(drawer).toBeVisible() - const uploadField = drawer.locator('#field-upload') - await expect(uploadField).toBeVisible() - const uploadValue = uploadField.locator('.upload-relationship-details img') - await expect(uploadValue).toBeVisible() - const titleField = drawer.locator('#field-title') - await expect(titleField).toBeVisible() - await titleField.fill('Test post with 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'), - }), - ).toBeVisible() - }) - test('should update relationship table when new upload is created', async () => { await navigateToDoc(page, uploadsURL) const joinField = page.locator('.field-type.join').first() From d88e0617d64d77a4731d6bb505377db3fee06e91 Mon Sep 17 00:00:00 2001 From: Elliot DeNolf Date: Sun, 6 Oct 2024 09:59:51 -0700 Subject: [PATCH 10/20] chore: sort release note sections --- scripts/utils/updateChangelog.ts | 70 +++++++++++++++++++------------- 1 file changed, 42 insertions(+), 28 deletions(-) diff --git a/scripts/utils/updateChangelog.ts b/scripts/utils/updateChangelog.ts index 371ba5e9b1b..bc89e5a2325 100755 --- a/scripts/utils/updateChangelog.ts +++ b/scripts/utils/updateChangelog.ts @@ -62,41 +62,53 @@ export const updateChangelog = async (args: Args = {}): Promise const conventionalCommits = await getLatestCommits(fromVersion, toVersion) - const sections: Record<'breaking' | 'feat' | 'fix' | 'perf', string[]> = { - feat: [], - fix: [], - perf: [], - breaking: [], - } - - // Group commits by type - conventionalCommits.forEach((c) => { - if (c.isBreaking) { - sections.breaking.push(formatCommitForChangelog(c, true)) - } + type SectionKey = 'breaking' | 'feat' | 'fix' | 'perf' + + const sections = conventionalCommits.reduce( + (sections, c) => { + if (c.isBreaking) { + sections.breaking.push(c) + } + + if (['feat', 'fix', 'perf'].includes(c.type)) { + sections[c.type].push(c) + } + return sections + }, + { feat: [], fix: [], perf: [], breaking: [] } as Record, + ) - if (c.type === 'feat' || c.type === 'fix' || c.type === 'perf') { - sections[c.type].push(formatCommitForChangelog(c)) - } + // Sort commits by scope, unscoped first + Object.values(sections).forEach((section) => { + section.sort((a, b) => (a.scope || '').localeCompare(b.scope || '')) }) + const stringifiedSections = Object.fromEntries( + Object.entries(sections).map(([key, commits]) => [ + key, + commits.map((commit) => formatCommitForChangelog(commit, key === 'breaking')), + ]), + ) + // Fetch commits for fromVersion to toVersion const contributors = await createContributorSection(conventionalCommits) const yyyyMMdd = new Date().toISOString().split('T')[0] // Might need to swap out HEAD for the new proposed version let changelog = `## [${proposedReleaseVersion}](https://github.com/payloadcms/payload/compare/${fromVersion}...${proposedReleaseVersion}) (${yyyyMMdd})\n\n\n` - if (sections.feat.length) { - changelog += `### 🚀 Features\n\n${sections.feat.join('\n')}\n\n` + + // Add section headers + if (stringifiedSections.feat.length) { + changelog += `### 🚀 Features\n\n${stringifiedSections.feat.join('\n')}\n\n` } - if (sections.perf.length) { - changelog += `### ⚡ Performance\n\n${sections.perf.join('\n')}\n\n` + if (stringifiedSections.perf.length) { + changelog += `### ⚡ Performance\n\n${stringifiedSections.perf.join('\n')}\n\n` } - if (sections.fix.length) { - changelog += `### 🐛 Bug Fixes\n\n${sections.fix.join('\n')}\n\n` + if (stringifiedSections.fix.length) { + changelog += `### 🐛 Bug Fixes\n\n${stringifiedSections.fix.join('\n')}\n\n` } - if (sections.breaking.length) { - changelog += `### ⚠️ BREAKING CHANGES\n\n${sections.breaking.join('\n')}\n\n` + if (stringifiedSections.breaking.length) { + changelog += `### ⚠️ BREAKING CHANGES\n\n${stringifiedSections.breaking.join('\n')}\n\n` } if (writeChangelog) { @@ -200,11 +212,13 @@ function formatCommitForChangelog(commit: GitCommit, includeBreakingNotes = fals if (isBreaking && includeBreakingNotes) { // Parse breaking change notes from commit body const [rawNotes, _] = commit.body.split('\n\n') - let notes = rawNotes - .split('\n') - .map((l) => ` ${l}`) // Indent notes - .join('\n') - .trim() + let notes = + ` ` + + rawNotes + .split('\n') + .map((l) => ` ${l}`) // Indent notes + .join('\n') + .trim() // Remove random trailing quotes that sometimes appear if (notes.endsWith('"')) { From 7aed0d7c2ef3dcbe6b19e93a7fceae8f04685a21 Mon Sep 17 00:00:00 2001 From: Elliot DeNolf Date: Sun, 6 Oct 2024 13:23:30 -0700 Subject: [PATCH 11/20] chore(eslint): payload logger usage (#8578) Payload uses `pino` for a logger. When using the error logger `payload.logger.error` it is possible to pass any number of arguments like this: `payload.logger.error('Some error ocurred', err)`. However, in this scenario, the full error will not be serialized by `pino`. It must be passed as the `err` property inside of an object in order to be properly serialized. This rule ensures that a user is using this function call to properly serialize the error. --- eslint.config.js | 1 + .../proper-payload-logger-usage.js | 89 +++++++++++++++++++ packages/eslint-plugin/index.mjs | 6 +- .../tests/proper-payload-logger-usage.js | 72 +++++++++++++++ 4 files changed, 167 insertions(+), 1 deletion(-) create mode 100644 packages/eslint-plugin/customRules/proper-payload-logger-usage.js create mode 100644 packages/eslint-plugin/tests/proper-payload-logger-usage.js diff --git a/eslint.config.js b/eslint.config.js index 038f4347f8c..ae45e1d6397 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -53,6 +53,7 @@ export const rootEslintConfig = [ 'payload/no-relative-monorepo-imports': 'error', 'payload/no-imports-from-exports-dir': 'error', 'payload/no-imports-from-self': 'error', + 'payload/proper-payload-logger-usage': 'error', }, }, { diff --git a/packages/eslint-plugin/customRules/proper-payload-logger-usage.js b/packages/eslint-plugin/customRules/proper-payload-logger-usage.js new file mode 100644 index 00000000000..01817687f9f --- /dev/null +++ b/packages/eslint-plugin/customRules/proper-payload-logger-usage.js @@ -0,0 +1,89 @@ +export const rule = { + meta: { + type: 'problem', + docs: { + description: 'Disallow improper usage of payload.logger.error', + recommended: 'error', + }, + messages: { + improperUsage: 'Improper logger usage. Pass { msg, err } so full error stack is logged.', + wrongErrorField: 'Improper usage. Use { err } instead of { error }.', + wrongMessageField: 'Improper usage. Use { msg } instead of { message }.', + }, + schema: [], + }, + create(context) { + return { + CallExpression(node) { + const callee = node.callee + + // Function to check if the expression ends with `payload.logger.error` + function isPayloadLoggerError(expression) { + return ( + expression.type === 'MemberExpression' && + expression.property.name === 'error' && // must be `.error` + expression.object.type === 'MemberExpression' && + expression.object.property.name === 'logger' && // must be `.logger` + (expression.object.object.name === 'payload' || // handles just `payload` + (expression.object.object.type === 'MemberExpression' && + expression.object.object.property.name === 'payload')) // handles `*.payload` + ) + } + + // Check if the function being called is `payload.logger.error` or `*.payload.logger.error` + if (isPayloadLoggerError(callee)) { + const args = node.arguments + + // Case 1: Single string is passed as the argument + if ( + args.length === 1 && + args[0].type === 'Literal' && + typeof args[0].value === 'string' + ) { + return // Valid: single string argument + } + + // Case 2: Object is passed as the first argument + if (args.length > 0 && args[0].type === 'ObjectExpression') { + const properties = args[0].properties + + // Ensure no { error } key, only { err } is allowed + properties.forEach((prop) => { + if (prop.key.type === 'Identifier' && prop.key.name === 'error') { + context.report({ + node: prop, + messageId: 'wrongErrorField', + }) + } + + // Ensure no { message } key, only { msg } is allowed + if (prop.key.type === 'Identifier' && prop.key.name === 'message') { + context.report({ + node: prop, + messageId: 'wrongMessageField', + }) + } + }) + return // Valid object, checked for 'err'/'error' keys + } + + // Case 3: Improper usage (string + error or additional err/error) + if ( + args.length > 1 && + args[0].type === 'Literal' && + typeof args[0].value === 'string' && + args[1].type === 'Identifier' && + (args[1].name === 'err' || args[1].name === 'error') + ) { + context.report({ + node, + messageId: 'improperUsage', + }) + } + } + }, + } + }, +} + +export default rule diff --git a/packages/eslint-plugin/index.mjs b/packages/eslint-plugin/index.mjs index dd743b0773f..c2c8a03916b 100644 --- a/packages/eslint-plugin/index.mjs +++ b/packages/eslint-plugin/index.mjs @@ -4,6 +4,7 @@ import noRelativeMonorepoImports from './customRules/no-relative-monorepo-import import noImportsFromExportsDir from './customRules/no-imports-from-exports-dir.js' import noFlakyAssertions from './customRules/no-flaky-assertions.js' import noImportsFromSelf from './customRules/no-imports-from-self.js' +import properPinoLoggerErrorUsage from './customRules/proper-payload-logger-usage.js' /** * @type {import('eslint').ESLint.Plugin} @@ -11,10 +12,13 @@ import noImportsFromSelf from './customRules/no-imports-from-self.js' const index = { rules: { 'no-jsx-import-statements': noJsxImportStatements, - 'no-non-retryable-assertions': noNonRetryableAssertions, 'no-relative-monorepo-imports': noRelativeMonorepoImports, 'no-imports-from-exports-dir': noImportsFromExportsDir, 'no-imports-from-self': noImportsFromSelf, + 'proper-payload-logger-usage': properPinoLoggerErrorUsage, + + // Testing-related + 'no-non-retryable-assertions': noNonRetryableAssertions, 'no-flaky-assertions': noFlakyAssertions, 'no-wait-function': { create: function (context) { diff --git a/packages/eslint-plugin/tests/proper-payload-logger-usage.js b/packages/eslint-plugin/tests/proper-payload-logger-usage.js new file mode 100644 index 00000000000..1eccd5123fb --- /dev/null +++ b/packages/eslint-plugin/tests/proper-payload-logger-usage.js @@ -0,0 +1,72 @@ +import { RuleTester } from 'eslint' +import rule from '../customRules/proper-payload-logger-usage.js' + +const ruleTester = new RuleTester() + +// Example tests for the rule +ruleTester.run('no-improper-payload-logger-error', rule, { + valid: [ + // Valid: payload.logger.error with object containing { msg, err } + { + code: "payload.logger.error({ msg: 'some message', err })", + }, + // Valid: payload.logger.error with a single string + { + code: "payload.logger.error('Some error message')", + }, + // Valid: *.payload.logger.error with object + { + code: "this.payload.logger.error({ msg: 'another message', err })", + }, + { + code: "args.req.payload.logger.error({ msg: 'different message', err })", + }, + ], + + invalid: [ + // Invalid: payload.logger.error with both string and error + { + code: "payload.logger.error('Some error message', err)", + errors: [ + { + messageId: 'improperUsage', + }, + ], + }, + // Invalid: *.payload.logger.error with both string and error + { + code: "this.payload.logger.error('Some error message', error)", + errors: [ + { + messageId: 'improperUsage', + }, + ], + }, + { + code: "args.req.payload.logger.error('Some error message', err)", + errors: [ + { + messageId: 'improperUsage', + }, + ], + }, + // Invalid: payload.logger.error with object containing 'message' key + { + code: "payload.logger.error({ message: 'not the right property name' })", + errors: [ + { + messageId: 'wrongMessageField', + }, + ], + }, + // Invalid: *.payload.logger.error with object containing 'error' key + { + code: "this.payload.logger.error({ msg: 'another message', error })", + errors: [ + { + messageId: 'wrongErrorField', + }, + ], + }, + ], +}) From c473db7879812eedb6f3f8897cd88862bb3b5a96 Mon Sep 17 00:00:00 2001 From: Because789 Date: Mon, 7 Oct 2024 03:34:23 +0200 Subject: [PATCH 12/20] docs: fix typo in array.mdx (#8561) --- docs/fields/array.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/fields/array.mdx b/docs/fields/array.mdx index eeb27696528..50642e6253d 100644 --- a/docs/fields/array.mdx +++ b/docs/fields/array.mdx @@ -66,7 +66,7 @@ _\* An asterisk denotes that a property is required._ ## Admin Options -The customize the appearance and behavior of the Array Field in the [Admin Panel](../admin/overview), you can use the `admin` option: +To customize the appearance and behavior of the Array Field in the [Admin Panel](../admin/overview), you can use the `admin` option: ```ts import type { Field } from 'payload/types' From bf50716fc58bc5b3371e7585a4b73d75e460a147 Mon Sep 17 00:00:00 2001 From: Sasha <64744993+r1tsuu@users.noreply.github.com> Date: Mon, 7 Oct 2024 04:37:59 +0300 Subject: [PATCH 13/20] docs: updates array field admin.components.RowLabel example (#8548) Fixes https://github.com/payloadcms/payload/issues/8536 --- docs/fields/array.mdx | 31 +++++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/docs/fields/array.mdx b/docs/fields/array.mdx index 50642e6253d..4e46406bad3 100644 --- a/docs/fields/array.mdx +++ b/docs/fields/array.mdx @@ -81,11 +81,11 @@ export const MyArrayField: Field = { The Array Field inherits all of the default options from the base [Field Admin Config](../admin/fields#admin-options), plus the following additional options: -| Option | Description | -| ------------------------- | -------------------------------------------------------------------------------------------------------------------- | -| **`initCollapsed`** | Set the initial collapsed state | -| **`components.RowLabel`** | Function or React component to be rendered as the label on the array row. Receives `({ data, index, path })` as args | -| **`isSortable`** | Disable order sorting by setting this value to `false` | +| Option | Description | +| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | +| **`initCollapsed`** | Set the initial collapsed state | +| **`components.RowLabel`** | React component to be rendered as the label on the array row. [Example](#example-of-a-custom-rowlabel-component) | +| **`isSortable`** | Disable order sorting by setting this value to `false` | ## Example @@ -127,12 +127,27 @@ export const ExampleCollection: CollectionConfig = { ], admin: { components: { - RowLabel: ({ data, index }) => { - return data?.title || `Slide ${String(index).padStart(2, '0')}` - }, + RowLabel: '/path/to/ArrayRowLabel#ArrayRowLabel', }, }, }, ], } ``` + +### Example of a custom RowLabel component + + +```tsx +'use client' + +import { useRowLabel } from '@payloadcms/ui' + +export const ArrayRowLabel = () => { + const { data, rowNumber } = useRowLabel<{ title?: string }>() + + const customLabel = `${data.title || 'Slide'} ${String(rowNumber).padStart(2, '0')} ` + + return
Custom Label: {customLabel}
+} +``` From bb3496d7b5433ad37706392eac327723d7ee8e61 Mon Sep 17 00:00:00 2001 From: Because789 Date: Mon, 7 Oct 2024 04:07:32 +0200 Subject: [PATCH 14/20] feat(plugin-seo): adds german translation (#8580) Adds a a German translation to the SEO Plugin. Credits to @fsyntax, since he got it rolling. --- packages/plugin-seo/src/translations/de.ts | 28 +++++++++++++++++++ packages/plugin-seo/src/translations/index.ts | 2 ++ 2 files changed, 30 insertions(+) create mode 100644 packages/plugin-seo/src/translations/de.ts diff --git a/packages/plugin-seo/src/translations/de.ts b/packages/plugin-seo/src/translations/de.ts new file mode 100644 index 00000000000..07c738e05fe --- /dev/null +++ b/packages/plugin-seo/src/translations/de.ts @@ -0,0 +1,28 @@ +import type { GenericTranslationsObject } from '@payloadcms/translations' + +export const de: GenericTranslationsObject = { + $schema: './translation-schema.json', + 'plugin-seo': { + almostThere: 'Fast da', + autoGenerate: 'Automatisch generieren', + bestPractices: 'Best Practices', + characterCount: '{{current}}/{{minLength}}-{{maxLength}} Zeichen, ', + charactersLeftOver: '{{characters}} verbleiben', + charactersToGo: '{{characters}} übrig', + charactersTooMany: '{{characters}} zu viel', + checksPassing: '{{current}}/{{max}} Kontrollen erfolgreich', + good: 'Gut', + imageAutoGenerationTip: 'Die automatische Generierung ruft das ausgewählte Hauptbild ab.', + lengthTipDescription: + 'Diese sollte zwischen {{minLength}} und {{maxLength}} Zeichen lang sein. Für Hilfe beim Schreiben von qualitativ hochwertigen Meta-Beschreibungen siehe ', + lengthTipTitle: + 'Dieser sollte zwischen {{minLength}} und {{maxLength}} Zeichen lang sein. Für Hilfe beim Schreiben von qualitativ hochwertigen Meta-Titeln siehe ', + missing: 'Fehlt', + noImage: 'Kein Bild', + preview: 'Vorschau', + previewDescription: + 'Die genauen Ergebnislisten können je nach Inhalt und Suchrelevanz variieren.', + tooLong: 'Zu lang', + tooShort: 'Zu kurz', + }, +} diff --git a/packages/plugin-seo/src/translations/index.ts b/packages/plugin-seo/src/translations/index.ts index 3774a56d664..80a0fdebfa8 100644 --- a/packages/plugin-seo/src/translations/index.ts +++ b/packages/plugin-seo/src/translations/index.ts @@ -1,5 +1,6 @@ import type { GenericTranslationsObject, NestedKeysStripped } from '@payloadcms/translations' +import { de } from './de.js' import { en } from './en.js' import { es } from './es.js' import { fa } from './fa.js' @@ -11,6 +12,7 @@ import { ru } from './ru.js' import { uk } from './uk.js' export const translations = { + de, en, es, fa, From 6cb128aa60ff749ebbe2191e9b16286a079e33dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Jablo=C3=B1ski?= <43938777+GermanJablo@users.noreply.github.com> Date: Mon, 7 Oct 2024 10:48:04 -0300 Subject: [PATCH 15/20] fix(richtext-lexical): linkFeature doesn't respect admin.routes from payload.config.ts (#8513) Fix #8452 --- .../link/client/plugins/floatingLinkEditor/LinkEditor/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/LinkEditor/index.tsx b/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/LinkEditor/index.tsx index 4750e60f153..b218bc77cb3 100644 --- a/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/LinkEditor/index.tsx +++ b/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/LinkEditor/index.tsx @@ -124,7 +124,7 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R } else { // internal link setLinkUrl( - `/admin/collections/${focusLinkParent.getFields()?.doc?.relationTo}/${ + `${config.routes.admin === '/' ? '' : config.routes.admin}/collections/${focusLinkParent.getFields()?.doc?.relationTo}/${ focusLinkParent.getFields()?.doc?.value }`, ) From 67e6ad81689e8aa05396dccd5cb6c52405cd1a87 Mon Sep 17 00:00:00 2001 From: Patrik Date: Mon, 7 Oct 2024 12:07:03 -0400 Subject: [PATCH 16/20] docs: specifies `defaultLocale` as a required property for localization (#8585) Fixes #8567 --- docs/configuration/localization.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/configuration/localization.mdx b/docs/configuration/localization.mdx index f5878efb895..fc011ea5f12 100644 --- a/docs/configuration/localization.mdx +++ b/docs/configuration/localization.mdx @@ -35,7 +35,8 @@ import { buildConfig } from 'payload' export default buildConfig({ // ... localization: { - locales: ['en', 'es', 'de'] // highlight-line + locales: ['en', 'es', 'de'] // required + defaultLocale: 'en', // required }, }) ``` @@ -63,7 +64,7 @@ export default buildConfig({ rtl: true, }, ], - defaultLocale: 'en', + defaultLocale: 'en', // required fallback: true, }, }) From 2a1321c8132fc583d74d1669ea5185b78556a72f Mon Sep 17 00:00:00 2001 From: Paul Date: Mon, 7 Oct 2024 10:36:15 -0600 Subject: [PATCH 17/20] fix(ui): add unstyled prop to react-select so that payload styles take priority (#8572) Adds `unstyled={true}` prop to the react-select element so that payload's styles take priority. Due to the way react-select adds its own styles (injected into the page) they were higher specificity due to not being in a layer. Fixes this bug with our styles' specificity not being applied ![image](https://github.com/user-attachments/assets/1cd216a4-8125-4312-949e-168c7eb96186) Also fixes https://github.com/payloadcms/payload/issues/8507 --- packages/ui/src/elements/ReactSelect/index.scss | 2 +- packages/ui/src/elements/ReactSelect/index.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/elements/ReactSelect/index.scss b/packages/ui/src/elements/ReactSelect/index.scss index 60cc186ee5b..4d13427d82d 100644 --- a/packages/ui/src/elements/ReactSelect/index.scss +++ b/packages/ui/src/elements/ReactSelect/index.scss @@ -8,7 +8,6 @@ .react-select { .rs__control { @include formInput; - height: auto; padding: base(0.4) base(0.6); flex-wrap: nowrap; } @@ -45,6 +44,7 @@ .rs__group-heading { color: var(--theme-elevation-800); padding-left: base(0.5); + margin-top: base(0.25); margin-bottom: base(0.25); } diff --git a/packages/ui/src/elements/ReactSelect/index.tsx b/packages/ui/src/elements/ReactSelect/index.tsx index 4d364dc34e2..f37fe4e3d62 100644 --- a/packages/ui/src/elements/ReactSelect/index.tsx +++ b/packages/ui/src/elements/ReactSelect/index.tsx @@ -106,6 +106,7 @@ const SelectAdapter: React.FC = (props) => { onMenuClose={onMenuClose} onMenuOpen={onMenuOpen} options={options} + unstyled={true} value={value} /> ) From 1b63ad4cb3b7ca96cc2bbc4a84191d2e74a33c73 Mon Sep 17 00:00:00 2001 From: Jarrod Flesch <30633324+JarrodMFlesch@users.noreply.github.com> Date: Mon, 7 Oct 2024 14:20:07 -0400 Subject: [PATCH 18/20] fix: verify view is inaccessible (#8557) Fixes https://github.com/payloadcms/payload/issues/8470 Cleans up the way we redirect and where it happens. ## Improvements - When you verify, the admin panel will display a toast when it redirects you to the login route. This is contextually helpful as to what is happening. - Removes dead code path, as we always set the _verifiedToken to null after it is used. ## `handleAdminPage` renamed to `getRouteInfo` This function no longer handles routing. It kicks that responsibility back up to the initPage function. ## `isAdminAuthRoute` renamed to `isPublicAdminRoute` This was inversely named as it determines if a given route is public. Also simplifies deterministic logic here. ## `redirectUnauthenticatedUser` argument This is no longer used or needed. We can determine these things by using the `isPublicAdminRoute` function. ## View Style fixes - Reset Password - Forgot Password - Unauthorized --- packages/graphql/src/resolvers/auth/login.ts | 4 +- packages/graphql/src/resolvers/auth/logout.ts | 5 +- .../graphql/src/resolvers/auth/refresh.ts | 4 +- .../src/resolvers/auth/resetPassword.ts | 4 +- .../next/src/elements/FormHeader/index.scss | 6 ++ .../next/src/elements/FormHeader/index.tsx | 22 ++++++ packages/next/src/routes/rest/auth/login.ts | 4 +- packages/next/src/routes/rest/auth/logout.ts | 5 +- packages/next/src/routes/rest/auth/refresh.ts | 4 +- .../src/routes/rest/auth/registerFirstUser.ts | 4 +- .../src/routes/rest/auth/resetPassword.ts | 4 +- .../src/utilities/initPage/handleAdminPage.ts | 48 +++++-------- .../utilities/initPage/handleAuthRedirect.ts | 67 ++++++++----------- packages/next/src/utilities/initPage/index.ts | 24 +++++-- .../next/src/utilities/initPage/shared.ts | 29 +++++--- .../ForgotPasswordForm/index.tsx | 28 ++++---- .../next/src/views/ForgotPassword/index.tsx | 42 ++++++------ .../index.tsx} | 39 +++++------ .../next/src/views/ResetPassword/index.scss | 26 +------ .../next/src/views/ResetPassword/index.tsx | 57 +++++++++------- .../next/src/views/Root/getViewFromConfig.ts | 6 -- packages/next/src/views/Root/index.tsx | 8 ++- .../next/src/views/Unauthorized/index.scss | 29 -------- .../next/src/views/Unauthorized/index.tsx | 21 ++++-- .../next/src/views/Verify/index.client.tsx | 32 +++++++++ packages/next/src/views/Verify/index.tsx | 19 ++++-- packages/payload/src/admin/views/types.ts | 1 + packages/payload/src/auth/cookies.ts | 41 ++++++------ .../src/auth/operations/resetPassword.ts | 2 +- .../src/auth/operations/verifyEmail.ts | 3 - packages/payload/src/exports/shared.ts | 15 +++-- packages/translations/src/languages/ar.ts | 4 +- packages/translations/src/languages/az.ts | 4 +- packages/translations/src/languages/bg.ts | 4 +- packages/translations/src/languages/cs.ts | 4 +- packages/translations/src/languages/de.ts | 4 +- packages/translations/src/languages/en.ts | 3 +- packages/translations/src/languages/es.ts | 4 +- packages/translations/src/languages/fa.ts | 4 +- packages/translations/src/languages/fr.ts | 4 +- packages/translations/src/languages/he.ts | 6 +- packages/translations/src/languages/hr.ts | 19 +++--- packages/translations/src/languages/hu.ts | 4 +- packages/translations/src/languages/it.ts | 4 +- packages/translations/src/languages/ja.ts | 4 +- packages/translations/src/languages/ko.ts | 4 +- packages/translations/src/languages/my.ts | 4 +- packages/translations/src/languages/nb.ts | 6 +- packages/translations/src/languages/nl.ts | 4 +- packages/translations/src/languages/pl.ts | 6 +- packages/translations/src/languages/pt.ts | 8 +-- packages/translations/src/languages/ro.ts | 4 +- packages/translations/src/languages/rs.ts | 8 +-- .../translations/src/languages/rsLatin.ts | 6 +- packages/translations/src/languages/ru.ts | 4 +- packages/translations/src/languages/sk.ts | 6 +- packages/translations/src/languages/sv.ts | 4 +- packages/translations/src/languages/th.ts | 4 +- packages/translations/src/languages/tr.ts | 4 +- packages/translations/src/languages/uk.ts | 4 +- packages/translations/src/languages/vi.ts | 6 +- packages/translations/src/languages/zh.ts | 8 +-- packages/translations/src/languages/zhTw.ts | 6 +- packages/ui/src/providers/Auth/index.tsx | 11 ++- test/access-control/e2e.spec.ts | 7 +- test/helpers.ts | 1 + 66 files changed, 415 insertions(+), 375 deletions(-) create mode 100644 packages/next/src/elements/FormHeader/index.scss create mode 100644 packages/next/src/elements/FormHeader/index.tsx rename packages/next/src/views/ResetPassword/{index.client.tsx => ResetPasswordForm/index.tsx} (71%) create mode 100644 packages/next/src/views/Verify/index.client.tsx diff --git a/packages/graphql/src/resolvers/auth/login.ts b/packages/graphql/src/resolvers/auth/login.ts index 241c204ebec..fe588a563aa 100644 --- a/packages/graphql/src/resolvers/auth/login.ts +++ b/packages/graphql/src/resolvers/auth/login.ts @@ -19,8 +19,8 @@ export function login(collection: Collection): any { const result = await loginOperation(options) const cookie = generatePayloadCookie({ - collectionConfig: collection.config, - payload: context.req.payload, + collectionAuthConfig: collection.config.auth, + cookiePrefix: context.req.payload.config.cookiePrefix, token: result.token, }) diff --git a/packages/graphql/src/resolvers/auth/logout.ts b/packages/graphql/src/resolvers/auth/logout.ts index c81dbb79942..7277ea5a2f8 100644 --- a/packages/graphql/src/resolvers/auth/logout.ts +++ b/packages/graphql/src/resolvers/auth/logout.ts @@ -13,8 +13,9 @@ export function logout(collection: Collection): any { const result = await logoutOperation(options) const expiredCookie = generateExpiredPayloadCookie({ - collectionConfig: collection.config, - payload: context.req.payload, + collectionAuthConfig: collection.config.auth, + config: context.req.payload.config, + cookiePrefix: context.req.payload.config.cookiePrefix, }) context.headers['Set-Cookie'] = expiredCookie return result diff --git a/packages/graphql/src/resolvers/auth/refresh.ts b/packages/graphql/src/resolvers/auth/refresh.ts index ef25253e551..0f5dc8912cb 100644 --- a/packages/graphql/src/resolvers/auth/refresh.ts +++ b/packages/graphql/src/resolvers/auth/refresh.ts @@ -14,8 +14,8 @@ export function refresh(collection: Collection): any { const result = await refreshOperation(options) const cookie = generatePayloadCookie({ - collectionConfig: collection.config, - payload: context.req.payload, + collectionAuthConfig: collection.config.auth, + cookiePrefix: context.req.payload.config.cookiePrefix, token: result.refreshedToken, }) context.headers['Set-Cookie'] = cookie diff --git a/packages/graphql/src/resolvers/auth/resetPassword.ts b/packages/graphql/src/resolvers/auth/resetPassword.ts index b17f4afa17e..161e693225d 100644 --- a/packages/graphql/src/resolvers/auth/resetPassword.ts +++ b/packages/graphql/src/resolvers/auth/resetPassword.ts @@ -23,8 +23,8 @@ export function resetPassword(collection: Collection): any { const result = await resetPasswordOperation(options) const cookie = generatePayloadCookie({ - collectionConfig: collection.config, - payload: context.req.payload, + collectionAuthConfig: collection.config.auth, + cookiePrefix: context.req.payload.config.cookiePrefix, token: result.token, }) context.headers['Set-Cookie'] = cookie diff --git a/packages/next/src/elements/FormHeader/index.scss b/packages/next/src/elements/FormHeader/index.scss new file mode 100644 index 00000000000..950597471b2 --- /dev/null +++ b/packages/next/src/elements/FormHeader/index.scss @@ -0,0 +1,6 @@ +.form-header { + display: flex; + flex-direction: column; + gap: calc(var(--base) * .5); + margin-bottom: var(--base); +} diff --git a/packages/next/src/elements/FormHeader/index.tsx b/packages/next/src/elements/FormHeader/index.tsx new file mode 100644 index 00000000000..22a07eb8f21 --- /dev/null +++ b/packages/next/src/elements/FormHeader/index.tsx @@ -0,0 +1,22 @@ +import React from 'react' + +import './index.scss' + +const baseClass = 'form-header' + +type Props = { + description?: React.ReactNode | string + heading: string +} +export function FormHeader({ description, heading }: Props) { + if (!heading) { + return null + } + + return ( +
+

{heading}

+ {Boolean(description) &&

{description}

} +
+ ) +} diff --git a/packages/next/src/routes/rest/auth/login.ts b/packages/next/src/routes/rest/auth/login.ts index 5714c023d85..f9f046c0d62 100644 --- a/packages/next/src/routes/rest/auth/login.ts +++ b/packages/next/src/routes/rest/auth/login.ts @@ -29,8 +29,8 @@ export const login: CollectionRouteHandler = async ({ collection, req }) => { }) const cookie = generatePayloadCookie({ - collectionConfig: collection.config, - payload: req.payload, + collectionAuthConfig: collection.config.auth, + cookiePrefix: req.payload.config.cookiePrefix, token: result.token, }) diff --git a/packages/next/src/routes/rest/auth/logout.ts b/packages/next/src/routes/rest/auth/logout.ts index e27c319909d..cc49b48b2f0 100644 --- a/packages/next/src/routes/rest/auth/logout.ts +++ b/packages/next/src/routes/rest/auth/logout.ts @@ -30,8 +30,9 @@ export const logout: CollectionRouteHandler = async ({ collection, req }) => { } const expiredCookie = generateExpiredPayloadCookie({ - collectionConfig: collection.config, - payload: req.payload, + collectionAuthConfig: collection.config.auth, + config: req.payload.config, + cookiePrefix: req.payload.config.cookiePrefix, }) headers.set('Set-Cookie', expiredCookie) diff --git a/packages/next/src/routes/rest/auth/refresh.ts b/packages/next/src/routes/rest/auth/refresh.ts index 9c77ca90c30..abf446cff92 100644 --- a/packages/next/src/routes/rest/auth/refresh.ts +++ b/packages/next/src/routes/rest/auth/refresh.ts @@ -20,8 +20,8 @@ export const refresh: CollectionRouteHandler = async ({ collection, req }) => { if (result.setCookie) { const cookie = generatePayloadCookie({ - collectionConfig: collection.config, - payload: req.payload, + collectionAuthConfig: collection.config.auth, + cookiePrefix: req.payload.config.cookiePrefix, token: result.refreshedToken, }) diff --git a/packages/next/src/routes/rest/auth/registerFirstUser.ts b/packages/next/src/routes/rest/auth/registerFirstUser.ts index 7743ce79abd..47995f8258d 100644 --- a/packages/next/src/routes/rest/auth/registerFirstUser.ts +++ b/packages/next/src/routes/rest/auth/registerFirstUser.ts @@ -28,8 +28,8 @@ export const registerFirstUser: CollectionRouteHandler = async ({ collection, re }) const cookie = generatePayloadCookie({ - collectionConfig: collection.config, - payload: req.payload, + collectionAuthConfig: collection.config.auth, + cookiePrefix: req.payload.config.cookiePrefix, token: result.token, }) diff --git a/packages/next/src/routes/rest/auth/resetPassword.ts b/packages/next/src/routes/rest/auth/resetPassword.ts index b32ae23e5ee..4cf7bbe1c48 100644 --- a/packages/next/src/routes/rest/auth/resetPassword.ts +++ b/packages/next/src/routes/rest/auth/resetPassword.ts @@ -20,8 +20,8 @@ export const resetPassword: CollectionRouteHandler = async ({ collection, req }) }) const cookie = generatePayloadCookie({ - collectionConfig: collection.config, - payload: req.payload, + collectionAuthConfig: collection.config.auth, + cookiePrefix: req.payload.config.cookiePrefix, token: result.token, }) diff --git a/packages/next/src/utilities/initPage/handleAdminPage.ts b/packages/next/src/utilities/initPage/handleAdminPage.ts index 24868a322d4..5ef40467fe6 100644 --- a/packages/next/src/utilities/initPage/handleAdminPage.ts +++ b/packages/next/src/utilities/initPage/handleAdminPage.ts @@ -1,25 +1,21 @@ -import type { - Permissions, - SanitizedCollectionConfig, - SanitizedConfig, - SanitizedGlobalConfig, -} from 'payload' - -import { notFound } from 'next/navigation.js' - -import { getRouteWithoutAdmin, isAdminAuthRoute, isAdminRoute } from './shared.js' - -export const handleAdminPage = ({ - adminRoute, - config, - permissions, - route, -}: { +import type { SanitizedCollectionConfig, SanitizedConfig, SanitizedGlobalConfig } from 'payload' + +import { getRouteWithoutAdmin, isAdminRoute } from './shared.js' + +type Args = { adminRoute: string config: SanitizedConfig - permissions: Permissions route: string -}) => { +} +type RouteInfo = { + collectionConfig?: SanitizedCollectionConfig + collectionSlug?: string + docID?: string + globalConfig?: SanitizedGlobalConfig + globalSlug?: string +} + +export function getRouteInfo({ adminRoute, config, route }: Args): RouteInfo { if (isAdminRoute({ adminRoute, config, route })) { const routeWithoutAdmin = getRouteWithoutAdmin({ adminRoute, route }) const routeSegments = routeWithoutAdmin.split('/').filter(Boolean) @@ -33,28 +29,18 @@ export const handleAdminPage = ({ if (collectionSlug) { collectionConfig = config.collections.find((collection) => collection.slug === collectionSlug) - - if (!collectionConfig) { - notFound() - } } if (globalSlug) { globalConfig = config.globals.find((global) => global.slug === globalSlug) - - if (!globalConfig) { - notFound() - } - } - - if (!permissions.canAccessAdmin && !isAdminAuthRoute({ adminRoute, config, route })) { - notFound() } return { collectionConfig, + collectionSlug, docID, globalConfig, + globalSlug, } } diff --git a/packages/next/src/utilities/initPage/handleAuthRedirect.ts b/packages/next/src/utilities/initPage/handleAuthRedirect.ts index 20393b6985a..bba32ae4717 100644 --- a/packages/next/src/utilities/initPage/handleAuthRedirect.ts +++ b/packages/next/src/utilities/initPage/handleAuthRedirect.ts @@ -1,57 +1,46 @@ +import type { User } from 'payload' + import { formatAdminURL } from '@payloadcms/ui/shared' -import { redirect } from 'next/navigation.js' import * as qs from 'qs-esm' -import { isAdminAuthRoute, isAdminRoute } from './shared.js' - -export const handleAuthRedirect = ({ - config, - redirectUnauthenticatedUser, - route, - searchParams, -}: { +type Args = { config - redirectUnauthenticatedUser: boolean | string route: string searchParams: { [key: string]: string | string[] } -}) => { + user?: User +} +export const handleAuthRedirect = ({ config, route, searchParams, user }: Args): string => { const { admin: { - routes: { login: loginRouteFromConfig }, + routes: { login: loginRouteFromConfig, unauthorized: unauthorizedRoute }, }, routes: { admin: adminRoute }, } = config - if (!isAdminAuthRoute({ adminRoute, config, route })) { - if (searchParams && 'redirect' in searchParams) { - delete searchParams.redirect - } - - const redirectRoute = encodeURIComponent( - route + Object.keys(searchParams ?? {}).length - ? `${qs.stringify(searchParams, { addQueryPrefix: true })}` - : undefined, - ) - - const adminLoginRoute = formatAdminURL({ adminRoute, path: loginRouteFromConfig }) + if (searchParams && 'redirect' in searchParams) { + delete searchParams.redirect + } - const customLoginRoute = - typeof redirectUnauthenticatedUser === 'string' ? redirectUnauthenticatedUser : undefined + const redirectRoute = encodeURIComponent( + route + Object.keys(searchParams ?? {}).length + ? `${qs.stringify(searchParams, { addQueryPrefix: true })}` + : undefined, + ) - const loginRoute = isAdminRoute({ adminRoute, config, route }) - ? adminLoginRoute - : customLoginRoute || loginRouteFromConfig + const redirectTo = formatAdminURL({ + adminRoute, + path: user ? unauthorizedRoute : loginRouteFromConfig, + }) - const parsedLoginRouteSearchParams = qs.parse(loginRoute.split('?')[1] ?? '') + const parsedLoginRouteSearchParams = qs.parse(redirectTo.split('?')[1] ?? '') - const searchParamsWithRedirect = `${qs.stringify( - { - ...parsedLoginRouteSearchParams, - ...(redirectRoute ? { redirect: redirectRoute } : {}), - }, - { addQueryPrefix: true }, - )}` + const searchParamsWithRedirect = `${qs.stringify( + { + ...parsedLoginRouteSearchParams, + ...(redirectRoute ? { redirect: redirectRoute } : {}), + }, + { addQueryPrefix: true }, + )}` - redirect(`${loginRoute.split('?')[0]}${searchParamsWithRedirect}`) - } + return `${redirectTo.split('?')[0]}${searchParamsWithRedirect}` } diff --git a/packages/next/src/utilities/initPage/index.ts b/packages/next/src/utilities/initPage/index.ts index ff2ef34a283..fb402c3ab4c 100644 --- a/packages/next/src/utilities/initPage/index.ts +++ b/packages/next/src/utilities/initPage/index.ts @@ -2,6 +2,7 @@ import type { InitPageResult, Locale, PayloadRequest, VisibleEntities } from 'pa import { findLocaleFromCode } from '@payloadcms/ui/shared' import { headers as getHeaders } from 'next/headers.js' +import { notFound } from 'next/navigation.js' import { createLocalReq, isEntityHidden, parseCookies } from 'payload' import * as qs from 'qs-esm' @@ -9,13 +10,13 @@ import type { Args } from './types.js' import { getPayloadHMR } from '../getPayloadHMR.js' import { initReq } from '../initReq.js' -import { handleAdminPage } from './handleAdminPage.js' +import { getRouteInfo } from './handleAdminPage.js' import { handleAuthRedirect } from './handleAuthRedirect.js' +import { isPublicAdminRoute } from './shared.js' export const initPage = async ({ config: configPromise, importMap, - redirectUnauthenticatedUser = false, route, searchParams, }: Args): Promise => { @@ -128,22 +129,30 @@ export const initPage = async ({ .filter(Boolean), } - if (redirectUnauthenticatedUser && !user) { - handleAuthRedirect({ + let redirectTo = null + + if ( + !permissions.canAccessAdmin && + !isPublicAdminRoute({ adminRoute, config: payload.config, route }) + ) { + redirectTo = handleAuthRedirect({ config: payload.config, - redirectUnauthenticatedUser, route, searchParams, + user, }) } - const { collectionConfig, docID, globalConfig } = handleAdminPage({ + const { collectionConfig, collectionSlug, docID, globalConfig, globalSlug } = getRouteInfo({ adminRoute, config: payload.config, - permissions, route, }) + if ((collectionSlug && !collectionConfig) || (globalSlug && !globalConfig)) { + return notFound() + } + return { collectionConfig, cookies, @@ -152,6 +161,7 @@ export const initPage = async ({ languageOptions, locale, permissions, + redirectTo, req, translations: i18n.translations, visibleEntities, diff --git a/packages/next/src/utilities/initPage/shared.ts b/packages/next/src/utilities/initPage/shared.ts index 986f573cd88..185d7ad7b7c 100644 --- a/packages/next/src/utilities/initPage/shared.ts +++ b/packages/next/src/utilities/initPage/shared.ts @@ -1,6 +1,10 @@ import type { SanitizedConfig } from 'payload' -const authRouteKeys: (keyof SanitizedConfig['admin']['routes'])[] = [ +// Routes that require admin authentication +const publicAdminRoutes: (keyof Pick< + SanitizedConfig['admin']['routes'], + 'createFirstUser' | 'forgot' | 'inactivity' | 'login' | 'logout' | 'reset' | 'unauthorized' +>)[] = [ 'createFirstUser', 'forgot', 'login', @@ -13,17 +17,16 @@ const authRouteKeys: (keyof SanitizedConfig['admin']['routes'])[] = [ export const isAdminRoute = ({ adminRoute, - config, route, }: { adminRoute: string config: SanitizedConfig route: string }): boolean => { - return route.startsWith(adminRoute) && !isAdminAuthRoute({ adminRoute, config, route }) + return route.startsWith(adminRoute) } -export const isAdminAuthRoute = ({ +export const isPublicAdminRoute = ({ adminRoute, config, route, @@ -32,13 +35,17 @@ export const isAdminAuthRoute = ({ config: SanitizedConfig route: string }): boolean => { - const authRoutes = config.admin?.routes - ? Object.entries(config.admin.routes) - .filter(([key]) => authRouteKeys.includes(key as keyof SanitizedConfig['admin']['routes'])) - .map(([_, value]) => value) - : [] - - return authRoutes.some((r) => getRouteWithoutAdmin({ adminRoute, route }).startsWith(r)) + return publicAdminRoutes.some((routeSegment) => { + const segment = config.admin?.routes?.[routeSegment] || routeSegment + const routeWithoutAdmin = getRouteWithoutAdmin({ adminRoute, route }) + if (routeWithoutAdmin.startsWith(segment)) { + return true + } else if (routeWithoutAdmin.includes('/verify/')) { + return true + } else { + return false + } + }) } export const getRouteWithoutAdmin = ({ diff --git a/packages/next/src/views/ForgotPassword/ForgotPasswordForm/index.tsx b/packages/next/src/views/ForgotPassword/ForgotPasswordForm/index.tsx index 8c1b15496be..c5f4833faa9 100644 --- a/packages/next/src/views/ForgotPassword/ForgotPasswordForm/index.tsx +++ b/packages/next/src/views/ForgotPassword/ForgotPasswordForm/index.tsx @@ -5,7 +5,9 @@ import type { FormState, PayloadRequest } from 'payload' import { EmailField, Form, FormSubmit, TextField, useConfig, useTranslation } from '@payloadcms/ui' import { email, text } from 'payload/shared' -import React, { Fragment, useState } from 'react' +import React, { useState } from 'react' + +import { FormHeader } from '../../../elements/FormHeader/index.js' export const ForgotPasswordForm: React.FC = () => { const { config } = useConfig() @@ -54,10 +56,10 @@ export const ForgotPasswordForm: React.FC = () => { if (hasSubmitted) { return ( - -

{t('authentication:emailSent')}

-

{t('authentication:checkYourEmailForPasswordReset')}

- + ) } @@ -68,12 +70,14 @@ export const ForgotPasswordForm: React.FC = () => { initialState={initialState} method="POST" > -

{t('authentication:forgotPassword')}

-

- {loginWithUsername - ? t('authentication:forgotPasswordUsernameInstructions') - : t('authentication:forgotPasswordEmailInstructions')} -

+ {loginWithUsername ? ( { } /> )} - {t('general:submit')} + {t('general:submit')} ) } diff --git a/packages/next/src/views/ForgotPassword/index.tsx b/packages/next/src/views/ForgotPassword/index.tsx index 108638df07f..ec154248d23 100644 --- a/packages/next/src/views/ForgotPassword/index.tsx +++ b/packages/next/src/views/ForgotPassword/index.tsx @@ -5,6 +5,7 @@ import { formatAdminURL, Translation } from '@payloadcms/ui/shared' import LinkImport from 'next/link.js' import React, { Fragment } from 'react' +import { FormHeader } from '../../elements/FormHeader/index.js' import { ForgotPasswordForm } from './ForgotPasswordForm/index.js' export { generateForgotPasswordMetadata } from './meta.js' @@ -31,26 +32,27 @@ export const ForgotPasswordView: React.FC = ({ initPageResult }) if (user) { return ( -

{i18n.t('authentication:alreadyLoggedIn')}

-

- ( - - {children} - - ), - }} - i18nKey="authentication:loggedInChangePassword" - t={i18n.t} - /> -

-
+ ( + + {children} + + ), + }} + i18nKey="authentication:loggedInChangePassword" + t={i18n.t} + /> + } + heading={i18n.t('authentication:alreadyLoggedIn')} + /> diff --git a/packages/next/src/views/ResetPassword/index.client.tsx b/packages/next/src/views/ResetPassword/ResetPasswordForm/index.tsx similarity index 71% rename from packages/next/src/views/ResetPassword/index.client.tsx rename to packages/next/src/views/ResetPassword/ResetPasswordForm/index.tsx index 6128de4c967..c0af119d6fd 100644 --- a/packages/next/src/views/ResetPassword/index.client.tsx +++ b/packages/next/src/views/ResetPassword/ResetPasswordForm/index.tsx @@ -1,6 +1,4 @@ 'use client' -import type { FormState } from 'payload' - import { ConfirmPasswordField, Form, @@ -13,8 +11,8 @@ import { } from '@payloadcms/ui' import { formatAdminURL } from '@payloadcms/ui/shared' import { useRouter } from 'next/navigation.js' +import { type FormState } from 'payload' import React from 'react' -import { toast } from 'sonner' type Args = { readonly token: string @@ -33,7 +31,7 @@ const initialState: FormState = { }, } -export const ResetPasswordClient: React.FC = ({ token }) => { +export const ResetPasswordForm: React.FC = ({ token }) => { const i18n = useTranslation() const { config: { @@ -47,26 +45,21 @@ export const ResetPasswordClient: React.FC = ({ token }) => { } = useConfig() const history = useRouter() - const { fetchFullUser } = useAuth() - const onSuccess = React.useCallback( - async (data) => { - if (data.token) { - await fetchFullUser() - history.push(adminRoute) - } else { - history.push( - formatAdminURL({ - adminRoute, - path: loginRoute, - }), - ) - toast.success(i18n.t('general:updatedSuccessfully')) - } - }, - [adminRoute, fetchFullUser, history, i18n, loginRoute], - ) + const onSuccess = React.useCallback(async () => { + const user = await fetchFullUser() + if (user) { + history.push(adminRoute) + } else { + history.push( + formatAdminURL({ + adminRoute, + path: loginRoute, + }), + ) + } + }, [adminRoute, fetchFullUser, history, loginRoute]) return (
= ({ token }) => { method="POST" onSuccess={onSuccess} > -
+
form { - width: 100%; - - & > .inputWrap { - display: flex; - flex-direction: column; - gap: base(0.8); - - > * { - margin: 0; - } - } - } - - & > .btn { - margin: 0; - } } } } diff --git a/packages/next/src/views/ResetPassword/index.tsx b/packages/next/src/views/ResetPassword/index.tsx index 4b25efbb966..0ddc1f05e96 100644 --- a/packages/next/src/views/ResetPassword/index.tsx +++ b/packages/next/src/views/ResetPassword/index.tsx @@ -5,8 +5,9 @@ import { formatAdminURL, Translation } from '@payloadcms/ui/shared' import LinkImport from 'next/link.js' import React from 'react' -import { ResetPasswordClient } from './index.client.js' +import { FormHeader } from '../../elements/FormHeader/index.js' import './index.scss' +import { ResetPasswordForm } from './ResetPasswordForm/index.js' export const resetPasswordBaseClass = 'reset-password' @@ -29,7 +30,7 @@ export const ResetPassword: React.FC = ({ initPageResult, params const { admin: { - routes: { account: accountRoute }, + routes: { account: accountRoute, login: loginRoute }, }, routes: { admin: adminRoute }, } = config @@ -37,25 +38,27 @@ export const ResetPassword: React.FC = ({ initPageResult, params if (user) { return (
-

{i18n.t('authentication:alreadyLoggedIn')}

-

- ( - - {children} - - ), - }} - i18nKey="authentication:loggedInChangePassword" - t={i18n.t} - /> -

+ ( + + {children} + + ), + }} + i18nKey="authentication:loggedInChangePassword" + t={i18n.t} + /> + } + heading={i18n.t('authentication:alreadyLoggedIn')} + /> @@ -65,8 +68,16 @@ export const ResetPassword: React.FC = ({ initPageResult, params return (
-

{i18n.t('authentication:resetPassword')}

- + + + + {i18n.t('authentication:backToLogin')} +
) } diff --git a/packages/next/src/views/Root/getViewFromConfig.ts b/packages/next/src/views/Root/getViewFromConfig.ts index 2185948f3b9..b7851ca39ee 100644 --- a/packages/next/src/views/Root/getViewFromConfig.ts +++ b/packages/next/src/views/Root/getViewFromConfig.ts @@ -92,7 +92,6 @@ export const getViewFromConfig = ({ } templateClassName = 'dashboard' templateType = 'default' - initPageOptions.redirectUnauthenticatedUser = true } break } @@ -132,7 +131,6 @@ export const getViewFromConfig = ({ templateType = 'minimal' if (viewKey === 'account') { - initPageOptions.redirectUnauthenticatedUser = true templateType = 'default' } } @@ -150,7 +148,6 @@ export const getViewFromConfig = ({ if (isCollection) { // --> /collections/:collectionSlug - initPageOptions.redirectUnauthenticatedUser = true ViewToRender = { Component: ListView, @@ -160,7 +157,6 @@ export const getViewFromConfig = ({ templateType = 'default' } else if (isGlobal) { // --> /globals/:globalSlug - initPageOptions.redirectUnauthenticatedUser = true ViewToRender = { Component: DocumentView, @@ -187,7 +183,6 @@ export const getViewFromConfig = ({ // --> /collections/:collectionSlug/:id/versions // --> /collections/:collectionSlug/:id/versions/:versionId // --> /collections/:collectionSlug/:id/api - initPageOptions.redirectUnauthenticatedUser = true ViewToRender = { Component: DocumentView, @@ -201,7 +196,6 @@ export const getViewFromConfig = ({ // --> /globals/:globalSlug/preview // --> /globals/:globalSlug/versions/:versionId // --> /globals/:globalSlug/api - initPageOptions.redirectUnauthenticatedUser = true ViewToRender = { Component: DocumentView, diff --git a/packages/next/src/views/Root/index.tsx b/packages/next/src/views/Root/index.tsx index 7a9ed17e572..db3cfa53c42 100644 --- a/packages/next/src/views/Root/index.tsx +++ b/packages/next/src/views/Root/index.tsx @@ -72,6 +72,10 @@ export const RootPage = async ({ const initPageResult = await initPage(initPageOptions) + if (typeof initPageResult?.redirectTo === 'string') { + redirect(initPageResult.redirectTo) + } + if (initPageResult) { dbHasUser = await initPageResult?.req.payload.db .findOne({ @@ -137,8 +141,8 @@ export const RootPage = async ({ visibleEntities={{ // The reason we are not passing in initPageResult.visibleEntities directly is due to a "Cannot assign to read only property of object '#" error introduced in React 19 // which this caused as soon as initPageResult.visibleEntities is passed in - collections: initPageResult.visibleEntities?.collections, - globals: initPageResult.visibleEntities?.globals, + collections: initPageResult?.visibleEntities?.collections, + globals: initPageResult?.visibleEntities?.globals, }} > {RenderedView} diff --git a/packages/next/src/views/Unauthorized/index.scss b/packages/next/src/views/Unauthorized/index.scss index 697c9b9975b..125ffe9e08b 100644 --- a/packages/next/src/views/Unauthorized/index.scss +++ b/packages/next/src/views/Unauthorized/index.scss @@ -2,37 +2,8 @@ @layer payload-default { .unauthorized { - margin-top: var(--base); - - & > * { - &:first-child { - margin-top: 0; - } - &:last-child { - margin-bottom: 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); - } - } } } diff --git a/packages/next/src/views/Unauthorized/index.tsx b/packages/next/src/views/Unauthorized/index.tsx index 29401562464..5ace45cf222 100644 --- a/packages/next/src/views/Unauthorized/index.tsx +++ b/packages/next/src/views/Unauthorized/index.tsx @@ -1,9 +1,11 @@ import type { AdminViewComponent, PayloadServerReactComponent } from 'payload' -import { Button, Gutter } from '@payloadcms/ui' +import { Button } from '@payloadcms/ui' +import { formatAdminURL } from '@payloadcms/ui/shared' import LinkImport from 'next/link.js' import React from 'react' +import { FormHeader } from '../../elements/FormHeader/index.js' import './index.scss' const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default @@ -23,24 +25,31 @@ export const UnauthorizedView: PayloadServerReactComponent = admin: { routes: { logout: logoutRoute }, }, + routes: { admin: adminRoute }, }, }, }, } = initPageResult return ( - -

{i18n.t('error:unauthorized')}

-

{i18n.t('error:notAllowedToAccessPage')}

+
+ + - +
) } diff --git a/packages/next/src/views/Verify/index.client.tsx b/packages/next/src/views/Verify/index.client.tsx new file mode 100644 index 00000000000..889e3bf389e --- /dev/null +++ b/packages/next/src/views/Verify/index.client.tsx @@ -0,0 +1,32 @@ +'use client' +import { toast } from '@payloadcms/ui' +import { useRouter } from 'next/navigation.js' +import React, { useEffect } from 'react' + +type Props = { + message: string + redirectTo: string +} +export function ToastAndRedirect({ message, redirectTo }: Props) { + const router = useRouter() + const hasToastedRef = React.useRef(false) + + useEffect(() => { + let timeoutID + if (toast) { + timeoutID = setTimeout(() => { + toast.success(message) + hasToastedRef.current = true + router.push(redirectTo) + }, 100) + } + + return () => { + if (timeoutID) { + clearTimeout(timeoutID) + } + } + }, [router, redirectTo, message]) + + return null +} diff --git a/packages/next/src/views/Verify/index.tsx b/packages/next/src/views/Verify/index.tsx index 19edad0c81c..cee82f0e8d0 100644 --- a/packages/next/src/views/Verify/index.tsx +++ b/packages/next/src/views/Verify/index.tsx @@ -1,10 +1,10 @@ import type { AdminViewProps } from 'payload' import { formatAdminURL } from '@payloadcms/ui/shared' -import { redirect } from 'next/navigation.js' import React from 'react' import { Logo } from '../../elements/Logo/index.js' +import { ToastAndRedirect } from './index.client.js' import './index.scss' export const verifyBaseClass = 'verify' @@ -33,6 +33,7 @@ export const Verify: React.FC = async ({ } = config let textToRender + let isVerified = false try { await req.payload.verifyEmail({ @@ -40,15 +41,21 @@ export const Verify: React.FC = async ({ token, }) - return redirect(formatAdminURL({ adminRoute, path: '/login' })) + isVerified = true + textToRender = req.t('authentication:emailVerified') } catch (e) { - // already verified - if (e?.status === 202) { - redirect(formatAdminURL({ adminRoute, path: '/login' })) - } textToRender = req.t('authentication:unableToVerify') } + if (isVerified) { + return ( + + ) + } + return (
diff --git a/packages/payload/src/admin/views/types.ts b/packages/payload/src/admin/views/types.ts index 85650010ba3..cda94b47802 100644 --- a/packages/payload/src/admin/views/types.ts +++ b/packages/payload/src/admin/views/types.ts @@ -53,6 +53,7 @@ export type InitPageResult = { languageOptions: LanguageOptions locale?: Locale permissions: Permissions + redirectTo?: string req: PayloadRequest translations: ClientTranslationsObject visibleEntities: VisibleEntities diff --git a/packages/payload/src/auth/cookies.ts b/packages/payload/src/auth/cookies.ts index 31d6f24c09e..67e69dfdb12 100644 --- a/packages/payload/src/auth/cookies.ts +++ b/packages/payload/src/auth/cookies.ts @@ -1,4 +1,3 @@ -import type { Payload } from '../index.js' import type { SanitizedCollectionConfig } from './../collections/config/types.js' type CookieOptions = { @@ -125,63 +124,63 @@ export const getCookieExpiration = ({ seconds = 7200 }: GetCookieExpirationArgs) type GeneratePayloadCookieArgs = { /* The auth collection config */ - collectionConfig: SanitizedCollectionConfig - /* An instance of payload */ - payload: Payload + collectionAuthConfig: SanitizedCollectionConfig['auth'] + /* Prefix to scope the cookie */ + cookiePrefix: string /* The returnAs value */ returnCookieAsObject?: boolean /* The token to be stored in the cookie */ token: string } export const generatePayloadCookie = ({ - collectionConfig, - payload, + collectionAuthConfig, + cookiePrefix, returnCookieAsObject = false, token, }: T): T['returnCookieAsObject'] extends true ? CookieObject : string => { const sameSite = - typeof collectionConfig.auth.cookies.sameSite === 'string' - ? collectionConfig.auth.cookies.sameSite - : collectionConfig.auth.cookies.sameSite + typeof collectionAuthConfig.cookies.sameSite === 'string' + ? collectionAuthConfig.cookies.sameSite + : collectionAuthConfig.cookies.sameSite ? 'Strict' : undefined return generateCookie({ - name: `${payload.config.cookiePrefix}-token`, - domain: collectionConfig.auth.cookies.domain ?? undefined, - expires: getCookieExpiration({ seconds: collectionConfig.auth.tokenExpiration }), + name: `${cookiePrefix}-token`, + domain: collectionAuthConfig.cookies.domain ?? undefined, + expires: getCookieExpiration({ seconds: collectionAuthConfig.tokenExpiration }), httpOnly: true, path: '/', returnCookieAsObject, sameSite, - secure: collectionConfig.auth.cookies.secure, + secure: collectionAuthConfig.cookies.secure, value: token, }) } export const generateExpiredPayloadCookie = >({ - collectionConfig, - payload, + collectionAuthConfig, + cookiePrefix, returnCookieAsObject = false, }: T): T['returnCookieAsObject'] extends true ? CookieObject : string => { const sameSite = - typeof collectionConfig.auth.cookies.sameSite === 'string' - ? collectionConfig.auth.cookies.sameSite - : collectionConfig.auth.cookies.sameSite + typeof collectionAuthConfig.cookies.sameSite === 'string' + ? collectionAuthConfig.cookies.sameSite + : collectionAuthConfig.cookies.sameSite ? 'Strict' : undefined const expires = new Date(Date.now() - 1000) return generateCookie({ - name: `${payload.config.cookiePrefix}-token`, - domain: collectionConfig.auth.cookies.domain ?? undefined, + name: `${cookiePrefix}-token`, + domain: collectionAuthConfig.cookies.domain ?? undefined, expires, httpOnly: true, path: '/', returnCookieAsObject, sameSite, - secure: collectionConfig.auth.cookies.secure, + secure: collectionAuthConfig.cookies.secure, }) } diff --git a/packages/payload/src/auth/operations/resetPassword.ts b/packages/payload/src/auth/operations/resetPassword.ts index ac430e42a07..ea31e551211 100644 --- a/packages/payload/src/auth/operations/resetPassword.ts +++ b/packages/payload/src/auth/operations/resetPassword.ts @@ -81,7 +81,7 @@ export const resetPasswordOperation = async (args: Arguments): Promise = user.resetPasswordExpiration = new Date().toISOString() if (collectionConfig.auth.verify) { - user._verified = true + user._verified = Boolean(user._verified) } const doc = await payload.db.updateOne({ diff --git a/packages/payload/src/auth/operations/verifyEmail.ts b/packages/payload/src/auth/operations/verifyEmail.ts index 0ae94c1f13f..fff5d842eaf 100644 --- a/packages/payload/src/auth/operations/verifyEmail.ts +++ b/packages/payload/src/auth/operations/verifyEmail.ts @@ -34,9 +34,6 @@ export const verifyEmailOperation = async (args: Args): Promise => { if (!user) { throw new APIError('Verification token is invalid.', httpStatus.FORBIDDEN) } - if (user && user._verified === true) { - throw new APIError('This account has already been activated.', httpStatus.ACCEPTED) - } await req.payload.db.updateOne({ id: user.id, diff --git a/packages/payload/src/exports/shared.ts b/packages/payload/src/exports/shared.ts index 74fcb9ef404..510c6dc98ee 100644 --- a/packages/payload/src/exports/shared.ts +++ b/packages/payload/src/exports/shared.ts @@ -1,5 +1,13 @@ +export { + generateCookie, + generateExpiredPayloadCookie, + generatePayloadCookie, + getCookieExpiration, + parseCookies, +} from '../auth/cookies.js' export { parsePayloadComponent } from '../bin/generateImportMap/parsePayloadComponent.js' export { defaults as collectionDefaults } from '../collections/config/defaults.js' + export { serverProps } from '../config/types.js' export { @@ -20,19 +28,19 @@ export { tabHasName, valueIsValueWithRelation, } from '../fields/config/types.js' - export * from '../fields/validations.js' + export { validOperators } from '../types/constants.js' export { formatFilesize } from '../uploads/formatFilesize.js' export { isImage } from '../uploads/isImage.js' - export { deepCopyObject, deepCopyObjectComplex, deepCopyObjectSimple, } from '../utilities/deepCopyObject.js' + export { deepMerge, deepMergeWithCombinedArrays, @@ -41,8 +49,8 @@ export { } from '../utilities/deepMerge.js' export { fieldSchemaToJSON } from '../utilities/fieldSchemaToJSON.js' - export { getDataByPath } from '../utilities/getDataByPath.js' + export { getSiblingData } from '../utilities/getSiblingData.js' export { getUniqueListBy } from '../utilities/getUniqueListBy.js' @@ -66,6 +74,5 @@ export { unflatten } from '../utilities/unflatten.js' export { wait } from '../utilities/wait.js' export { default as wordBoundariesRegex } from '../utilities/wordBoundariesRegex.js' - export { versionDefaults } from '../versions/defaults.js' export { deepMergeSimple } from '@payloadcms/translations/utilities' diff --git a/packages/translations/src/languages/ar.ts b/packages/translations/src/languages/ar.ts index 9fc249f6c5c..f3e355cef94 100644 --- a/packages/translations/src/languages/ar.ts +++ b/packages/translations/src/languages/ar.ts @@ -184,7 +184,7 @@ export const arTranslations: DefaultTranslationsObject = { backToDashboard: 'العودة للوحة التّحكّم', cancel: 'إلغاء', changesNotSaved: 'لم يتمّ حفظ التّغييرات. إن غادرت الآن ، ستفقد تغييراتك.', - clearAll: undefined, + clearAll: 'امسح الكل', close: 'إغلاق', collapse: 'طيّ', collections: 'المجموعات', @@ -407,7 +407,7 @@ export const arTranslations: DefaultTranslationsObject = { lastSavedAgo: 'تم الحفظ آخر مرة قبل {{distance}}', noFurtherVersionsFound: 'لم يتمّ العثور على نسخات أخرى', noRowsFound: 'لم يتمّ العثور على {{label}}', - noRowsSelected: undefined, + noRowsSelected: 'لم يتم اختيار {{label}}', preview: 'معاينة', previouslyPublished: 'نشر سابقا', problemRestoringVersion: 'حدث خطأ في استعادة هذه النّسخة', diff --git a/packages/translations/src/languages/az.ts b/packages/translations/src/languages/az.ts index 14dd9272171..f60668c88df 100644 --- a/packages/translations/src/languages/az.ts +++ b/packages/translations/src/languages/az.ts @@ -186,7 +186,7 @@ export const azTranslations: DefaultTranslationsObject = { cancel: 'Ləğv et', changesNotSaved: 'Dəyişiklikləriniz saxlanılmayıb. İndi çıxsanız, dəyişikliklərinizi itirəcəksiniz.', - clearAll: undefined, + clearAll: 'Hamısını təmizlə', close: 'Bağla', collapse: 'Bağla', collections: 'Kolleksiyalar', @@ -414,7 +414,7 @@ export const azTranslations: DefaultTranslationsObject = { lastSavedAgo: '{{distance}} əvvəl son yadda saxlanıldı', noFurtherVersionsFound: 'Başqa versiyalar tapılmadı', noRowsFound: 'Heç bir {{label}} tapılmadı', - noRowsSelected: undefined, + noRowsSelected: 'Heç bir {{label}} seçilməyib', preview: 'Öncədən baxış', previouslyPublished: 'Daha əvvəl nəşr olunmuş', problemRestoringVersion: 'Bu versiyanın bərpasında problem yaşandı', diff --git a/packages/translations/src/languages/bg.ts b/packages/translations/src/languages/bg.ts index 83e684e3592..1494370e2b6 100644 --- a/packages/translations/src/languages/bg.ts +++ b/packages/translations/src/languages/bg.ts @@ -185,7 +185,7 @@ export const bgTranslations: DefaultTranslationsObject = { backToDashboard: 'Обратно към таблото', cancel: 'Отмени', changesNotSaved: 'Промените ти не са запазени. Ако напуснеш сега, ще ги загубиш.', - clearAll: undefined, + clearAll: 'Изчисти всичко', close: 'Затвори', collapse: 'Свий', collections: 'Колекции', @@ -413,7 +413,7 @@ export const bgTranslations: DefaultTranslationsObject = { lastSavedAgo: 'последно запазено преди {{distance}}', noFurtherVersionsFound: 'Не са открити повече версии', noRowsFound: 'Не е открит {{label}}', - noRowsSelected: undefined, + noRowsSelected: 'Не е избран {{label}}', preview: 'Предварителен преглед', previouslyPublished: 'Предишно публикувано', problemRestoringVersion: 'Имаше проблем при възстановяването на тази версия', diff --git a/packages/translations/src/languages/cs.ts b/packages/translations/src/languages/cs.ts index 3da8072bd95..5b83192f289 100644 --- a/packages/translations/src/languages/cs.ts +++ b/packages/translations/src/languages/cs.ts @@ -185,7 +185,7 @@ export const csTranslations: DefaultTranslationsObject = { backToDashboard: 'Zpět na nástěnku', cancel: 'Zrušit', changesNotSaved: 'Vaše změny nebyly uloženy. Pokud teď odejdete, ztratíte své změny.', - clearAll: undefined, + clearAll: 'Vymazat vše', close: 'Zavřít', collapse: 'Sbalit', collections: 'Kolekce', @@ -412,7 +412,7 @@ export const csTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Naposledy uloženo před {{distance}}', noFurtherVersionsFound: 'Nenalezeny další verze', noRowsFound: 'Nenalezen {{label}}', - noRowsSelected: undefined, + noRowsSelected: 'Nebyl vybrán žádný {{label}}', preview: 'Náhled', previouslyPublished: 'Dříve publikováno', problemRestoringVersion: 'Při obnovování této verze došlo k problému', diff --git a/packages/translations/src/languages/de.ts b/packages/translations/src/languages/de.ts index 3f9353b8c5a..5a94770b851 100644 --- a/packages/translations/src/languages/de.ts +++ b/packages/translations/src/languages/de.ts @@ -190,7 +190,7 @@ export const deTranslations: DefaultTranslationsObject = { cancel: 'Abbrechen', changesNotSaved: 'Deine Änderungen wurden nicht gespeichert. Wenn du diese Seite verlässt, gehen deine Änderungen verloren.', - clearAll: undefined, + clearAll: 'Alles löschen', close: 'Schließen', collapse: 'Einklappen', collections: 'Sammlungen', @@ -418,7 +418,7 @@ export const deTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Zuletzt vor {{distance}} gespeichert', noFurtherVersionsFound: 'Keine weiteren Versionen vorhanden', noRowsFound: 'Kein {{label}} gefunden', - noRowsSelected: undefined, + noRowsSelected: 'Kein {{label}} ausgewählt', preview: 'Vorschau', previouslyPublished: 'Zuvor Veröffentlicht', problemRestoringVersion: 'Es gab ein Problem bei der Wiederherstellung dieser Version', diff --git a/packages/translations/src/languages/en.ts b/packages/translations/src/languages/en.ts index 9b91245aea9..312db967a4f 100644 --- a/packages/translations/src/languages/en.ts +++ b/packages/translations/src/languages/en.ts @@ -66,9 +66,8 @@ export const enTranslations = { successfullyRegisteredFirstUser: 'Successfully registered first user.', successfullyUnlocked: 'Successfully unlocked', tokenRefreshSuccessful: 'Token refresh successful.', - username: 'Username', - unableToVerify: 'Unable to Verify', + username: 'Username', verified: 'Verified', verifiedSuccessfully: 'Verified Successfully', verify: 'Verify', diff --git a/packages/translations/src/languages/es.ts b/packages/translations/src/languages/es.ts index 41e5d351f4e..fa123ff0287 100644 --- a/packages/translations/src/languages/es.ts +++ b/packages/translations/src/languages/es.ts @@ -190,7 +190,7 @@ export const esTranslations: DefaultTranslationsObject = { cancel: 'Cancelar', changesNotSaved: 'Tus cambios no han sido guardados. Si te sales ahora, se perderán tus cambios.', - clearAll: undefined, + clearAll: 'Borrar todo', close: 'Cerrar', collapse: 'Colapsar', collections: 'Colecciones', @@ -418,7 +418,7 @@ export const esTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Guardado por última vez hace {{distance}}', noFurtherVersionsFound: 'No se encontraron más versiones', noRowsFound: 'No encontramos {{label}}', - noRowsSelected: undefined, + noRowsSelected: 'No se ha seleccionado ninguna {{etiqueta}}', preview: 'Previsualizar', previouslyPublished: 'Publicado Anteriormente', problemRestoringVersion: 'Ocurrió un problema al restaurar esta versión', diff --git a/packages/translations/src/languages/fa.ts b/packages/translations/src/languages/fa.ts index e8360788dc1..49e61bb8e45 100644 --- a/packages/translations/src/languages/fa.ts +++ b/packages/translations/src/languages/fa.ts @@ -185,7 +185,7 @@ export const faTranslations: DefaultTranslationsObject = { cancel: 'لغو', changesNotSaved: 'تغییرات شما ذخیره نشده، اگر این برگه را ترک کنید. تمام تغییرات از دست خواهد رفت.', - clearAll: undefined, + clearAll: 'همه را پاک کنید', close: 'بستن', collapse: 'بستن', collections: 'مجموعه‌ها', @@ -411,7 +411,7 @@ export const faTranslations: DefaultTranslationsObject = { lastSavedAgo: 'آخرین بار {{distance}} پیش ذخیره شد', noFurtherVersionsFound: 'نگارش دیگری یافت نشد', noRowsFound: 'هیچ {{label}} یافت نشد', - noRowsSelected: undefined, + noRowsSelected: 'هیچ {{label}} ای انتخاب نشده است', preview: 'پیش‌نمایش', previouslyPublished: 'قبلا منتشر شده', problemRestoringVersion: 'مشکلی در بازیابی این نگارش وجود دارد', diff --git a/packages/translations/src/languages/fr.ts b/packages/translations/src/languages/fr.ts index bdd460a9037..14b38f6e822 100644 --- a/packages/translations/src/languages/fr.ts +++ b/packages/translations/src/languages/fr.ts @@ -193,7 +193,7 @@ export const frTranslations: DefaultTranslationsObject = { cancel: 'Annuler', changesNotSaved: 'Vos modifications n’ont pas été enregistrées. Vous perdrez vos modifications si vous quittez maintenant.', - clearAll: undefined, + clearAll: 'Tout effacer', close: 'Fermer', collapse: 'Réduire', collections: 'Collections', @@ -425,7 +425,7 @@ export const frTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Dernière sauvegarde il y a {{distance}}', noFurtherVersionsFound: 'Aucune autre version trouvée', noRowsFound: 'Aucun(e) {{label}} trouvé(e)', - noRowsSelected: undefined, + noRowsSelected: 'Aucune {{étiquette}} sélectionnée', preview: 'Aperçu', previouslyPublished: 'Précédemment publié', problemRestoringVersion: 'Un problème est survenu lors de la restauration de cette version', diff --git a/packages/translations/src/languages/he.ts b/packages/translations/src/languages/he.ts index 8a8c46ec8e0..1acdb4305c5 100644 --- a/packages/translations/src/languages/he.ts +++ b/packages/translations/src/languages/he.ts @@ -181,7 +181,7 @@ export const heTranslations: DefaultTranslationsObject = { backToDashboard: 'חזרה ללוח המחוונים', cancel: 'ביטול', changesNotSaved: 'השינויים שלך לא נשמרו. אם תצא כעת, תאבד את השינויים שלך.', - clearAll: undefined, + clearAll: 'נקה הכל', close: 'סגור', collapse: 'כווץ', collections: 'אוספים', @@ -260,7 +260,7 @@ export const heTranslations: DefaultTranslationsObject = { nothingFound: 'לא נמצא כלום', noValue: 'אין ערך', of: 'מתוך', - only: undefined, + only: 'רק', open: 'פתח', or: 'או', order: 'סדר', @@ -401,7 +401,7 @@ export const heTranslations: DefaultTranslationsObject = { lastSavedAgo: 'נשמר לאחרונה לפני {{distance}}', noFurtherVersionsFound: 'לא נמצאו עוד גרסאות', noRowsFound: 'לא נמצאו {{label}}', - noRowsSelected: undefined, + noRowsSelected: 'לא נבחר {{תווית}}', preview: 'תצוגה מקדימה', previouslyPublished: 'פורסם בעבר', problemRestoringVersion: 'הייתה בעיה בשחזור הגרסה הזו', diff --git a/packages/translations/src/languages/hr.ts b/packages/translations/src/languages/hr.ts index 2fd03b066fc..3d60e33324e 100644 --- a/packages/translations/src/languages/hr.ts +++ b/packages/translations/src/languages/hr.ts @@ -34,7 +34,6 @@ export const hrTranslations: DefaultTranslationsObject = { generateNewAPIKey: 'Generiraj novi API ključ', generatingNewAPIKeyWillInvalidate: 'Generiranje novog API ključa će <1>poništiti prethodni ključ. Jeste li sigurni da želite nastaviti?', - newAPIKeyGenerated: 'New API ključ generiran.', lockUntil: 'Zaključaj dok', logBackIn: 'Ponovno se prijavite', loggedIn: 'Za prijavu s drugim korisničkim računom potrebno je prvo <0>odjaviti se', @@ -53,7 +52,8 @@ export const hrTranslations: DefaultTranslationsObject = { logoutSuccessful: 'Odjava uspješna.', logoutUser: 'Odjava korisnika', newAccountCreated: - 'Novi račun je izrađen. Pristupite računu klikom na: {{serverURL}}. Molimo kliknite na sljedeću poveznicu ili zalijepite URL, koji se nalazi ispod, u preglednik da biste potvrdili svoju e-mail adresu: {{verificationURL}}
Nakon što potvrdite e-mail adresu, moći ćete se prijaviti.', + 'Novi račun je izrađen. Pristupite računu klikom na: {{serverURL}}. Molimo kliknite na sljedeću poveznicu ili zalijepite URL, koji se nalazi ispod, u preglednik da biste potvrdili svoju e-mail adresu: {{verificationURL}}
Nakon što potvrdite e-mail adresu, moći ćete se prijaviti.', + newAPIKeyGenerated: 'New API ključ generiran.', newPassword: 'Nova lozinka', passed: 'Autentifikacija je prošla', passwordResetSuccessfully: 'Lozinka uspješno resetirana.', @@ -111,11 +111,11 @@ export const hrTranslations: DefaultTranslationsObject = { problemUploadingFile: 'Došlo je do problema pri učitavanju datoteke.', tokenInvalidOrExpired: 'Token je neispravan ili je istekao.', tokenNotProvided: 'Token nije pružen.', - unPublishingDocument: 'Došlo je do problema pri poništavanju objave ovog dokumenta.', unableToDeleteCount: 'Nije moguće izbrisati {{count}} od {{total}} {{label}}.', unableToUpdateCount: 'Nije moguće ažurirati {{count}} od {{total}} {{label}}.', unauthorized: 'Neovlašteno, morate biti prijavljeni da biste uputili ovaj zahtjev.', unknown: 'Došlo je do nepoznate pogreške.', + unPublishingDocument: 'Došlo je do problema pri poništavanju objave ovog dokumenta.', unspecific: 'Došlo je do pogreške.', userEmailAlreadyRegistered: 'Korisnik s navedenom e-mail adresom je već registriran.', userLocked: 'Ovaj korisnik je zaključan zbog previše neuspješnih pokušaja prijave.', @@ -186,7 +186,7 @@ export const hrTranslations: DefaultTranslationsObject = { backToDashboard: 'Natrag na nadzornu ploču', cancel: 'Otkaži', changesNotSaved: 'Vaše promjene nisu spremljene. Ako izađete sada, izgubit ćete promjene.', - clearAll: undefined, + clearAll: 'Očisti sve', close: 'Zatvori', collapse: 'Sažmi', collections: 'Kolekcije', @@ -258,11 +258,12 @@ export const hrTranslations: DefaultTranslationsObject = { next: 'Sljedeće', noFiltersSet: 'Nema postavljenih filtera', noLabel: '', - notFound: 'Nije pronađeno', - nothingFound: 'Ništa nije pronađeno', none: 'Nijedan', noOptions: 'Nema opcija', - noResults: 'Nije pronađen nijedan {{label}}. Ili {{label}} još uvijek ne postoji ili nijedan od odgovara postavljenim filterima.', + noResults: + 'Nije pronađen nijedan {{label}}. Ili {{label}} još uvijek ne postoji ili nijedan od odgovara postavljenim filterima.', + notFound: 'Nije pronađeno', + nothingFound: 'Ništa nije pronađeno', noValue: 'Bez vrijednosti', of: 'od', only: 'Samo', @@ -410,14 +411,14 @@ export const hrTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Zadnji put spremljeno prije {{distance}', noFurtherVersionsFound: 'Nisu pronađene daljnje verzije', noRowsFound: '{{label}} nije pronađeno', - noRowsSelected: undefined, + noRowsSelected: 'Nije odabrana {{oznaka}}', preview: 'Pregled', previouslyPublished: 'Prethodno objavljeno', problemRestoringVersion: 'Nastao je problem pri vraćanju ove verzije', publish: 'Objaviti', publishChanges: 'Objavi promjene', published: 'Objavljeno', - publishIn: undefined, + publishIn: 'Objavi na {{locale}}', publishing: 'Objavljivanje', restoreAsDraft: 'Vrati kao skicu', restoredSuccessfully: 'Uspješno vraćeno.', diff --git a/packages/translations/src/languages/hu.ts b/packages/translations/src/languages/hu.ts index a779520ebb7..ebdc487137e 100644 --- a/packages/translations/src/languages/hu.ts +++ b/packages/translations/src/languages/hu.ts @@ -188,7 +188,7 @@ export const huTranslations: DefaultTranslationsObject = { cancel: 'Mégsem', changesNotSaved: 'A módosítások nem lettek mentve. Ha most távozik, elveszíti a változtatásokat.', - clearAll: undefined, + clearAll: 'Törölj mindent', close: 'Bezárás', collapse: 'Összecsukás', collections: 'Gyűjtemények', @@ -418,7 +418,7 @@ export const huTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Utoljára mentve {{distance}} órája', noFurtherVersionsFound: 'További verziók nem találhatók', noRowsFound: 'Nem található {{label}}', - noRowsSelected: undefined, + noRowsSelected: 'Nincs {{címke}} kiválasztva', preview: 'Előnézet', previouslyPublished: 'Korábban Közzétéve', problemRestoringVersion: 'Hiba történt a verzió visszaállításakor', diff --git a/packages/translations/src/languages/it.ts b/packages/translations/src/languages/it.ts index 49288a27212..de8a0d105fd 100644 --- a/packages/translations/src/languages/it.ts +++ b/packages/translations/src/languages/it.ts @@ -189,7 +189,7 @@ export const itTranslations: DefaultTranslationsObject = { backToDashboard: 'Torna alla Dashboard', cancel: 'Cancella', changesNotSaved: 'Le tue modifiche non sono state salvate. Se esci ora, verranno perse.', - clearAll: undefined, + clearAll: 'Cancella Tutto', close: 'Chiudere', collapse: 'Comprimi', collections: 'Collezioni', @@ -418,7 +418,7 @@ export const itTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Ultimo salvataggio {{distance}} fa', noFurtherVersionsFound: 'Non sono state trovate ulteriori versioni', noRowsFound: 'Nessun {{label}} trovato', - noRowsSelected: undefined, + noRowsSelected: 'Nessuna {{etichetta}} selezionata', preview: 'Anteprima', previouslyPublished: 'Precedentemente Pubblicato', problemRestoringVersion: 'Si è verificato un problema durante il ripristino di questa versione', diff --git a/packages/translations/src/languages/ja.ts b/packages/translations/src/languages/ja.ts index 3be5e90fe80..98c1cb0b357 100644 --- a/packages/translations/src/languages/ja.ts +++ b/packages/translations/src/languages/ja.ts @@ -186,7 +186,7 @@ export const jaTranslations: DefaultTranslationsObject = { backToDashboard: 'ダッシュボードに戻る', cancel: 'キャンセル', changesNotSaved: '未保存の変更があります。このまま画面を離れると内容が失われます。', - clearAll: undefined, + clearAll: 'すべてクリア', close: '閉じる', collapse: '閉じる', collections: 'コレクション', @@ -412,7 +412,7 @@ export const jaTranslations: DefaultTranslationsObject = { lastSavedAgo: '{{distance}}前に最後に保存されました', noFurtherVersionsFound: 'その他のバージョンは見つかりませんでした。', noRowsFound: '{{label}} は未設定です', - noRowsSelected: undefined, + noRowsSelected: '選択された{{label}}はありません', preview: 'プレビュー', previouslyPublished: '以前に公開された', problemRestoringVersion: 'このバージョンの復元に問題がありました。', diff --git a/packages/translations/src/languages/ko.ts b/packages/translations/src/languages/ko.ts index 6d1c7a2eb36..771d100667b 100644 --- a/packages/translations/src/languages/ko.ts +++ b/packages/translations/src/languages/ko.ts @@ -185,7 +185,7 @@ export const koTranslations: DefaultTranslationsObject = { backToDashboard: '대시보드로 돌아가기', cancel: '취소', changesNotSaved: '변경 사항이 저장되지 않았습니다. 지금 떠나면 변경 사항을 잃게 됩니다.', - clearAll: undefined, + clearAll: '모두 지우기', close: '닫기', collapse: '접기', collections: '컬렉션', @@ -408,7 +408,7 @@ export const koTranslations: DefaultTranslationsObject = { lastSavedAgo: '마지막으로 저장한지 {{distance}} 전', noFurtherVersionsFound: '더 이상의 버전을 찾을 수 없습니다.', noRowsFound: '{{label}}을(를) 찾을 수 없음', - noRowsSelected: undefined, + noRowsSelected: '선택된 {{label}} 없음', preview: '미리보기', previouslyPublished: '이전에 발표된', problemRestoringVersion: '이 버전을 복원하는 중 문제가 발생했습니다.', diff --git a/packages/translations/src/languages/my.ts b/packages/translations/src/languages/my.ts index c957f98de66..90896b72645 100644 --- a/packages/translations/src/languages/my.ts +++ b/packages/translations/src/languages/my.ts @@ -188,7 +188,7 @@ export const myTranslations: DefaultTranslationsObject = { cancel: 'မလုပ်တော့ပါ။', changesNotSaved: 'သင်၏ပြောင်းလဲမှုများကို မသိမ်းဆည်းရသေးပါ။ ယခု စာမျက်နှာက ထွက်လိုက်ပါက သင်၏ပြောင်းလဲမှုများ အကုန် ဆုံးရှုံးသွားပါမည်။ အကုန်နော်။', - clearAll: undefined, + clearAll: 'အားလုံးကိုရှင်းလင်းပါ', close: 'ပိတ်', collapse: 'ခေါက်သိမ်းပါ။', collections: 'စုစည်းမှူများ', @@ -420,7 +420,7 @@ export const myTranslations: DefaultTranslationsObject = { lastSavedAgo: 'နောက်ဆုံး သိမ်းချက် {{distance}} ကြာပြီး', noFurtherVersionsFound: 'နောက်ထပ်ဗားရှင်းများ မတွေ့ပါ။', noRowsFound: '{{label}} အားမတွေ့ပါ။', - noRowsSelected: undefined, + noRowsSelected: 'Tiada {{label}} yang dipilih', preview: 'နမူနာပြရန်', previouslyPublished: 'တိုင်းရင်းသားထုတ်ဝေခဲ့', problemRestoringVersion: 'ဤဗားရှင်းကို ပြန်လည်ရယူရာတွင် ပြဿနာရှိနေသည်။', diff --git a/packages/translations/src/languages/nb.ts b/packages/translations/src/languages/nb.ts index 4e2cf2dc2e2..558d7e16c8b 100644 --- a/packages/translations/src/languages/nb.ts +++ b/packages/translations/src/languages/nb.ts @@ -186,7 +186,7 @@ export const nbTranslations: DefaultTranslationsObject = { cancel: 'Avbryt', changesNotSaved: 'Endringene dine er ikke lagret. Hvis du forlater nå, vil du miste endringene dine.', - clearAll: undefined, + clearAll: 'Tøm alt', close: 'Lukk', collapse: 'Skjul', collections: 'Samlinger', @@ -266,7 +266,7 @@ export const nbTranslations: DefaultTranslationsObject = { nothingFound: 'Ingenting funnet', noValue: 'Ingen verdi', of: 'av', - only: undefined, + only: 'Bare', open: 'Åpne', or: 'Eller', order: 'Rekkefølge', @@ -414,7 +414,7 @@ export const nbTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Sist lagret {{distance}} siden', noFurtherVersionsFound: 'Ingen flere versjoner funnet', noRowsFound: 'Ingen {{label}} funnet', - noRowsSelected: undefined, + noRowsSelected: 'Ingen {{label}} valgt', preview: 'Forhåndsvisning', previouslyPublished: 'Tidligere Publisert', problemRestoringVersion: 'Det oppstod et problem med gjenoppretting av denne versjonen', diff --git a/packages/translations/src/languages/nl.ts b/packages/translations/src/languages/nl.ts index 371bc61e4c0..8aabe0a9ac0 100644 --- a/packages/translations/src/languages/nl.ts +++ b/packages/translations/src/languages/nl.ts @@ -188,7 +188,7 @@ export const nlTranslations: DefaultTranslationsObject = { cancel: 'Annuleren', changesNotSaved: 'Uw wijzigingen zijn niet bewaard. Als u weggaat zullen de wijzigingen verloren gaan.', - clearAll: undefined, + clearAll: 'Alles wissen', close: 'Dichtbij', collapse: 'Samenvouwen', collections: 'Collecties', @@ -417,7 +417,7 @@ export const nlTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Laatst opgeslagen {{distance}} geleden', noFurtherVersionsFound: 'Geen verdere versies gevonden', noRowsFound: 'Geen {{label}} gevonden', - noRowsSelected: undefined, + noRowsSelected: 'Geen {{label}} geselecteerd', preview: 'Voorbeeld', previouslyPublished: 'Eerder gepubliceerd', problemRestoringVersion: 'Er was een probleem bij het herstellen van deze versie', diff --git a/packages/translations/src/languages/pl.ts b/packages/translations/src/languages/pl.ts index 2a9491b0fb3..f8ff36c5fe8 100644 --- a/packages/translations/src/languages/pl.ts +++ b/packages/translations/src/languages/pl.ts @@ -186,7 +186,7 @@ export const plTranslations: DefaultTranslationsObject = { cancel: 'Anuluj', changesNotSaved: 'Twoje zmiany nie zostały zapisane. Jeśli teraz wyjdziesz, stracisz swoje zmiany.', - clearAll: undefined, + clearAll: 'Wyczyść wszystko', close: 'Zamknij', collapse: 'Zwiń', collections: 'Kolekcje', @@ -414,14 +414,14 @@ export const plTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Ostatnio zapisane {{distance}} temu', noFurtherVersionsFound: 'Nie znaleziono dalszych wersji', noRowsFound: 'Nie znaleziono {{label}}', - noRowsSelected: undefined, + noRowsSelected: 'Nie wybrano {{etykieta}}', preview: 'Podgląd', previouslyPublished: 'Wcześniej opublikowane', problemRestoringVersion: 'Wystąpił problem podczas przywracania tej wersji', publish: 'Publikuj', publishChanges: 'Opublikuj zmiany', published: 'Opublikowano', - publishIn: undefined, + publishIn: 'Opublikuj w {{locale}}', publishing: 'Publikacja', restoreAsDraft: 'Przywróć jako szkic', restoredSuccessfully: 'Przywrócono pomyślnie.', diff --git a/packages/translations/src/languages/pt.ts b/packages/translations/src/languages/pt.ts index f8ae147c03f..7849984db48 100644 --- a/packages/translations/src/languages/pt.ts +++ b/packages/translations/src/languages/pt.ts @@ -187,7 +187,7 @@ export const ptTranslations: DefaultTranslationsObject = { cancel: 'Cancelar', changesNotSaved: 'Suas alterações não foram salvas. Se você sair agora, essas alterações serão perdidas.', - clearAll: undefined, + clearAll: 'Limpar Tudo', close: 'Fechar', collapse: 'Recolher', collections: 'Coleções', @@ -267,7 +267,7 @@ export const ptTranslations: DefaultTranslationsObject = { nothingFound: 'Nada encontrado', noValue: 'Nenhum valor', of: 'de', - only: undefined, + only: 'Apenas', open: 'Abrir', or: 'Ou', order: 'Ordem', @@ -415,14 +415,14 @@ export const ptTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Última gravação há {{distance}}', noFurtherVersionsFound: 'Nenhuma outra versão encontrada', noRowsFound: 'Nenhum(a) {{label}} encontrado(a)', - noRowsSelected: undefined, + noRowsSelected: 'Nenhum {{rótulo}} selecionado', preview: 'Pré-visualização', previouslyPublished: 'Publicado Anteriormente', problemRestoringVersion: 'Ocorreu um problema ao restaurar essa versão', publish: 'Publicar', publishChanges: 'Publicar alterações', published: 'Publicado', - publishIn: undefined, + publishIn: 'Publicar em {{locale}}', publishing: 'Publicação', restoreAsDraft: 'Restaurar como rascunho', restoredSuccessfully: 'Restaurado com sucesso.', diff --git a/packages/translations/src/languages/ro.ts b/packages/translations/src/languages/ro.ts index e2b73f02aa0..c4d36241248 100644 --- a/packages/translations/src/languages/ro.ts +++ b/packages/translations/src/languages/ro.ts @@ -190,7 +190,7 @@ export const roTranslations: DefaultTranslationsObject = { cancel: 'Anulați', changesNotSaved: 'Modificările dvs. nu au fost salvate. Dacă plecați acum, vă veți pierde modificările.', - clearAll: undefined, + clearAll: 'Șterge tot', close: 'Închide', collapse: 'Colaps', collections: 'Colecții', @@ -422,7 +422,7 @@ export const roTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Ultima salvare acum {{distance}}', noFurtherVersionsFound: 'Nu s-au găsit alte versiuni', noRowsFound: 'Nu s-a găsit niciun {{label}}', - noRowsSelected: undefined, + noRowsSelected: 'Niciun {{etichetă}} selectat', preview: 'Previzualizare', previouslyPublished: 'Publicat anterior', problemRestoringVersion: 'A existat o problemă la restaurarea acestei versiuni', diff --git a/packages/translations/src/languages/rs.ts b/packages/translations/src/languages/rs.ts index 32e6b1ff61b..dcde3aeae87 100644 --- a/packages/translations/src/languages/rs.ts +++ b/packages/translations/src/languages/rs.ts @@ -185,7 +185,7 @@ export const rsTranslations: DefaultTranslationsObject = { backToDashboard: 'Назад на контролни панел', cancel: 'Откажи', changesNotSaved: 'Ваше промене нису сачуване. Ако изађете сада, изгубићете промене.', - clearAll: undefined, + clearAll: 'Obriši sve', close: 'Затвори', collapse: 'Скупи', collections: 'Колекције', @@ -265,7 +265,7 @@ export const rsTranslations: DefaultTranslationsObject = { nothingFound: 'Ништа није пронађено', noValue: 'Без вредности', of: 'Од', - only: undefined, + only: 'Samo', open: 'Отвори', or: 'Или', order: 'Редослед', @@ -409,14 +409,14 @@ export const rsTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Задњи пут сачувано пре {{distance}', noFurtherVersionsFound: 'Нису пронађене наредне верзије', noRowsFound: '{{label}} није пронађено', - noRowsSelected: undefined, + noRowsSelected: 'Nije odabrana {{label}}', preview: 'Преглед', previouslyPublished: 'Prethodno objavljeno', problemRestoringVersion: 'Настао је проблем при враћању ове верзије', publish: 'Објавити', publishChanges: 'Објави промене', published: 'Објављено', - publishIn: undefined, + publishIn: 'Objavi na {{locale}}', publishing: 'Objavljivanje', restoreAsDraft: 'Vrati kao nacrt', restoredSuccessfully: 'Успешно враћено.', diff --git a/packages/translations/src/languages/rsLatin.ts b/packages/translations/src/languages/rsLatin.ts index a569053a8d3..0eeb5673664 100644 --- a/packages/translations/src/languages/rsLatin.ts +++ b/packages/translations/src/languages/rsLatin.ts @@ -185,7 +185,7 @@ export const rsLatinTranslations: DefaultTranslationsObject = { backToDashboard: 'Nazad na kontrolni panel', cancel: 'Otkaži', changesNotSaved: 'Vaše promene nisu sačuvane. Ako izađete sada, izgubićete promene.', - clearAll: undefined, + clearAll: 'Očisti sve', close: 'Zatvori', collapse: 'Skupi', collections: 'Kolekcije', @@ -265,7 +265,7 @@ export const rsLatinTranslations: DefaultTranslationsObject = { nothingFound: 'Ništa nije pronađeno', noValue: 'Bez vrednosti', of: 'Od', - only: undefined, + only: 'Samo', open: 'Otvori', or: 'Ili', order: 'Redosled', @@ -410,7 +410,7 @@ export const rsLatinTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Zadnji put sačuvano pre {{distance}', noFurtherVersionsFound: 'Nisu pronađene naredne verzije', noRowsFound: '{{label}} nije pronađeno', - noRowsSelected: undefined, + noRowsSelected: 'Nije odabrana {{label}}', preview: 'Pregled', previouslyPublished: 'Prethodno objavljeno', problemRestoringVersion: 'Nastao je problem pri vraćanju ove verzije', diff --git a/packages/translations/src/languages/ru.ts b/packages/translations/src/languages/ru.ts index 176c1514cbd..c505d0d1ae4 100644 --- a/packages/translations/src/languages/ru.ts +++ b/packages/translations/src/languages/ru.ts @@ -188,7 +188,7 @@ export const ruTranslations: DefaultTranslationsObject = { cancel: 'Отмена', changesNotSaved: 'Ваши изменения не были сохранены. Если вы сейчас уйдете, то потеряете свои изменения.', - clearAll: undefined, + clearAll: 'Очистить все', close: 'Закрыть', collapse: 'Свернуть', collections: 'Коллекции', @@ -416,7 +416,7 @@ export const ruTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Последний раз сохранено {{distance}} назад', noFurtherVersionsFound: 'Другие версии не найдены', noRowsFound: 'Не найдено {{label}}', - noRowsSelected: undefined, + noRowsSelected: 'Не выбран {{label}}', preview: 'Предпросмотр', previouslyPublished: 'Ранее опубликовано', problemRestoringVersion: 'Возникла проблема с восстановлением этой версии', diff --git a/packages/translations/src/languages/sk.ts b/packages/translations/src/languages/sk.ts index 2a6468b9cf8..95d81cc8fdc 100644 --- a/packages/translations/src/languages/sk.ts +++ b/packages/translations/src/languages/sk.ts @@ -187,7 +187,7 @@ export const skTranslations: DefaultTranslationsObject = { backToDashboard: 'Späť na nástenku', cancel: 'Zrušiť', changesNotSaved: 'Vaše zmeny neboli uložené. Ak teraz odídete, stratíte svoje zmeny.', - clearAll: undefined, + clearAll: 'Vymazať všetko', close: 'Zavrieť', collapse: 'Zbaliť', collections: 'Kolekcia', @@ -267,7 +267,7 @@ export const skTranslations: DefaultTranslationsObject = { nothingFound: 'Nič nenájdené', noValue: 'Žiadna hodnota', of: 'z', - only: undefined, + only: 'Iba', open: 'Otvoriť', or: 'Alebo', order: 'Poradie', @@ -414,7 +414,7 @@ export const skTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Naposledy uložené pred {{distance}}', noFurtherVersionsFound: 'Nenájdené ďalšie verzie', noRowsFound: 'Nenájdené {{label}}', - noRowsSelected: undefined, + noRowsSelected: 'Nie je vybraté žiadne {{označenie}}', preview: 'Náhľad', previouslyPublished: 'Predtým publikované', problemRestoringVersion: 'Pri obnovovaní tejto verzie došlo k problému', diff --git a/packages/translations/src/languages/sv.ts b/packages/translations/src/languages/sv.ts index 038484eeff3..f57df90f5d2 100644 --- a/packages/translations/src/languages/sv.ts +++ b/packages/translations/src/languages/sv.ts @@ -186,7 +186,7 @@ export const svTranslations: DefaultTranslationsObject = { cancel: 'Avbryt', changesNotSaved: 'Dina ändringar har inte sparats. Om du lämnar nu kommer du att förlora dina ändringar.', - clearAll: undefined, + clearAll: 'Rensa alla', close: 'Stänga', collapse: 'Kollapsa', collections: 'Samlingar', @@ -413,7 +413,7 @@ export const svTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Senast sparad för {{distance}} sedan', noFurtherVersionsFound: 'Inga fler versioner hittades', noRowsFound: 'Inga {{label}} hittades', - noRowsSelected: undefined, + noRowsSelected: 'Inget {{etikett}} valt', preview: 'Förhandsvisa', previouslyPublished: 'Tidigare publicerad', problemRestoringVersion: 'Det uppstod ett problem när den här versionen skulle återställas', diff --git a/packages/translations/src/languages/th.ts b/packages/translations/src/languages/th.ts index b0ac549e4c8..f85be73b863 100644 --- a/packages/translations/src/languages/th.ts +++ b/packages/translations/src/languages/th.ts @@ -182,7 +182,7 @@ export const thTranslations: DefaultTranslationsObject = { backToDashboard: 'กลับไปหน้าแดชบอร์ด', cancel: 'ยกเลิก', changesNotSaved: 'การเปลี่ยนแปลงยังไม่ได้ถูกบันทึก ถ้าคุณออกตอนนี้ สิ่งที่แก้ไขไว้จะหายไป', - clearAll: undefined, + clearAll: 'ล้างทั้งหมด', close: 'ปิด', collapse: 'ยุบ', collections: 'Collections', @@ -405,7 +405,7 @@ export const thTranslations: DefaultTranslationsObject = { lastSavedAgo: 'บันทึกครั้งล่าสุด {{distance}} ที่ผ่านมา', noFurtherVersionsFound: 'ไม่พบเวอร์ชันอื่น ๆ', noRowsFound: 'ไม่พบ {{label}}', - noRowsSelected: undefined, + noRowsSelected: 'ไม่มี {{label}} ที่ถูกเลือก', preview: 'ตัวอย่าง', previouslyPublished: 'เผยแพร่ก่อนหน้านี้', problemRestoringVersion: 'เกิดปัญหาระหว่างการกู้คืนเวอร์ชันนี้', diff --git a/packages/translations/src/languages/tr.ts b/packages/translations/src/languages/tr.ts index 35a08fdc9c0..7fac9e7e89d 100644 --- a/packages/translations/src/languages/tr.ts +++ b/packages/translations/src/languages/tr.ts @@ -189,7 +189,7 @@ export const trTranslations: DefaultTranslationsObject = { cancel: 'İptal', changesNotSaved: 'Değişiklikleriniz henüz kaydedilmedi. Eğer bu sayfayı terk ederseniz değişiklikleri kaybedeceksiniz.', - clearAll: undefined, + clearAll: 'Hepsini Temizle', close: 'Kapat', collapse: 'Daralt', collections: 'Koleksiyonlar', @@ -415,7 +415,7 @@ export const trTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Son kaydedildi {{distance}} önce', noFurtherVersionsFound: 'Başka sürüm bulunamadı.', noRowsFound: '{{label}} bulunamadı', - noRowsSelected: undefined, + noRowsSelected: 'Seçilen {{label}} yok', preview: 'Önizleme', previouslyPublished: 'Daha Önce Yayınlanmış', problemRestoringVersion: 'Bu sürüme geri döndürürken bir hatayla karşılaşıldı.', diff --git a/packages/translations/src/languages/uk.ts b/packages/translations/src/languages/uk.ts index 5ef3ec4432d..3cf4410e018 100644 --- a/packages/translations/src/languages/uk.ts +++ b/packages/translations/src/languages/uk.ts @@ -186,7 +186,7 @@ export const ukTranslations: DefaultTranslationsObject = { backToDashboard: 'Повернутись до головної сторінки', cancel: 'Скасувати', changesNotSaved: 'Ваши зміни не були збережені. Якщо ви вийдете зараз, то втратите свої зміни.', - clearAll: undefined, + clearAll: 'Очистити все', close: 'Закрити', collapse: 'Згорнути', collections: 'Колекції', @@ -413,7 +413,7 @@ export const ukTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Востаннє збережено {{distance}} тому', noFurtherVersionsFound: 'Інших версій не знайдено', noRowsFound: 'Не знайдено {{label}}', - noRowsSelected: undefined, + noRowsSelected: 'Не вибрано {{label}}', preview: 'Попередній перегляд', previouslyPublished: 'Раніше опубліковано', problemRestoringVersion: 'Виникла проблема з відновленням цієї версії', diff --git a/packages/translations/src/languages/vi.ts b/packages/translations/src/languages/vi.ts index 4b0f5b4ba31..229c1b5f35f 100644 --- a/packages/translations/src/languages/vi.ts +++ b/packages/translations/src/languages/vi.ts @@ -184,7 +184,7 @@ export const viTranslations: DefaultTranslationsObject = { backToDashboard: 'Quay lại bảng điều khiển', cancel: 'Hủy', changesNotSaved: 'Thay đổi chưa được lưu lại. Bạn sẽ mất bản chỉnh sửa nếu thoát bây giờ.', - clearAll: undefined, + clearAll: 'Xóa tất cả', close: 'Gần', collapse: 'Thu gọn', collections: 'Collections', @@ -264,7 +264,7 @@ export const viTranslations: DefaultTranslationsObject = { nothingFound: 'Không tìm thấy', noValue: 'Không có giá trị', of: 'trong số', - only: undefined, + only: 'Chỉ', open: 'Mở', or: 'hoặc', order: 'Thứ tự', @@ -408,7 +408,7 @@ export const viTranslations: DefaultTranslationsObject = { lastSavedAgo: 'Lần lưu cuối cùng {{distance}} trước đây', noFurtherVersionsFound: 'Không tìm thấy phiên bản cũ hơn', noRowsFound: 'Không tìm thấy: {{label}}', - noRowsSelected: undefined, + noRowsSelected: 'Không có {{label}} được chọn', preview: 'Bản xem trước', previouslyPublished: 'Đã xuất bản trước đây', problemRestoringVersion: 'Đã xảy ra vấn đề khi khôi phục phiên bản này', diff --git a/packages/translations/src/languages/zh.ts b/packages/translations/src/languages/zh.ts index 00082a3cfd8..32d76d7d9df 100644 --- a/packages/translations/src/languages/zh.ts +++ b/packages/translations/src/languages/zh.ts @@ -179,7 +179,7 @@ export const zhTranslations: DefaultTranslationsObject = { backToDashboard: '返回到仪表板', cancel: '取消', changesNotSaved: '您的更改尚未保存。您确定要离开吗？', - clearAll: undefined, + clearAll: '清除全部', close: '关闭', collapse: '折叠', collections: '集合', @@ -258,7 +258,7 @@ export const zhTranslations: DefaultTranslationsObject = { nothingFound: '没有找到任何东西', noValue: '没有值', of: '的', - only: undefined, + only: '仅', open: '打开', or: '或', order: '排序', @@ -398,14 +398,14 @@ export const zhTranslations: DefaultTranslationsObject = { lastSavedAgo: '上次保存{{distance}}之前', noFurtherVersionsFound: '没有发现其他版本', noRowsFound: '没有发现{{label}}', - noRowsSelected: undefined, + noRowsSelected: '未选择{{label}}', preview: '预览', previouslyPublished: '先前发布过的', problemRestoringVersion: '恢复这个版本时发生了问题', publish: '发布', publishChanges: '发布修改', published: '已发布', - publishIn: undefined, + publishIn: '在{{locale}}发布', publishing: '发布', restoreAsDraft: '恢复为草稿', restoredSuccessfully: '恢复成功。', diff --git a/packages/translations/src/languages/zhTw.ts b/packages/translations/src/languages/zhTw.ts index 0bc3985b4c4..bdace266acd 100644 --- a/packages/translations/src/languages/zhTw.ts +++ b/packages/translations/src/languages/zhTw.ts @@ -179,7 +179,7 @@ export const zhTwTranslations: DefaultTranslationsObject = { backToDashboard: '返回到控制面板', cancel: '取消', changesNotSaved: '您還有尚未儲存的變更。您確定要離開嗎？', - clearAll: undefined, + clearAll: '清除全部', close: '關閉', collapse: '折疊', collections: '集合', @@ -398,14 +398,14 @@ export const zhTwTranslations: DefaultTranslationsObject = { lastSavedAgo: '上次儲存在{{distance}}之前', noFurtherVersionsFound: '沒有發現其他版本', noRowsFound: '沒有發現{{label}}', - noRowsSelected: undefined, + noRowsSelected: '未選擇 {{label}}', preview: '預覽', previouslyPublished: '先前出版過的', problemRestoringVersion: '回復這個版本時發生了問題', publish: '發佈', publishChanges: '發佈修改', published: '已發佈', - publishIn: undefined, + publishIn: '在 {{locale}} 發佈', publishing: '發布', restoreAsDraft: '恢復為草稿', restoredSuccessfully: '回復成功。', diff --git a/packages/ui/src/providers/Auth/index.tsx b/packages/ui/src/providers/Auth/index.tsx index 8b82623c9df..fa5b9029027 100644 --- a/packages/ui/src/providers/Auth/index.tsx +++ b/packages/ui/src/providers/Auth/index.tsx @@ -1,5 +1,5 @@ 'use client' -import type { ClientUser, MeOperationResult, Permissions } from 'payload' +import type { ClientUser, MeOperationResult, Permissions, User } from 'payload' import { useModal } from '@faceless-ui/modal' import { usePathname, useRouter } from 'next/navigation.js' @@ -15,7 +15,7 @@ import { formatAdminURL } from '../../utilities/formatAdminURL.js' import { useConfig } from '../Config/index.js' export type AuthContext = { - fetchFullUser: () => Promise + fetchFullUser: () => Promise logOut: () => Promise permissions?: Permissions refreshCookie: (forceRefresh?: boolean) => void @@ -227,6 +227,7 @@ export function AuthProvider({ const fetchFullUser = React.useCallback(async () => { try { const request = await requests.get(`${serverURL}${apiRoute}/${userSlug}/me`, { + credentials: 'include', headers: { 'Accept-Language': i18n.language, }, @@ -234,9 +235,11 @@ export function AuthProvider({ if (request.status === 200) { const json: MeOperationResult = await request.json() + let user = null if (json?.user) { setUser(json.user) + user = json.user if (json?.token) { setTokenAndExpiration(json) @@ -245,10 +248,14 @@ export function AuthProvider({ setUser(null) revokeTokenAndExpire() } + + return user } } catch (e) { toast.error(`Fetching user failed: ${e.message}`) } + + return null }, [serverURL, apiRoute, userSlug, i18n.language, setTokenAndExpiration, revokeTokenAndExpire]) // On mount, get user and set diff --git a/test/access-control/e2e.spec.ts b/test/access-control/e2e.spec.ts index ea9857e2f4a..984d7baeeb1 100644 --- a/test/access-control/e2e.spec.ts +++ b/test/access-control/e2e.spec.ts @@ -482,7 +482,7 @@ describe('access control', () => { serverURL, }) - await expect(page.locator('.next-error-h1')).toBeVisible() + await expect(page.locator('.unauthorized')).toBeVisible() await page.goto(logoutURL) await page.waitForURL(logoutURL) @@ -500,6 +500,7 @@ describe('access control', () => { test('should block admin access to non-admin user', async () => { const adminURL = `${serverURL}/admin` + const unauthorizedURL = `${serverURL}/admin/unauthorized` await page.goto(adminURL) await page.waitForURL(adminURL) @@ -527,9 +528,9 @@ describe('access control', () => { ]) await page.goto(adminURL) - await page.waitForURL(adminURL) + await page.waitForURL(unauthorizedURL) - await expect(page.locator('.next-error-h1')).toBeVisible() + await expect(page.locator('.unauthorized')).toBeVisible() }) }) diff --git a/test/helpers.ts b/test/helpers.ts index ba71c86813a..66ad582d4dc 100644 --- a/test/helpers.ts +++ b/test/helpers.ts @@ -310,6 +310,7 @@ export function initPageConsoleErrorCatch(page: Page) { !msg.text().includes('the server responded with a status of') && !msg.text().includes('Failed to fetch RSC payload for') && !msg.text().includes('Error: NEXT_NOT_FOUND') && + !msg.text().includes('Error: NEXT_REDIRECT') && !msg.text().includes('Error getting document data') ) { // "Failed to fetch RSC payload for" happens seemingly randomly. There are lots of issues in the next.js repository for this. Causes e2e tests to fail and flake. Will ignore for now From 7e2f4e62de3b22b3d18cd11cededc79e49df2e8e Mon Sep 17 00:00:00 2001 From: Elliot DeNolf Date: Tue, 8 Oct 2024 09:50:31 -0400 Subject: [PATCH 19/20] chore(templates): more next.js promises (#8599) Continuation of #8547 . Missed some type updates. --- .../src/app/(payload)/admin/[[...segments]]/not-found.tsx | 8 ++++---- .../src/app/(payload)/admin/[[...segments]]/page.tsx | 8 ++++---- .../src/app/(payload)/admin/[[...segments]]/page.tsx | 8 ++++---- .../src/app/(payload)/admin/[[...segments]]/page.tsx | 8 ++++---- .../src/app/(payload)/admin/[[...segments]]/page.tsx | 8 ++++---- 5 files changed, 20 insertions(+), 20 deletions(-) diff --git a/templates/_template/src/app/(payload)/admin/[[...segments]]/not-found.tsx b/templates/_template/src/app/(payload)/admin/[[...segments]]/not-found.tsx index ade432a48d5..64108365fd9 100644 --- a/templates/_template/src/app/(payload)/admin/[[...segments]]/not-found.tsx +++ b/templates/_template/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-payload-cloud/src/app/(payload)/admin/[[...segments]]/page.tsx b/templates/with-payload-cloud/src/app/(payload)/admin/[[...segments]]/page.tsx index 75241971d57..0de685cd62b 100644 --- a/templates/with-payload-cloud/src/app/(payload)/admin/[[...segments]]/page.tsx +++ b/templates/with-payload-cloud/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/with-postgres/src/app/(payload)/admin/[[...segments]]/page.tsx b/templates/with-postgres/src/app/(payload)/admin/[[...segments]]/page.tsx index 75241971d57..0de685cd62b 100644 --- a/templates/with-postgres/src/app/(payload)/admin/[[...segments]]/page.tsx +++ b/templates/with-postgres/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/with-vercel-mongodb/src/app/(payload)/admin/[[...segments]]/page.tsx b/templates/with-vercel-mongodb/src/app/(payload)/admin/[[...segments]]/page.tsx index 75241971d57..0de685cd62b 100644 --- a/templates/with-vercel-mongodb/src/app/(payload)/admin/[[...segments]]/page.tsx +++ b/templates/with-vercel-mongodb/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/with-vercel-postgres/src/app/(payload)/admin/[[...segments]]/page.tsx b/templates/with-vercel-postgres/src/app/(payload)/admin/[[...segments]]/page.tsx index 75241971d57..0de685cd62b 100644 --- a/templates/with-vercel-postgres/src/app/(payload)/admin/[[...segments]]/page.tsx +++ b/templates/with-vercel-postgres/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 => From ca779441a3a4b1eedfe65c6cfdd9567885364337 Mon Sep 17 00:00:00 2001 From: Elliot DeNolf Date: Tue, 8 Oct 2024 10:32:28 -0400 Subject: [PATCH 20/20] fix(db-vercel-postgres): add pg dep (#8598) --- packages/db-vercel-postgres/package.json | 4 ++-- pnpm-lock.yaml | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/db-vercel-postgres/package.json b/packages/db-vercel-postgres/package.json index 428907d446d..b21982ec570 100644 --- a/packages/db-vercel-postgres/package.json +++ b/packages/db-vercel-postgres/package.json @@ -52,6 +52,7 @@ "console-table-printer": "2.11.2", "drizzle-kit": "0.23.2-df9e596", "drizzle-orm": "0.32.1", + "pg": "8.11.3", "prompts": "2.4.2", "to-snake-case": "1.0.0", "uuid": "10.0.0" @@ -62,8 +63,7 @@ "@types/pg": "8.10.2", "@types/to-snake-case": "1.0.0", "esbuild": "0.23.1", - "payload": "workspace:*", - "pg": "8.11.3" + "payload": "workspace:*" }, "peerDependencies": { "payload": "workspace:*" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index be88bd8a801..5dda476ded5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -400,6 +400,9 @@ importers: drizzle-orm: specifier: 0.32.1 version: 0.32.1(@libsql/client@0.6.2(bufferutil@4.0.8)(utf-8-validate@6.0.4))(@neondatabase/serverless@0.9.4)(@types/pg@8.10.2)(@vercel/postgres@0.9.0)(pg@8.11.3)(react@19.0.0-rc-3edc000d-20240926)(types-react@19.0.0-rc.1) + pg: + specifier: 8.11.3 + version: 8.11.3 prompts: specifier: 2.4.2 version: 2.4.2 @@ -428,9 +431,6 @@ importers: payload: specifier: workspace:* version: link:../payload - pg: - specifier: 8.11.3 - version: 8.11.3 packages/drizzle: dependencies: