feat: improve turbopack compatibility (#11376)
This PR introduces a few changes to improve turbopack compatibility and ensure e2e tests pass with turbopack enabled ## Changes to improve turbopack compatibility - Use correct sideEffects configuration to fix scss issues - Import scss directly instead of duplicating our scss rules - Fix some scss rules that are not supported by turbopack - Bump Next.js and all other dependencies used to build payload ## Changes to get tests to pass For an unknown reason, flaky tests flake a lot more often in turbopack. This PR does the following to get them to pass: - add more `wait`s - fix actual flakes by ensuring previous operations are properly awaited ## Blocking turbopack bugs - [X] https://github.com/vercel/next.js/issues/76464 - Fix PR: https://github.com/vercel/next.js/pull/76545 - Once fixed: change `"sideEffectsDisabled":` back to `"sideEffects":` ## Non-blocking turbopack bugs - [ ] https://github.com/vercel/next.js/issues/76956 ## Related PRs https://github.com/payloadcms/payload/pull/12653 https://github.com/payloadcms/payload/pull/12652
This commit is contained in:
Alessio Gravili
@@ -3,14 +3,8 @@
|
||||
width: var(--base);
|
||||
|
||||
.stroke {
|
||||
stroke-width: 1px;
|
||||
stroke-width: 2px;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
}
|
||||
|
||||
&:local() {
|
||||
.stroke {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
17
package.json
17
package.json
@@ -99,6 +99,8 @@
|
||||
"test:e2e:headed": "cross-env NODE_OPTIONS=\"--no-deprecation --no-experimental-strip-types\" NODE_NO_WARNINGS=1 DISABLE_LOGGING=true playwright test --headed",
|
||||
"test:e2e:prod": "pnpm prepare-run-test-against-prod && pnpm runts ./test/runE2E.ts --prod",
|
||||
"test:e2e:prod:ci": "pnpm prepare-run-test-against-prod:ci && pnpm runts ./test/runE2E.ts --prod",
|
||||
"test:e2e:prod:ci:turbo": "pnpm prepare-run-test-against-prod:ci && pnpm runts ./test/runE2E.ts --prod --turbo",
|
||||
"test:e2e:turbo": "pnpm runts ./test/runE2E.ts --turbo",
|
||||
"test:int": "cross-env NODE_OPTIONS=\"--no-deprecation --no-experimental-strip-types\" NODE_NO_WARNINGS=1 DISABLE_LOGGING=true jest --forceExit --detectOpenHandles --config=test/jest.config.js --runInBand",
|
||||
"test:int:postgres": "cross-env NODE_OPTIONS=\"--no-deprecation --no-experimental-strip-types\" NODE_NO_WARNINGS=1 PAYLOAD_DATABASE=postgres DISABLE_LOGGING=true jest --forceExit --detectOpenHandles --config=test/jest.config.js --runInBand",
|
||||
"test:int:sqlite": "cross-env NODE_OPTIONS=\"--no-deprecation --no-experimental-strip-types\" NODE_NO_WARNINGS=1 PAYLOAD_DATABASE=sqlite DISABLE_LOGGING=true jest --forceExit --detectOpenHandles --config=test/jest.config.js --runInBand",
|
||||
@@ -120,7 +122,7 @@
|
||||
"devDependencies": {
|
||||
"@jest/globals": "29.7.0",
|
||||
"@libsql/client": "0.14.0",
|
||||
"@next/bundle-analyzer": "15.3.0",
|
||||
"@next/bundle-analyzer": "15.3.2",
|
||||
"@payloadcms/db-postgres": "workspace:*",
|
||||
"@payloadcms/eslint-config": "workspace:*",
|
||||
"@payloadcms/eslint-plugin": "workspace:*",
|
||||
@@ -128,9 +130,9 @@
|
||||
"@playwright/test": "1.50.0",
|
||||
"@sentry/nextjs": "^8.33.1",
|
||||
"@sentry/node": "^8.33.1",
|
||||
"@swc-node/register": "1.10.9",
|
||||
"@swc/cli": "0.6.0",
|
||||
"@swc/jest": "0.2.37",
|
||||
"@swc-node/register": "1.10.10",
|
||||
"@swc/cli": "0.7.7",
|
||||
"@swc/jest": "0.2.38",
|
||||
"@types/fs-extra": "^11.0.2",
|
||||
"@types/jest": "29.5.12",
|
||||
"@types/minimist": "1.2.5",
|
||||
@@ -145,8 +147,6 @@
|
||||
"cross-env": "7.0.3",
|
||||
"dotenv": "16.4.7",
|
||||
"drizzle-kit": "0.28.0",
|
||||
"drizzle-orm": "0.36.1",
|
||||
"escape-html": "^1.0.3",
|
||||
"execa": "5.1.1",
|
||||
"form-data": "3.0.1",
|
||||
"fs-extra": "10.1.0",
|
||||
@@ -156,7 +156,7 @@
|
||||
"lint-staged": "15.2.7",
|
||||
"minimist": "1.2.8",
|
||||
"mongodb-memory-server": "^10",
|
||||
"next": "15.3.0",
|
||||
"next": "15.3.2",
|
||||
"open": "^10.1.0",
|
||||
"p-limit": "^5.0.0",
|
||||
"playwright": "1.50.0",
|
||||
@@ -169,7 +169,7 @@
|
||||
"shelljs": "0.8.5",
|
||||
"slash": "3.0.0",
|
||||
"sort-package-json": "^2.10.0",
|
||||
"swc-plugin-transform-remove-imports": "3.1.0",
|
||||
"swc-plugin-transform-remove-imports": "4.0.4",
|
||||
"tempy": "1.0.1",
|
||||
"tstyche": "^3.1.1",
|
||||
"tsx": "4.19.2",
|
||||
@@ -186,7 +186,6 @@
|
||||
"copyfiles": "$copyfiles",
|
||||
"cross-env": "$cross-env",
|
||||
"dotenv": "$dotenv",
|
||||
"drizzle-orm": "$drizzle-orm",
|
||||
"graphql": "^16.8.1",
|
||||
"mongodb-memory-server": "$mongodb-memory-server",
|
||||
"react": "$react",
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
"url": "https://payloadcms.com"
|
||||
}
|
||||
],
|
||||
"sideEffects": false,
|
||||
"type": "module",
|
||||
"exports": {
|
||||
"./types": {
|
||||
@@ -60,7 +61,7 @@
|
||||
"dependencies": {
|
||||
"@clack/prompts": "^0.7.0",
|
||||
"@sindresorhus/slugify": "^1.1.0",
|
||||
"@swc/core": "1.10.12",
|
||||
"@swc/core": "1.11.29",
|
||||
"arg": "^5.0.0",
|
||||
"chalk": "^4.1.0",
|
||||
"comment-json": "^4.2.3",
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
}
|
||||
],
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./src/index.ts",
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
"url": "https://payloadcms.com"
|
||||
}
|
||||
],
|
||||
"sideEffects": false,
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": {
|
||||
@@ -85,10 +86,10 @@
|
||||
"uuid": "10.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@hyrious/esbuild-plugin-commonjs": "^0.2.4",
|
||||
"@hyrious/esbuild-plugin-commonjs": "0.2.6",
|
||||
"@payloadcms/eslint-config": "workspace:*",
|
||||
"@types/to-snake-case": "1.0.0",
|
||||
"esbuild": "0.24.2",
|
||||
"esbuild": "0.25.5",
|
||||
"payload": "workspace:*"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
}
|
||||
],
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./src/index.ts",
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
"url": "https://payloadcms.com"
|
||||
}
|
||||
],
|
||||
"sideEffects": false,
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": {
|
||||
@@ -85,11 +86,11 @@
|
||||
"uuid": "10.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@hyrious/esbuild-plugin-commonjs": "^0.2.4",
|
||||
"@hyrious/esbuild-plugin-commonjs": "0.2.6",
|
||||
"@payloadcms/eslint-config": "workspace:*",
|
||||
"@types/pg": "8.10.2",
|
||||
"@types/to-snake-case": "1.0.0",
|
||||
"esbuild": "0.24.2",
|
||||
"esbuild": "0.25.5",
|
||||
"payload": "workspace:*"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
}
|
||||
],
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./src/index.ts",
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
}
|
||||
],
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./src/index.ts",
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
}
|
||||
],
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./src/index.ts",
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
"eslint-plugin-jest-dom": "5.5.0",
|
||||
"eslint-plugin-jsx-a11y": "6.10.2",
|
||||
"eslint-plugin-perfectionist": "3.9.1",
|
||||
"eslint-plugin-react-compiler": "19.0.0-beta-e993439-20250405",
|
||||
"eslint-plugin-react-compiler": "19.1.0-rc.2",
|
||||
"eslint-plugin-react-hooks": "0.0.0-experimental-d331ba04-20250307",
|
||||
"eslint-plugin-regexp": "2.7.0",
|
||||
"globals": "16.0.0",
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
}
|
||||
],
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./src/index.ts",
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
}
|
||||
],
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./src/index.ts",
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
}
|
||||
],
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./src/index.ts",
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
}
|
||||
],
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./src/index.ts",
|
||||
|
||||
@@ -16,6 +16,10 @@
|
||||
"url": "https://payloadcms.com"
|
||||
}
|
||||
],
|
||||
"sideEffects": [
|
||||
"*.scss",
|
||||
"*.css"
|
||||
],
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": {
|
||||
@@ -104,22 +108,22 @@
|
||||
"uuid": "10.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "7.26.4",
|
||||
"@babel/core": "7.26.7",
|
||||
"@babel/preset-env": "7.26.7",
|
||||
"@babel/preset-react": "7.26.3",
|
||||
"@babel/preset-typescript": "7.26.0",
|
||||
"@next/eslint-plugin-next": "15.3.0",
|
||||
"@babel/cli": "7.27.2",
|
||||
"@babel/core": "7.27.3",
|
||||
"@babel/preset-env": "7.27.2",
|
||||
"@babel/preset-react": "7.27.1",
|
||||
"@babel/preset-typescript": "7.27.1",
|
||||
"@next/eslint-plugin-next": "15.3.2",
|
||||
"@payloadcms/eslint-config": "workspace:*",
|
||||
"@types/busboy": "1.5.4",
|
||||
"@types/react": "19.1.0",
|
||||
"@types/react-dom": "19.1.2",
|
||||
"@types/uuid": "10.0.0",
|
||||
"babel-plugin-react-compiler": "19.0.0-beta-e993439-20250405",
|
||||
"esbuild": "0.24.2",
|
||||
"babel-plugin-react-compiler": "19.1.0-rc.2",
|
||||
"esbuild": "0.25.5",
|
||||
"esbuild-sass-plugin": "3.3.1",
|
||||
"payload": "workspace:*",
|
||||
"swc-plugin-transform-remove-imports": "3.1.0"
|
||||
"swc-plugin-transform-remove-imports": "4.0.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"graphql": "^16.8.1",
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.doc-tab {
|
||||
display: flex;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.doc-tabs {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.doc-header {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.nav {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.nav {
|
||||
|
||||
@@ -1,207 +0,0 @@
|
||||
@layer payload-default, payload;
|
||||
|
||||
@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;
|
||||
|
||||
--theme-bg: var(--theme-elevation-0);
|
||||
--theme-input-bg: var(--theme-elevation-0);
|
||||
--theme-text: var(--theme-elevation-800);
|
||||
--theme-overlay: rgba(5, 5, 5, 0.5);
|
||||
--theme-baseline: #{$baseline-px};
|
||||
--theme-baseline-body-size: #{$baseline-body-size};
|
||||
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||
sans-serif;
|
||||
--font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
|
||||
--font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;
|
||||
|
||||
--style-radius-s: #{$style-radius-s};
|
||||
--style-radius-m: #{$style-radius-m};
|
||||
--style-radius-l: #{$style-radius-l};
|
||||
|
||||
--z-popup: 10;
|
||||
--z-nav: 20;
|
||||
--z-modal: 30;
|
||||
--z-status: 40;
|
||||
|
||||
--accessibility-outline: 2px solid var(--theme-text);
|
||||
--accessibility-outline-offset: 2px;
|
||||
|
||||
--gutter-h: #{base(3)};
|
||||
--spacing-view-bottom: var(--gutter-h);
|
||||
--doc-controls-height: calc(var(--base) * 2.8);
|
||||
--app-header-height: calc(var(--base) * 2.8);
|
||||
--nav-width: 275px;
|
||||
--nav-trans-time: 150ms;
|
||||
|
||||
@include mid-break {
|
||||
--gutter-h: #{base(2)};
|
||||
--app-header-height: calc(var(--base) * 2.4);
|
||||
--doc-controls-height: calc(var(--base) * 2.4);
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
--gutter-h: #{base(0.8)};
|
||||
--spacing-view-bottom: calc(var(--base) * 2);
|
||||
--nav-width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
// GLOBAL STYLES
|
||||
/////////////////////////////
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
@extend %body;
|
||||
background: var(--theme-bg);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
&[data-theme='dark'] {
|
||||
--theme-bg: var(--theme-elevation-0);
|
||||
--theme-text: var(--theme-elevation-1000);
|
||||
--theme-input-bg: var(--theme-elevation-50);
|
||||
--theme-overlay: rgba(5, 5, 5, 0.75);
|
||||
color-scheme: dark;
|
||||
|
||||
::selection {
|
||||
color: var(--color-base-1000);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
color: var(--color-base-1000);
|
||||
}
|
||||
}
|
||||
|
||||
@include mid-break {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
::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;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend %h1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend %h2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend %h3;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@extend %h4;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@extend %h5;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@extend %h6;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: $baseline;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: var(--accessibility-outline);
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
|
||||
&:focus {
|
||||
&:not(:focus-visible) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
dialog {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.payload__modal-item {
|
||||
min-height: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.payload__modal-container--enterDone {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.payload__modal-item--enter,
|
||||
.payload__modal-item--enterDone {
|
||||
z-index: var(--z-modal);
|
||||
}
|
||||
|
||||
// @import '~payload-user-css'; TODO: re-enable this
|
||||
}
|
||||
@@ -1,271 +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-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-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-success-50: var(--color-success-50);
|
||||
--theme-success-100: var(--color-success-100);
|
||||
--theme-success-150: var(--color-success-150);
|
||||
--theme-success-200: var(--color-success-200);
|
||||
--theme-success-250: var(--color-success-250);
|
||||
--theme-success-300: var(--color-success-300);
|
||||
--theme-success-350: var(--color-success-350);
|
||||
--theme-success-400: var(--color-success-400);
|
||||
--theme-success-450: var(--color-success-450);
|
||||
--theme-success-500: var(--color-success-500);
|
||||
--theme-success-550: var(--color-success-550);
|
||||
--theme-success-600: var(--color-success-600);
|
||||
--theme-success-650: var(--color-success-650);
|
||||
--theme-success-700: var(--color-success-700);
|
||||
--theme-success-750: var(--color-success-750);
|
||||
--theme-success-800: var(--color-success-800);
|
||||
--theme-success-850: var(--color-success-850);
|
||||
--theme-success-900: var(--color-success-900);
|
||||
--theme-success-950: var(--color-success-950);
|
||||
|
||||
--theme-warning-50: var(--color-warning-50);
|
||||
--theme-warning-100: var(--color-warning-100);
|
||||
--theme-warning-150: var(--color-warning-150);
|
||||
--theme-warning-200: var(--color-warning-200);
|
||||
--theme-warning-250: var(--color-warning-250);
|
||||
--theme-warning-300: var(--color-warning-300);
|
||||
--theme-warning-350: var(--color-warning-350);
|
||||
--theme-warning-400: var(--color-warning-400);
|
||||
--theme-warning-450: var(--color-warning-450);
|
||||
--theme-warning-500: var(--color-warning-500);
|
||||
--theme-warning-550: var(--color-warning-550);
|
||||
--theme-warning-600: var(--color-warning-600);
|
||||
--theme-warning-650: var(--color-warning-650);
|
||||
--theme-warning-700: var(--color-warning-700);
|
||||
--theme-warning-750: var(--color-warning-750);
|
||||
--theme-warning-800: var(--color-warning-800);
|
||||
--theme-warning-850: var(--color-warning-850);
|
||||
--theme-warning-900: var(--color-warning-900);
|
||||
--theme-warning-950: var(--color-warning-950);
|
||||
|
||||
--theme-error-50: var(--color-error-50);
|
||||
--theme-error-100: var(--color-error-100);
|
||||
--theme-error-150: var(--color-error-150);
|
||||
--theme-error-200: var(--color-error-200);
|
||||
--theme-error-250: var(--color-error-250);
|
||||
--theme-error-300: var(--color-error-300);
|
||||
--theme-error-350: var(--color-error-350);
|
||||
--theme-error-400: var(--color-error-400);
|
||||
--theme-error-450: var(--color-error-450);
|
||||
--theme-error-500: var(--color-error-500);
|
||||
--theme-error-550: var(--color-error-550);
|
||||
--theme-error-600: var(--color-error-600);
|
||||
--theme-error-650: var(--color-error-650);
|
||||
--theme-error-700: var(--color-error-700);
|
||||
--theme-error-750: var(--color-error-750);
|
||||
--theme-error-800: var(--color-error-800);
|
||||
--theme-error-850: var(--color-error-850);
|
||||
--theme-error-900: var(--color-error-900);
|
||||
--theme-error-950: var(--color-error-950);
|
||||
|
||||
--theme-elevation-0: var(--color-base-0);
|
||||
--theme-elevation-50: var(--color-base-50);
|
||||
--theme-elevation-100: var(--color-base-100);
|
||||
--theme-elevation-150: var(--color-base-150);
|
||||
--theme-elevation-200: var(--color-base-200);
|
||||
--theme-elevation-250: var(--color-base-250);
|
||||
--theme-elevation-300: var(--color-base-300);
|
||||
--theme-elevation-350: var(--color-base-350);
|
||||
--theme-elevation-400: var(--color-base-400);
|
||||
--theme-elevation-450: var(--color-base-450);
|
||||
--theme-elevation-500: var(--color-base-500);
|
||||
--theme-elevation-550: var(--color-base-550);
|
||||
--theme-elevation-600: var(--color-base-600);
|
||||
--theme-elevation-650: var(--color-base-650);
|
||||
--theme-elevation-700: var(--color-base-700);
|
||||
--theme-elevation-750: var(--color-base-750);
|
||||
--theme-elevation-800: var(--color-base-800);
|
||||
--theme-elevation-850: var(--color-base-850);
|
||||
--theme-elevation-900: var(--color-base-900);
|
||||
--theme-elevation-950: var(--color-base-950);
|
||||
--theme-elevation-1000: var(--color-base-1000);
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
--theme-border-color: var(--theme-elevation-150);
|
||||
|
||||
--theme-elevation-0: var(--color-base-900);
|
||||
--theme-elevation-50: var(--color-base-850);
|
||||
--theme-elevation-100: var(--color-base-800);
|
||||
--theme-elevation-150: var(--color-base-750);
|
||||
--theme-elevation-200: var(--color-base-700);
|
||||
--theme-elevation-250: var(--color-base-650);
|
||||
--theme-elevation-300: var(--color-base-600);
|
||||
--theme-elevation-350: var(--color-base-550);
|
||||
--theme-elevation-400: var(--color-base-450);
|
||||
--theme-elevation-450: var(--color-base-400);
|
||||
--theme-elevation-550: var(--color-base-350);
|
||||
--theme-elevation-600: var(--color-base-300);
|
||||
--theme-elevation-650: var(--color-base-250);
|
||||
--theme-elevation-700: var(--color-base-200);
|
||||
--theme-elevation-750: var(--color-base-150);
|
||||
--theme-elevation-800: var(--color-base-100);
|
||||
--theme-elevation-850: var(--color-base-50);
|
||||
--theme-elevation-900: var(--color-base-0);
|
||||
--theme-elevation-950: var(--color-base-0);
|
||||
--theme-elevation-1000: var(--color-base-0);
|
||||
|
||||
--theme-success-50: var(--color-success-950);
|
||||
--theme-success-100: var(--color-success-900);
|
||||
--theme-success-150: var(--color-success-850);
|
||||
--theme-success-200: var(--color-success-800);
|
||||
--theme-success-250: var(--color-success-750);
|
||||
--theme-success-300: var(--color-success-700);
|
||||
--theme-success-350: var(--color-success-650);
|
||||
--theme-success-400: var(--color-success-600);
|
||||
--theme-success-450: var(--color-success-550);
|
||||
--theme-success-550: var(--color-success-450);
|
||||
--theme-success-600: var(--color-success-400);
|
||||
--theme-success-650: var(--color-success-350);
|
||||
--theme-success-700: var(--color-success-300);
|
||||
--theme-success-750: var(--color-success-250);
|
||||
--theme-success-800: var(--color-success-200);
|
||||
--theme-success-850: var(--color-success-150);
|
||||
--theme-success-900: var(--color-success-100);
|
||||
--theme-success-950: var(--color-success-50);
|
||||
|
||||
--theme-warning-50: var(--color-warning-950);
|
||||
--theme-warning-100: var(--color-warning-900);
|
||||
--theme-warning-150: var(--color-warning-850);
|
||||
--theme-warning-200: var(--color-warning-800);
|
||||
--theme-warning-250: var(--color-warning-750);
|
||||
--theme-warning-300: var(--color-warning-700);
|
||||
--theme-warning-350: var(--color-warning-650);
|
||||
--theme-warning-400: var(--color-warning-600);
|
||||
--theme-warning-450: var(--color-warning-550);
|
||||
--theme-warning-550: var(--color-warning-450);
|
||||
--theme-warning-600: var(--color-warning-400);
|
||||
--theme-warning-650: var(--color-warning-350);
|
||||
--theme-warning-700: var(--color-warning-300);
|
||||
--theme-warning-750: var(--color-warning-250);
|
||||
--theme-warning-800: var(--color-warning-200);
|
||||
--theme-warning-850: var(--color-warning-150);
|
||||
--theme-warning-900: var(--color-warning-100);
|
||||
--theme-warning-950: var(--color-warning-50);
|
||||
|
||||
--theme-error-50: var(--color-error-950);
|
||||
--theme-error-100: var(--color-error-900);
|
||||
--theme-error-150: var(--color-error-850);
|
||||
--theme-error-200: var(--color-error-800);
|
||||
--theme-error-250: var(--color-error-750);
|
||||
--theme-error-300: var(--color-error-700);
|
||||
--theme-error-350: var(--color-error-650);
|
||||
--theme-error-400: var(--color-error-600);
|
||||
--theme-error-450: var(--color-error-550);
|
||||
--theme-error-550: var(--color-error-450);
|
||||
--theme-error-600: var(--color-error-400);
|
||||
--theme-error-650: var(--color-error-350);
|
||||
--theme-error-700: var(--color-error-300);
|
||||
--theme-error-750: var(--color-error-250);
|
||||
--theme-error-800: var(--color-error-200);
|
||||
--theme-error-850: var(--color-error-150);
|
||||
--theme-error-900: var(--color-error-100);
|
||||
--theme-error-950: var(--color-error-50);
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
/* Used as a placeholder for when the Payload app does not have custom CSS */
|
||||
@@ -1,27 +0,0 @@
|
||||
////////////////////////////
|
||||
// MEDIA QUERIES
|
||||
/////////////////////////////
|
||||
|
||||
@mixin extra-small-break {
|
||||
@media (max-width: $breakpoint-xs-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin small-break {
|
||||
@media (max-width: $breakpoint-s-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mid-break {
|
||||
@media (max-width: $breakpoint-m-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin large-break {
|
||||
@media (max-width: $breakpoint-l-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
@layer payload-default {
|
||||
%btn-reset {
|
||||
border: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btn-reset {
|
||||
border: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
color: currentColor;
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
@import 'vars';
|
||||
@import 'z-index';
|
||||
|
||||
//////////////////////////////
|
||||
// IMPORT OVERRIDES
|
||||
//////////////////////////////
|
||||
|
||||
@import 'type';
|
||||
@import 'queries';
|
||||
@import 'resets';
|
||||
@import 'svg';
|
||||
@@ -1,10 +0,0 @@
|
||||
@mixin color-svg($color) {
|
||||
.stroke {
|
||||
stroke: $color;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.fill {
|
||||
fill: $color;
|
||||
}
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
@import 'vars';
|
||||
@import 'queries';
|
||||
|
||||
@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__close-button {
|
||||
align-self: center;
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.Toastify__toast--success {
|
||||
color: var(--color-success-900);
|
||||
background: var(--color-success-500);
|
||||
|
||||
.Toastify__progress-bar {
|
||||
background-color: var(--color-success-900);
|
||||
}
|
||||
}
|
||||
|
||||
.Toastify__close-button--success {
|
||||
color: var(--color-success-900);
|
||||
}
|
||||
|
||||
.Toastify__toast--error {
|
||||
background: var(--theme-error-500);
|
||||
color: #fff;
|
||||
|
||||
.Toastify__progress-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.Toastify__close-button--light {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@include mid-break {
|
||||
.Toastify__toast-container {
|
||||
left: $baseline;
|
||||
right: $baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,144 +0,0 @@
|
||||
@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);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-elevation-250);
|
||||
background: none;
|
||||
}
|
||||
|
||||
[dir='RTL'] & {
|
||||
right: unset;
|
||||
left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-title {
|
||||
line-height: base(1);
|
||||
margin-right: base(1);
|
||||
}
|
||||
|
||||
.payload-toast-item {
|
||||
padding: base(0.8);
|
||||
color: var(--theme-elevation-800);
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--theme-border-color);
|
||||
background: var(--theme-input-bg);
|
||||
box-shadow:
|
||||
0px 10px 4px -8px rgba(0, 2, 4, 0.02),
|
||||
0px 2px 3px 0px rgba(0, 2, 4, 0.05);
|
||||
|
||||
.toast-content {
|
||||
transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&[data-front='false'] {
|
||||
.toast-content {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-expanded='true'] {
|
||||
.toast-content {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
width: base(0.8);
|
||||
height: base(0.8);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
& > * {
|
||||
width: base(1.2);
|
||||
height: base(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-warning {
|
||||
color: var(--theme-warning-800);
|
||||
border-color: var(--theme-warning-250);
|
||||
background-color: var(--theme-warning-100);
|
||||
|
||||
.payload-toast-close-button {
|
||||
color: var(--theme-warning-600);
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-warning-250);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-error {
|
||||
color: var(--theme-error-800);
|
||||
border-color: var(--theme-error-250);
|
||||
background-color: var(--theme-error-100);
|
||||
|
||||
.payload-toast-close-button {
|
||||
color: var(--theme-error-600);
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-error-250);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-success {
|
||||
color: var(--theme-success-800);
|
||||
border-color: var(--theme-success-250);
|
||||
background-color: var(--theme-success-100);
|
||||
|
||||
.payload-toast-close-button {
|
||||
color: var(--theme-success-600);
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-success-250);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-info {
|
||||
color: var(--theme-elevation-800);
|
||||
border-color: var(--theme-elevation-250);
|
||||
background-color: var(--theme-elevation-100);
|
||||
|
||||
.payload-toast-close-button {
|
||||
color: var(--theme-elevation-600);
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-elevation-250);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,110 +0,0 @@
|
||||
@import 'vars';
|
||||
@import 'queries';
|
||||
|
||||
/////////////////////////////
|
||||
// HEADINGS
|
||||
/////////////////////////////
|
||||
@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);
|
||||
|
||||
@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);
|
||||
|
||||
@include small-break {
|
||||
font-size: base(0.85);
|
||||
}
|
||||
}
|
||||
|
||||
%h3 {
|
||||
margin: 0;
|
||||
font-size: base(1);
|
||||
line-height: base(1.2);
|
||||
|
||||
@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);
|
||||
}
|
||||
|
||||
%h6 {
|
||||
margin: 0;
|
||||
font-size: base(0.6);
|
||||
line-height: base(0.8);
|
||||
}
|
||||
|
||||
%small {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
// TYPE STYLES
|
||||
/////////////////////////////
|
||||
|
||||
%large-body {
|
||||
font-size: base(0.6);
|
||||
line-height: base(1);
|
||||
letter-spacing: base(0.02);
|
||||
|
||||
@include mid-break {
|
||||
font-size: base(0.7);
|
||||
line-height: base(1);
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
font-size: base(0.55);
|
||||
line-height: base(0.75);
|
||||
}
|
||||
}
|
||||
|
||||
%body {
|
||||
font-size: $baseline-body-size;
|
||||
line-height: $baseline-px;
|
||||
font-weight: normal;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
%code {
|
||||
font-size: base(0.4);
|
||||
color: var(--theme-elevation-400);
|
||||
|
||||
span {
|
||||
color: var(--theme-elevation-800);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,192 +0,0 @@
|
||||
@use 'sass:math';
|
||||
|
||||
/////////////////////////////
|
||||
// BREAKPOINTS
|
||||
/////////////////////////////
|
||||
|
||||
$breakpoint-xs-width: 400px !default;
|
||||
$breakpoint-s-width: 768px !default;
|
||||
$breakpoint-m-width: 1024px !default;
|
||||
$breakpoint-l-width: 1440px !default;
|
||||
|
||||
//////////////////////////////
|
||||
// BASELINE GRID
|
||||
//////////////////////////////
|
||||
|
||||
$baseline-px: 20px !default;
|
||||
$baseline-body-size: 13px !default;
|
||||
$baseline: math.div($baseline-px, $baseline-body-size) + rem;
|
||||
|
||||
@function base($multiplier) {
|
||||
@return (math.div($baseline-px, $baseline-body-size) * $multiplier) + rem;
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// COLORS (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
|
||||
//////////////////////////////
|
||||
|
||||
$color-dark-gray: #333333 !default;
|
||||
$color-gray: #9a9a9a !default;
|
||||
$color-light-gray: #dadada !default;
|
||||
$color-background-gray: #f3f3f3 !default;
|
||||
$color-red: #ff6f76 !default;
|
||||
$color-yellow: #fdffa4 !default;
|
||||
$color-green: #b2ffd6 !default;
|
||||
$color-purple: #f3ddf3 !default;
|
||||
|
||||
//////////////////////////////
|
||||
// STYLES
|
||||
//////////////////////////////
|
||||
|
||||
$style-radius-s: 3px !default;
|
||||
$style-radius-m: 4px !default;
|
||||
$style-radius-l: 8px !default;
|
||||
$style-stroke-width: 1px !default;
|
||||
|
||||
$style-stroke-width-s: 1px !default;
|
||||
$style-stroke-width-m: 2px !default;
|
||||
|
||||
//////////////////////////////
|
||||
// MISC
|
||||
//////////////////////////////
|
||||
|
||||
$top-header-offset: calc(base(1) - 1px);
|
||||
$top-header-offset-m: base(3);
|
||||
$focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
|
||||
|
||||
//////////////////////////////
|
||||
// SHADOWS
|
||||
//////////////////////////////
|
||||
|
||||
@mixin shadow-sm {
|
||||
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@mixin shadow-m {
|
||||
box-shadow: 0 4px 8px -3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@mixin shadow-lg {
|
||||
box-shadow: 0 -2px 16px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@mixin shadow-lg-top {
|
||||
box-shadow: 0 2px 16px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@mixin inputShadow {
|
||||
@include shadow-sm;
|
||||
|
||||
&:not(:disabled) {
|
||||
&:hover {
|
||||
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin soft-shadow-bottom {
|
||||
box-shadow: 0 7px 14px 0px rgb(0 0 0 / 5%);
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// STYLE MIXINS
|
||||
//////////////////////////////
|
||||
|
||||
@mixin blur-bg($color: var(--theme-bg), $opacity: 0.75) {
|
||||
&:before,
|
||||
&:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
background: $color;
|
||||
opacity: $opacity;
|
||||
}
|
||||
|
||||
&:after {
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin blur-bg-light {
|
||||
@include blur-bg(var(--theme-bg), 0.3);
|
||||
}
|
||||
|
||||
@mixin readOnly {
|
||||
background: var(--theme-elevation-100);
|
||||
color: var(--theme-elevation-400);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--theme-elevation-150);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin formInput() {
|
||||
@include inputShadow;
|
||||
font-family: var(--font-body);
|
||||
width: 100%;
|
||||
border: 1px solid var(--theme-elevation-150);
|
||||
border-radius: var(--style-radius-s);
|
||||
background: var(--theme-input-bg);
|
||||
color: var(--theme-elevation-800);
|
||||
font-size: 1rem;
|
||||
height: base(2);
|
||||
line-height: base(1);
|
||||
padding: base(0.4) base(0.75);
|
||||
-webkit-appearance: none;
|
||||
transition-property: border, box-shadow;
|
||||
transition-duration: 100ms;
|
||||
transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
|
||||
|
||||
&[data-rtl='true'] {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: var(--theme-elevation-400);
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
color: var(--theme-elevation-400);
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--theme-elevation-250);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-within,
|
||||
&:active {
|
||||
border-color: var(--theme-elevation-400);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@include readOnly;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lightInputError {
|
||||
background-color: var(--theme-error-50);
|
||||
border: 1px solid var(--theme-error-500);
|
||||
}
|
||||
|
||||
@mixin darkInputError {
|
||||
background-color: var(--theme-error-100);
|
||||
border: 1px solid var(--theme-error-400);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--theme-error-500);
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
/////////////////////////////
|
||||
// Z-INDEX CHART (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
|
||||
/////////////////////////////
|
||||
|
||||
$z-page: 20;
|
||||
$z-page-content: 30;
|
||||
$z-nav: 40;
|
||||
$z-modal: 50;
|
||||
$z-status: 60;
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.template-default {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.template-default {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../scss/styles';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.template-minimal {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
$tab-width: 16px;
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.query-inspector {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.payload-settings {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.create-first-user {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.dashboard {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.live-preview-window {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.live-preview-toolbar-controls {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.live-preview-toolbar {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.live-preview {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.logout {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.not-found {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.reset-password__wrap {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.unauthorized {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.view-version {
|
||||
@@ -61,7 +61,6 @@
|
||||
gap: calc(var(--base) / 4);
|
||||
}
|
||||
|
||||
|
||||
&__restore {
|
||||
margin: calc(var(--base) * 0.5) 0 0 0;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.render-field-diffs {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../.././scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.restore-version {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.versions {
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
}
|
||||
],
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./src/index.ts",
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
"ws": "^8.16.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@hyrious/esbuild-plugin-commonjs": "^0.2.4",
|
||||
"@hyrious/esbuild-plugin-commonjs": "0.2.6",
|
||||
"@monaco-editor/react": "4.7.0",
|
||||
"@payloadcms/eslint-config": "workspace:*",
|
||||
"@types/json-schema": "7.0.15",
|
||||
@@ -127,7 +127,7 @@
|
||||
"concurrently": "9.1.2",
|
||||
"copyfiles": "2.4.1",
|
||||
"cross-env": "7.0.3",
|
||||
"esbuild": "0.24.2",
|
||||
"esbuild": "0.25.5",
|
||||
"graphql-http": "^1.22.0",
|
||||
"react-datepicker": "7.6.0",
|
||||
"rimraf": "6.0.1",
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
}
|
||||
],
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./src/index.ts",
|
||||
|
||||
@@ -28,6 +28,7 @@
|
||||
}
|
||||
],
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./src/index.ts",
|
||||
|
||||
@@ -11,6 +11,10 @@
|
||||
"multi-tenant",
|
||||
"nextjs"
|
||||
],
|
||||
"sideEffects": [
|
||||
"*.scss",
|
||||
"*.css"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/payloadcms/payload.git",
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
}
|
||||
],
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./src/index.ts",
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
}
|
||||
],
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./src/index.ts",
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
}
|
||||
],
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./src/index.ts",
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
}
|
||||
],
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./src/index.ts",
|
||||
|
||||
@@ -11,6 +11,10 @@
|
||||
"seo",
|
||||
"yoast"
|
||||
],
|
||||
"sideEffects": [
|
||||
"*.scss",
|
||||
"*.css"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/payloadcms/payload.git",
|
||||
|
||||
@@ -28,6 +28,7 @@
|
||||
}
|
||||
],
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./src/index.ts",
|
||||
|
||||
@@ -17,7 +17,10 @@
|
||||
"url": "https://payloadcms.com"
|
||||
}
|
||||
],
|
||||
"sideEffects": false,
|
||||
"sideEffects": [
|
||||
"*.scss",
|
||||
"*.css"
|
||||
],
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": {
|
||||
@@ -384,11 +387,11 @@
|
||||
"uuid": "10.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "7.26.4",
|
||||
"@babel/core": "7.26.7",
|
||||
"@babel/preset-env": "7.26.7",
|
||||
"@babel/preset-react": "7.26.3",
|
||||
"@babel/preset-typescript": "7.26.0",
|
||||
"@babel/cli": "7.27.2",
|
||||
"@babel/core": "7.27.3",
|
||||
"@babel/preset-env": "7.27.2",
|
||||
"@babel/preset-react": "7.27.1",
|
||||
"@babel/preset-typescript": "7.27.1",
|
||||
"@lexical/eslint-plugin": "0.28.0",
|
||||
"@payloadcms/eslint-config": "workspace:*",
|
||||
"@types/escape-html": "1.0.4",
|
||||
@@ -396,12 +399,12 @@
|
||||
"@types/node": "22.5.4",
|
||||
"@types/react": "19.1.0",
|
||||
"@types/react-dom": "19.1.2",
|
||||
"babel-plugin-react-compiler": "19.0.0-beta-e993439-20250405",
|
||||
"babel-plugin-react-compiler": "19.1.0-rc.2",
|
||||
"babel-plugin-transform-remove-imports": "^1.8.0",
|
||||
"esbuild": "0.24.2",
|
||||
"esbuild": "0.25.5",
|
||||
"esbuild-sass-plugin": "3.3.1",
|
||||
"payload": "workspace:*",
|
||||
"swc-plugin-transform-remove-imports": "3.1.0"
|
||||
"swc-plugin-transform-remove-imports": "4.0.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@faceless-ui/modal": "3.0.0-beta.2",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../scss/styles';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.ContentEditable__root > div:has(.lexical-block) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../scss/styles';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.inline-block-container {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../scss/styles';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.test-recorder-output {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../scss/styles';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.table-cell-action-button-container {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../scss/styles';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.LexicalEditorTheme {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../scss/styles';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.LexicalEditorTheme__hr {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.link-editor {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.lexical-relationship {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../scss/styles';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
html[data-theme='dark'] {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../../scss/styles';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.inline-toolbar-popup {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../scss/styles';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.toolbar-popup__button {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../scss/styles';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.toolbar-popup__dropdown {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../scss/styles';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.lexical-upload {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
:root {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
@import '../../colors.scss';
|
||||
|
||||
@layer payload-default {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
@import '../../colors.scss';
|
||||
|
||||
@layer payload-default {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
@import '../../colors.scss';
|
||||
|
||||
@layer payload-default {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
@import '../../colors.scss';
|
||||
|
||||
@layer payload-default {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
@import '../colors.scss';
|
||||
|
||||
@layer payload-default {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
@import './colors.scss';
|
||||
|
||||
@layer payload-default {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.rich-text-lexical {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../scss/styles';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.rich-text-lexical {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../scss/styles';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
[data-lexical-decorator='true'] {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../scss/styles';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.rich-text-lexical--show-gutter {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.slash-menu-popup {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.add-block-menu {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.draggable-block-menu {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
@layer payload-default {
|
||||
.LexicalEditorTheme {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../../scss/styles.scss';
|
||||
@import '~@payloadcms/ui/scss';
|
||||
|
||||
$lexical-contenteditable-top-padding: 8px;
|
||||
$lexical-contenteditable-bottom-padding: 8px;
|
||||
|
||||
@@ -1,205 +0,0 @@
|
||||
@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;
|
||||
|
||||
--theme-bg: var(--theme-elevation-0);
|
||||
--theme-input-bg: var(--theme-elevation-0);
|
||||
--theme-text: var(--theme-elevation-800);
|
||||
--theme-overlay: rgba(5, 5, 5, 0.5);
|
||||
--theme-baseline: #{$baseline-px};
|
||||
--theme-baseline-body-size: #{$baseline-body-size};
|
||||
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||
sans-serif;
|
||||
--font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
|
||||
--font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;
|
||||
|
||||
--style-radius-s: #{$style-radius-s};
|
||||
--style-radius-m: #{$style-radius-m};
|
||||
--style-radius-l: #{$style-radius-l};
|
||||
|
||||
--z-popup: 10;
|
||||
--z-nav: 20;
|
||||
--z-modal: 30;
|
||||
--z-status: 40;
|
||||
|
||||
--accessibility-outline: 2px solid var(--theme-text);
|
||||
--accessibility-outline-offset: 2px;
|
||||
|
||||
--gutter-h: #{base(3)};
|
||||
--spacing-view-bottom: var(--gutter-h);
|
||||
--doc-controls-height: calc(var(--base) * 2.8);
|
||||
--app-header-height: calc(var(--base) * 2.8);
|
||||
--nav-width: 275px;
|
||||
--nav-trans-time: 150ms;
|
||||
|
||||
@include mid-break {
|
||||
--gutter-h: #{base(2)};
|
||||
--app-header-height: calc(var(--base) * 2.4);
|
||||
--doc-controls-height: calc(var(--base) * 2.4);
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
--gutter-h: #{base(0.8)};
|
||||
--spacing-view-bottom: calc(var(--base) * 2);
|
||||
--nav-width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
// GLOBAL STYLES
|
||||
/////////////////////////////
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
@extend %body;
|
||||
background: var(--theme-bg);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
&[data-theme='dark'] {
|
||||
--theme-bg: var(--theme-elevation-0);
|
||||
--theme-text: var(--theme-elevation-1000);
|
||||
--theme-input-bg: var(--theme-elevation-50);
|
||||
--theme-overlay: rgba(5, 5, 5, 0.75);
|
||||
color-scheme: dark;
|
||||
|
||||
::selection {
|
||||
color: var(--color-base-1000);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
color: var(--color-base-1000);
|
||||
}
|
||||
}
|
||||
|
||||
@include mid-break {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
::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;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend %h1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend %h2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend %h3;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@extend %h4;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@extend %h5;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@extend %h6;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: $baseline;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: var(--accessibility-outline);
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
|
||||
&:focus {
|
||||
&:not(:focus-visible) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
dialog {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.payload__modal-item {
|
||||
min-height: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.payload__modal-container--enterDone {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.payload__modal-item--enter,
|
||||
.payload__modal-item--enterDone {
|
||||
z-index: var(--z-modal);
|
||||
}
|
||||
|
||||
// @import '~payload-user-css'; TODO: re-enable this
|
||||
}
|
||||
@@ -1,271 +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-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-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-success-50: var(--color-success-50);
|
||||
--theme-success-100: var(--color-success-100);
|
||||
--theme-success-150: var(--color-success-150);
|
||||
--theme-success-200: var(--color-success-200);
|
||||
--theme-success-250: var(--color-success-250);
|
||||
--theme-success-300: var(--color-success-300);
|
||||
--theme-success-350: var(--color-success-350);
|
||||
--theme-success-400: var(--color-success-400);
|
||||
--theme-success-450: var(--color-success-450);
|
||||
--theme-success-500: var(--color-success-500);
|
||||
--theme-success-550: var(--color-success-550);
|
||||
--theme-success-600: var(--color-success-600);
|
||||
--theme-success-650: var(--color-success-650);
|
||||
--theme-success-700: var(--color-success-700);
|
||||
--theme-success-750: var(--color-success-750);
|
||||
--theme-success-800: var(--color-success-800);
|
||||
--theme-success-850: var(--color-success-850);
|
||||
--theme-success-900: var(--color-success-900);
|
||||
--theme-success-950: var(--color-success-950);
|
||||
|
||||
--theme-warning-50: var(--color-warning-50);
|
||||
--theme-warning-100: var(--color-warning-100);
|
||||
--theme-warning-150: var(--color-warning-150);
|
||||
--theme-warning-200: var(--color-warning-200);
|
||||
--theme-warning-250: var(--color-warning-250);
|
||||
--theme-warning-300: var(--color-warning-300);
|
||||
--theme-warning-350: var(--color-warning-350);
|
||||
--theme-warning-400: var(--color-warning-400);
|
||||
--theme-warning-450: var(--color-warning-450);
|
||||
--theme-warning-500: var(--color-warning-500);
|
||||
--theme-warning-550: var(--color-warning-550);
|
||||
--theme-warning-600: var(--color-warning-600);
|
||||
--theme-warning-650: var(--color-warning-650);
|
||||
--theme-warning-700: var(--color-warning-700);
|
||||
--theme-warning-750: var(--color-warning-750);
|
||||
--theme-warning-800: var(--color-warning-800);
|
||||
--theme-warning-850: var(--color-warning-850);
|
||||
--theme-warning-900: var(--color-warning-900);
|
||||
--theme-warning-950: var(--color-warning-950);
|
||||
|
||||
--theme-error-50: var(--color-error-50);
|
||||
--theme-error-100: var(--color-error-100);
|
||||
--theme-error-150: var(--color-error-150);
|
||||
--theme-error-200: var(--color-error-200);
|
||||
--theme-error-250: var(--color-error-250);
|
||||
--theme-error-300: var(--color-error-300);
|
||||
--theme-error-350: var(--color-error-350);
|
||||
--theme-error-400: var(--color-error-400);
|
||||
--theme-error-450: var(--color-error-450);
|
||||
--theme-error-500: var(--color-error-500);
|
||||
--theme-error-550: var(--color-error-550);
|
||||
--theme-error-600: var(--color-error-600);
|
||||
--theme-error-650: var(--color-error-650);
|
||||
--theme-error-700: var(--color-error-700);
|
||||
--theme-error-750: var(--color-error-750);
|
||||
--theme-error-800: var(--color-error-800);
|
||||
--theme-error-850: var(--color-error-850);
|
||||
--theme-error-900: var(--color-error-900);
|
||||
--theme-error-950: var(--color-error-950);
|
||||
|
||||
--theme-elevation-0: var(--color-base-0);
|
||||
--theme-elevation-50: var(--color-base-50);
|
||||
--theme-elevation-100: var(--color-base-100);
|
||||
--theme-elevation-150: var(--color-base-150);
|
||||
--theme-elevation-200: var(--color-base-200);
|
||||
--theme-elevation-250: var(--color-base-250);
|
||||
--theme-elevation-300: var(--color-base-300);
|
||||
--theme-elevation-350: var(--color-base-350);
|
||||
--theme-elevation-400: var(--color-base-400);
|
||||
--theme-elevation-450: var(--color-base-450);
|
||||
--theme-elevation-500: var(--color-base-500);
|
||||
--theme-elevation-550: var(--color-base-550);
|
||||
--theme-elevation-600: var(--color-base-600);
|
||||
--theme-elevation-650: var(--color-base-650);
|
||||
--theme-elevation-700: var(--color-base-700);
|
||||
--theme-elevation-750: var(--color-base-750);
|
||||
--theme-elevation-800: var(--color-base-800);
|
||||
--theme-elevation-850: var(--color-base-850);
|
||||
--theme-elevation-900: var(--color-base-900);
|
||||
--theme-elevation-950: var(--color-base-950);
|
||||
--theme-elevation-1000: var(--color-base-1000);
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
--theme-border-color: var(--theme-elevation-150);
|
||||
|
||||
--theme-elevation-0: var(--color-base-900);
|
||||
--theme-elevation-50: var(--color-base-850);
|
||||
--theme-elevation-100: var(--color-base-800);
|
||||
--theme-elevation-150: var(--color-base-750);
|
||||
--theme-elevation-200: var(--color-base-700);
|
||||
--theme-elevation-250: var(--color-base-650);
|
||||
--theme-elevation-300: var(--color-base-600);
|
||||
--theme-elevation-350: var(--color-base-550);
|
||||
--theme-elevation-400: var(--color-base-450);
|
||||
--theme-elevation-450: var(--color-base-400);
|
||||
--theme-elevation-550: var(--color-base-350);
|
||||
--theme-elevation-600: var(--color-base-300);
|
||||
--theme-elevation-650: var(--color-base-250);
|
||||
--theme-elevation-700: var(--color-base-200);
|
||||
--theme-elevation-750: var(--color-base-150);
|
||||
--theme-elevation-800: var(--color-base-100);
|
||||
--theme-elevation-850: var(--color-base-50);
|
||||
--theme-elevation-900: var(--color-base-0);
|
||||
--theme-elevation-950: var(--color-base-0);
|
||||
--theme-elevation-1000: var(--color-base-0);
|
||||
|
||||
--theme-success-50: var(--color-success-950);
|
||||
--theme-success-100: var(--color-success-900);
|
||||
--theme-success-150: var(--color-success-850);
|
||||
--theme-success-200: var(--color-success-800);
|
||||
--theme-success-250: var(--color-success-750);
|
||||
--theme-success-300: var(--color-success-700);
|
||||
--theme-success-350: var(--color-success-650);
|
||||
--theme-success-400: var(--color-success-600);
|
||||
--theme-success-450: var(--color-success-550);
|
||||
--theme-success-550: var(--color-success-450);
|
||||
--theme-success-600: var(--color-success-400);
|
||||
--theme-success-650: var(--color-success-350);
|
||||
--theme-success-700: var(--color-success-300);
|
||||
--theme-success-750: var(--color-success-250);
|
||||
--theme-success-800: var(--color-success-200);
|
||||
--theme-success-850: var(--color-success-150);
|
||||
--theme-success-900: var(--color-success-100);
|
||||
--theme-success-950: var(--color-success-50);
|
||||
|
||||
--theme-warning-50: var(--color-warning-950);
|
||||
--theme-warning-100: var(--color-warning-900);
|
||||
--theme-warning-150: var(--color-warning-850);
|
||||
--theme-warning-200: var(--color-warning-800);
|
||||
--theme-warning-250: var(--color-warning-750);
|
||||
--theme-warning-300: var(--color-warning-700);
|
||||
--theme-warning-350: var(--color-warning-650);
|
||||
--theme-warning-400: var(--color-warning-600);
|
||||
--theme-warning-450: var(--color-warning-550);
|
||||
--theme-warning-550: var(--color-warning-450);
|
||||
--theme-warning-600: var(--color-warning-400);
|
||||
--theme-warning-650: var(--color-warning-350);
|
||||
--theme-warning-700: var(--color-warning-300);
|
||||
--theme-warning-750: var(--color-warning-250);
|
||||
--theme-warning-800: var(--color-warning-200);
|
||||
--theme-warning-850: var(--color-warning-150);
|
||||
--theme-warning-900: var(--color-warning-100);
|
||||
--theme-warning-950: var(--color-warning-50);
|
||||
|
||||
--theme-error-50: var(--color-error-950);
|
||||
--theme-error-100: var(--color-error-900);
|
||||
--theme-error-150: var(--color-error-850);
|
||||
--theme-error-200: var(--color-error-800);
|
||||
--theme-error-250: var(--color-error-750);
|
||||
--theme-error-300: var(--color-error-700);
|
||||
--theme-error-350: var(--color-error-650);
|
||||
--theme-error-400: var(--color-error-600);
|
||||
--theme-error-450: var(--color-error-550);
|
||||
--theme-error-550: var(--color-error-450);
|
||||
--theme-error-600: var(--color-error-400);
|
||||
--theme-error-650: var(--color-error-350);
|
||||
--theme-error-700: var(--color-error-300);
|
||||
--theme-error-750: var(--color-error-250);
|
||||
--theme-error-800: var(--color-error-200);
|
||||
--theme-error-850: var(--color-error-150);
|
||||
--theme-error-900: var(--color-error-100);
|
||||
--theme-error-950: var(--color-error-50);
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
/* Used as a placeholder for when the Payload app does not have custom CSS */
|
||||
@@ -1,27 +0,0 @@
|
||||
////////////////////////////
|
||||
// MEDIA QUERIES
|
||||
/////////////////////////////
|
||||
|
||||
@mixin extra-small-break {
|
||||
@media (max-width: $breakpoint-xs-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin small-break {
|
||||
@media (max-width: $breakpoint-s-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mid-break {
|
||||
@media (max-width: $breakpoint-m-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin large-break {
|
||||
@media (max-width: $breakpoint-l-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
@layer payload-default {
|
||||
%btn-reset {
|
||||
border: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btn-reset {
|
||||
border: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
color: currentColor;
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
@import 'vars';
|
||||
@import 'z-index';
|
||||
|
||||
//////////////////////////////
|
||||
// IMPORT OVERRIDES
|
||||
//////////////////////////////
|
||||
|
||||
@import 'type';
|
||||
@import 'queries';
|
||||
@import 'resets';
|
||||
@import 'svg';
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user