diff --git a/.claude/skills/ui4-review/SKILL.md b/.claude/skills/ui4-review/SKILL.md new file mode 100644 index 00000000000..62819816cfc --- /dev/null +++ b/.claude/skills/ui4-review/SKILL.md @@ -0,0 +1,231 @@ +--- +name: ui4-review +description: Review UI4 CSS migrations for proper token usage. Checks that CSS variables are used instead of hardcoded values. +--- + +# UI4 Review + +Reviews CSS changes and **auto-fixes** token violations. + +--- + +## Process + +### Step 1: Get Changed CSS Files + +```bash +git status --porcelain | grep '\.css$' +``` + +### Step 2: Review & Auto-Fix Each File + +For each changed CSS file: + +1. Read the file +2. Identify violations +3. **Apply fixes immediately** using replace_string_in_file +4. Report what was fixed + +--- + +## Violations to Flag + +### Spacing (CRITICAL) + +**Bad:** + +```css +padding: 8px; +padding: 0.5rem; +gap: 16px; +margin: 1rem; +``` + +**Good:** + +```css +padding: var(--spacer-2); +gap: var(--spacer-3); +margin: var(--spacer-3); +``` + +**Token reference:** +| Value | Token | +|-------|-------| +| 0 | `--spacer-0` | +| 4px / 0.25rem | `--spacer-1` | +| 8px / 0.5rem | `--spacer-2` | +| 12px / 0.75rem | `--spacer-2-5` | +| 16px / 1rem | `--spacer-3` | +| 24px / 1.5rem | `--spacer-4` | +| 32px / 2rem | `--spacer-5` | +| 40px / 2.5rem | `--spacer-6` | + +**Exceptions:** + +- `1px` borders are OK +- `0` is OK (no token needed) +- Percentage values are OK +- `100%`, `auto`, `inherit` are OK + +--- + +### Colors (CRITICAL) + +**Bad:** + +```css +background: #f5f5f5; +color: rgba(0, 0, 0, 0.9); +border-color: #e6e6e6; +``` + +**Good:** + +```css +background: var(--bg-default-secondary); +color: var(--text-default-default); +border-color: var(--border-default-default); +``` + +**Token prefixes:** + +- Background: `--bg-*` +- Text: `--text-*` +- Border: `--border-*` +- Icon: `--icon-*` + +**Prefer canonical shorthands** (defined in colors.css under "Canonical Shorthands"): + +| Full Token | Preferred Shorthand | +| --------------------------- | ------------------- | +| `--icon-default-default` | `--icon-default` | +| `--icon-default-secondary` | `--icon-secondary` | +| `--icon-default-tertiary` | `--icon-tertiary` | +| `--text-default-default` | `--text-default` | +| `--text-default-secondary` | `--text-secondary` | +| `--text-default-tertiary` | `--text-tertiary` | +| `--bg-default-default` | `--bg-default` | +| `--bg-default-secondary` | `--bg-secondary` | +| `--bg-default-hover` | `--bg-hover` | +| `--bg-selected-default` | `--bg-selected` | +| `--border-default-default` | `--border-default` | +| `--border-default-strong` | `--border-strong` | +| `--border-selected-default` | `--border-selected` | + +**Always use the shorthand when available.** Check colors.css for the full list. + +--- + +### Border Radius (CRITICAL) + +**Bad:** + +```css +border-radius: 4px; +border-radius: 5px; +border-radius: 0.3125rem; +``` + +**Good:** + +```css +border-radius: var(--radius-medium); +border-radius: var(--radius-small); +border-radius: var(--radius-full); +``` + +**Token reference:** +| Value | Token | +|-------|-------| +| 0 | `--radius-none` | +| 2px / 0.125rem | `--radius-small` | +| 5px / 0.3125rem | `--radius-medium` | +| 13px / 0.8125rem | `--radius-large` | +| 9999px | `--radius-full` | + +--- + +### Typography (MODERATE) + +**Bad:** + +```css +font-size: 11px; +line-height: 16px; +font-weight: 550; +``` + +**Good:** + +```css +font-size: var(--text-body-medium-font-size); +line-height: var(--text-body-medium-line-height); +font-weight: var(--text-body-medium-font-weight); +``` + +--- + +### Old Theme Variables (CRITICAL) + +Flag any usage of legacy variables: + +**Bad:** + +```css +var(--theme-elevation-0) +var(--theme-elevation-50) +var(--theme-elevation-100) +var(--theme-error-100) +var(--theme-text) +var(--style-radius-m) +``` + +These must be replaced with new tokens. + +--- + +## Behavior: AUTO-FIX + +**Do NOT just report violations. FIX THEM.** + +For each violation: + +1. Identify the exact line and value +2. Determine the correct token replacement +3. Use `replace_string_in_file` to fix it immediately +4. Report what was fixed + +**Only flag (don't fix) when:** + +- No matching token exists (e.g., 18px badge size) +- Value is intentional (e.g., `1px` border, `0`) +- Ambiguous replacement + +--- + +## Output Format + +After auto-fixing, report: + +``` +## Auto-Fixed + +✅ Collapsible/index.css:9 — `height: 2rem` → `height: var(--spacer-5)` +✅ Collapsible/index.css:120 — `width: 2rem` → `width: var(--spacer-5)` + +## Flagged (Manual Review) + +⚠️ ErrorPill/index.css:15 — `height: 1.125rem` (18px) — no matching token +``` + +--- + +## Summary + +After all fixes, provide a simple summary: + +| File | Fixed | Flagged | +| --------------------- | ----- | ------- | +| Collapsible/index.css | 2 | 1 | +| ErrorPill/index.css | 0 | 2 | diff --git a/.claude/skills/ui4/SKILL.md b/.claude/skills/ui4/SKILL.md new file mode 100644 index 00000000000..15cf9353f2e --- /dev/null +++ b/.claude/skills/ui4/SKILL.md @@ -0,0 +1,448 @@ +--- +name: ui4 +description: Manually invoked skill for reskinning Payload UI components. Requires Figma URL. Usage: /ui4 +--- + +# Payload UI Reskin (ui4) + +**Figma URL is REQUIRED.** If not provided, ask before proceeding. + +--- + +## Process + +### Step 0: Icon Scan + +**Goal:** Identify icon dependencies before starting work. + +1. **Scan component files** for icon imports: + + ``` + grep -E "from.*icons|import.*Icon" packages/ui/src/elements/ComponentName/ + ``` + +2. **List existing icons** in `packages/ui/src/icons/`: + + - Each icon has its own folder with `index.tsx` + `index.css` + +3. **Compare Figma design** to available icons: + + - Does the design use icons not currently in the component? + - Does the design use icons that don't exist yet? + +4. **Document findings:** + - **Existing & used:** No action needed + - **Existing but not imported:** Will need to add import + - **Missing from codebase:** Flag for user — need to source/create icon + +**Figma Icons Source:** + +When updating or creating icons, reference the Figma icon library at: + +``` +/Users/$(whoami)/figma/figma/fpl/components/src/icons +``` + +Icon naming convention: `icon-{size}-{name}.tsx` (e.g., `icon-16-close.tsx`, `icon-24-chevron-down.tsx`) + +To find the correct icon: + +1. Note the icon name from Figma design (e.g., "close", "chevron-down") +2. Check both 16px and 24px variants if they exist +3. Read the corresponding files and extract the SVG paths for each size + +**Icon implementation rules:** + +1. **Props:** Icon components MUST accept these props (keep existing props when updating): + + ```typescript + type IconProps = { + readonly className?: string + readonly size?: 16 | 24 // Add more sizes as needed + // ... keep any existing component-specific props + } + ``` + +2. **Multi-size support:** Store path data keyed by size: + + ```typescript + const paths = { + 16: 'M4.854 4.146...', // from icon-16-{name}.tsx + 24: 'M6.854 6.146...', // from icon-24-{name}.tsx + } + ``` + +3. **SVG rendering:** Use the size prop to select path and viewBox: + + ```tsx + + + + ``` + +4. **Payload conventions:** + + - Use `fill="currentColor"` instead of `fill="var(--color-icon)"` + - Use `fillRule` and `clipRule` (React camelCase) instead of kebab-case + - Default size should match most common usage (typically 24) + +5. **Reference implementation:** See `packages/ui/src/icons/Chevron/index.tsx` for the pattern. + +**If icons are missing from Figma source:** Ask user how to proceed before continuing. + +--- + +### Step 1: SCSS → CSS Migration + +**Goal:** Syntax conversion only. Component must look IDENTICAL after. + +1. Read component files: `packages/ui/src/elements/ComponentName/` or `packages/ui/src/fields/ComponentName/` +2. Create `index.css` with converted styles: + - `$var` → `var(--token)` + - Keep CSS nesting with `&` (preferred) + - Remove `@use`/`@import` (tokens are global) + - Inline any mixins +3. Update import: `import './index.scss'` → `import './index.css'` +4. Delete `index.scss` +5. Wrap in `@layer payload-default {}` + +### Step 2: Analyze Figma Component Variants + +**Goal:** Understand ALL visual states before implementing CSS. + +1. **Get metadata first** to discover variants: + + ``` + mcp_figma2_get_metadata(fileKey, nodeId) + ``` + +2. **Parse variant properties** from symbol names. Common patterns: + + - `State=Default, Validation=None, Selected=false, Read Only=false` + - Properties often include: State, Validation, Selected, Disabled, Read Only, Size + +3. **Build a variant matrix:** + + | State | Validation | Selected | Read Only | CSS Mapping | + | ------- | ---------- | -------- | --------- | -------------------------- | + | Default | None | false | false | base styles | + | Hover | None | false | false | `:hover` | + | Focus | None | false | false | `:focus-visible` | + | Default | Invalid | false | false | `.error` or `&--error` | + | Default | None | true | false | `.is-selected` | + | Default | None | false | true | `.read-only`, `[disabled]` | + +4. **Fetch design context for key variants** (in parallel): + + - Default unselected + - Selected + - Hover + - Focus + - Invalid/Error + - Disabled/Read-only + + ``` + mcp_figma2_get_design_context(fileKey, variantNodeId) + ``` + +5. **Compare visual differences** between variants: + - Border color changes? + - Background color changes? + - Inner element visibility/opacity? + - Focus ring/outline? + - Text color changes? + +**If access fails:** STOP. Ask user to share file. + +### Step 3: Restyle to Match Figma + +1. **Read token files** (do this BEFORE writing CSS): + + - `packages/ui/src/css/spacing.css` — spacer tokens + - `packages/ui/src/css/colors.css` — color tokens + - `packages/ui/src/css/typography.css` — text tokens + - `packages/ui/src/css/radius.css` — border-radius tokens + +2. **Update styles** using tokens from files: + + - Colors: `--bg-*`, `--text-*`, `--icon-*`, `--border-*` + - Spacing: `--spacer-*` (ALWAYS check file for matching value) + - Typography: `--text-body-*`, `--text-heading-*` + - Radius: `--radius-none/small/medium/large/full` + +3. **Use canonical shorthands** — see the shorthand table in `.claude/skills/ui4-review/SKILL.md`. + +4. **Color rules — NEVER GUESS:** + + - **Always extract exact token from Figma design context** — the `get_design_context` response includes CSS with token names + - **Don't assume hierarchy** — e.g., don't assume "less prominent = tertiary". Check the design. + - **When creating new elements** (icons, buttons, etc.), fetch the specific Figma node to get correct colors + - If Figma shows a raw hex value, map it to the closest token and note this for user review + +5. **Spacing rules:** + - First choice: use `--spacer-*` token + - If no match: use rem and tell user + - NEVER use px (except 1px borders) + +### Step 4: Ensure Test Collection Has All Variants + +**Goal:** Before visual verification, ensure the test collection has field variants for all states. + +1. **Read the test collection config:** + + ``` + test/v4/collections/{ComponentName}/index.ts + ``` + +2. **Check for required variants** based on Figma variant matrix from Step 2: + + | Figma Variant | Required Field Config | + | ---------------- | ----------------------------------------------------------------------------------------- | + | Default | `{ name: 'default', type: 'component' }` | + | Required | `{ name: 'required', type: 'component', required: true }` | + | Disabled | `{ name: 'disabled', type: 'component', admin: { disabled: true }, defaultValue: '...' }` | + | Read Only | `{ name: 'readOnly', type: 'component', admin: { readOnly: true }, defaultValue: '...' }` | + | With Description | `{ name: 'withDescription', type: 'component', admin: { description: 'Help text' } }` | + +3. **Add missing variants** if any are missing. Include `defaultValue` for disabled/readOnly so there's visible content to test. + +4. **Restart dev server** if collection was modified: `pnpm run dev v4` + +--- + +### Step 5: Verify with Playwright (LOOP) + +**Dev Server:** Use `pnpm run dev v4` when working on field components. The `test/v4` suite has dedicated collections for each field type with various states (default, required, disabled). + +**URL Pattern:** + +- Fields: `http://localhost:3000/admin/collections/{field-type}-fields/create` +- Elements: Use the appropriate page that displays the element + +**Handling Modal Dialogs (beforeunload):** + +When the browser has unsaved changes, a "beforeunload" dialog may block ALL Playwright operations. You'll see this error pattern: + +``` +### Error +Error: Tool "browser_snapshot" does not handle the modal state. +### Modal state +- ["beforeunload" dialog with message ""]: can be handled by browser_handle_dialog +``` + +**BEFORE retrying any operation**, you MUST dismiss the dialog: + +1. Call `browser_handle_dialog({ accept: true })` to dismiss +2. Then retry your intended operation (navigate, snapshot, screenshot, etc.) + +If the dialog persists after handling, call `browser_close()` to close the tab, then `browser_navigate` to reopen the page fresh. + +**Verification Steps:** + +1. Navigate: `browser_navigate` to component page +2. Screenshot: `browser_take_screenshot({ fullPage: true })` +3. Compare to Figma design +4. Check: + - [ ] Padding correct? + - [ ] Margin correct? + - [ ] Gap correct? + - [ ] Flex alignment correct? + - [ ] Colors match? +5. **Verify ALL variant states:** + - [ ] Default state matches Figma default variant? + - [ ] Hover state matches Figma hover variant? (use `browser_hover`) + - [ ] Focus state matches Figma focus variant? (tab to element) + - [ ] Error state matches Figma invalid variant? (trigger validation) + - [ ] Disabled/read-only matches Figma disabled variant? + - [ ] Selected state matches Figma selected variant? (if applicable) +6. **If wrong:** fix CSS → goto step 1 +7. **If correct:** continue + +### Step 6: User Confirmation + +Share screenshot and dev server URL. User validates or requests changes. + +--- + +## CSS Structure + +Always use `@layer` and CSS nesting: + +```css +@layer payload-default { + .component { + display: flex; + gap: var(--spacer-2); + padding: var(--spacer-2) var(--spacer-3); + background: var(--bg-default-secondary); + border: 1px solid var(--border-default-default); + border-radius: var(--radius-medium); + + &__header { + display: flex; + gap: var(--spacer-1); + } + + &--error { + border-color: var(--border-danger-strong); + } + + &:hover { + background: var(--bg-default-secondary-hover); + } + } +} +``` + +--- + +## Red Flags - STOP + +| Thought | Reality | +| ------------------------------ | ---------------------------------------- | +| "I'll use flat selectors" | Use CSS nesting with `&` | +| "I'll use 8px here" | Read spacing.css, use token | +| "No matching spacer" | Did you actually check spacing.css? | +| "I'll guess the colors" | Read colors.css, use exact token | +| "Close enough" | Screenshot and compare to Figma | +| "Skip verification" | Always run Playwright loop | +| "Just need the default state" | Get metadata first, analyze ALL variants | +| "I'll figure out states later" | Build variant matrix BEFORE writing CSS | + +--- + +## Step 7: Write Variant E2E Tests + +**Goal:** Create e2e tests that verify all visual variants from the Figma design. + +1. **Create test file** in `test/v4/collections/{ComponentName}/e2e.spec.ts` + +2. **Test structure:** + + ```typescript + import type { Page } from '@playwright/test' + import { expect, test } from '@playwright/test' + import path from 'path' + import { fileURLToPath } from 'url' + + import { + ensureCompilationIsDone, + initPageConsoleErrorCatch, + } from '../../../__helpers/e2e/helpers.js' + import { AdminUrlUtil } from '../../../__helpers/shared/adminUrlUtil.js' + import { initPayloadE2ENoConfig } from '../../../__helpers/shared/initPayloadE2ENoConfig.js' + import { TEST_TIMEOUT_LONG } from '../../../playwright.config.js' + import { componentFieldsSlug } from '../../slugs.js' + + const filename = fileURLToPath(import.meta.url) + const currentFolder = path.dirname(filename) + const dirname = path.resolve(currentFolder, '../../') + + const { beforeAll, describe } = test + + let page: Page + let serverURL: string + let url: AdminUrlUtil + + describe('ComponentName Field Variants', () => { + beforeAll(async ({ browser }, testInfo) => { + testInfo.setTimeout(TEST_TIMEOUT_LONG) + ;({ serverURL } = await initPayloadE2ENoConfig({ dirname })) + url = new AdminUrlUtil(serverURL, componentFieldsSlug) + const context = await browser.newContext() + page = await context.newPage() + initPageConsoleErrorCatch(page) + await ensureCompilationIsDone({ page, serverURL }) + }) + + // Test each variant from the Figma design + }) + ``` + +3. **Write tests for each Figma variant:** + + Map the variant matrix from Step 2 to test cases: + + ```typescript + test('default state renders correctly', async () => { + await page.goto(url.create) + const field = page.locator('#field-componentName') + await expect(field).toBeVisible() + // Verify visual properties match Figma default variant + }) + + test('hover state shows correct styling', async () => { + await page.goto(url.create) + const field = page.locator('#field-componentName') + await field.hover() + // Verify hover styles match Figma hover variant + }) + + test('focus state shows correct styling', async () => { + await page.goto(url.create) + const field = page.locator('#field-componentName') + await field.focus() + // Verify focus ring/outline matches Figma focus variant + }) + + test('error state renders correctly', async () => { + await page.goto(url.create) + // Trigger validation by submitting without required field + await page.locator('button#action-save').click() + const field = page.locator('#field-requiredComponent') + // Verify error styling matches Figma invalid variant + }) + + test('disabled state renders correctly', async () => { + await page.goto(url.create) + const field = page.locator('#field-disabledComponent') + await expect(field).toBeDisabled() + // Verify disabled styling matches Figma disabled variant + }) + + test('read-only state renders correctly', async () => { + await page.goto(url.create) + const field = page.locator('#field-readOnlyComponent') + await expect(field).toHaveAttribute('readonly') + // Verify read-only styling matches Figma read-only variant + }) + ``` + +4. **Collection variants already configured:** (See Step 4) + + The test collection should already have all required variants from Step 4. + +5. **Run tests to verify:** + + ```bash + pnpm run test:e2e --grep "ComponentName Field Variants" + ``` + +--- + +## Step 8: Run ui4-review + +**After user confirms the component looks correct, invoke the `ui4-review` skill.** + +This will: + +1. Scan all changed CSS files +2. Auto-fix any remaining hardcoded values +3. Report what was fixed/flagged + +--- + +## Reference + +- Example migrated component: `packages/ui/src/elements/Button/index.css` +- Token files: `packages/ui/src/css/*.css` +- **v4 test suite:** `test/v4/` — dedicated collections per field type + - Each collection should have: default, required, disabled, readOnly field variants + - Disabled/readOnly fields need `defaultValue` for visible content + - Run with: `pnpm run dev v4` + - URL: `http://localhost:3000/admin/collections/{slug}/create` + - Available: `text-fields`, `textarea-fields`, `email-fields`, `number-fields`, `password-fields`, `checkbox-fields`, `select-fields`, `relationship-fields`, `upload-fields`, `slug-fields`, `code-fields`, `json-fields`, `collapsible-fields`, `group-fields`, `tabs-fields`, `point-fields`, `radio-fields`, `row-fields`, `array-fields`, `blocks-fields`, `date-fields` +- **E2E test examples:** See `test/fields/collections/*/e2e.spec.ts` for patterns + - Test helper imports from `test/__helpers/e2e/helpers.js` + - Use `AdminUrlUtil` for URL construction + - Use `initPayloadE2ENoConfig` for test setup diff --git a/packages/next/src/layouts/Root/index.tsx b/packages/next/src/layouts/Root/index.tsx index f96fb8fad02..a3bdf92a6ee 100644 --- a/packages/next/src/layouts/Root/index.tsx +++ b/packages/next/src/layouts/Root/index.tsx @@ -4,6 +4,7 @@ import type { ImportMap, LanguageOptions, SanitizedConfig, ServerFunctionClient import { rtlLanguages } from '@payloadcms/translations' import { ProgressBar, RootProvider } from '@payloadcms/ui' import { getClientConfig } from '@payloadcms/ui/utilities/getClientConfig' +import { Inter, Roboto_Mono } from 'next/font/google' import { cookies as nextCookies } from 'next/headers.js' import { applyLocaleFiltering } from 'payload/shared' import React, { Suspense } from 'react' @@ -16,6 +17,16 @@ import { NestProviders } from './NestProviders.js' import '@payloadcms/ui/scss/app.scss' +const inter = Inter({ + subsets: ['latin'], + variable: '--font-family-sans', +}) + +const robotoMono = Roboto_Mono({ + subsets: ['latin'], + variable: '--font-family-mono', +}) + export const metadata = { description: 'Generated by Next.js', title: 'Next.js', @@ -121,11 +132,14 @@ const RootLayoutContent = async ({ return ( diff --git a/packages/next/src/views/Dashboard/Default/ModularDashboard/DashboardStepNav.tsx b/packages/next/src/views/Dashboard/Default/ModularDashboard/DashboardStepNav.tsx index fcc76a3732f..972d46ecc33 100644 --- a/packages/next/src/views/Dashboard/Default/ModularDashboard/DashboardStepNav.tsx +++ b/packages/next/src/views/Dashboard/Default/ModularDashboard/DashboardStepNav.tsx @@ -84,14 +84,14 @@ export function DashboardBreadcrumbDropdown(props: { {t('dashboard:editingDashboard')}
- - -
diff --git a/packages/next/src/views/Dashboard/Default/ModularDashboard/index.client.tsx b/packages/next/src/views/Dashboard/Default/ModularDashboard/index.client.tsx index e8caf30abad..121e40793a5 100644 --- a/packages/next/src/views/Dashboard/Default/ModularDashboard/index.client.tsx +++ b/packages/next/src/views/Dashboard/Default/ModularDashboard/index.client.tsx @@ -369,7 +369,7 @@ function DroppableItem({ id, position }: { id: string; position: 'after' | 'befo bottom: 0, borderRadius: '1000px', width: '4px', - backgroundColor: isOver ? 'var(--theme-success-400)' : 'transparent', + backgroundColor: isOver ? 'var(--bg-success-default)' : 'transparent', marginBottom: '10px', marginTop: '10px', pointerEvents: 'none', 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 825252028cf..932e6199243 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss +++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss @@ -31,7 +31,6 @@ } .relationship-diff { - @extend %body; display: flex; align-items: center; border-radius: $style-radius-s; diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Upload/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Upload/index.scss index 2cda867e15b..03e5c1f9352 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Upload/index.scss +++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Upload/index.scss @@ -13,7 +13,6 @@ } .upload-diff { - @extend %body; min-width: 100%; max-width: fit-content; display: flex; diff --git a/packages/next/src/views/Version/Restore/index.scss b/packages/next/src/views/Version/Restore/index.scss index d05079cbfd5..f2b2ce708fe 100644 --- a/packages/next/src/views/Version/Restore/index.scss +++ b/packages/next/src/views/Version/Restore/index.scss @@ -48,7 +48,6 @@ height: 100%; &__toggle { - @extend %btn-reset; } } diff --git a/packages/next/src/views/Version/Restore/index.tsx b/packages/next/src/views/Version/Restore/index.tsx index 547b341a2de..6c36df823eb 100644 --- a/packages/next/src/views/Version/Restore/index.tsx +++ b/packages/next/src/views/Version/Restore/index.tsx @@ -126,7 +126,7 @@ export const Restore: React.FC = ({ .filter(Boolean) .join(' ')} onClick={() => toggleModal(modalSlug)} - size="xsmall" + size="medium" SubMenuPopupContent={ canRestoreAsDraft ? () => ( diff --git a/packages/payload/src/fields/validations.ts b/packages/payload/src/fields/validations.ts index 76217e299ee..c4a798d5407 100644 --- a/packages/payload/src/fields/validations.ts +++ b/packages/payload/src/fields/validations.ts @@ -298,7 +298,7 @@ export const textarea: TextareaFieldValidation = ( export type CodeFieldValidation = Validate export const code: CodeFieldValidation = (value, { req: { t }, required }) => { - if (required && value === undefined) { + if (required && (!value || (typeof value === 'string' && value.length === 0))) { return t('validation:required') } 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 d9cce7b32b7..365a327222d 100644 --- a/packages/richtext-lexical/src/features/blocks/client/component/index.scss +++ b/packages/richtext-lexical/src/features/blocks/client/component/index.scss @@ -2,7 +2,6 @@ @layer payload-default { .LexicalEditorTheme__block { - @extend %body; margin-block: base(0.4); // 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; @@ -68,7 +67,6 @@ } &__header-action { - @extend %btn-reset; cursor: pointer; margin-left: calc(var(--base) * 0.5); diff --git a/packages/richtext-lexical/src/features/blocks/client/component/index.tsx b/packages/richtext-lexical/src/features/blocks/client/component/index.tsx index 8a9fbb1ad2b..e5466dd221b 100644 --- a/packages/richtext-lexical/src/features/blocks/client/component/index.tsx +++ b/packages/richtext-lexical/src/features/blocks/client/component/index.tsx @@ -490,7 +490,7 @@ export const BlockComponent: React.FC = (props) => { e.preventDefault() }} round - size="small" + size="medium" tooltip={t('lexical:blocks:inlineBlocks:edit', { label: blockDisplayName })} /> ), 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 a8315e4531e..f3b7afd9c05 100644 --- a/packages/richtext-lexical/src/features/blocks/client/componentInline/index.scss +++ b/packages/richtext-lexical/src/features/blocks/client/componentInline/index.scss @@ -15,7 +15,6 @@ } &__container { - @extend %body; @include shadow-sm; margin-right: base(0.2); margin-left: base(0.2); diff --git a/packages/richtext-lexical/src/features/blocks/client/componentInline/index.tsx b/packages/richtext-lexical/src/features/blocks/client/componentInline/index.tsx index 4b3ed350ea0..718233011be 100644 --- a/packages/richtext-lexical/src/features/blocks/client/componentInline/index.tsx +++ b/packages/richtext-lexical/src/features/blocks/client/componentInline/index.tsx @@ -414,7 +414,7 @@ export const InlineBlockComponent: React.FC ), @@ -433,7 +433,7 @@ export const InlineBlockComponent: React.FC ), 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 f509e12e5bc..5452c1e0f15 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 @@ -29,7 +29,7 @@ width: 100%; min-width: 0; box-sizing: border-box; - @extend %body; + border: 0; outline: 0; position: relative; 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 705b6a7b076..c2288e7fdd8 100644 --- a/packages/richtext-lexical/src/features/relationship/client/components/index.scss +++ b/packages/richtext-lexical/src/features/relationship/client/components/index.scss @@ -2,7 +2,6 @@ @layer payload-default { .LexicalEditorTheme__relationship { - @extend %body; @include shadow-sm; padding: calc(var(--base) * 0.75); background: var(--theme-input-bg); 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 ee59be66336..85e11f42c0a 100644 --- a/packages/richtext-lexical/src/features/upload/client/component/index.scss +++ b/packages/richtext-lexical/src/features/upload/client/component/index.scss @@ -2,7 +2,6 @@ @layer payload-default { .LexicalEditorTheme__upload { - @extend %body; @include shadow-sm; border-radius: $style-radius-m; diff --git a/packages/richtext-lexical/src/field/Diff/converters/relationship/index.scss b/packages/richtext-lexical/src/field/Diff/converters/relationship/index.scss index 69fdf00c163..4e3834ac68d 100644 --- a/packages/richtext-lexical/src/field/Diff/converters/relationship/index.scss +++ b/packages/richtext-lexical/src/field/Diff/converters/relationship/index.scss @@ -2,7 +2,6 @@ @layer payload-default { .lexical-diff .lexical-relationship-diff { - @extend %body; @include shadow-sm; min-width: calc(var(--base) * 8); max-width: fit-content; diff --git a/packages/richtext-lexical/src/field/Diff/converters/unknown/index.scss b/packages/richtext-lexical/src/field/Diff/converters/unknown/index.scss index 8875820e4e2..330002c6798 100644 --- a/packages/richtext-lexical/src/field/Diff/converters/unknown/index.scss +++ b/packages/richtext-lexical/src/field/Diff/converters/unknown/index.scss @@ -2,7 +2,6 @@ @layer payload-default { .lexical-diff .lexical-unknown-diff { - @extend %body; @include shadow-sm; max-width: fit-content; display: flex; diff --git a/packages/richtext-lexical/src/field/Diff/converters/upload/index.scss b/packages/richtext-lexical/src/field/Diff/converters/upload/index.scss index 9c86c3eaa5b..e256c622392 100644 --- a/packages/richtext-lexical/src/field/Diff/converters/upload/index.scss +++ b/packages/richtext-lexical/src/field/Diff/converters/upload/index.scss @@ -3,7 +3,6 @@ @layer payload-default { .lexical-diff { .lexical-upload-diff { - @extend %body; @include shadow-sm; min-width: calc(var(--base) * 10); max-width: fit-content; diff --git a/packages/ui/bundle.js b/packages/ui/bundle.js index b817ad9c095..31686c18f6a 100644 --- a/packages/ui/bundle.js +++ b/packages/ui/bundle.js @@ -17,7 +17,7 @@ const removeCSSImports = { build.onLoad({ filter: /.*/ }, async (args) => { if (args.path.includes('node_modules') || !args.path.includes(dirname)) return const contents = await fs.promises.readFile(args.path, 'utf8') - const withRemovedImports = contents.replace(/import\s+.*\.scss';?[\r\n\s]*/g, '') + const withRemovedImports = contents.replace(/import\s+.*\.(scss|css)';?[\r\n\s]*/g, '') return { contents: withRemovedImports, loader: 'default' } }) }, diff --git a/packages/ui/src/css/colors.css b/packages/ui/src/css/colors.css new file mode 100644 index 00000000000..3ebe45a0800 --- /dev/null +++ b/packages/ui/src/css/colors.css @@ -0,0 +1,392 @@ +@layer payload-default { + /* —————————————————————————————————————————————— + Non-themed Tokens + ————————————————————————————————————————————— */ + + :root { + /* Special */ + --special-bg-hover-on-light-canvas: var(--color-black-300); + --special-text-highlight: rgba(13, 153, 255, 0.40); + + --special-multiplayer-blue: var(--color-blue-600); + --special-multiplayer-purple: var(--color-purple-500); + --special-multiplayer-pink: var(--color-pink-500); + --special-multiplayer-red: var(--color-red-500); + --special-multiplayer-yellow: var(--color-yellow-500); + --special-multiplayer-green: var(--color-green-500); + --special-multiplayer-grey: var(--color-pale-blue-500); + + --special-text-on-multiplayer-blue: var(--color-white-1000); + --special-text-on-multiplayer-purple: var(--color-white-1000); + --special-text-on-multiplayer-pink: var(--color-white-1000); + --special-text-on-multiplayer-red: var(--color-white-1000); + --special-text-on-multiplayer-yellow: var(--color-black-800); + --special-text-on-multiplayer-green: var(--color-white-1000); + --special-text-on-multiplayer-grey: var(--color-white-1000); + + /* Fullscreen */ + --fullscreen-default-icon: var(--color-black-800); + --fullscreen-default-icon-tertiary: var(--color-black-400); + --fullscreen-special-autofill-highlight: rgba(13, 153, 255, 0.20); + } + + /* —————————————————————————————————————————————— + Light Theme (default) + ————————————————————————————————————————————— */ + + :root { + /* Background */ + --bg-brand-default: var(--color-blue-500); + --bg-brand-hover: var(--color-blue-600); + --bg-brand-pressed: var(--color-blue-700); + --bg-brand-secondary: var(--color-blue-700); + --bg-brand-tertiary: var(--color-blue-200); + --bg-brand-tertiary-hover: var(--color-blue-300); + + --bg-component-default: var(--color-purple-500); + --bg-component-tertiary: var(--color-purple-200); + --bg-component-tertiary-hover: var(--color-purple-300); + + --bg-danger-default: var(--color-red-500); + --bg-danger-hover: var(--color-red-600); + --bg-danger-pressed: var(--color-red-700); + --bg-danger-tertiary: var(--color-red-200); + --bg-danger-tertiary-hover: var(--color-red-300); + --bg-danger-tertiary-pressed: var(--color-red-400); + + --bg-default-default: var(--color-white-1000); + --bg-default-hover: var(--color-grey-100); + --bg-default-pressed: var(--color-grey-200); + --bg-default-secondary: var(--color-grey-100); + --bg-default-secondary-hover: var(--color-grey-200); + --bg-default-secondary-pressed: var(--color-grey-300); + --bg-default-tertiary: var(--color-grey-200); + + --bg-disabled-default: var(--color-grey-300); + + --bg-elevated-default: var(--color-white-1000); + + --bg-figjam-default: var(--color-purple-500); + --bg-figjam-pressed: var(--color-purple-600); + + --bg-inverse-default: var(--color-grey-800); + --bg-inverse-hover: var(--color-grey-700); + --bg-inverse-pressed: var(--color-grey-600); + + --bg-menu-default: var(--color-grey-900); + --bg-tooltip-default: var(--color-grey-900); + + --bg-selected-default: var(--color-blue-200); + --bg-selected-hover: var(--color-blue-300); + --bg-selected-pressed: var(--color-blue-400); + --bg-selected-strong: var(--color-blue-500); + --bg-selected-strong-hover: var(--color-blue-600); + --bg-selected-strong-pressed: var(--color-blue-700); + + --bg-success-default: var(--color-green-500); + --bg-success-hover: var(--color-green-600); + --bg-success-pressed: var(--color-green-700); + --bg-success-tertiary: var(--color-green-200); + --bg-success-tertiary-hover: var(--color-green-300); + + --bg-transparent-hover: var(--color-black-100); + --bg-transparent-pressed: var(--color-black-200); + + --bg-warning-default: var(--color-yellow-500); + --bg-warning-tertiary: var(--color-yellow-200); + --bg-warning-tertiary-hover: var(--color-yellow-300); + + /* Border */ + --border-brand-default: var(--color-blue-300); + --border-brand-strong: var(--color-blue-600); + --border-brand-onbrand-strong: var(--color-white-1000); + + --border-component-default: var(--color-purple-300); + --border-component-strong: var(--color-purple-600); + + --border-danger-default: var(--color-red-300); + --border-danger-strong: var(--color-red-600); + + --border-default-default: var(--color-grey-200); + --border-default-strong: var(--color-grey-800); + + --border-disabled-default: var(--color-grey-200); + + --border-selected-default: var(--color-blue-500); + --border-selected-strong: var(--color-blue-600); + + --border-success-default: var(--color-green-300); + --border-success-strong: var(--color-green-600); + + --border-warning-default: var(--color-pale-yellow-300); + --border-warning-strong: var(--color-yellow-1000); + + /* Icon */ + --icon-brand-default: var(--color-blue-600); + --icon-brand-onbrand: var(--color-white-1000); + --icon-brand-onbrand-secondary: var(--color-white-600); + + --icon-component-default: var(--color-purple-600); + --icon-component-pressed: var(--color-purple-700); + --icon-component-secondary: var(--color-pale-purple-400); + --icon-component-tertiary: var(--color-pale-purple-400); + --icon-component-oncomponent: var(--color-white-1000); + + --icon-danger-default: var(--color-red-600); + --icon-danger-ondanger: var(--color-white-1000); + --icon-danger-ondanger-secondary: var(--color-white-600); + + --icon-default-default: var(--color-black-800); + --icon-default-hover: var(--color-black-800); + --icon-default-secondary: var(--color-black-500); + --icon-default-secondary-hover: var(--color-black-800); + --icon-default-tertiary: var(--color-black-400); + + --icon-disabled-default: var(--color-black-400); + --icon-disabled-ondisabled: var(--color-white-1000); + + --icon-figjam-onfigjam: var(--color-white-1000); + + --icon-inverse-oninverse: var(--color-white-800); + + --icon-selected-onselected-strong: var(--color-white-1000); + --icon-selected-default: var(--color-blue-600); + + --icon-success-onsuccess: var(--color-white-1000); + --icon-success-onsuccess-secondary: var(--color-white-600); + --icon-success-default: var(--color-green-600); + + --icon-warning-default: var(--color-yellow-1000); + --icon-warning-pressed: var(--color-yellow-1000); + + /* Text */ + --text-brand-default: var(--color-blue-600); + --text-brand-secondary: var(--color-blue-600); + --text-brand-onbrand: var(--color-white-1000); + --text-brand-onbrand-secondary: var(--color-white-600); + + --text-component-default: var(--color-purple-600); + --text-component-pressed: var(--color-purple-700); + --text-component-secondary: var(--color-pale-purple-400); + --text-component-tertiary: var(--color-pale-purple-400); + --text-component-oncomponent: var(--color-white-1000); + + --text-danger-default: var(--color-red-600); + --text-danger-secondary: var(--color-red-600); + --text-danger-ondanger: var(--color-white-1000); + --text-danger-ondanger-secondary: var(--color-white-600); + + --text-default-default: var(--color-black-800); + --text-default-secondary: var(--color-black-500); + --text-default-tertiary: var(--color-black-400); + + --text-disabled-default: var(--color-black-400); + --text-disabled-ondisabled: var(--color-white-1000); + + --text-figjam-onfigjam: var(--color-white-1000); + + --text-inverse-oninverse: var(--color-white-800); + --text-inverse-oninverse-secondary: var(--color-white-600); + + --text-selected-onselected-strong: var(--color-white-1000); + --text-selected-default: var(--color-blue-600); + + --text-success-onsuccess: var(--color-white-1000); + --text-success-onsuccess-secondary: var(--color-white-600); + --text-success-default: var(--color-green-600); + + --text-warning-onwarning: var(--color-black-800); + --text-warning-default: var(--color-yellow-1000); + + /* Special (themed) */ + --special-bg-hover-transparent: var(--color-black-100); + --special-bg-transparent: rgba(255, 255, 255, 0.60); + --special-bg-transparent-secondary-hover: var(--color-black-200); + --special-border-translucent: var(--color-black-200); + + /* —————————————————————————————————————————————— + Canonical Shorthands + Convenience aliases that follow the active theme. + ————————————————————————————————————————————— */ + + /* Background */ + --bg-default: var(--bg-default-default); + --bg-secondary: var(--bg-default-secondary); + --bg-hover: var(--bg-default-hover); + --bg-selected: var(--bg-selected-default); + --bg-menu: var(--bg-menu-default); + --bg-brand: var(--bg-brand-default); + --bg-figjam: var(--bg-figjam-default); + --bg-danger: var(--bg-danger-default); + --bg-warning: var(--bg-warning-default); + --bg-success: var(--bg-success-default); + + /* Border */ + --border-default: var(--border-default-default); + --border-strong: var(--border-default-strong); + --border-onbrand-strong: var(--border-brand-onbrand-strong); + --border-selected: var(--border-selected-default); + + /* Icon */ + --icon-default: var(--icon-default-default); + --icon-secondary: var(--icon-default-secondary); + --icon-tertiary: var(--icon-default-tertiary); + --icon-onbrand: var(--icon-brand-onbrand); + --icon-onbrand-secondary: var(--icon-brand-onbrand-secondary); + --icon-brand: var(--icon-brand-default); + --icon-danger: var(--icon-danger-default); + --icon-warning: var(--icon-warning-default); + --icon-success: var(--icon-success-default); + + /* Text */ + --text-default: var(--text-default-default); + --text-secondary: var(--text-default-secondary); + --text-tertiary: var(--text-default-tertiary); + --text-onbrand: var(--text-brand-onbrand); + --text-onbrand-secondary: var(--text-brand-onbrand-secondary); + --text-brand: var(--text-brand-default); + --text-danger: var(--text-danger-default); + --text-warning: var(--text-warning-default); + --text-success: var(--text-success-default); + + /* Multiplayer */ + --multiplayer-blue: var(--special-multiplayer-blue); + --multiplayer-purple: var(--special-multiplayer-purple); + --multiplayer-pink: var(--special-multiplayer-pink); + --multiplayer-red: var(--special-multiplayer-red); + --multiplayer-yellow: var(--special-multiplayer-yellow); + --multiplayer-green: var(--special-multiplayer-green); + --multiplayer-grey: var(--special-multiplayer-grey); + } + + /* —————————————————————————————————————————————— + Dark Theme + Only overrides where the palette reference changes. + ————————————————————————————————————————————— */ + + html[data-theme='dark'], + [data-theme='dark'] { + /* Background */ + --bg-brand-tertiary: var(--color-pale-blue-800); + --bg-brand-tertiary-hover: var(--color-pale-blue-700); + + --bg-component-tertiary: var(--color-pale-purple-800); + --bg-component-tertiary-hover: var(--color-pale-purple-700); + + --bg-danger-tertiary: var(--color-pale-red-800); + --bg-danger-tertiary-hover: var(--color-pale-red-700); + --bg-danger-tertiary-pressed: var(--color-pale-red-600); + + --bg-default-default: var(--color-grey-800); + --bg-default-hover: var(--color-grey-700); + --bg-default-pressed: var(--color-grey-600); + --bg-default-secondary: var(--color-grey-700); + --bg-default-secondary-hover: var(--color-grey-600); + --bg-default-secondary-pressed: var(--color-grey-500); + --bg-default-tertiary: var(--color-grey-600); + + --bg-disabled-default: var(--color-grey-500); + + --bg-elevated-default: var(--color-grey-900); + + --bg-inverse-default: var(--color-white-1000); + --bg-inverse-hover: var(--color-grey-100); + --bg-inverse-pressed: var(--color-grey-200); + + --bg-selected-default: var(--color-pale-blue-700); + --bg-selected-hover: var(--color-pale-blue-600); + --bg-selected-pressed: var(--color-pale-blue-700); + + --bg-success-tertiary: var(--color-pale-green-900); + --bg-success-tertiary-hover: var(--color-pale-green-800); + + --bg-transparent-hover: var(--color-white-100); + --bg-transparent-pressed: var(--color-white-200); + + --bg-warning-tertiary: var(--color-pale-yellow-800); + --bg-warning-tertiary-hover: var(--color-pale-yellow-700); + + /* Border */ + --border-brand-default: var(--color-pale-blue-600); + --border-brand-strong: var(--color-blue-400); + + --border-component-default: var(--color-pale-purple-700); + --border-component-strong: var(--color-purple-300); + + --border-danger-default: var(--color-pale-red-700); + --border-danger-strong: var(--color-red-400); + + --border-default-default: var(--color-grey-600); + --border-default-strong: var(--color-white-800); + + --border-disabled-default: var(--color-grey-600); + + --border-selected-strong: var(--color-blue-400); + + --border-success-default: var(--color-pale-green-700); + --border-success-strong: var(--color-green-400); + + --border-warning-default: var(--color-pale-yellow-700); + --border-warning-strong: var(--color-yellow-400); + + /* Icon */ + --icon-brand-default: var(--color-blue-400); + + --icon-component-default: var(--color-purple-400); + --icon-component-pressed: var(--color-purple-300); + --icon-component-secondary: var(--color-pale-purple-500); + --icon-component-tertiary: var(--color-pale-purple-500); + + --icon-danger-default: var(--color-red-400); + + --icon-default-default: var(--color-white-1000); + --icon-default-hover: var(--color-white-1000); + --icon-default-secondary: var(--color-white-500); + --icon-default-secondary-hover: var(--color-white-1000); + --icon-default-tertiary: var(--color-white-400); + + --icon-disabled-default: var(--color-white-400); + --icon-disabled-ondisabled: var(--color-grey-800); + + --icon-inverse-oninverse: var(--color-black-800); + + --icon-selected-default: var(--color-blue-400); + + --icon-success-default: var(--color-green-400); + + --icon-warning-default: var(--color-yellow-400); + --icon-warning-pressed: var(--color-yellow-400); + + /* Text */ + --text-brand-default: var(--color-blue-400); + + --text-component-default: var(--color-purple-400); + --text-component-pressed: var(--color-purple-300); + --text-component-secondary: var(--color-pale-purple-500); + --text-component-tertiary: var(--color-pale-purple-500); + + --text-danger-default: var(--color-red-400); + + --text-default-default: var(--color-white-1000); + --text-default-secondary: var(--color-white-500); + --text-default-tertiary: var(--color-white-400); + + --text-disabled-default: var(--color-white-400); + --text-disabled-ondisabled: var(--color-grey-800); + + --text-inverse-oninverse: var(--color-black-800); + --text-inverse-oninverse-secondary: var(--color-black-600); + + --text-selected-default: var(--color-blue-400); + + --text-success-default: var(--color-green-400); + + --text-warning-default: var(--color-yellow-400); + + /* Special (themed) */ + --special-bg-hover-transparent: var(--color-white-100); + --special-bg-transparent: rgba(0, 0, 0, 0.60); + --special-bg-transparent-secondary-hover: var(--color-white-200); + --special-border-translucent: var(--color-white-200); + } +} diff --git a/packages/ui/src/css/design-tokens.css b/packages/ui/src/css/design-tokens.css new file mode 100644 index 00000000000..6254a84f5e5 --- /dev/null +++ b/packages/ui/src/css/design-tokens.css @@ -0,0 +1,116 @@ +@layer payload-default { + :root { + /* Black (opacity-based) */ + --color-black-100: rgba(0, 0, 0, 0.05); + --color-black-200: rgba(0, 0, 0, 0.10); + --color-black-300: rgba(0, 0, 0, 0.20); + --color-black-400: rgba(0, 0, 0, 0.30); + --color-black-500: rgba(0, 0, 0, 0.50); + --color-black-600: rgba(0, 0, 0, 0.80); + --color-black-800: rgba(0, 0, 0, 0.90); + + /* White (opacity-based) */ + --color-white-100: rgba(255, 255, 255, 0.05); + --color-white-200: rgba(255, 255, 255, 0.10); + --color-white-400: rgba(255, 255, 255, 0.40); + --color-white-500: rgba(255, 255, 255, 0.70); + --color-white-600: rgba(255, 255, 255, 0.80); + --color-white-800: rgba(255, 255, 255, 0.90); + --color-white-1000: #ffffff; + + /* Blue */ + --color-blue-200: #e5f4ff; + --color-blue-300: #bde3ff; + --color-blue-400: #80caff; + --color-blue-500: #0d99ff; + --color-blue-600: #007be5; + --color-blue-700: #0768cf; + --color-blue-800: #034ac1; + --color-blue-900: #093077; + --color-blue-1000: #0d193f; + + /* Pale Blue */ + --color-pale-blue-500: #667799; + --color-pale-blue-600: #536383; + --color-pale-blue-700: #4a5878; + --color-pale-blue-800: #394360; + + /* Purple */ + --color-purple-100: #f9f5ff; + --color-purple-200: #f1e5ff; + --color-purple-300: #e4ccff; + --color-purple-400: #d9b8ff; + --color-purple-500: #9747ff; + --color-purple-600: #8638e5; + --color-purple-700: #7c2bda; + --color-purple-800: #681abb; + --color-purple-900: #4b0d87; + --color-purple-1000: #2d0f46; + + /* Pale Purple */ + --color-pale-purple-400: #c5b2dc; + --color-pale-purple-500: #7f699b; + --color-pale-purple-700: #604d75; + --color-pale-purple-800: #473956; + + /* Pink */ + --color-pink-500: #ff24bd; + + /* Grey */ + --color-grey-100: #f5f5f5; + --color-grey-200: #e6e6e6; + --color-grey-300: #d9d9d9; + --color-grey-500: #757575; + --color-grey-600: #444444; + --color-grey-700: #383838; + --color-grey-800: #2c2c2c; + --color-grey-900: #1e1e1e; + + /* Red */ + --color-red-100: #fff5f5; + --color-red-200: #ffe2e0; + --color-red-300: #ffc7c2; + --color-red-400: #ffafa3; + --color-red-500: #f24822; + --color-red-600: #dc3412; + --color-red-700: #bd2915; + --color-red-800: #9f1f18; + --color-red-900: #771208; + --color-red-1000: #660e0b; + + /* Pale Red */ + --color-pale-red-600: #a55440; + --color-pale-red-700: #864537; + --color-pale-red-800: #60332a; + + /* Yellow */ + --color-yellow-200: #fff1c2; + --color-yellow-300: #ffe8a3; + --color-yellow-400: #ffd966; + --color-yellow-500: #ffcd29; + --color-yellow-1000: #b86200; + + /* Pale Yellow */ + --color-pale-yellow-300: #f5dfa8; + --color-pale-yellow-500: #ad7f00; + --color-pale-yellow-700: #7a5800; + --color-pale-yellow-800: #5c4100; + --color-pale-yellow-900: #3a2a10; + + /* Green */ + --color-green-100: #edfcf0; + --color-green-200: #d5f7da; + --color-green-300: #aff4c6; + --color-green-400: #85e0a3; + --color-green-500: #14ae5c; + --color-green-600: #009951; + --color-green-700: #008043; + --color-green-900: #024626; + --color-green-1000: #083a23; + + /* Pale Green */ + --color-pale-green-700: #517361; + --color-pale-green-800: #476656; + --color-pale-green-900: #2f483c; + } +} diff --git a/packages/ui/src/css/forms.css b/packages/ui/src/css/forms.css new file mode 100644 index 00000000000..7db61eca038 --- /dev/null +++ b/packages/ui/src/css/forms.css @@ -0,0 +1,84 @@ +@layer payload-default { + .form-input { + width: 100%; + min-height: var(--spacer-5); + background: var(--bg-default-secondary); + border: 1px solid transparent; + border-radius: var(--radius-medium); + color: var(--text-default); + font-family: var(--text-body-medium-font-family); + font-size: var(--text-body-medium-font-size); + font-weight: var(--text-body-medium-font-weight); + line-height: var(--text-body-medium-line-height); + padding: var(--spacer-2) var(--spacer-2); + appearance: none; + -webkit-appearance: none; + transition-property: border-color, box-shadow, background-color; + transition-duration: 100ms; + transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1); + + &[data-rtl='true'] { + direction: rtl; + } + + &::placeholder { + color: var(--text-tertiary); + font-weight: var(--text-body-medium-font-weight); + font-size: var(--text-body-medium-font-size); + } + + &:focus, + &:focus-within, + &:active { + border-color: var(--border-selected); + outline: 0; + } + + &:disabled { + background: var(--bg-disabled-default); + color: var(--text-disabled-default); + } + } + + .form-input-error { + border-color: var(--border-danger-strong); + } + + .form-input-group { + display: flex; + position: relative; + align-items: stretch; + background: var(--bg-default-secondary); + border: 1px solid transparent; + border-radius: var(--radius-medium); + transition-property: border-color; + transition-duration: 100ms; + transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1); + + &:focus-within { + border-color: var(--border-selected); + } + + &:has(input:disabled) { + background: transparent; + border-color: var(--border-disabled-default); + color: var(--text-disabled-default); + } + + input.form-input { + flex: 1; + min-width: 0; + background: transparent; + border: none; + border-radius: 0; + + &:focus { + border-color: transparent; + } + } + } + + .form-input-group-error { + border-color: var(--border-danger-strong); + } +} diff --git a/packages/ui/src/css/preflight.css b/packages/ui/src/css/preflight.css new file mode 100644 index 00000000000..28175b333d4 --- /dev/null +++ b/packages/ui/src/css/preflight.css @@ -0,0 +1,404 @@ +/* + COPIED OVER MANUALLY FROM: https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css + */ + +/* +MIT License + +Copyright (c) Tailwind Labs, Inc. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +*/ + +/* + 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) + 2. Remove default margins and padding + 3. Reset all borders. +*/ +@layer payload-default { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + box-sizing: border-box; /* 1 */ + margin: 0; /* 2 */ + padding: 0; /* 2 */ + border: 0 solid; /* 3 */ + } + + /* + 1. Use a consistent sensible line-height in all browsers. + 2. Prevent adjustments of font size after orientation changes in iOS. + 3. Use a more readable tab size. + 4. Use the user's configured `sans` font-family by default. + 5. Use the user's configured `sans` font-feature-settings by default. + 6. Use the user's configured `sans` font-variation-settings by default. + 7. Disable tap highlights on iOS. +*/ + + html, + :host { + line-height: 1.5; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + tab-size: 4; /* 3 */ + font-family: var(--font-family-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); /* 4 */ + font-feature-settings: normal; /* 5 */ + font-variation-settings: normal; /* 6 */ + -webkit-tap-highlight-color: transparent; /* 7 */ + } + + /* + 1. Add the correct height in Firefox. + 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) + 3. Reset the default border style to a 1px solid border. +*/ + + hr { + height: 0; /* 1 */ + color: inherit; /* 2 */ + border-top-width: 1px; /* 3 */ + } + + /* + Add the correct text decoration in Chrome, Edge, and Safari. +*/ + + abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + } + + /* + Remove the default font size and weight for headings. +*/ + + h1, + h2, + h3, + h4, + h5, + h6 { + font-size: inherit; + font-weight: inherit; + } + + /* + Reset links to optimize for opt-in styling instead of opt-out. +*/ + + a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; + } + + /* + Add the correct font weight in Edge and Safari. +*/ + + b, + strong { + font-weight: bolder; + } + + /* + 1. Use the user's configured `mono` font-family by default. + 2. Use the user's configured `mono` font-feature-settings by default. + 3. Use the user's configured `mono` font-variation-settings by default. + 4. Correct the odd `em` font sizing in all browsers. +*/ + + code, + kbd, + samp, + pre { + font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); /* 1 */ + font-feature-settings: normal; /* 2 */ + font-variation-settings: normal; /* 3 */ + font-size: 1em; /* 4 */ + } + + /* + Add the correct font size in all browsers. +*/ + + small { + font-size: 80%; + } + + /* + Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* + 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) + 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) + 3. Remove gaps between table borders by default. +*/ + + table { + text-indent: 0; /* 1 */ + border-color: inherit; /* 2 */ + border-collapse: collapse; /* 3 */ + } + + /* + Use the modern Firefox focus style for all focusable elements. +*/ + + :-moz-focusring { + outline: auto; + } + + /* + Add the correct vertical alignment in Chrome and Firefox. +*/ + + progress { + vertical-align: baseline; + } + + /* + Add the correct display in Chrome and Safari. +*/ + + summary { + display: list-item; + } + + /* + Make lists unstyled by default. +*/ + + ol, + ul, + menu { + list-style: none; + } + + /* + 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) + 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + + img, + svg, + video, + canvas, + audio, + iframe, + embed, + object { + display: block; /* 1 */ + vertical-align: middle; /* 2 */ + } + + /* + Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + + img, + video { + max-width: 100%; + height: auto; + } + + /* + 1. Inherit font styles in all browsers. + 2. Remove border radius in all browsers. + 3. Remove background color in all browsers. + 4. Ensure consistent opacity for disabled states in all browsers. +*/ + + button, + input, + select, + optgroup, + textarea, + ::file-selector-button { + font: inherit; /* 1 */ + font-feature-settings: inherit; /* 1 */ + font-variation-settings: inherit; /* 1 */ + letter-spacing: inherit; /* 1 */ + color: inherit; /* 1 */ + border-radius: 0; /* 2 */ + background-color: transparent; /* 3 */ + opacity: 1; /* 4 */ + } + + /* + Restore default font weight. +*/ + + :where(select:is([multiple], [size])) optgroup { + font-weight: bolder; + } + + /* + Restore indentation. +*/ + + :where(select:is([multiple], [size])) optgroup option { + padding-inline-start: 1.25rem; + } + + /* + Restore space after button. +*/ + + ::file-selector-button { + margin-inline-end: 0.25rem; + } + + /* + Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +*/ + + ::placeholder { + opacity: 1; + } + + /* + Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not + crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194) +*/ + + @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or + (contain-intrinsic-size: 1px) /* Safari 17+ */ { + ::placeholder { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + /* + Prevent resizing textareas horizontally by default. +*/ + + textarea { + resize: vertical; + } + + /* + Remove the inner padding in Chrome and Safari on macOS. +*/ + + ::-webkit-search-decoration { + -webkit-appearance: none; + } + + /* + 1. Ensure date/time inputs have the same height when empty in iOS Safari. + 2. Ensure text alignment can be changed on date/time inputs in iOS Safari. +*/ + + ::-webkit-date-and-time-value { + min-height: 1lh; /* 1 */ + text-align: inherit; /* 2 */ + } + + /* + Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`. +*/ + + ::-webkit-datetime-edit { + display: inline-flex; + } + + /* + Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers. +*/ + + ::-webkit-datetime-edit-fields-wrapper { + padding: 0; + } + + ::-webkit-datetime-edit, + ::-webkit-datetime-edit-year-field, + ::-webkit-datetime-edit-month-field, + ::-webkit-datetime-edit-day-field, + ::-webkit-datetime-edit-hour-field, + ::-webkit-datetime-edit-minute-field, + ::-webkit-datetime-edit-second-field, + ::-webkit-datetime-edit-millisecond-field, + ::-webkit-datetime-edit-meridiem-field { + padding-block: 0; + } + + /* + Center dropdown marker shown on inputs with paired ``s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499) +*/ + + ::-webkit-calendar-picker-indicator { + line-height: 1; + } + + /* + Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + + :-moz-ui-invalid { + box-shadow: none; + } + + /* + Correct the inability to style the border radius in iOS Safari. +*/ + + button, + input:where([type='button'], [type='reset'], [type='submit']), + ::file-selector-button { + appearance: button; + } + + /* + Correct the cursor style of increment and decrement buttons in Safari. +*/ + + ::-webkit-inner-spin-button, + ::-webkit-outer-spin-button { + height: auto; + } + + /* + Make elements with the HTML hidden attribute stay hidden by default. +*/ + + [hidden]:where(:not([hidden='until-found'])) { + display: none !important; + } +} diff --git a/packages/ui/src/css/radius.css b/packages/ui/src/css/radius.css new file mode 100644 index 00000000000..faed18892d3 --- /dev/null +++ b/packages/ui/src/css/radius.css @@ -0,0 +1,9 @@ +@layer payload-default { + :root { + --radius-none: 0; + --radius-small: 0.125rem; + --radius-medium: 0.3125rem; + --radius-large: 0.8125rem; + --radius-full: 9999px; + } +} diff --git a/packages/ui/src/css/spacing.css b/packages/ui/src/css/spacing.css new file mode 100644 index 00000000000..73f60b08315 --- /dev/null +++ b/packages/ui/src/css/spacing.css @@ -0,0 +1,12 @@ +@layer payload-default { + :root { + --spacer-0: 0; + --spacer-1: 0.25rem; /** 4px */ + --spacer-2: 0.5rem; /** 8px */ + --spacer-2-5: 0.75rem; /** 12px */ + --spacer-3: 1rem; /** 16px */ + --spacer-4: 1.5rem; /** 24px */ + --spacer-5: 2rem; /** 32px */ + --spacer-6: 2.5rem; /** 40px */ + } +} diff --git a/packages/ui/src/css/typography.css b/packages/ui/src/css/typography.css new file mode 100644 index 00000000000..382a15db7f8 --- /dev/null +++ b/packages/ui/src/css/typography.css @@ -0,0 +1,54 @@ +@layer payload-default { + :root { + --font-family-sans: 'Inter'; + --font-family-mono: 'Roboto Mono'; + --text-letter-spacing: 0.005em; /* 0.5% */ + + /* Body — Small */ + --text-body-small-strong-font-family: var(--font-family-sans); + --text-body-small-strong-font-size: 0.5625rem; /* 9px */ + --text-body-small-strong-font-weight: 550; + --text-body-small-strong-line-height: 0.875rem; /* 14px */ + + /* Body — Medium */ + --text-body-medium-font-family: var(--font-family-sans); + --text-body-medium-font-size: 0.6875rem; /* 11px */ + --text-body-medium-font-weight: 450; + --text-body-medium-line-height: 1rem; /* 16px */ + --text-body-medium-letter-spacing: 0.055px; + + --text-body-medium-strong-font-family: var(--font-family-sans); + --text-body-medium-strong-font-size: 0.6875rem; /* 11px */ + --text-body-medium-strong-font-weight: 550; + --text-body-medium-strong-line-height: 1rem; /* 16px */ + + /* Body — Large */ + --text-body-large-font-family: var(--font-family-sans); + --text-body-large-font-size: 0.8125rem; /* 13px */ + --text-body-large-font-weight: 450; + --text-body-large-line-height: 1.375rem; /* 22px */ + + --text-body-large-strong-font-family: var(--font-family-sans); + --text-body-large-strong-font-size: 0.8125rem; /* 13px */ + --text-body-large-strong-font-weight: 550; + --text-body-large-strong-line-height: 1.375rem; /* 22px */ + + /* Heading — Small */ + --text-heading-small-font-family: var(--font-family-sans); + --text-heading-small-font-size: 0.8125rem; /* 13px */ + --text-heading-small-font-weight: 550; + --text-heading-small-line-height: 1.375rem; + + /* Heading — Medium */ + --text-heading-medium-font-family: var(--font-family-sans); + --text-heading-medium-font-size: 0.9375rem; /* 15px */ + --text-heading-medium-font-weight: 550; + --text-heading-medium-line-height: 1.5625rem; + + /* Heading — Large */ + --text-heading-large-font-family: var(--font-family-sans); + --text-heading-large-font-size: 1.5rem; /* 24px */ + --text-heading-large-font-weight: 550; + --text-heading-large-line-height: 2rem; /* 32px */ + } +} diff --git a/packages/ui/src/css/utilities.css b/packages/ui/src/css/utilities.css new file mode 100644 index 00000000000..ac7b7981ed3 --- /dev/null +++ b/packages/ui/src/css/utilities.css @@ -0,0 +1,19 @@ +@layer payload-default { + :root { + --accessibility-outline: 2px solid var(--border-selected); + --accessibility-outline-offset: 1px; + } + + /* Screen reader only */ + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } +} diff --git a/packages/ui/src/elements/ArrayAction/index.css b/packages/ui/src/elements/ArrayAction/index.css new file mode 100644 index 00000000000..fd7877050eb --- /dev/null +++ b/packages/ui/src/elements/ArrayAction/index.css @@ -0,0 +1,11 @@ +@layer payload-default { + .array-actions__button { + cursor: pointer; + } + + .array-actions__actions { + list-style: none; + margin: 0; + padding: 0; + } +} diff --git a/packages/ui/src/elements/ArrayAction/index.scss b/packages/ui/src/elements/ArrayAction/index.scss deleted file mode 100644 index 10b8e3b0754..00000000000 --- a/packages/ui/src/elements/ArrayAction/index.scss +++ /dev/null @@ -1,35 +0,0 @@ -@import '../../scss/styles.scss'; - -@layer payload-default { - .array-actions { - &__button { - @extend %btn-reset; - cursor: pointer; - border-radius: 100px; - - &:hover { - background: var(--theme-elevation-0); - } - } - - &__actions { - list-style: none; - margin: 0; - padding: 0; - } - - &__action { - display: flex; - gap: calc(var(--base) / 2); - align-items: center; - - svg { - position: relative; - - .stroke { - stroke-width: 1px; - } - } - } - } -} diff --git a/packages/ui/src/elements/ArrayAction/index.tsx b/packages/ui/src/elements/ArrayAction/index.tsx index 81e778bb05c..0e98c661c79 100644 --- a/packages/ui/src/elements/ArrayAction/index.tsx +++ b/packages/ui/src/elements/ArrayAction/index.tsx @@ -8,7 +8,7 @@ import { PlusIcon } from '../../icons/Plus/index.js' import { XIcon } from '../../icons/X/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { ClipboardActionLabel } from '../ClipboardAction/ClipboardActionLabel.js' -import './index.scss' +import './index.css' import { Popup, PopupList } from '../Popup/index.js' const baseClass = 'array-actions' @@ -44,11 +44,12 @@ export const ArrayAction: React.FC = ({ } buttonClassName={`${baseClass}__button`} + caret={false} className={baseClass} - horizontalAlign="center" + horizontalAlign="right" render={({ close }) => { return ( - + {isSortable && index !== 0 && ( {t('upload:selectFile')} diff --git a/packages/ui/src/elements/BulkUpload/EditForm/index.tsx b/packages/ui/src/elements/BulkUpload/EditForm/index.tsx index 4c2c501ef95..e885facaf3b 100644 --- a/packages/ui/src/elements/BulkUpload/EditForm/index.tsx +++ b/packages/ui/src/elements/BulkUpload/EditForm/index.tsx @@ -138,7 +138,7 @@ export function EditForm({ ) : null} + +
  • + +
    • + + ) +} diff --git a/packages/ui/src/elements/Collapsible/index.css b/packages/ui/src/elements/Collapsible/index.css new file mode 100644 index 00000000000..e2f00e05b24 --- /dev/null +++ b/packages/ui/src/elements/Collapsible/index.css @@ -0,0 +1,185 @@ +@layer payload-default { + .collapsible { + position: relative; + border-radius: var(--radius-medium); + background: var(--bg-default-default); + } + + .collapsible__toggle-wrap { + width: 100%; + position: relative; + padding: 0 var(--spacer-1) 0 var(--spacer-2); + display: flex; + align-items: center; + background: var(--bg-default-secondary); + border: 1px solid var(--border-default-default); + border-radius: var(--radius-medium); + height: var(--spacer-5); + z-index: 2; + cursor: pointer; + + &:not(.toggle-disabled):hover { + background: var(--bg-default-secondary-hover); + } + + &.toggle-disabled { + cursor: default; + } + + &:has(.collapsible__drag) { + padding-inline-start: var(--spacer-2); + } + } + + .collapsible__drag { + display: flex; + width: var(--spacer-3); + height: var(--spacer-3); + align-items: center; + justify-content: center; + opacity: 0.5; + cursor: grab; + touch-action: none; + + &:active { + cursor: grabbing; + } + + .icon { + width: var(--spacer-3); + height: var(--spacer-3); + } + } + + .collapsible__toggle { + position: absolute; + inset: 0; + color: transparent; + cursor: pointer; + text-align: left; + outline: none; + border-radius: var(--radius-medium); + + &:focus-visible { + border: 1px solid var(--border-selected-strong); + border-radius: var(--radius-medium, 0.3125rem); + background: var(--bg-default-secondary); + } + + span { + user-select: none; + } + } + + .collapsible__toggle-wrap:has(.collapsible__toggle:focus-visible) { + border-color: var(--border-selected); + } + + .collapsible .row-label { + color: var(--text-default-default); + letter-spacing: var(--text-letter-spacing); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex: 1 0 0; + } + + .collapsible--style-error > .collapsible__toggle-wrap { + background-color: var(--bg-danger-tertiary); + border-color: var(--border-danger-strong); + + &:hover { + background: var(--bg-danger-tertiary-hover); + } + } + + .collapsible__header-wrap { + pointer-events: none; + overflow: hidden; + display: flex; + align-items: center; + gap: var(--spacer-2); + flex: 1 0 0; + min-width: 1px; + padding: 0 var(--spacer-1); + } + + /* When expanded, toggle should only have top corners rounded */ + .collapsible:not(.collapsible--collapsed) > .collapsible__toggle-wrap { + border-radius: var(--radius-medium) var(--radius-medium) 0 0; + } + + .collapsible__actions-wrap { + display: flex; + align-items: center; + flex-shrink: 0; + position: relative; + z-index: 1; + pointer-events: none; + } + + .collapsible__actions { + pointer-events: all; + display: flex; + align-items: center; + justify-content: center; + gap: var(--spacer-1); + padding: 0 var(--spacer-1); + flex-shrink: 0; + min-height: var(--spacer-4); + } + + .collapsible__indicator { + display: flex; + align-items: center; + justify-content: center; + min-width: var(--spacer-4); + min-height: var(--spacer-4); + border-radius: var(--radius-medium); + flex-shrink: 0; + pointer-events: all; + cursor: pointer; + outline: none; + } + + .collapsible__toggle-wrap:hover .collapsible__indicator { + color: var(--icon-default-default); + } + + .collapsible__indicator:hover { + background: var(--bg-transparent-hover); + } + + .collapsible__indicator:focus-visible { + border: 1px solid var(--border-selected-strong); + border-radius: var(--radius-medium, 0.3125rem); + background: var(--bg-default-secondary); + } + + .collapsible__indicator:active { + background: var(--bg-transparent-pressed); + } + + .collapsible__content { + background-color: var(--bg-default-default); + border: 1px solid var(--border-default-default); + border-top: none; + border-radius: 0 0 var(--radius-medium) var(--radius-medium); + padding: var(--spacer-3); + z-index: 1; + } + + .collapsible--style-error .collapsible__content { + border-color: var(--border-danger-strong); + } + + .collapsible--style-error .collapsible:not(.collapsible--style-error) .collapsible__content { + border-color: var(--border-default-default); + } + + @media (max-width: 768px) { + .collapsible__content { + padding: var(--spacer-2-5); + } + } +} diff --git a/packages/ui/src/elements/Collapsible/index.scss b/packages/ui/src/elements/Collapsible/index.scss deleted file mode 100644 index cc21446b63d..00000000000 --- a/packages/ui/src/elements/Collapsible/index.scss +++ /dev/null @@ -1,164 +0,0 @@ -@import '../../scss/styles.scss'; - -@layer payload-default { - .collapsible { - position: relative; - --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%; - - &:not(.toggle-disabled):hover { - background: var(--theme-elevation-100); - } - - &:has(.collapsible__drag) { - padding-inline-start: base(0.4); - } - } - - &__drag { - display: flex; - opacity: 0.5; - top: var(--toggle-pad-v); - width: base(1.2); - height: base(1.2); - padding: base(0.1); - - icon { - width: 100%; - height: 100%; - } - } - - &__toggle { - @extend %btn-reset; - @extend %body; - text-align: left; - 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; - - &:not(.toggle-disabled) { - cursor: pointer; - } - - span { - user-select: none; - } - } - - &--style-default { - border: 1px solid var(--theme-elevation-200); - &:hover { - border: 1px solid var(--theme-elevation-300); - } - - > .collapsible__toggle-wrap { - .row-label { - color: var(--theme-text); - } - } - } - - &--style-error { - border: 1px solid var(--theme-error-400); - > .collapsible__toggle-wrap { - background-color: var(--theme-error-100); - - &:hover { - background: var(--theme-error-150); - } - - .row-label { - color: var(--theme-error-950); - } - } - } - - &__header-wrap { - top: 0; - right: base(3); - bottom: 0; - left: 0; - pointer-events: none; - width: 100%; - overflow: hidden; - max-width: 100%; - } - - &__header-wrap--has-drag-handle { - left: base(1); - } - - &--collapsed { - .collapsible__toggle-wrap { - border-bottom-right-radius: $style-radius-m; - border-bottom-left-radius: $style-radius-m; - } - } - - &__actions-wrap { - pointer-events: none; - display: flex; - gap: base(0.2); - margin-inline-end: base(0.2); - } - - &__actions { - pointer-events: all; - display: flex; - align-items: center; - justify-content: center; - width: base(1.2); - height: base(1.2); - - &.icon { - padding: base(0.1); - } - } - - &__indicator { - display: flex; - align-items: center; - justify-content: center; - width: base(1.2); - height: base(1.2); - - &.icon { - padding: base(0.1); - } - } - - &__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); - } - } - } -} diff --git a/packages/ui/src/elements/Collapsible/index.tsx b/packages/ui/src/elements/Collapsible/index.tsx index 91d0aacab2b..621f71d9243 100644 --- a/packages/ui/src/elements/Collapsible/index.tsx +++ b/packages/ui/src/elements/Collapsible/index.tsx @@ -6,7 +6,7 @@ import type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem import { ChevronIcon } from '../../icons/Chevron/index.js' import { DragHandleIcon } from '../../icons/DragHandle/index.js' import { useTranslation } from '../../providers/Translation/index.js' -import './index.scss' +import './index.css' import { AnimateHeight } from '../AnimateHeight/index.js' import { CollapsibleProvider, useCollapsible } from './provider.js' @@ -126,9 +126,14 @@ export const Collapsible: React.FC = ({
    {actions ?
    {actions}
    : null} {!disableToggleIndicator && ( -
    +
    + )}
    diff --git a/packages/ui/src/elements/CopyToClipboard/index.scss b/packages/ui/src/elements/CopyToClipboard/index.scss index 5ad5633d2af..d7a959d36aa 100644 --- a/packages/ui/src/elements/CopyToClipboard/index.scss +++ b/packages/ui/src/elements/CopyToClipboard/index.scss @@ -2,7 +2,6 @@ @layer payload-default { .copy-to-clipboard { - @extend %btn-reset; position: relative; cursor: pointer; vertical-align: middle; diff --git a/packages/ui/src/elements/DatePicker/DatePicker.tsx b/packages/ui/src/elements/DatePicker/DatePicker.tsx index 4b2815fc3db..75801da3096 100644 --- a/packages/ui/src/elements/DatePicker/DatePicker.tsx +++ b/packages/ui/src/elements/DatePicker/DatePicker.tsx @@ -13,7 +13,6 @@ import type { Props } from './types.js' import { CalendarIcon } from '../../icons/Calendar/index.js' import { XIcon } from '../../icons/X/index.js' import { useTranslation } from '../../providers/Translation/index.js' -import './library.scss' import './index.scss' import { getFormattedLocale } from './getFormattedLocale.js' diff --git a/packages/ui/src/elements/DatePicker/index.scss b/packages/ui/src/elements/DatePicker/index.scss index 1f7e0b2a1e4..e08911b1a43 100644 --- a/packages/ui/src/elements/DatePicker/index.scss +++ b/packages/ui/src/elements/DatePicker/index.scss @@ -1,4 +1,5 @@ @import '../../scss/styles'; +@import './library.scss'; $cal-icon-width: 18px; diff --git a/packages/ui/src/elements/DeleteDocument/index.scss b/packages/ui/src/elements/DeleteDocument/index.scss index 31444f1e605..e9ff9f0ca8c 100644 --- a/packages/ui/src/elements/DeleteDocument/index.scss +++ b/packages/ui/src/elements/DeleteDocument/index.scss @@ -9,7 +9,6 @@ height: 100%; &__toggle { - @extend %btn-reset; } &__checkbox { diff --git a/packages/ui/src/elements/Drawer/index.css b/packages/ui/src/elements/Drawer/index.css new file mode 100644 index 00000000000..59d1393b227 --- /dev/null +++ b/packages/ui/src/elements/Drawer/index.css @@ -0,0 +1,138 @@ +@layer payload-default { + .drawer { + display: flex; + overflow: hidden; + position: fixed; + height: 100vh; + } + + .drawer__blur-bg { + position: absolute; + z-index: 1; + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 0; + transition: all 200ms linear; + + &:before, + &:after { + content: ' '; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + &:before { + background: var(--theme-bg); + opacity: 0.75; + } + + &:after { + backdrop-filter: blur(8px); + } + } + + .drawer__content { + opacity: 0; + transform: translateX(calc(var(--base) * 4)); + position: relative; + z-index: 2; + /* NOTE: width is controlled by js */ + overflow: hidden; + transition: all 200ms linear; + background-color: var(--theme-bg); + } + + .drawer__content-children { + position: relative; + z-index: 1; + overflow: auto; + height: 100%; + padding: 0; + display: flex; + flex-direction: column; + + & > * { + padding: var(--spacer-2-5); + } + } + + .drawer--is-open .drawer__content, + .drawer--is-open .drawer__blur-bg { + opacity: 1; + } + + .drawer--is-open .drawer__close { + opacity: 0.1; + transition: opacity 200ms linear; + transition-delay: 100ms; + } + + .drawer--is-open .drawer__content { + transform: translateX(0); + } + + .drawer__close { + 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; + } + } + + .drawer__header { + display: flex; + align-items: center; + width: 100%; + border-bottom: 1px solid var(--border-default); + background: var(--bg-default); + } + + .drawer__header__title { + margin: 0; + flex-grow: 1; + overflow: hidden; + color: var(--color-text); + text-overflow: ellipsis; + font-size: var(--text-body-large-strong-font-size); + font-weight: var(--text-body-large-strong-font-weight); + line-height: var(--text-body-large-strong-line-height); + letter-spacing: -0.032px; + } + + .drawer__header__close { + margin: 0; + } + + .drawer__header__actions { + display: flex; + gap: 10px; + align-items: center; + margin-left: auto; + } + + html[data-theme='dark'] { + .drawer__close { + background: var(--color-base-1000); + } + + .drawer--is-open .drawer__close { + opacity: 0.25; + } + } +} diff --git a/packages/ui/src/elements/Drawer/index.scss b/packages/ui/src/elements/Drawer/index.scss deleted file mode 100644 index ea3b5ce247b..00000000000 --- a/packages/ui/src/elements/Drawer/index.scss +++ /dev/null @@ -1,142 +0,0 @@ -@import '../../scss/styles.scss'; - -$transTime: 200; - -@layer payload-default { - .drawer { - display: flex; - overflow: hidden; - position: fixed; - height: 100vh; - - &__blur-bg { - @include blur-bg; - position: absolute; - z-index: 1; - top: 0; - right: 0; - bottom: 0; - left: 0; - opacity: 0; - transition: all #{$transTime}ms linear; - } - - &__content { - opacity: 0; - transform: translateX(calc(var(--base) * 4)); - position: relative; - z-index: 2; - // NOTE: width is controlled by js - // width: calc(100% - var(--gutter-h)); - overflow: hidden; - transition: all #{$transTime}ms linear; - background-color: var(--theme-bg); - } - - &__content-children { - position: relative; - z-index: 1; - overflow: auto; - height: 100%; - } - - &--is-open { - .drawer { - &__content, - &__blur-bg { - opacity: 1; - } - - &__close { - opacity: 0.1; - transition: opacity #{$transTime}ms linear; - transition-delay: #{calc($transTime / 2)}ms; - } - - &__content { - transform: translateX(0); - } - } - } - - &__close { - @extend %btn-reset; - position: relative; - z-index: 2; - flex-shrink: 0; - text-indent: -9999px; - cursor: pointer; - opacity: 0; - will-change: opacity; - transition: none; - transition-delay: 0ms; - flex-grow: 1; - background: var(--theme-elevation-800); - - &:active, - &:focus { - outline: 0; - } - } - - &__header { - display: flex; - align-items: center; - margin-top: base(2.5); - margin-bottom: base(1); - width: 100%; - - &__title { - margin: 0; - flex-grow: 1; - } - - &__close { - border: 0; - background-color: transparent; - padding: 0; - cursor: pointer; - overflow: hidden; - 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); - } - } - } - - html[data-theme='dark'] { - .drawer { - &__close { - background: var(--color-base-1000); - } - - &--is-open { - .drawer__close { - opacity: 0.25; - } - } - } - } -} diff --git a/packages/ui/src/elements/Drawer/index.tsx b/packages/ui/src/elements/Drawer/index.tsx index 6d9b60d1b32..e9829ebff98 100644 --- a/packages/ui/src/elements/Drawer/index.tsx +++ b/packages/ui/src/elements/Drawer/index.tsx @@ -4,10 +4,10 @@ import React, { createContext, use, useCallback, useLayoutEffect, useState } fro import type { Props, TogglerProps } from './types.js' -import { XIcon } from '../../icons/X/index.js' import { useTranslation } from '../../providers/Translation/index.js' +import { Button } from '../Button/index.js' import { Gutter } from '../Gutter/index.js' -import './index.scss' +import './index.css' const baseClass = 'drawer' @@ -51,6 +51,7 @@ export const Drawer: React.FC = ({ className, gutter = true, Header, + headerActions, hoverTitle, title, }) => { @@ -105,21 +106,38 @@ export const Drawer: React.FC = ({ {Header} {Header === undefined && (
    -

    - {title} -

    {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason... i.e. changing to a `div` element will fix the animation issue but will break accessibility */} - + {/* TODO: add icon */} + ‹ + +

    + {title} +

    + {headerActions && headerActions.length > 0 && ( +
    + {headerActions.map((action, i) => ( + + ))} +
    + )}
    )} {children} diff --git a/packages/ui/src/elements/Drawer/types.ts b/packages/ui/src/elements/Drawer/types.ts index 38e7bfa67e5..b1c4e7df288 100644 --- a/packages/ui/src/elements/Drawer/types.ts +++ b/packages/ui/src/elements/Drawer/types.ts @@ -1,10 +1,28 @@ import type { HTMLAttributes } from 'react' +export type DrawerHeaderAction = { + readonly disabled?: boolean + readonly label: string + readonly onClick: () => void + readonly style?: + | 'dashed' + | 'destructive' + | 'ghost' + | 'icon-label' + | 'none' + | 'pill' + | 'primary' + | 'secondary' + | 'subtle' + | 'tab' +} + export type Props = { readonly children: React.ReactNode readonly className?: string readonly gutter?: boolean readonly Header?: React.ReactNode + readonly headerActions?: ReadonlyArray readonly hoverTitle?: boolean readonly slug: string readonly title?: string diff --git a/packages/ui/src/elements/Dropzone/index.scss b/packages/ui/src/elements/Dropzone/index.scss index 9ad40b205d0..ec30bcbec57 100644 --- a/packages/ui/src/elements/Dropzone/index.scss +++ b/packages/ui/src/elements/Dropzone/index.scss @@ -12,8 +12,6 @@ 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; diff --git a/packages/ui/src/elements/EditUpload/index.scss b/packages/ui/src/elements/EditUpload/index.scss index d887b82cf1b..95f56b71648 100644 --- a/packages/ui/src/elements/EditUpload/index.scss +++ b/packages/ui/src/elements/EditUpload/index.scss @@ -1,4 +1,5 @@ @import '../../scss/styles.scss'; +@import './library.scss'; $header-height: base(5); @@ -77,7 +78,6 @@ $header-height: base(5); } &__draggable { - @include btn-reset; position: absolute; } diff --git a/packages/ui/src/elements/EditUpload/index.tsx b/packages/ui/src/elements/EditUpload/index.tsx index 2c8ce483bd5..f34a82ee8f3 100644 --- a/packages/ui/src/elements/EditUpload/index.tsx +++ b/packages/ui/src/elements/EditUpload/index.tsx @@ -5,7 +5,6 @@ import type { UploadEdits } from 'payload' import { useModal } from '@faceless-ui/modal' import React, { useRef, useState } from 'react' import ReactCrop from 'react-image-crop' -import 'react-image-crop/dist/ReactCrop.css' import { editDrawerSlug } from '../../elements/Upload/index.js' import { PlusIcon } from '../../icons/Plus/index.js' @@ -17,6 +16,7 @@ import './index.scss' const baseClass = 'edit-upload' type Props = { + disabled?: boolean name: string onChange: (value: string) => void ref?: React.RefObject @@ -24,12 +24,13 @@ type Props = { } const Input: React.FC = (props) => { - const { name, onChange, ref, value } = props + const { name, disabled, onChange, ref, value } = props return (
    {name} onChange(e.target.value)} ref={ref} @@ -122,10 +123,10 @@ export const EditUpload: React.FC = ({ return null } - setCrop({ - ...crop, + setCrop((prev) => ({ + ...prev, [dimension]: percentage, - }) + })) } const fineTuneFocalPosition = ({ @@ -276,12 +277,14 @@ export const EditUpload: React.FC = ({
    fineTuneCrop({ dimension: 'width', value })} ref={widthInputRef} value={((crop.width / 100) * uncroppedPixelWidth).toFixed(0)} /> fineTuneCrop({ dimension: 'height', value })} ref={heightInputRef} diff --git a/packages/ui/src/elements/EditUpload/library.scss b/packages/ui/src/elements/EditUpload/library.scss new file mode 100644 index 00000000000..fa0eda0f5b6 --- /dev/null +++ b/packages/ui/src/elements/EditUpload/library.scss @@ -0,0 +1,320 @@ +// CSS manually copied into the payload-default layer from the react-image-crop library +// see: /node_modules/react-image-crop/dist/ReactCrop.css + +@layer payload-default { + .ReactCrop { + position: relative; + display: inline-block; + cursor: crosshair; + overflow: hidden; + max-width: 100%; + } + + .ReactCrop *, + .ReactCrop *:before, + .ReactCrop *:after { + box-sizing: border-box; + } + + .ReactCrop--disabled, + .ReactCrop--locked { + cursor: inherit; + } + + .ReactCrop__child-wrapper { + max-height: inherit; + } + + .ReactCrop__child-wrapper > img, + .ReactCrop__child-wrapper > video { + display: block; + max-width: 100%; + max-height: inherit; + } + + .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > img, + .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > video { + touch-action: none; + } + + .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection { + touch-action: none; + } + + .ReactCrop__crop-selection { + position: absolute; + top: 0; + left: 0; + transform: translateZ(0); + cursor: move; + box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5); + } + + .ReactCrop--disabled .ReactCrop__crop-selection { + cursor: inherit; + } + + .ReactCrop--circular-crop .ReactCrop__crop-selection { + border-radius: 50%; + } + + .ReactCrop--no-animate .ReactCrop__crop-selection { + outline: 1px dashed white; + } + + .ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection) { + animation: marching-ants 1s; + background-image: linear-gradient(to right, #fff 50%, #444 50%), + linear-gradient(to right, #fff 50%, #444 50%), + linear-gradient(to bottom, #fff 50%, #444 50%), + linear-gradient(to bottom, #fff 50%, #444 50%); + background-size: 10px 1px, 10px 1px, 1px 10px, 1px 10px; + background-position: 0 0, 0 100%, 0 0, 100% 0; + background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; + color: #fff; + animation-play-state: running; + animation-timing-function: linear; + animation-iteration-count: infinite; + } + + @keyframes marching-ants { + 0% { + background-position: 0 0, 0 100%, 0 0, 100% 0; + } + to { + background-position: 20px 0, -20px 100%, 0 -20px, 100% 20px; + } + } + + .ReactCrop__crop-selection:focus { + outline: none; + border-color: #00f; + border-style: solid; + } + + .ReactCrop--invisible-crop .ReactCrop__crop-selection { + display: none; + } + + .ReactCrop__rule-of-thirds-vt:before, + .ReactCrop__rule-of-thirds-vt:after, + .ReactCrop__rule-of-thirds-hz:before, + .ReactCrop__rule-of-thirds-hz:after { + content: ''; + display: block; + position: absolute; + background-color: rgba(255, 255, 255, 0.4); + } + + .ReactCrop__rule-of-thirds-vt:before, + .ReactCrop__rule-of-thirds-vt:after { + width: 1px; + height: 100%; + } + + .ReactCrop__rule-of-thirds-vt:before { + left: 33.3333333333%; + } + + .ReactCrop__rule-of-thirds-vt:after { + left: 66.6666666667%; + } + + .ReactCrop__rule-of-thirds-hz:before, + .ReactCrop__rule-of-thirds-hz:after { + width: 100%; + height: 1px; + } + + .ReactCrop__rule-of-thirds-hz:before { + top: 33.3333333333%; + } + + .ReactCrop__rule-of-thirds-hz:after { + top: 66.6666666667%; + } + + .ReactCrop__drag-handle { + position: absolute; + } + + .ReactCrop__drag-handle:after { + position: absolute; + content: ''; + display: block; + width: 10px; + height: 10px; + background-color: rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.7); + outline: 1px solid transparent; + } + + .ReactCrop__drag-handle:focus:after { + border-color: #00f; + background: #2dbfff; + } + + .ReactCrop .ord-nw { + top: 0; + left: 0; + margin-top: -5px; + margin-left: -5px; + cursor: nw-resize; + } + + .ReactCrop .ord-nw:after { + top: 0; + left: 0; + } + + .ReactCrop .ord-n { + top: 0; + left: 50%; + margin-top: -5px; + margin-left: -5px; + cursor: n-resize; + } + + .ReactCrop .ord-n:after { + top: 0; + } + + .ReactCrop .ord-ne { + top: 0; + right: 0; + margin-top: -5px; + margin-right: -5px; + cursor: ne-resize; + } + + .ReactCrop .ord-ne:after { + top: 0; + right: 0; + } + + .ReactCrop .ord-e { + top: 50%; + right: 0; + margin-top: -5px; + margin-right: -5px; + cursor: e-resize; + } + + .ReactCrop .ord-e:after { + right: 0; + } + + .ReactCrop .ord-se { + bottom: 0; + right: 0; + margin-bottom: -5px; + margin-right: -5px; + cursor: se-resize; + } + + .ReactCrop .ord-se:after { + bottom: 0; + right: 0; + } + + .ReactCrop .ord-s { + bottom: 0; + left: 50%; + margin-bottom: -5px; + margin-left: -5px; + cursor: s-resize; + } + + .ReactCrop .ord-s:after { + bottom: 0; + } + + .ReactCrop .ord-sw { + bottom: 0; + left: 0; + margin-bottom: -5px; + margin-left: -5px; + cursor: sw-resize; + } + + .ReactCrop .ord-sw:after { + bottom: 0; + left: 0; + } + + .ReactCrop .ord-w { + top: 50%; + left: 0; + margin-top: -5px; + margin-left: -5px; + cursor: w-resize; + } + + .ReactCrop .ord-w:after { + left: 0; + } + + .ReactCrop__disabled .ReactCrop__drag-handle { + cursor: inherit; + } + + .ReactCrop__drag-bar { + position: absolute; + } + + .ReactCrop__drag-bar.ord-n { + top: 0; + left: 0; + width: 100%; + height: 6px; + margin-top: -3px; + } + + .ReactCrop__drag-bar.ord-e { + right: 0; + top: 0; + width: 6px; + height: 100%; + margin-right: -3px; + } + + .ReactCrop__drag-bar.ord-s { + bottom: 0; + left: 0; + width: 100%; + height: 6px; + margin-bottom: -3px; + } + + .ReactCrop__drag-bar.ord-w { + top: 0; + left: 0; + width: 6px; + height: 100%; + margin-left: -3px; + } + + .ReactCrop--new-crop .ReactCrop__drag-bar, + .ReactCrop--new-crop .ReactCrop__drag-handle, + .ReactCrop--fixed-aspect .ReactCrop__drag-bar, + .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n, + .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e, + .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s, + .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w { + display: none; + } + + @media (pointer: coarse) { + .ReactCrop .ord-n, + .ReactCrop .ord-e, + .ReactCrop .ord-s, + .ReactCrop .ord-w { + display: none; + } + + .ReactCrop__drag-handle { + width: 24px; + height: 24px; + } + } +} diff --git a/packages/ui/src/elements/ErrorPill/index.css b/packages/ui/src/elements/ErrorPill/index.css new file mode 100644 index 00000000000..4e496155835 --- /dev/null +++ b/packages/ui/src/elements/ErrorPill/index.css @@ -0,0 +1,33 @@ +@layer payload-default { + .error-pill { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + padding: 0 var(--spacer-1); + border-radius: var(--radius-medium); + line-height: var(--text-body-medium-line-height); + font-family: var(--text-body-medium-font-family); + font-size: var(--text-body-medium-font-size); + font-weight: var(--text-body-medium-font-weight); + letter-spacing: var(--text-letter-spacing); + text-align: center; + background: var(--bg-danger-default); + color: var(--text-danger-ondanger); + height: var(--spacer-3); + } + + .error-pill--fixed-width { + width: var(--spacer-3); + height: var(--spacer-3); + border-radius: var(--radius-full); + position: relative; + } + + .error-pill__count { + letter-spacing: 0.5px; + margin-left: 0.5px; + padding: 0; + border-radius: var(--radius-full); + } +} diff --git a/packages/ui/src/elements/ErrorPill/index.scss b/packages/ui/src/elements/ErrorPill/index.scss deleted file mode 100644 index 39ab442e9ee..00000000000 --- a/packages/ui/src/elements/ErrorPill/index.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import '../../scss/styles.scss'; - -@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; - } - - &__count { - letter-spacing: 0.5px; - margin-left: 0.5px; - } - } -} diff --git a/packages/ui/src/elements/ErrorPill/index.tsx b/packages/ui/src/elements/ErrorPill/index.tsx index e8e9b50aa25..94880d500ab 100644 --- a/packages/ui/src/elements/ErrorPill/index.tsx +++ b/packages/ui/src/elements/ErrorPill/index.tsx @@ -3,7 +3,7 @@ import type { I18nClient } from '@payloadcms/translations' import React from 'react' -import './index.scss' +import './index.css' const baseClass = 'error-pill' @@ -30,7 +30,8 @@ export const ErrorPill: React.FC = (props) => {
    {count} - {withMessage && ` ${count > 1 ? i18n.t('general:errors') : i18n.t('general:error')}`} + {withMessage && + ` ${count > 1 ? i18n.t('general:errors').toLowerCase() : i18n.t('general:error').toLowerCase()}`}
    ) diff --git a/packages/ui/src/elements/FolderView/Breadcrumbs/index.scss b/packages/ui/src/elements/FolderView/Breadcrumbs/index.scss index faf78e9e900..4d3f9a4567c 100644 --- a/packages/ui/src/elements/FolderView/Breadcrumbs/index.scss +++ b/packages/ui/src/elements/FolderView/Breadcrumbs/index.scss @@ -2,7 +2,6 @@ @layer payload-default { .droppable-button { - @include btn-reset; font-weight: 600; font-family: inherit; &:hover { @@ -14,7 +13,6 @@ &__crumb, &__crumb-item.droppable-button { - @extend %h4; font-weight: 600; letter-spacing: unset; display: flex; diff --git a/packages/ui/src/elements/FolderView/Cell/index.client.tsx b/packages/ui/src/elements/FolderView/Cell/index.client.tsx index a0655b7de5c..835d5377377 100644 --- a/packages/ui/src/elements/FolderView/Cell/index.client.tsx +++ b/packages/ui/src/elements/FolderView/Cell/index.client.tsx @@ -103,7 +103,7 @@ export const FolderTableCellClient = ({ + diff --git a/packages/ui/src/elements/ListHeader/TitleActions/ListBulkUploadButton.tsx b/packages/ui/src/elements/ListHeader/TitleActions/ListBulkUploadButton.tsx index aade4404570..5b359df1a03 100644 --- a/packages/ui/src/elements/ListHeader/TitleActions/ListBulkUploadButton.tsx +++ b/packages/ui/src/elements/ListHeader/TitleActions/ListBulkUploadButton.tsx @@ -77,7 +77,7 @@ export function ListBulkUploadButton({ buttonStyle="pill" key="bulk-upload-button" onClick={openBulkUpload} - size="small" + size="medium" > {t('upload:bulkUpload')} diff --git a/packages/ui/src/elements/ListHeader/TitleActions/ListCreateNewDocButton.tsx b/packages/ui/src/elements/ListHeader/TitleActions/ListCreateNewDocButton.tsx index 9d59424e172..f177b1a11a6 100644 --- a/packages/ui/src/elements/ListHeader/TitleActions/ListCreateNewDocButton.tsx +++ b/packages/ui/src/elements/ListHeader/TitleActions/ListCreateNewDocButton.tsx @@ -33,7 +33,7 @@ export function ListCreateNewButton({ className={`${baseClass}__create-new-button`} el={'link'} key="create-new-button" - size="small" + size="medium" to={newDocumentURL} > {t('general:createNew')} diff --git a/packages/ui/src/elements/ListHeader/TitleActions/ListCreateNewDocInFolderButton.tsx b/packages/ui/src/elements/ListHeader/TitleActions/ListCreateNewDocInFolderButton.tsx index 66053c4f683..5f3a98bb671 100644 --- a/packages/ui/src/elements/ListHeader/TitleActions/ListCreateNewDocInFolderButton.tsx +++ b/packages/ui/src/elements/ListHeader/TitleActions/ListCreateNewDocInFolderButton.tsx @@ -17,7 +17,7 @@ const baseClass = 'create-new-doc-in-folder' export function ListCreateNewDocInFolderButton({ buttonLabel, - buttonSize = 'small', + buttonSize = 'medium', buttonStyle = 'pill', collectionSlugs, folderAssignedCollections, @@ -25,9 +25,11 @@ export function ListCreateNewDocInFolderButton({ slugPrefix, }: { buttonLabel: string - buttonSize?: 'large' | 'medium' | 'small' | 'xsmall' + buttonSize?: 'large' | 'medium' buttonStyle?: - | 'error' + | 'dashed' + | 'destructive' + | 'ghost' | 'icon-label' | 'none' | 'pill' @@ -35,7 +37,6 @@ export function ListCreateNewDocInFolderButton({ | 'secondary' | 'subtle' | 'tab' - | 'transparent' collectionSlugs: CollectionSlug[] folderAssignedCollections: CollectionSlug[] onCreateSuccess: (args: { diff --git a/packages/ui/src/elements/ListHeader/TitleActions/ListEmptyTrashButton.tsx b/packages/ui/src/elements/ListHeader/TitleActions/ListEmptyTrashButton.tsx index ffd23f208f1..0d46fb49b4d 100644 --- a/packages/ui/src/elements/ListHeader/TitleActions/ListEmptyTrashButton.tsx +++ b/packages/ui/src/elements/ListHeader/TitleActions/ListEmptyTrashButton.tsx @@ -170,7 +170,7 @@ export function ListEmptyTrashButton({ onClick={() => { openModal(confirmEmptyTrashSlug) }} - size="small" + size="medium" > {t('general:emptyTrash')} diff --git a/packages/ui/src/elements/Pagination/ClickableArrow/index.scss b/packages/ui/src/elements/Pagination/ClickableArrow/index.scss index e8c103d7915..d631a576816 100644 --- a/packages/ui/src/elements/Pagination/ClickableArrow/index.scss +++ b/packages/ui/src/elements/Pagination/ClickableArrow/index.scss @@ -3,7 +3,7 @@ @layer payload-default { .clickable-arrow { cursor: pointer; - @extend %btn-reset; + width: base(1.5); height: base(1.5); display: flex; diff --git a/packages/ui/src/elements/Pagination/index.scss b/packages/ui/src/elements/Pagination/index.scss index 1bdac9dea22..013a673a3ab 100644 --- a/packages/ui/src/elements/Pagination/index.scss +++ b/packages/ui/src/elements/Pagination/index.scss @@ -23,7 +23,6 @@ } &__page { - @extend %btn-reset; width: base(1.5); height: base(1.5); display: flex; diff --git a/packages/ui/src/elements/PerPage/index.scss b/packages/ui/src/elements/PerPage/index.scss index ce7ac9700c2..43794b6bafa 100644 --- a/packages/ui/src/elements/PerPage/index.scss +++ b/packages/ui/src/elements/PerPage/index.scss @@ -18,7 +18,6 @@ } &__button { - @extend %btn-reset; cursor: pointer; text-align: left; width: 100%; diff --git a/packages/ui/src/elements/Pill/index.scss b/packages/ui/src/elements/Pill/index.scss index e29e6555a8c..235653ee377 100644 --- a/packages/ui/src/elements/Pill/index.scss +++ b/packages/ui/src/elements/Pill/index.scss @@ -2,31 +2,30 @@ @layer payload-default { .pill { - --pill-padding-block-start: 0px; + --pill-padding-block: 0px; --pill-padding-inline-start: 0px; - --pill-padding-block-end: 0px; --pill-padding-inline-end: 0px; - font-size: 1rem; - line-height: calc(var(--base) * 1.2); + --pill-icon-size: calc(var(--base) * 1.2); + padding: var(--pill-padding-block) var(--pill-padding-inline-end) var(--pill-padding-block) + var(--pill-padding-inline-start); + font-family: var(--text-body-medium-font-family); + font-size: var(--text-body-medium-font-size); + font-style: normal; + font-weight: var(--text-body-medium-font-weight); + line-height: var(--text-body-medium-line-height); + letter-spacing: var(--text-body-medium-letter-spacing); display: inline-flex; - background: var(--theme-elevation-150); - color: var(--theme-elevation-800); - border-radius: $style-radius-s; + background: var(--color-black-200); + color: var(--text-default); + border-radius: var(--radius-medium); cursor: inherit; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; border: 0; align-items: center; flex-shrink: 0; gap: base(0.2); - padding: var(--pill-padding-block-start) var(--pill-padding-inline-end) - var(--pill-padding-block-end) var(--pill-padding-inline-start); - --pill-icon-size: calc(var(--base) * 1.2); &--rounded { border-radius: var(--style-radius-l); - font-size: 12px; } &:active, @@ -72,108 +71,116 @@ &--align-icon-left { flex-direction: row-reverse; - padding-inline-start: base(0.1); - padding-inline-end: base(0.4); + --pill-padding-inline-start: base(0.1); + --pill-padding-inline-end: base(0.4); } &--style-white { - background: var(--theme-elevation-0); - &.pill--has-action { - &:hover, + &:hover { + background: var(--bg-default-secondary-hover); + } + &:active { - background: var(--theme-elevation-100); + background: var(--bg-default-secondary-pressed); } } } &--style-always-white { - background: var(--theme-elevation-850); - color: var(--theme-elevation-0); + background: var(--bg-inverse-default); + color: var(--text-inverse-oninverse); &.pill--has-action { - &:hover, + &:hover { + background: var(--bg-inverse-hover); + } + &:active { - background: var(--theme-elevation-750); + background: var(--bg-inverse-pressed); } } } &--style-light { &.pill--has-action { - &:hover, + &:hover { + background: var(--bg-default-secondary-hover); + } + &:active { - background: var(--theme-elevation-100); + background: var(--bg-default-secondary-pressed); } } } &--style-light-gray { - background: var(--theme-elevation-100); - color: var(--theme-elevation-800); + background: var(--bg-default-secondary); + color: var(--text-default); } &--style-warning { - background: var(--theme-warning-150); - color: var(--theme-warning-800); + background: var(--bg-warning-tertiary); + color: var(--text-warning-default); } &--style-success { - background: var(--theme-success-150); - color: var(--theme-success-800); + background: var(--bg-success-tertiary); + color: var(--text-success-default); } &--style-error { - background: var(--theme-error-150); - color: var(--theme-error-800); + background: var(--bg-danger-tertiary); + color: var(--text-danger-default); } &--style-dark { - background: var(--theme-elevation-800); - color: var(--theme-elevation-0); + background: var(--bg-inverse-default); + color: var(--text-inverse-oninverse); svg { - @include color-svg(var(--theme-elevation-0)); + @include color-svg(var(--text-inverse-oninverse)); } &.pill--has-action { &:hover { - background: var(--theme-elevation-750); + background: var(--bg-inverse-hover); } &:active { - background: var(--theme-elevation-700); + background: var(--bg-inverse-pressed); } } } &--size-medium { - --pill-padding-block-start: calc(var(--base) * 0.2); - --pill-padding-inline-end: calc(var(--base) * 0.6); - --pill-padding-block-end: calc(var(--base) * 0.2); + --pill-padding-block: calc(var(--base) * 0.2); --pill-padding-inline-start: calc(var(--base) * 0.6); + --pill-padding-inline-end: calc(var(--base) * 0.6); } &--size-small { --pill-icon-size: calc(var(--base) * 0.9); - --pill-padding-block-start: 0; - --pill-padding-inline-end: calc(var(--base) * 0.4); - --pill-padding-inline-start: calc(var(--base) * 0.4); - --pill-padding-block-end: 0; + --pill-padding-block: 0; + --pill-padding-inline-start: var(--spacer-1); + --pill-padding-inline-end: var(--spacer-1); } } html[data-theme='light'] { .pill { &--style-always-white { - background: var(--theme-elevation-0); - color: var(--theme-elevation-800); - border: 1px solid var(--theme-elevation-100); + background: var(--bg-default-default); + color: var(--text-default); + border: 1px solid var(--border-default-default); &.pill--has-action { - &:hover, + &:hover { + background: var(--bg-default-secondary-hover); + } + &:active { - background: var(--theme-elevation-100); + background: var(--bg-default-secondary-pressed); } } } diff --git a/packages/ui/src/elements/Popup/PopupButtonList/index.css b/packages/ui/src/elements/Popup/PopupButtonList/index.css new file mode 100644 index 00000000000..5a33022f020 --- /dev/null +++ b/packages/ui/src/elements/Popup/PopupButtonList/index.css @@ -0,0 +1,85 @@ +@layer payload-default { + .popup-button-list { + display: flex; + flex-direction: column; + text-align: left; + } + + [dir='rtl'] .popup-button-list__text-align--left { + text-align: right; + } + + .popup-button-list__text-align--left { + text-align: left; + } + + .popup-button-list__text-align--center { + text-align: center; + } + + [dir='rtl'] .popup-button-list__text-align--right { + text-align: left; + } + + .popup-button-list__text-align--right { + text-align: right; + } + + .popup-button-list__button { + padding: 0 var(--spacer-2); + cursor: pointer; + text-align: inherit; + text-decoration: none; + border-radius: var(--radius-medium); + width: 100%; + height: 24px; + display: flex; + align-items: center; + color: var(--text-default-default); + font-family: var(--text-body-medium-font-family); + font-size: var(--text-body-medium-font-size); + font-weight: var(--text-body-medium-font-weight); + line-height: var(--text-body-medium-line-height); + letter-spacing: var(--text-letter-spacing); + } + + .popup-button-list__button button:focus-visible { + outline: none; + } + + .popup-button-list__button:hover, + .popup-button-list__button:focus-visible, + .popup-button-list__button:focus-within { + outline: none; + background-color: var(--bg-selected-strong); + color: var(--text-selected-onselected-strong); + } + + .popup-button-list__button--selected { + background-color: var(--bg-selected-default); + } + + .popup-button-list__button-size--medium .popup-button-list__button { + gap: var(--spacer-1); + min-height: var(--spacer-4); + padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-1); + } + + .popup-button-list__button-size--medium .popup-button-list__button svg { + width: 20px; + height: 20px; + flex-shrink: 0; + } + + .popup-button-list__disabled { + cursor: not-allowed; + color: var(--text-disabled-default); + } + + .popup-button-list__disabled:hover, + .popup-button-list__disabled:focus-visible, + .popup-button-list__disabled:focus-within { + background-color: transparent; + color: var(--text-disabled-default); + } +} diff --git a/packages/ui/src/elements/Popup/PopupButtonList/index.scss b/packages/ui/src/elements/Popup/PopupButtonList/index.scss deleted file mode 100644 index 48ae5e8915b..00000000000 --- a/packages/ui/src/elements/Popup/PopupButtonList/index.scss +++ /dev/null @@ -1,69 +0,0 @@ -@import '../../../scss/styles.scss'; - -@layer payload-default { - .popup-button-list { - --list-button-padding: calc(var(--base) * 0.5); - --popup-button-list-gap: 3px; - display: flex; - flex-direction: column; - text-align: left; - [dir='rtl'] &__text-align--left { - text-align: right; - } - &__text-align--left { - text-align: left; - } - - &__text-align--center { - text-align: center; - } - [dir='rtl'] &__text-align--right { - text-align: left; - } - &__text-align--right { - text-align: right; - } - - &__button { - @extend %btn-reset; - padding-left: var(--list-button-padding); - padding-right: var(--list-button-padding); - padding-top: calc(2px + var(--popup-button-list-gap) / 2); - padding-bottom: calc(2px + var(--popup-button-list-gap) / 2); - cursor: pointer; - text-align: inherit; - line-height: var(--base); - text-decoration: none; - border-radius: 3px; - width: 100%; - button { - @extend %btn-reset; - - &:focus-visible { - outline: none; - } - } - - &:hover, - &:focus-visible, - &:focus-within { - outline: none; - background-color: var(--popup-button-highlight); - } - } - - &__button--selected { - background-color: var(--theme-elevation-150); - } - - &__disabled { - cursor: not-allowed; - --popup-button-highlight: transparent; - background-color: var(--popup-button-highlight); - color: var(--theme-elevation-350); - &:hover { - --popup-button-highlight: var(--theme-elevation-50); - } - } - } -} diff --git a/packages/ui/src/elements/Popup/PopupButtonList/index.tsx b/packages/ui/src/elements/Popup/PopupButtonList/index.tsx index 64f856f98f4..13d9e7d6ee8 100644 --- a/packages/ui/src/elements/Popup/PopupButtonList/index.tsx +++ b/packages/ui/src/elements/Popup/PopupButtonList/index.tsx @@ -4,7 +4,7 @@ import type { LinkProps } from 'next/link.js' import * as React from 'react' import { Link } from '../../Link/index.js' -import './index.scss' +import './index.css' const baseClass = 'popup-button-list' @@ -12,7 +12,7 @@ export { PopupListDivider as Divider } from '../PopupDivider/index.js' export { PopupListGroupLabel as GroupLabel } from '../PopupGroupLabel/index.js' export const ButtonGroup: React.FC<{ - buttonSize?: 'default' | 'small' + buttonSize?: 'default' | 'medium' children: React.ReactNode className?: string textAlign?: 'center' | 'left' | 'right' diff --git a/packages/ui/src/elements/Popup/PopupTrigger/index.css b/packages/ui/src/elements/Popup/PopupTrigger/index.css new file mode 100644 index 00000000000..91f324b2073 --- /dev/null +++ b/packages/ui/src/elements/Popup/PopupTrigger/index.css @@ -0,0 +1,30 @@ +@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; + border-radius: var(--radius-medium); + } + + .popup-button--background { + background: transparent; + } + + .popup-button:hover:not(.popup-button--disabled) { + background: var(--bg-transparent-hover); + } + + .popup-button:active:not(.popup-button--disabled) { + background: var(--bg-transparent-pressed); + } + + .popup-button--disabled { + cursor: not-allowed; + } +} diff --git a/packages/ui/src/elements/Popup/PopupTrigger/index.scss b/packages/ui/src/elements/Popup/PopupTrigger/index.scss deleted file mode 100644 index 7a6826ed84b..00000000000 --- a/packages/ui/src/elements/Popup/PopupTrigger/index.scss +++ /dev/null @@ -1,39 +0,0 @@ -@import '../../../scss/styles.scss'; - -@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; - } - - &--size-xsmall { - padding: base(0.1); - } - - &--size-small { - padding: base(0.2); - } - - &--size-medium { - padding: base(0.3); - } - - &--size-large { - padding: base(0.4); - } - - &--disabled { - cursor: not-allowed; - } - } -} diff --git a/packages/ui/src/elements/Popup/PopupTrigger/index.tsx b/packages/ui/src/elements/Popup/PopupTrigger/index.tsx index 7b4d605ca8f..35ec1f98e49 100644 --- a/packages/ui/src/elements/Popup/PopupTrigger/index.tsx +++ b/packages/ui/src/elements/Popup/PopupTrigger/index.tsx @@ -1,7 +1,7 @@ 'use client' import React from 'react' -import './index.scss' +import './index.css' const baseClass = 'popup-button' @@ -13,7 +13,7 @@ export type PopupTriggerProps = { disabled?: boolean noBackground?: boolean setActive: (active: boolean, viaKeyboard?: boolean) => void - size?: 'large' | 'medium' | 'small' | 'xsmall' + size?: 'large' | 'medium' } export const PopupTrigger: React.FC = (props) => { diff --git a/packages/ui/src/elements/Popup/index.css b/packages/ui/src/elements/Popup/index.css new file mode 100644 index 00000000000..97c3f79529c --- /dev/null +++ b/packages/ui/src/elements/Popup/index.css @@ -0,0 +1,83 @@ +@layer payload-default { + .popup { + position: relative; + } + + .popup__trigger-wrap { + display: flex; + align-items: stretch; + height: 100%; + cursor: pointer; + } + + .popup__on-hover-watch { + display: contents; + } + + .popup__hidden-content { + display: none; + } + + .popup__content { + --popup-caret-size: 8px; + + position: absolute; + z-index: var(--z-popup); + background: var(--bg-elevated-default); + color: var(--text-default); + border-radius: var(--radius-large); + padding: var(--spacer-2); + min-width: 80px; + max-width: 400px; + box-shadow: + 0 2px 6px 0 rgba(0, 0, 0, 0.12), + 0 10px 16px 0 rgba(0, 0, 0, 0.08), + 0 0 0.5px 0 rgba(0, 0, 0, 0.12), + 0 0 0 1px rgba(0, 0, 0, 0.04); + } + + .popup__content.popup--size-small { + min-width: 100px; + } + + .popup__content.popup--size-large { + min-width: 200px; + } + + .popup__content.popup--size-fit-content { + min-width: fit-content; + } + + .popup__scroll-container { + overflow-y: auto; + max-height: calc(var(--base) * 10); + } + + .popup__scroll-container:not(.popup__scroll-container--show-scrollbar) { + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE/Edge */ + } + + .popup__scroll-container:not(.popup__scroll-container--show-scrollbar)::-webkit-scrollbar { + display: none; /* Chrome/Safari/Opera */ + } + + .popup__caret { + position: absolute; + width: 0; + height: 0; + border: var(--popup-caret-size) solid transparent; + left: var(--caret-left, 16px); + transform: translateX(-50%); + } + + .popup--v-bottom .popup__caret { + top: calc(var(--popup-caret-size) * -2); + border-bottom-color: var(--bg-elevated-default); + } + + .popup--v-top .popup__caret { + bottom: calc(var(--popup-caret-size) * -2); + border-top-color: var(--bg-elevated-default); + } +} diff --git a/packages/ui/src/elements/Popup/index.scss b/packages/ui/src/elements/Popup/index.scss deleted file mode 100644 index 65034084f59..00000000000 --- a/packages/ui/src/elements/Popup/index.scss +++ /dev/null @@ -1,83 +0,0 @@ -@import '../../scss/styles.scss'; - -@layer payload-default { - .popup { - position: relative; - - &__trigger-wrap { - display: flex; - align-items: stretch; - height: 100%; - cursor: pointer; - } - - &__on-hover-watch { - display: contents; - } - } - - .popup__hidden-content { - display: none; - } - - .popup__content { - --popup-caret-size: 8px; - --popup-button-highlight: var(--theme-elevation-150); - - position: absolute; - z-index: var(--z-popup); - background: var(--theme-input-bg); - color: var(--theme-text); - border-radius: 4px; - padding: calc(var(--base) * 0.5); - min-width: 150px; - max-width: calc(100vw - var(--base)); - @include shadow-lg; - - &.popup--size-xsmall { - min-width: 80px; - } - &.popup--size-small { - min-width: 100px; - } - &.popup--size-large { - min-width: 200px; - } - &.popup--size-fit-content { - min-width: fit-content; - } - } - - .popup__scroll-container { - overflow-y: auto; - max-height: calc(var(--base) * 10); - - &:not(.popup__scroll-container--show-scrollbar) { - scrollbar-width: none; // Firefox - -ms-overflow-style: none; // IE/Edge - - &::-webkit-scrollbar { - display: none; // Chrome/Safari/Opera - } - } - } - - .popup__caret { - position: absolute; - width: 0; - height: 0; - border: var(--popup-caret-size) solid transparent; - left: var(--caret-left, 16px); - transform: translateX(-50%); - - .popup--v-bottom & { - top: calc(var(--popup-caret-size) * -2); - border-bottom-color: var(--theme-input-bg); - } - - .popup--v-top & { - bottom: calc(var(--popup-caret-size) * -2); - border-top-color: var(--theme-input-bg); - } - } -} diff --git a/packages/ui/src/elements/Popup/index.tsx b/packages/ui/src/elements/Popup/index.tsx index c81ce62649e..f1e49cf3308 100644 --- a/packages/ui/src/elements/Popup/index.tsx +++ b/packages/ui/src/elements/Popup/index.tsx @@ -7,7 +7,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react' import { createPortal } from 'react-dom' import { useEffectEvent } from '../../hooks/useEffectEvent.js' -import './index.scss' +import './index.css' import { PopupTrigger } from './PopupTrigger/index.js' const baseClass = 'popup' @@ -38,7 +38,7 @@ export type PopupProps = { * The class name to apply to the button that triggers the popup. */ buttonClassName?: string - buttonSize?: 'large' | 'medium' | 'small' | 'xsmall' + buttonSize?: 'large' | 'medium' buttonType?: 'custom' | 'default' | 'none' caret?: boolean children?: React.ReactNode @@ -448,6 +448,7 @@ export const Popup: React.FC = (props) => { `${baseClass}__hidden-content` } data-popup-id={id || undefined} + data-theme="dark" ref={popupRef} >
    * { + margin: 0; + padding-top: 0; + padding-bottom: 0; + color: currentColor; + + .field-label { + padding-bottom: 0; + } + } + } + } + + .value-container__label { + color: var(--text-secondary); + } + + .react-select .rs__value-container--is-multi { + width: calc(100% + 0.3125rem); + + &.rs__value-container--has-value { + padding: 0; + margin-inline-start: -0.25rem; + } + } +} diff --git a/packages/ui/src/elements/ReactSelect/ValueContainer/index.tsx b/packages/ui/src/elements/ReactSelect/ValueContainer/index.tsx index 12302fa967a..5624ae23a5f 100644 --- a/packages/ui/src/elements/ReactSelect/ValueContainer/index.tsx +++ b/packages/ui/src/elements/ReactSelect/ValueContainer/index.tsx @@ -9,7 +9,7 @@ import { components as SelectComponents } from 'react-select' import type { Option } from '../types.js' import { useTranslation } from '../../../providers/Translation/index.js' -import './index.scss' +import './index.css' const baseClass = 'value-container' diff --git a/packages/ui/src/elements/ReactSelect/index.css b/packages/ui/src/elements/ReactSelect/index.css new file mode 100644 index 00000000000..0e2c3f842db --- /dev/null +++ b/packages/ui/src/elements/ReactSelect/index.css @@ -0,0 +1,120 @@ +@layer payload-default { + .react-select-container { + width: 100%; + } + + .react-select { + .rs__control { + width: 100%; + min-height: 2rem; + background: var(--bg-default-secondary); + border: 1px solid transparent; + border-radius: var(--radius-medium); + color: var(--text-default); + font-family: var(--text-body-medium-font-family); + font-size: var(--text-body-medium-font-size); + font-weight: var(--text-body-medium-font-weight); + line-height: var(--text-body-medium-line-height); + appearance: none; + -webkit-appearance: none; + transition-property: border-color, box-shadow, background-color; + transition-duration: 100ms; + transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1); + height: auto; + padding: 0 var(--spacer-4) 0 var(--spacer-2); + flex-wrap: nowrap; + + &:focus, + &:focus-within, + &:active { + border-color: var(--border-selected-strong); + outline: 0; + } + } + + .rs__menu-notice { + padding: 0.625rem 0.75rem; + } + + .rs__indicator { + padding: 0 0.25rem; + cursor: pointer; + } + + .rs__indicator-separator { + display: none; + } + + .rs__input-container { + color: var(--text-default); + } + + .rs__input { + font-family: var(--text-body-medium-font-family); + width: 0.625rem; + } + + .rs__menu { + z-index: 4; + border-radius: var(--radius-large); + box-shadow: + 0 0 0 1px rgba(0, 0, 0, 0.04), + 0 0 0.5px rgba(0, 0, 0, 0.12), + 0 10px 16px rgba(0, 0, 0, 0.08), + 0 2px 6px rgba(0, 0, 0, 0.12); + background: var(--bg-default); + overflow: hidden; + } + + .rs__menu-list { + max-height: 15rem; + overflow-y: auto; + } + + .rs__group-heading { + color: var(--text-tertiary); + padding: 0.75rem 1rem 0.25rem 1rem; + font-family: var(--text-body-medium-font-family); + font-size: var(--text-body-medium-font-size); + font-weight: var(--text-body-medium-font-weight); + line-height: var(--text-body-medium-line-height); + } + + .rs__option { + font-family: var(--text-body-medium-font-family); + font-size: var(--text-body-medium-font-size); + font-weight: var(--text-body-medium-font-weight); + line-height: var(--text-body-medium-line-height); + height: 2rem; + display: flex; + align-items: center; + padding: 0 0.25rem 0 1rem; + color: var(--text-default); + } + + .rs__option--is-focused { + background-color: var(--bg-default-secondary); + } + + .rs__option--is-selected { + background-color: var(--bg-selected); + } + + &.rs--is-disabled .rs__control { + background: var(--bg-disabled-default); + color: var(--text-disabled-default); + } + } + + .react-select--error, + .react-select--error:hover, + .react-select--error:focus-within { + div.rs__control { + border: 1px solid var(--border-danger-strong); + + & > div.rs__indicator > button.dropdown-indicator[type='button'] { + border: none; + } + } + } +} diff --git a/packages/ui/src/elements/ReactSelect/index.tsx b/packages/ui/src/elements/ReactSelect/index.tsx index 8da7e18677e..859e8319b54 100644 --- a/packages/ui/src/elements/ReactSelect/index.tsx +++ b/packages/ui/src/elements/ReactSelect/index.tsx @@ -16,7 +16,7 @@ import { ShimmerEffect } from '../ShimmerEffect/index.js' import { ClearIndicator } from './ClearIndicator/index.js' import { Control } from './Control/index.js' import { DropdownIndicator } from './DropdownIndicator/index.js' -import './index.scss' +import './index.css' import { Input } from './Input/index.js' import { generateMultiValueDraggableID, MultiValue } from './MultiValue/index.js' import { MultiValueLabel } from './MultiValueLabel/index.js' diff --git a/packages/ui/src/elements/RestoreButton/index.scss b/packages/ui/src/elements/RestoreButton/index.scss index 130b95e3f4e..be13f8d515c 100644 --- a/packages/ui/src/elements/RestoreButton/index.scss +++ b/packages/ui/src/elements/RestoreButton/index.scss @@ -9,7 +9,6 @@ height: 100%; &__toggle { - @extend %btn-reset; } &__checkbox { diff --git a/packages/ui/src/elements/RestoreMany/index.scss b/packages/ui/src/elements/RestoreMany/index.scss index 5b1905268a5..95d4883e70e 100644 --- a/packages/ui/src/elements/RestoreMany/index.scss +++ b/packages/ui/src/elements/RestoreMany/index.scss @@ -9,7 +9,6 @@ height: 100%; &__toggle { - @extend %btn-reset; } &__checkbox { diff --git a/packages/ui/src/elements/ShimmerEffect/index.scss b/packages/ui/src/elements/ShimmerEffect/index.scss index 66339bc2949..ba478f1124f 100644 --- a/packages/ui/src/elements/ShimmerEffect/index.scss +++ b/packages/ui/src/elements/ShimmerEffect/index.scss @@ -6,6 +6,7 @@ position: relative; overflow: hidden; background-color: var(--shine-bg); + border-radius: var(--radius-medium); &__shine { position: absolute; diff --git a/packages/ui/src/elements/ThumbnailCard/index.css b/packages/ui/src/elements/ThumbnailCard/index.css new file mode 100644 index 00000000000..6f2239af201 --- /dev/null +++ b/packages/ui/src/elements/ThumbnailCard/index.css @@ -0,0 +1,58 @@ +@layer payload-default { + .thumbnail-card { + display: flex; + flex-direction: column; + gap: var(--spacer-2); + align-items: flex-start; + width: 100%; + background: transparent; + border: 0; + padding: 0; + cursor: pointer; + + &--has-on-click { + cursor: pointer; + } + + &--align-label-center { + text-align: center; + } + } + + .thumbnail-card__thumbnail { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + aspect-ratio: 1 / 1; + background: var(--bg-default-secondary); + border-radius: var(--radius-medium); + overflow: hidden; + border: 2px solid transparent; + transition: border-color 100ms ease; + } + + .thumbnail-card--has-on-click:hover .thumbnail-card__thumbnail, + .thumbnail-card--has-on-click:focus-visible .thumbnail-card__thumbnail { + border-color: var(--border-default); + } + + .thumbnail-card--selected .thumbnail-card__thumbnail { + border-color: var(--border-selected); + } + + .thumbnail-card__label { + min-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-align: left; + color: var(--color-text); + font-family: var(--text-body-medium-font-family); + font-size: var(--text-body-medium-font-size); + font-style: normal; + font-weight: var(--text-body-medium-font-weight); + line-height: var(--text-body-medium-line-height); + letter-spacing: 0.055px; + } +} diff --git a/packages/ui/src/elements/ThumbnailCard/index.scss b/packages/ui/src/elements/ThumbnailCard/index.scss deleted file mode 100644 index 534ba87f99b..00000000000 --- a/packages/ui/src/elements/ThumbnailCard/index.scss +++ /dev/null @@ -1,42 +0,0 @@ -@import '../../scss/styles.scss'; - -@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); - padding: base(0.5); - - &__label { - padding: base(0.75) base(0.5) base(0.25) base(0.5); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-weight: 600; - } - - &--has-on-click { - cursor: pointer; - - &:hover, - &:focus, - &:active { - border: 1px solid var(--theme-elevation-350); - } - } - - &--align-label-center { - text-align: center; - } - - &__thumbnail { - display: flex; - align-items: center; - justify-content: center; - } - } -} diff --git a/packages/ui/src/elements/ThumbnailCard/index.tsx b/packages/ui/src/elements/ThumbnailCard/index.tsx index 8029e29240d..47f2ee39f57 100644 --- a/packages/ui/src/elements/ThumbnailCard/index.tsx +++ b/packages/ui/src/elements/ThumbnailCard/index.tsx @@ -6,15 +6,17 @@ import React from 'react' import { useConfig } from '../../providers/Config/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { formatDocTitle } from '../../utilities/formatDocTitle/index.js' -import './index.scss' +import './index.css' export type ThumbnailCardProps = { alignLabel?: 'center' | 'left' className?: string collection?: ClientCollectionConfig doc?: { filename?: string } & TypeWithID + isSelected?: boolean label?: string onClick?: () => void + onDoubleClick?: () => void onKeyDown?: () => void thumbnail: React.ReactNode } @@ -27,8 +29,10 @@ export const ThumbnailCard: React.FC = (props) => { className, collection, doc, + isSelected, label: labelFromProps, onClick, + onDoubleClick, thumbnail, } = props @@ -40,6 +44,7 @@ export const ThumbnailCard: React.FC = (props) => { baseClass, className, typeof onClick === 'function' && `${baseClass}--has-on-click`, + isSelected && `${baseClass}--selected`, alignLabel && `${baseClass}--align-label-${alignLabel}`, ] .filter(Boolean) @@ -58,7 +63,13 @@ export const ThumbnailCard: React.FC = (props) => { } return ( - diff --git a/packages/ui/src/elements/Tooltip/index.css b/packages/ui/src/elements/Tooltip/index.css new file mode 100644 index 00000000000..16d586af134 --- /dev/null +++ b/packages/ui/src/elements/Tooltip/index.css @@ -0,0 +1,105 @@ +@layer payload-default { + .tooltip { + --caret-size: 0.375rem; + + opacity: 0; + background-color: var(--bg-inverse-default); + position: absolute; + z-index: 3; + left: 50%; + padding: var(--spacer-1); + color: var(--text-inverse-oninverse); + font-family: var(--text-body-medium-font-family); + font-size: var(--text-body-medium-font-size); + font-weight: var(--text-body-medium-font-weight); + line-height: var(--text-body-medium-line-height); + letter-spacing: var(--text-letter-spacing); + white-space: nowrap; + max-width: 11.25rem; + border-radius: var(--radius-medium); + box-shadow: + 0 0 0.5px rgba(0, 0, 0, 0.15), + 0 5px 12px rgba(0, 0, 0, 0.13), + 0 1px 3px rgba(0, 0, 0, 0.1); + 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; + } + + &.field-error { + background-color: var(--bg-danger-default); + color: var(--text-danger-ondanger); + + &.tooltip--position-top::after { + border-top-color: var(--bg-danger-default); + } + + &.tooltip--position-bottom::after { + border-bottom-color: var(--bg-danger-default); + } + } + + .tooltip-content { + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + } + + @media (max-width: 768px) { + display: none; + } + } + + .tooltip--show { + visibility: visible; + opacity: 1; + transition: opacity 0.2s ease-in-out; + cursor: default; + } + + .tooltip--caret-center { + &::after { + left: 50%; + } + } + + .tooltip--caret-left { + &::after { + left: 0; + } + } + + .tooltip--caret-right { + &::after { + right: 0; + } + } + + .tooltip--position-top { + top: calc(var(--spacer-4) * -1); + transform: translate3d(-50%, calc(var(--caret-size) * -1), 0); + + &::after { + bottom: 1px; + border-top: var(--caret-size) solid var(--bg-inverse-default); + } + } + + .tooltip--position-bottom { + bottom: calc(var(--spacer-4) * -1); + transform: translate3d(-50%, var(--caret-size), 0); + + &::after { + bottom: calc(100% + var(--caret-size) - 1px); + border-bottom: var(--caret-size) solid var(--bg-inverse-default); + } + } +} diff --git a/packages/ui/src/elements/Tooltip/index.scss b/packages/ui/src/elements/Tooltip/index.scss deleted file mode 100644 index 74f7f8fb39a..00000000000 --- a/packages/ui/src/elements/Tooltip/index.scss +++ /dev/null @@ -1,101 +0,0 @@ -@import '../../scss/styles.scss'; - -@layer payload-default { - .tooltip { - --caret-size: 6px; - - opacity: 0; - background-color: var(--theme-elevation-800); - position: absolute; - z-index: 3; - left: 50%; - padding: base(0.2) base(0.4); - color: var(--theme-elevation-0); - line-height: base(0.75); - font-weight: normal; - white-space: nowrap; - border-radius: 2px; - visibility: hidden; - - &::after { - content: ' '; - display: block; - position: absolute; - transform: translate3d(-50%, 100%, 0); - width: 0; - height: 0; - border-left: var(--caret-size) solid transparent; - border-right: var(--caret-size) solid transparent; - } - - &--show { - visibility: visible; - opacity: 1; - transition: opacity 0.2s ease-in-out; - cursor: default; - } - - &--caret-center { - &::after { - left: 50%; - } - } - - &--caret-left { - &::after { - left: calc(var(--base) * 0.5); - } - } - - &--caret-right { - &::after { - right: calc(var(--base) * 0.5); - } - } - - &--position-top { - top: calc(var(--base) * -1.25); - transform: translate3d(-50%, calc(var(--caret-size) * -1), 0); - - &::after { - bottom: 1px; - border-top: var(--caret-size) solid var(--theme-elevation-800); - } - } - - &--position-bottom { - bottom: calc(var(--base) * -1.25); - transform: translate3d(-50%, var(--caret-size), 0); - - &::after { - bottom: calc(100% + var(--caret-size) - 1px); - border-bottom: var(--caret-size) solid var(--theme-elevation-800); - } - } - - .tooltip-content { - overflow: hidden; - text-overflow: ellipsis; - width: 100%; - } - - @include mid-break { - display: none; - } - } - - 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/Tooltip/index.tsx b/packages/ui/src/elements/Tooltip/index.tsx index caa2be0352d..cc3fb7146b8 100644 --- a/packages/ui/src/elements/Tooltip/index.tsx +++ b/packages/ui/src/elements/Tooltip/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react' import { useIntersect } from '../../hooks/useIntersect.js' -import './index.scss' +import './index.css' export type Props = { alignCaret?: 'center' | 'left' | 'right' diff --git a/packages/ui/src/elements/Upload/index.tsx b/packages/ui/src/elements/Upload/index.tsx index d831f7562ed..c53fafa9e89 100644 --- a/packages/ui/src/elements/Upload/index.tsx +++ b/packages/ui/src/elements/Upload/index.tsx @@ -76,7 +76,7 @@ export const UploadActions = ({ onClick={() => { openModal(sizePreviewSlug) }} - size="small" + size="medium" > {t('upload:previewSizes')} @@ -89,7 +89,7 @@ export const UploadActions = ({ onClick={() => { openModal(editDrawerSlug) }} - size="small" + size="medium" > {t('upload:editImage')} @@ -407,7 +407,7 @@ export const Upload_v4: React.FC = (props) => { inputRef.current.click() } }} - size="small" + size="medium" > {t('upload:selectFile')} @@ -435,7 +435,7 @@ export const Upload_v4: React.FC = (props) => { setUploadControlFile(null) setUploadControlFileName(null) }} - size="small" + size="medium" > {t('upload:pasteURL')} diff --git a/packages/ui/src/fields/Array/ArrayRow.tsx b/packages/ui/src/fields/Array/ArrayRow.tsx index 9be8930c8b7..2bd8fd1496d 100644 --- a/packages/ui/src/fields/Array/ArrayRow.tsx +++ b/packages/ui/src/fields/Array/ArrayRow.tsx @@ -21,7 +21,7 @@ import { RenderFields } from '../../forms/RenderFields/index.js' import { RowLabel } from '../../forms/RowLabel/index.js' import { useThrottledValue } from '../../hooks/useThrottledValue.js' import { useTranslation } from '../../providers/Translation/index.js' -import './index.scss' +import './index.css' const baseClass = 'array-field' @@ -143,10 +143,7 @@ export const ArrayRow: React.FC = ({ : undefined } header={ -
    +
    {isLoading ? ( ) : ( diff --git a/packages/ui/src/fields/Array/index.css b/packages/ui/src/fields/Array/index.css new file mode 100644 index 00000000000..02389c4d8d2 --- /dev/null +++ b/packages/ui/src/fields/Array/index.css @@ -0,0 +1,98 @@ +@layer payload-default { + .array-field { + display: flex; + flex-direction: column; + gap: var(--spacer-2); + } + + .array-field__header { + display: flex; + flex-direction: column; + gap: var(--spacer-2); + } + + .array-field__header__header-content { + display: flex; + flex-direction: column; + gap: var(--spacer-1); + } + + .array-field--has-no-error > .array-field__header .array-field__header-content { + color: var(--text-default); + } + + .array-field--has-error > .array-field__header .array-field__header-content { + color: var(--text-danger-default); + } + + .array-field__header-content { + display: flex; + align-items: center; + gap: 0.625rem; + } + + .array-field__header-wrap { + display: flex; + align-items: flex-end; + width: 100%; + justify-content: space-between; + } + + .array-field__header-actions { + list-style: none; + margin: 0; + padding: 0; + display: flex; + color: var(--text-default); + } + + .array-field__header-action { + cursor: pointer; + margin-left: 0.625rem; + + &:hover, + &:focus-visible { + text-decoration: underline; + color: var(--text-secondary); + } + } + + .array-field__row-header { + display: flex; + align-items: center; + gap: 0.625rem; + pointer-events: none; + } + + .array-field__draggable-rows { + display: flex; + flex-direction: column; + gap: var(--spacer-2); + } + + .array-field__title { + margin-bottom: 0; + } + + .array-field__add-row.btn { + align-self: flex-start; + margin: 2px 0; + color: var(--text-tertiary); + + &:hover:not(:disabled) { + color: var(--text-default); + } + + &:disabled { + color: var(--text-disabled-default); + } + + .btn__icon { + border-color: currentColor; + + path { + stroke: currentColor; + } + } + } +} diff --git a/packages/ui/src/fields/Array/index.scss b/packages/ui/src/fields/Array/index.scss deleted file mode 100644 index 0b622169f70..00000000000 --- a/packages/ui/src/fields/Array/index.scss +++ /dev/null @@ -1,121 +0,0 @@ -@import '../../scss/styles.scss'; - -@layer payload-default { - .array-field { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 2); - - &__header { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 2); - - &__header-content { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 4); - } - } - - &--has-no-error { - > .array-field__header .array-field__header-content { - color: var(--theme-text); - } - } - - &__header-content { - display: flex; - align-items: center; - gap: base(0.5); - } - - &__header-wrap { - display: flex; - align-items: flex-end; - width: 100%; - justify-content: space-between; - } - - &__header-actions { - list-style: none; - margin: 0; - padding: 0; - display: flex; - color: var(--theme-elevation-800); - } - - &__header-action { - @extend %btn-reset; - cursor: pointer; - margin-left: base(0.5); - - &:hover, - &:focus-visible { - text-decoration: underline; - color: var(--theme-elevation-600); - } - } - - &__row-header { - display: flex; - align-items: center; - gap: base(0.5); - pointer-events: none; - } - - &__draggable-rows { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 2); - } - - &__title { - margin-bottom: 0; - } - - &__add-row.btn { - align-self: flex-start; - margin: 2px 0; - --btn-color: var(--theme-elevation-400); - - &:hover:not(:disabled) { - --btn-color: var(--theme-elevation-800); - } - - &:disabled { - --btn-color: var(--theme-elevation-300); - } - - .btn__label { - color: var(--btn-color); - } - .btn__icon { - border-color: var(--btn-color); - path { - stroke: var(--btn-color); - } - } - } - } - - html[data-theme='light'] { - .array-field { - &--has-error { - > .array-field__header .array-field__header-content { - color: var(--theme-error-750); - } - } - } - } - - html[data-theme='dark'] { - .array-field { - &--has-error { - > .array-field__header .array-field__header-content { - color: var(--theme-error-500); - } - } - } - } -} diff --git a/packages/ui/src/fields/Array/index.tsx b/packages/ui/src/fields/Array/index.tsx index 24b1799ce99..f4b47ff0346 100644 --- a/packages/ui/src/fields/Array/index.tsx +++ b/packages/ui/src/fields/Array/index.tsx @@ -39,7 +39,7 @@ import { scrollToID } from '../../utilities/scrollToID.js' import { mergeFieldStyles } from '../mergeFieldStyles.js' import { fieldBaseClass } from '../shared/index.js' import { ArrayRow } from './ArrayRow.js' -import './index.scss' +import './index.css' const baseClass = 'array-field' diff --git a/packages/ui/src/fields/Blocks/BlockSelector/BlockSearch/index.scss b/packages/ui/src/fields/Blocks/BlockSelector/BlockSearch/index.css similarity index 50% rename from packages/ui/src/fields/Blocks/BlockSelector/BlockSearch/index.scss rename to packages/ui/src/fields/Blocks/BlockSelector/BlockSearch/index.css index 0d13c3c7cdf..741d8dcf36c 100644 --- a/packages/ui/src/fields/Blocks/BlockSelector/BlockSearch/index.scss +++ b/packages/ui/src/fields/Blocks/BlockSelector/BlockSearch/index.css @@ -1,8 +1,3 @@ -@import '../../../../scss/styles.scss'; - -$icon-width: base(2); -$icon-margin: base(0.25); - @layer payload-default { .block-search { position: sticky; @@ -12,27 +7,23 @@ $icon-margin: base(0.25); align-items: center; z-index: 1; - &__input { - @include formInput; - } - .icon--search { position: absolute; top: 50%; transform: translate3d(0, -50%, 0); right: 0; - width: $icon-width; - margin: 0 $icon-margin; + width: 2.5rem; + margin: 0 0.3125rem; .stroke { - stroke: var(--theme-elevation-300); + stroke: var(--text-tertiary); } } + } - @include mid-break { - &__input { - margin-bottom: 0; - } + @media (max-width: 1024px) { + .block-search__input { + margin-bottom: 0; } } } diff --git a/packages/ui/src/fields/Blocks/BlockSelector/BlockSearch/index.tsx b/packages/ui/src/fields/Blocks/BlockSelector/BlockSearch/index.tsx index e5b88b0b801..aeeddba79e8 100644 --- a/packages/ui/src/fields/Blocks/BlockSelector/BlockSearch/index.tsx +++ b/packages/ui/src/fields/Blocks/BlockSelector/BlockSearch/index.tsx @@ -3,7 +3,7 @@ import React from 'react' import { SearchIcon } from '../../../../icons/Search/index.js' import { useTranslation } from '../../../../providers/Translation/index.js' -import './index.scss' +import './index.css' const baseClass = 'block-search' diff --git a/packages/ui/src/fields/Blocks/BlockSelector/index.css b/packages/ui/src/fields/Blocks/BlockSelector/index.css new file mode 100644 index 00000000000..b12247d93c5 --- /dev/null +++ b/packages/ui/src/fields/Blocks/BlockSelector/index.css @@ -0,0 +1,98 @@ +@layer payload-default { + .blocks-drawer__blocks-wrapper { + padding-top: 1.875rem; + } + + .blocks-drawer__blocks { + position: relative; + padding: 0; + list-style: none; + display: grid; + grid-template-columns: repeat(6, minmax(0, 1fr)); + gap: 1.25rem; + } + + .blocks-drawer__default-image { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + aspect-ratio: 3 / 2; + overflow: hidden; + + img, + svg { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + .blocks-drawer__block-groups { + padding: 0; + display: flex; + flex-direction: column; + gap: 1.875rem; + } + + .blocks-drawer__block-group { + list-style: none; + } + + .blocks-drawer__block-group-label { + padding-bottom: 0.625rem; + } + + .blocks-drawer__block-group-none { + order: 1; + padding-top: 1.875rem; + border-top: 1px solid var(--border-default); + + &:only-child { + padding-top: 0; + border-top: 0; + } + } + + @media (max-width: 1440px) { + .blocks-drawer__blocks { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + } + + @media (max-width: 1024px) { + .blocks-drawer__blocks-wrapper { + padding-top: 2.1875rem; + } + + .blocks-drawer__blocks { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .blocks-drawer__block-groups { + gap: 2.1875rem; + } + + .blocks-drawer__block-group-none { + padding-top: 2.1875rem; + } + } + + @media (max-width: 768px) { + .blocks-drawer__blocks-wrapper { + padding-top: 0.9375rem; + } + + .blocks-drawer__blocks { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .blocks-drawer__block-groups { + gap: 0.9375rem; + } + + .blocks-drawer__block-group-none { + padding-top: 0.9375rem; + } + } +} diff --git a/packages/ui/src/fields/Blocks/BlockSelector/index.scss b/packages/ui/src/fields/Blocks/BlockSelector/index.scss deleted file mode 100644 index c090440a191..00000000000 --- a/packages/ui/src/fields/Blocks/BlockSelector/index.scss +++ /dev/null @@ -1,102 +0,0 @@ -@import '../../../scss/styles.scss'; - -@layer payload-default { - .blocks-drawer { - &__blocks-wrapper { - padding-top: base(1.5); - } - - &__blocks { - position: relative; - padding: 0; - list-style: none; - display: grid; - grid-template-columns: repeat(6, minmax(0, 1fr)); - gap: base(1); - } - - &__default-image { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - aspect-ratio: 3 / 2; - overflow: hidden; - - img, - svg { - width: 100%; - height: 100%; - object-fit: cover; - } - } - - &__block-groups { - padding: 0; - display: flex; - flex-direction: column; - gap: base(1.5); - } - - &__block-group { - list-style: none; - } - - &__block-group-label { - padding-bottom: base(0.5); - } - - &__block-group-none { - order: 1; - padding-top: base(1.5); - border-top: 1px solid var(--theme-border-color); - - &:only-child { - padding-top: 0; - border-top: 0; - } - } - - @include large-break { - &__blocks { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - } - - @include mid-break { - &__blocks-wrapper { - padding-top: base(1.75); - } - - &__blocks { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - &__block-groups { - gap: base(1.75); - } - - &__block-group-none { - padding-top: base(1.75); - } - } - - @include small-break { - &__blocks-wrapper { - padding-top: base(0.75); - } - - &__blocks { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - &__block-groups { - gap: base(0.75); - } - - &__block-group-none { - padding-top: base(0.75); - } - } - } -} diff --git a/packages/ui/src/fields/Blocks/BlockSelector/index.tsx b/packages/ui/src/fields/Blocks/BlockSelector/index.tsx index af1bd333ce3..a217a39e478 100644 --- a/packages/ui/src/fields/Blocks/BlockSelector/index.tsx +++ b/packages/ui/src/fields/Blocks/BlockSelector/index.tsx @@ -11,7 +11,7 @@ import { useControllableState } from '../../../hooks/useControllableState.js' import { useConfig } from '../../../providers/Config/index.js' import { useTranslation } from '../../../providers/Translation/index.js' import { BlockSearch } from './BlockSearch/index.js' -import './index.scss' +import './index.css' export type Props = { readonly blocks: (ClientBlock | string)[] diff --git a/packages/ui/src/fields/Blocks/SectionTitle/index.css b/packages/ui/src/fields/Blocks/SectionTitle/index.css new file mode 100644 index 00000000000..62bb3cf6723 --- /dev/null +++ b/packages/ui/src/fields/Blocks/SectionTitle/index.css @@ -0,0 +1,61 @@ +@layer payload-default { + .section-title { + position: relative; + min-width: 5rem; + 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%; + } + } + + .section-title:after, + .section-title__input { + font-family: var(--text-body-medium-font-family); + font-weight: 600; + font-size: 0.78125rem; + padding: 0; + width: 100%; + } + + .section-title__input { + color: var(--text-default); + 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(--border-default); + } + + &:hover, + &:focus { + outline: 0; + } + + &:focus { + box-shadow: none; + } + } +} diff --git a/packages/ui/src/fields/Blocks/SectionTitle/index.scss b/packages/ui/src/fields/Blocks/SectionTitle/index.scss deleted file mode 100644 index 0736bf691cc..00000000000 --- a/packages/ui/src/fields/Blocks/SectionTitle/index.scss +++ /dev/null @@ -1,63 +0,0 @@ -@import '../../../scss/styles.scss'; - -@layer payload-default { - .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%; - 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/SectionTitle/index.tsx b/packages/ui/src/fields/Blocks/SectionTitle/index.tsx index 12f46c50125..7efcdae7688 100644 --- a/packages/ui/src/fields/Blocks/SectionTitle/index.tsx +++ b/packages/ui/src/fields/Blocks/SectionTitle/index.tsx @@ -3,7 +3,7 @@ import React from 'react' import { useField } from '../../../forms/useField/index.js' import { useTranslation } from '../../../providers/Translation/index.js' -import './index.scss' +import './index.css' const baseClass = 'section-title' diff --git a/packages/ui/src/fields/Blocks/index.css b/packages/ui/src/fields/Blocks/index.css new file mode 100644 index 00000000000..15d9ffe687d --- /dev/null +++ b/packages/ui/src/fields/Blocks/index.css @@ -0,0 +1,106 @@ +@layer payload-default { + .blocks-field { + display: flex; + flex-direction: column; + gap: var(--spacer-2); + } + + .blocks-field__header h3 { + margin: 0; + } + + .blocks-field__header-wrap { + display: flex; + align-items: flex-end; + width: 100%; + justify-content: space-between; + } + + .blocks-field__heading-with-error { + display: flex; + align-items: center; + gap: 0.625rem; + } + + .blocks-field--has-no-error > .array-field__header .array-field__heading-with-error { + color: var(--text-default); + } + + .blocks-field--has-error > .array-field__header { + color: var(--text-danger-default); + } + + .blocks-field--has-error .section-title__input, + .blocks-field--has-error .blocks-field__heading-with-error { + color: var(--text-danger-default); + } + + .blocks-field--has-error .blocks-field__row--no-errors .section-title__input, + .blocks-field--has-error .blocks-field__row--no-errors .blocks-field__heading-with-error, + .blocks-field--has-error .blocks-field--has-no-error .section-title__input, + .blocks-field--has-error .blocks-field--has-no-error .blocks-field__heading-with-error { + color: var(--text-default); + } + + .blocks-field__error-pill { + align-self: center; + } + + .blocks-field__header-actions { + list-style: none; + margin: 0; + padding: 0; + display: flex; + } + + .blocks-field__header-action { + cursor: pointer; + margin-left: 0.625rem; + + &:hover, + &:focus-visible { + text-decoration: underline; + } + } + + .blocks-field__block-header { + display: inline-flex; + max-width: 100%; + width: 100%; + overflow: hidden; + gap: 0.46875rem; + } + + .blocks-field__block-number { + flex-shrink: 0; + } + + .blocks-field__block-pill { + flex-shrink: 0; + display: block; + line-height: unset; + } + + .blocks-field__rows { + display: flex; + flex-direction: column; + gap: var(--spacer-2); + } + + .blocks-field__drawer-toggler { + background-color: transparent; + margin: 0; + padding: 0; + border: none; + align-self: flex-start; + + .btn { + color: var(--text-tertiary); + margin: 0; + + &:hover { + color: var(--text-default); + } + } + } +} diff --git a/packages/ui/src/fields/Blocks/index.scss b/packages/ui/src/fields/Blocks/index.scss deleted file mode 100644 index 80943273162..00000000000 --- a/packages/ui/src/fields/Blocks/index.scss +++ /dev/null @@ -1,137 +0,0 @@ -@import '../../scss/styles.scss'; - -@layer payload-default { - .blocks-field { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 2); - - &__header { - h3 { - margin: 0; - } - } - - &__header-wrap { - display: flex; - align-items: flex-end; - width: 100%; - justify-content: space-between; - } - - &__heading-with-error { - display: flex; - align-items: center; - gap: base(0.5); - } - - &--has-no-error { - > .array-field__header .array-field__heading-with-error { - color: var(--theme-text); - } - } - - &--has-error { - > .array-field__header { - color: var(--theme-error-500); - } - } - - &__error-pill { - align-self: center; - } - - &__header-actions { - list-style: none; - margin: 0; - padding: 0; - display: flex; - } - - &__header-action { - @extend %btn-reset; - cursor: pointer; - margin-left: base(0.5); - - &:hover, - &:focus-visible { - text-decoration: underline; - } - } - - &__block-header { - display: inline-flex; - max-width: 100%; - width: 100%; - overflow: hidden; - gap: base(0.375); - } - - &__block-number { - flex-shrink: 0; - } - - &__block-pill { - flex-shrink: 0; - display: block; - line-height: unset; - } - - &__rows { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 2); - } - - &__drawer-toggler { - background-color: transparent; - margin: 0; - padding: 0; - border: none; - align-self: flex-start; - - .btn { - color: var(--theme-elevation-400); - margin: 0; - - &:hover { - color: var(--theme-elevation-800); - } - } - } - } - - html[data-theme='light'] { - .blocks-field--has-error { - .section-title__input, - .blocks-field__heading-with-error { - color: var(--theme-error-750); - } - - .blocks-field__row--no-errors, - .blocks-field--has-no-error { - .section-title__input, - .blocks-field__heading-with-error { - color: var(--theme-text); - } - } - } - } - - html[data-theme='dark'] { - .blocks-field--has-error { - .section-title__input, - .blocks-field__heading-with-error { - color: var(--theme-error-500); - } - - .blocks-field__row--no-errors, - .blocks-field--has-no-error { - .section-title__input, - .blocks-field__heading-with-error { - color: var(--theme-text); - } - } - } - } -} diff --git a/packages/ui/src/fields/Blocks/index.tsx b/packages/ui/src/fields/Blocks/index.tsx index 10d6307745f..b5fdd3d0cfd 100644 --- a/packages/ui/src/fields/Blocks/index.tsx +++ b/packages/ui/src/fields/Blocks/index.tsx @@ -31,7 +31,7 @@ import { useDocumentInfo } from '../../providers/DocumentInfo/index.js' import { useLocale } from '../../providers/Locale/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { scrollToID } from '../../utilities/scrollToID.js' -import './index.scss' +import './index.css' import { FieldDescription } from '../FieldDescription/index.js' import { FieldError } from '../FieldError/index.js' import { FieldLabel } from '../FieldLabel/index.js' diff --git a/packages/ui/src/fields/Checkbox/index.css b/packages/ui/src/fields/Checkbox/index.css new file mode 100644 index 00000000000..797c83eadd9 --- /dev/null +++ b/packages/ui/src/fields/Checkbox/index.css @@ -0,0 +1,154 @@ +@layer payload-default { + .checkbox { + position: relative; + + .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; + align-items: center; + gap: var(--spacer-2); + + &:hover:not(.checkbox-input--read-only) { + label, + input { + cursor: pointer; + } + } + + label.field-label { + padding-bottom: 0; + } + + &:not(.checkbox-input--read-only) { + &:active, + &:focus-within, + &:focus { + .checkbox-input__input { + outline: 0; + border-color: var(--border-selected-strong); + } + } + + &:hover { + .checkbox-input__input { + border-color: var(--border-selected-strong); + } + } + } + + &:not(.checkbox-input--read-only):not(.checkbox-input--checked) { + &:hover { + cursor: pointer; + + svg { + opacity: 0.2; + } + } + } + } + + .checkbox-input__input { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + line-height: 0; + position: relative; + width: 1rem; + height: 1rem; + border: 1px solid var(--border-default-strong); + border-radius: var(--radius-medium); + background: transparent; + transition-property: border-color, box-shadow, background-color; + transition-duration: 100ms; + transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1); + + & input[type='checkbox'] { + position: absolute; + width: calc(100% + 0.25rem); + height: calc(100% + 0.25rem); + padding: 0; + margin: 0; + margin-left: -0.125rem; + margin-top: -0.125rem; + opacity: 0; + border-radius: 0; + z-index: 1; + } + } + + .checkbox-input__icon { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + + svg { + opacity: 0; + } + + .icon--line { + width: 1.4rem; + height: 1.4rem; + } + + &.partial { + svg { + opacity: 1; + } + } + } + + .checkbox-input--checked { + .checkbox-input__input { + background-color: var(--bg-brand-default); + border-color: var(--border-selected-strong); + } + + &:focus-within .checkbox-input__input { + box-shadow: inset 0 0 0 1px var(--bg-default-default); + } + + .checkbox-input__icon { + svg { + opacity: 1; + color: var(--icon-brand-onbrand); + } + } + } + + .checkbox-input--read-only { + .checkbox-input__input { + background: var(--bg-disabled-default); + border-color: var(--border-disabled-default); + } + + label { + color: var(--text-disabled-default); + } + } + + .checkbox.error { + .checkbox-input--checked { + .checkbox-input__input { + background-color: var(--bg-danger-default); + border-color: var(--border-danger-strong); + } + } + + .checkbox-input:not(.checkbox-input--checked) { + .checkbox-input__input { + border-color: var(--border-danger-strong); + } + } + } +} diff --git a/packages/ui/src/fields/Checkbox/index.scss b/packages/ui/src/fields/Checkbox/index.scss deleted file mode 100644 index 6df8c752ecb..00000000000 --- a/packages/ui/src/fields/Checkbox/index.scss +++ /dev/null @@ -1,149 +0,0 @@ -@import '../../scss/styles.scss'; - -@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; - } - } - - .checkbox-input { - display: inline-flex; - &:hover:not(&--read-only) { - label, - input { - cursor: pointer; - } - } - - label.field-label { - padding-bottom: 0; - padding-left: base(0.5); - } - - [dir='rtl'] &__input { - margin-right: 0; - margin-left: base(0.5); - } - - &__input { - @include formInput; - display: flex; - padding: 0; - line-height: 0; - position: relative; - width: $baseline; - height: $baseline; - - & input[type='checkbox'] { - position: absolute; - // Without the extra 4px, there is an uncheckable area due to the border of the parent element - width: calc(100% + 4px); - height: calc(100% + 4px); - padding: 0; - margin: 0; - margin-left: -2px; - margin-top: -2px; - opacity: 0; - border-radius: 0; - z-index: 1; - } - } - - &__icon { - position: absolute; - - svg { - opacity: 0; - } - } - - &:not(&--read-only) { - &:active, - &:focus-within, - &:focus { - .checkbox-input__input, - & input[type='checkbox'] { - outline: 0; - box-shadow: 0 0 3px 3px var(--theme-success-400) !important; - border: 1px solid var(--theme-elevation-150); - } - } - - &:hover { - .checkbox-input__input, - & input[type='checkbox'] { - border-color: var(--theme-elevation-250); - } - } - } - - &:not(&--read-only):not(&--checked) { - &:hover { - cursor: pointer; - - svg { - opacity: 0.2; - } - } - } - - &--checked { - .checkbox-input__icon { - svg { - opacity: 1; - } - } - } - - .checkbox-input__icon { - .icon--line { - width: 1.4rem; - height: 1.4rem; - } - - &.partial { - svg { - opacity: 1; - } - } - } - - &--read-only { - .checkbox-input__input { - @include readOnly; - } - - label { - color: var(--theme-elevation-400); - } - } - } - - html[data-theme='light'] { - .checkbox { - &.error { - .checkbox-input__input { - @include lightInputError; - } - } - } - } - - html[data-theme='dark'] { - .checkbox { - &.error { - .checkbox-input__input { - @include darkInputError; - } - } - } - } -} diff --git a/packages/ui/src/fields/Checkbox/index.tsx b/packages/ui/src/fields/Checkbox/index.tsx index 5c7cca8fda5..cd93394cffe 100644 --- a/packages/ui/src/fields/Checkbox/index.tsx +++ b/packages/ui/src/fields/Checkbox/index.tsx @@ -22,7 +22,7 @@ import { generateFieldID } from '../../utilities/generateFieldID.js' import { mergeFieldStyles } from '../mergeFieldStyles.js' import { fieldBaseClass } from '../shared/index.js' import { CheckboxInput } from './Input.js' -import './index.scss' +import './index.css' const baseClass = 'checkbox' diff --git a/packages/ui/src/fields/Code/index.css b/packages/ui/src/fields/Code/index.css new file mode 100644 index 00000000000..07b3ff7ac5e --- /dev/null +++ b/packages/ui/src/fields/Code/index.css @@ -0,0 +1,34 @@ +@layer payload-default { + .code-field { + position: relative; + display: flex; + flex-direction: column; + gap: var(--spacer-2); + + & .code-editor { + background: var(--bg-default-secondary); + border: 1px solid var(--border-default-default); + border-radius: var(--radius-medium); + padding: var(--spacer-2) 0; + overflow: clip; + box-shadow: none; + + &:hover { + border-color: var(--border-default-default); + } + + &:focus-within { + border-color: var(--border-selected-strong); + } + } + + &.error .code-editor { + border-color: var(--border-danger-strong); + } + + &.read-only .code-editor { + background: var(--bg-default-default); + border-color: var(--border-default-default); + } + } +} diff --git a/packages/ui/src/fields/Code/index.scss b/packages/ui/src/fields/Code/index.scss deleted file mode 100644 index e6f23b545de..00000000000 --- a/packages/ui/src/fields/Code/index.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import '../../scss/styles.scss'; - -@layer payload-default { - .code-field { - position: relative; - - &.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); - } - } - - .read-only { - .code-editor { - @include readOnly; - } - } - } -} diff --git a/packages/ui/src/fields/Code/index.tsx b/packages/ui/src/fields/Code/index.tsx index fb9fa52b833..e6e63dacd13 100644 --- a/packages/ui/src/fields/Code/index.tsx +++ b/packages/ui/src/fields/Code/index.tsx @@ -12,7 +12,7 @@ import { useField } from '../../forms/useField/index.js' import { withCondition } from '../../forms/withCondition/index.js' import { mergeFieldStyles } from '../mergeFieldStyles.js' import { fieldBaseClass } from '../shared/index.js' -import './index.scss' +import './index.css' const prismToMonacoLanguageMap = { js: 'javascript', diff --git a/packages/ui/src/fields/Collapsible/index.css b/packages/ui/src/fields/Collapsible/index.css new file mode 100644 index 00000000000..4592d2e1da1 --- /dev/null +++ b/packages/ui/src/fields/Collapsible/index.css @@ -0,0 +1,8 @@ +@layer payload-default { + .collapsible-field__row-label-wrap { + pointer-events: none; + display: flex; + align-items: center; + gap: var(--spacer-2); + } +} diff --git a/packages/ui/src/fields/Collapsible/index.scss b/packages/ui/src/fields/Collapsible/index.scss deleted file mode 100644 index d2b1d2a6f17..00000000000 --- a/packages/ui/src/fields/Collapsible/index.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import '../../scss/styles.scss'; - -@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/Collapsible/index.tsx b/packages/ui/src/fields/Collapsible/index.tsx index 70bebd913b4..3ad12db614b 100644 --- a/packages/ui/src/fields/Collapsible/index.tsx +++ b/packages/ui/src/fields/Collapsible/index.tsx @@ -17,7 +17,7 @@ import { useDocumentInfo } from '../../providers/DocumentInfo/index.js' import { usePreferences } from '../../providers/Preferences/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { mergeFieldStyles } from '../mergeFieldStyles.js' -import './index.scss' +import './index.css' import { fieldBaseClass } from '../shared/index.js' const baseClass = 'collapsible-field' diff --git a/packages/ui/src/fields/ConfirmPassword/index.css b/packages/ui/src/fields/ConfirmPassword/index.css new file mode 100644 index 00000000000..838619110ec --- /dev/null +++ b/packages/ui/src/fields/ConfirmPassword/index.css @@ -0,0 +1,9 @@ +@layer payload-default { + .field-type.confirm-password { + position: relative; + } + + .field-type.confirm-password.error input { + border-color: var(--border-danger-strong); + } +} diff --git a/packages/ui/src/fields/ConfirmPassword/index.scss b/packages/ui/src/fields/ConfirmPassword/index.scss deleted file mode 100644 index 70f7b5c877a..00000000000 --- a/packages/ui/src/fields/ConfirmPassword/index.scss +++ /dev/null @@ -1,31 +0,0 @@ -@import '../../scss/styles.scss'; - -@layer payload-default { - .field-type.confirm-password { - position: relative; - - input { - @include formInput; - } - } - - html[data-theme='light'] { - .field-type.field-type.confirm-password { - &.error { - input { - @include lightInputError; - } - } - } - } - - html[data-theme='dark'] { - .field-type.field-type.confirm-password { - &.error { - input { - @include darkInputError; - } - } - } - } -} diff --git a/packages/ui/src/fields/ConfirmPassword/index.tsx b/packages/ui/src/fields/ConfirmPassword/index.tsx index cb20ffc3a59..ad9e6ad2758 100644 --- a/packages/ui/src/fields/ConfirmPassword/index.tsx +++ b/packages/ui/src/fields/ConfirmPassword/index.tsx @@ -8,7 +8,7 @@ import { useTranslation } from '../../providers/Translation/index.js' import { FieldError } from '../FieldError/index.js' import { FieldLabel } from '../FieldLabel/index.js' import { fieldBaseClass } from '../shared/index.js' -import './index.scss' +import './index.css' export type ConfirmPasswordFieldProps = { readonly disabled?: boolean diff --git a/packages/ui/src/fields/DateTime/index.css b/packages/ui/src/fields/DateTime/index.css new file mode 100644 index 00000000000..708313231a1 --- /dev/null +++ b/packages/ui/src/fields/DateTime/index.css @@ -0,0 +1,7 @@ +@layer payload-default { + .date-time-field--has-error { + .react-datepicker__input-container input { + border-color: var(--border-danger-strong); + } + } +} diff --git a/packages/ui/src/fields/DateTime/index.scss b/packages/ui/src/fields/DateTime/index.scss deleted file mode 100644 index b4359c6ea1a..00000000000 --- a/packages/ui/src/fields/DateTime/index.scss +++ /dev/null @@ -1,23 +0,0 @@ -@import '../../scss/styles.scss'; - -@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; - } - } - } - } -} diff --git a/packages/ui/src/fields/DateTime/index.tsx b/packages/ui/src/fields/DateTime/index.tsx index a8704772d95..eb8a1d85549 100644 --- a/packages/ui/src/fields/DateTime/index.tsx +++ b/packages/ui/src/fields/DateTime/index.tsx @@ -14,7 +14,7 @@ import { FieldError } from '../../fields/FieldError/index.js' import { FieldLabel } from '../../fields/FieldLabel/index.js' import { useForm, useFormFields } from '../../forms/Form/context.js' import { useField } from '../../forms/useField/index.js' -import './index.scss' +import './index.css' import { withCondition } from '../../forms/withCondition/index.js' import { useConfig } from '../../providers/Config/index.js' import { useTranslation } from '../../providers/Translation/index.js' diff --git a/packages/ui/src/fields/Email/index.css b/packages/ui/src/fields/Email/index.css new file mode 100644 index 00000000000..5119184e282 --- /dev/null +++ b/packages/ui/src/fields/Email/index.css @@ -0,0 +1,12 @@ +@layer payload-default { + .field-type.email { + position: relative; + display: flex; + flex-direction: column; + gap: var(--spacer-2); + + &.error input { + border-color: var(--border-danger-strong); + } + } +} diff --git a/packages/ui/src/fields/Email/index.scss b/packages/ui/src/fields/Email/index.scss deleted file mode 100644 index d12a0171d28..00000000000 --- a/packages/ui/src/fields/Email/index.scss +++ /dev/null @@ -1,37 +0,0 @@ -@import '../../scss/styles.scss'; - -@layer payload-default { - .field-type.email { - position: relative; - - input { - @include formInput; - } - - &.error { - input { - background-color: var(--theme-error-200); - } - } - } - - html[data-theme='light'] { - .field-type.email { - &.error { - input { - @include lightInputError; - } - } - } - } - - html[data-theme='dark'] { - .field-type.email { - &.error { - input { - @include darkInputError; - } - } - } - } -} diff --git a/packages/ui/src/fields/Email/index.tsx b/packages/ui/src/fields/Email/index.tsx index 6cce6d753a0..c37ef7d51ea 100644 --- a/packages/ui/src/fields/Email/index.tsx +++ b/packages/ui/src/fields/Email/index.tsx @@ -17,7 +17,7 @@ import { useTranslation } from '../../providers/Translation/index.js' import { FieldLabel } from '../FieldLabel/index.js' import { mergeFieldStyles } from '../mergeFieldStyles.js' import { fieldBaseClass } from '../shared/index.js' -import './index.scss' +import './index.css' const EmailFieldComponent: EmailFieldClientComponent = (props) => { const { @@ -92,6 +92,7 @@ const EmailFieldComponent: EmailFieldClientComponent = (props) => { {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */} = (props) => { const { diff --git a/packages/ui/src/fields/Group/index.css b/packages/ui/src/fields/Group/index.css new file mode 100644 index 00000000000..3896132a49d --- /dev/null +++ b/packages/ui/src/fields/Group/index.css @@ -0,0 +1,127 @@ +@layer payload-default { + .group-field { + position: relative; + } + + .group-field--top-level { + padding-top: var(--spacer-5); + + &::before { + content: ''; + position: absolute; + top: calc(var(--spacer-5) / 2); + left: calc(var(--gutter-h) * -1); + right: calc(var(--gutter-h) * -1); + height: 0; + border-top: 1px solid var(--border-default); + } + + &:first-child { + padding-top: 0; + + &::before { + display: none; + } + } + } + + .group-field--within-collapsible { + padding-top: var(--spacer-5); + + &::before { + content: ''; + position: absolute; + top: calc(var(--spacer-5) / 2); + left: calc(var(--spacer-3) * -1); + right: calc(var(--spacer-3) * -1); + height: 0; + border-top: 1px solid var(--border-default); + } + + &:first-child { + border-top: 0; + padding-top: 0; + + &::before { + display: none; + } + } + + &:last-child { + padding-bottom: 0; + } + } + + .group-field--within-group { + padding: 0; + + &::before { + display: none; + } + } + + .group-field--within-row { + margin: 0; + + &::before { + display: none; + } + } + + .group-field--within-tab:first-child { + padding-top: 0; + + &::before { + display: none; + } + } + + .group-field--within-tab:last-child { + padding-bottom: 0; + } + + .group-field--gutter { + border-left: 1px solid var(--border-default); + padding-left: var(--spacer-3); + } + + .group-field__header { + margin-bottom: var(--spacer-2-5); + display: flex; + align-items: center; + gap: var(--spacer-2); + + > header { + display: flex; + flex-direction: column; + gap: var(--spacer-1); + } + } + + .group-field__title { + margin-bottom: 0; + font-family: var(--text-heading-medium-font-family); + font-size: var(--text-heading-medium-font-size); + font-weight: var(--text-heading-medium-font-weight); + line-height: var(--text-heading-medium-line-height); + } + + .group-field--has-error { + .group-field__header { + color: var(--text-danger); + } + } + + .group-field + .group-field { + border-top: 0; + padding-top: 0; + } + + .group-field--within-row + .group-field--within-row { + margin-top: 0; + } + + .group-field--within-tab + .group-field--within-row { + padding-top: 0; + } +} diff --git a/packages/ui/src/fields/Group/index.scss b/packages/ui/src/fields/Group/index.scss deleted file mode 100644 index 7539a8f0e8f..00000000000 --- a/packages/ui/src/fields/Group/index.scss +++ /dev/null @@ -1,155 +0,0 @@ -@import '../../scss/styles.scss'; - -@layer payload-default { - .group-field { - margin-left: calc(var(--gutter-h) * -1); - margin-right: calc(var(--gutter-h) * -1); - border-bottom: 1px solid var(--theme-elevation-100); - border-top: 1px solid var(--theme-elevation-100); - - &--top-level { - padding: base(2) var(--gutter-h); - - &:first-child { - padding-top: 0; - border-top: 0; - } - } - - &--within-collapsible { - margin-left: calc(var(--base) * -1); - margin-right: calc(var(--base) * -1); - padding: var(--base); - - &:first-child { - border-top: 0; - padding-top: 0; - margin-top: 0; - } - - &:last-child { - padding-bottom: 0; - border-bottom: 0; - } - } - - &--within-group { - margin-left: 0; - margin-right: 0; - padding: 0; - border-top: 0; - border-bottom: 0; - } - - &--within-row { - margin: 0; - border-top: 0; - border-bottom: 0; - } - - &--within-tab:first-child { - margin-top: 0; - border-top: 0; - padding-top: 0; - } - - &--within-tab:last-child { - margin-bottom: 0; - border-bottom: 0; - padding-bottom: 0; - } - - &--gutter { - border-left: 1px solid var(--theme-elevation-100); - padding: 0 0 0 $baseline; - } - - &__header { - margin-bottom: calc(var(--base) / 2); - display: flex; - align-items: center; - gap: base(0.5); - - > header { - display: flex; - flex-direction: column; - gap: calc(var(--base) / 4); - } - } - - &__title { - margin-bottom: 0; - } - - @include small-break { - &--top-level { - padding: var(--base) var(--gutter-h); - - &:first-child { - padding-top: 0; - border-top: 0; - } - } - - &__header { - margin-bottom: calc(var(--base) / 2); - } - - &--within-collapsible { - margin-left: calc(var(--gutter-h) * -1); - margin-right: calc(var(--gutter-h) * -1); - } - - &--within-group { - margin-left: 0; - margin-right: 0; - padding: 0; - } - - &--gutter { - padding-left: var(--gutter-h); - } - } - } - - .group-field + .group-field { - border-top: 0; - padding-top: 0; - } - - .group-field--within-row + .group-field--within-row { - margin-top: 0; - } - - .group-field--within-tab + .group-field--within-row { - padding-top: 0; - } - - html[data-theme='light'] { - .group-field { - &--has-error { - .group-field__header { - color: var(--theme-error-750); - - &:after { - background: var(--theme-error-500); - } - } - } - } - } - - html[data-theme='dark'] { - .group-field { - &--has-error { - .group-field__header { - color: var(--theme-error-500); - - &:after { - background: var(--theme-error-500); - } - } - } - } - } -} diff --git a/packages/ui/src/fields/Group/index.tsx b/packages/ui/src/fields/Group/index.tsx index 95bc69abb60..53e58ddfd26 100644 --- a/packages/ui/src/fields/Group/index.tsx +++ b/packages/ui/src/fields/Group/index.tsx @@ -17,7 +17,7 @@ import { useField } from '../../forms/useField/index.js' import { withCondition } from '../../forms/withCondition/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { mergeFieldStyles } from '../mergeFieldStyles.js' -import './index.scss' +import './index.css' import { useRow } from '../Row/provider.js' import { fieldBaseClass } from '../shared/index.js' import { useTabs } from '../Tabs/provider.js' diff --git a/packages/ui/src/fields/JSON/index.css b/packages/ui/src/fields/JSON/index.css new file mode 100644 index 00000000000..ab5f6a4a5bd --- /dev/null +++ b/packages/ui/src/fields/JSON/index.css @@ -0,0 +1,23 @@ +@layer payload-default { + .json-field { + position: relative; + display: flex; + flex-direction: column; + gap: var(--spacer-2); + + &.error { + .code-editor { + border-color: var(--border-danger-strong); + + &:focus-within { + border-color: var(--border-selected-strong); + } + } + + .monaco-editor-background, + .margin { + background-color: var(--bg-danger-tertiary); + } + } + } +} diff --git a/packages/ui/src/fields/JSON/index.scss b/packages/ui/src/fields/JSON/index.scss deleted file mode 100644 index bfd50ab804e..00000000000 --- a/packages/ui/src/fields/JSON/index.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import '../../scss/styles.scss'; - -@layer payload-default { - .json-field { - position: relative; - - &.error { - .code-editor { - border-color: var(--theme-error-500); - } - - .monaco-editor-background, - .margin { - background-color: var(--theme-error-50); - } - } - } -} diff --git a/packages/ui/src/fields/JSON/index.tsx b/packages/ui/src/fields/JSON/index.tsx index ce49641a2ed..7988677bb49 100644 --- a/packages/ui/src/fields/JSON/index.tsx +++ b/packages/ui/src/fields/JSON/index.tsx @@ -15,7 +15,7 @@ import { FieldError } from '../FieldError/index.js' import { FieldLabel } from '../FieldLabel/index.js' import { mergeFieldStyles } from '../mergeFieldStyles.js' import { fieldBaseClass } from '../shared/index.js' -import './index.scss' +import './index.css' const baseClass = 'json-field' diff --git a/packages/ui/src/fields/Number/index.css b/packages/ui/src/fields/Number/index.css new file mode 100644 index 00000000000..31d6987c5b6 --- /dev/null +++ b/packages/ui/src/fields/Number/index.css @@ -0,0 +1,12 @@ +@layer payload-default { + .field-type.number { + position: relative; + display: flex; + flex-direction: column; + gap: var(--spacer-2); + + &.error input { + border-color: var(--border-danger-strong); + } + } +} diff --git a/packages/ui/src/fields/Number/index.scss b/packages/ui/src/fields/Number/index.scss deleted file mode 100644 index 50628f1ad2e..00000000000 --- a/packages/ui/src/fields/Number/index.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import '../../scss/styles.scss'; - -@layer payload-default { - .field-type.number { - position: relative; - - &:not(.has-many) { - input { - @include formInput; - } - } - } - - html[data-theme='light'] { - .field-type.number { - &.error { - input { - @include lightInputError; - } - } - } - } - - html[data-theme='dark'] { - .field-type.number { - &.error { - input { - @include darkInputError; - } - } - } - } -} diff --git a/packages/ui/src/fields/Number/index.tsx b/packages/ui/src/fields/Number/index.tsx index 660a1b71987..29d77c4b621 100644 --- a/packages/ui/src/fields/Number/index.tsx +++ b/packages/ui/src/fields/Number/index.tsx @@ -16,7 +16,7 @@ import { FieldDescription } from '../FieldDescription/index.js' import { FieldError } from '../FieldError/index.js' import { FieldLabel } from '../FieldLabel/index.js' import { mergeFieldStyles } from '../mergeFieldStyles.js' -import './index.scss' +import './index.css' import { fieldBaseClass } from '../shared/index.js' const NumberFieldComponent: NumberFieldClientComponent = (props) => { @@ -183,6 +183,7 @@ const NumberFieldComponent: NumberFieldClientComponent = (props) => { ) : (
    = (props) => { const { @@ -74,6 +74,7 @@ export const PasswordInput: React.FC = (props) => { { [setValue, value], ) + const handleStep = useCallback( + (index: 0 | 1, direction: 'down' | 'up') => { + if (readOnly || disabled) { + return + } + const stepValue = step ?? 1 + const currentValue = typeof value[index] === 'number' ? value[index] : 0 + const newValue = direction === 'up' ? currentValue + stepValue : currentValue - stepValue + const coordinates = [...value] + coordinates[index] = newValue + setValue(coordinates) + }, + [disabled, readOnly, setValue, step, value], + ) + const getCoordinateFieldLabel = (type: 'latitude' | 'longitude') => { const suffix = type === 'longitude' ? t('fields:longitude') : t('fields:latitude') const fieldLabel = label ? getTranslation(label, i18n) : '' @@ -102,11 +118,12 @@ export const PointFieldComponent: PointFieldClientComponent = (props) => { /> } /> -
    - {BeforeInput} + {BeforeInput} +
    {/* disable eslint rule because the label is dynamic */} {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */} { type="number" value={value && typeof value[0] === 'number' ? value[0] : ''} /> - {AfterInput} +
    + + +
    + {AfterInput}
  • { /> } /> -
    +
    } @@ -140,6 +177,7 @@ export const PointFieldComponent: PointFieldClientComponent = (props) => { {/* disable eslint rule because the label is dynamic */} {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */} { type="number" value={value && typeof value[1] === 'number' ? value[1] : ''} /> - {AfterInput} +
    + + +
    + {AfterInput}
    • .relationship__wrap .rs__control, + .relationship.error button.relationship-add-new__add-button { + border-color: var(--border-danger-strong); + } +} diff --git a/packages/ui/src/fields/Relationship/index.scss b/packages/ui/src/fields/Relationship/index.scss deleted file mode 100644 index cf087bd35d7..00000000000 --- a/packages/ui/src/fields/Relationship/index.scss +++ /dev/null @@ -1,66 +0,0 @@ -@import '../../scss/styles.scss'; - -@layer payload-default { - .field-type.relationship { - position: relative; - } - - .relationship { - &__wrap { - display: flex; - width: 100%; - - div.react-select { - width: 100%; - min-width: 0; - } - } - - &__error-loading { - border: 1px solid var(--theme-error-500); - min-height: base(2); - padding: base(0.5) base(0.75); - background-color: var(--theme-error-500); - color: var(--theme-elevation-0); - } - - &--allow-create { - .rs__control { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - } - - html[data-theme='light'] { - .relationship { - &.error { - > .relationship__wrap { - .rs__control { - @include lightInputError; - } - } - - button.relationship-add-new__add-button { - @include lightInputError; - } - } - } - } - - html[data-theme='dark'] { - .relationship { - &.error { - > .relationship__wrap { - .rs__control { - @include darkInputError; - } - } - - button.relationship-add-new__add-button { - @include darkInputError; - } - } - } - } -} diff --git a/packages/ui/src/fields/Relationship/index.tsx b/packages/ui/src/fields/Relationship/index.tsx index 02eee811d44..54c493b9c8e 100644 --- a/packages/ui/src/fields/Relationship/index.tsx +++ b/packages/ui/src/fields/Relationship/index.tsx @@ -9,7 +9,7 @@ import { useField } from '../../forms/useField/index.js' import { withCondition } from '../../forms/withCondition/index.js' import { mergeFieldStyles } from '../mergeFieldStyles.js' import { RelationshipInput } from './Input.js' -import './index.scss' +import './index.css' export { RelationshipInput } diff --git a/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.css b/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.css new file mode 100644 index 00000000000..efe3694102b --- /dev/null +++ b/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.css @@ -0,0 +1,48 @@ +@layer payload-default { + .relationship--multi-value-label { + display: flex; + padding-inline-start: 0.5rem; + gap: 0.25rem; + } + + .relationship--multi-value-label__content { + line-height: 1.375rem; + max-width: 150px; + color: currentColor; + display: flex; + align-items: center; + } + + .relationship--multi-value-label__text { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + .relationship--multi-value-label__drawer-toggler { + border: none; + background-color: transparent; + padding: 0; + cursor: pointer; + position: relative; + display: flex; + align-items: center; + justify-content: center; + margin-left: 0.25rem; + pointer-events: all; + + .icon { + width: 1.25rem; + height: 1.25rem; + padding: 0.125rem; + } + + &:hover { + background-color: var(--bg-transparent-hover); + } + + &:focus-visible { + outline: solid 2px var(--border-selected); + } + } +} diff --git a/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.scss b/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.scss deleted file mode 100644 index 170fe895366..00000000000 --- a/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.scss +++ /dev/null @@ -1,51 +0,0 @@ -@import '../../../../scss/styles.scss'; - -@layer payload-default { - .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; - display: flex; - align-items: center; - } - - &__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); - } - - &:hover { - background-color: var(--theme-elevation-150); - } - - &:focus-visible { - outline: var(--accessibility-outline); - } - } - } -} diff --git a/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.tsx b/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.tsx index 7c366ed49ef..3a9b046c27a 100644 --- a/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.tsx +++ b/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.tsx @@ -11,7 +11,7 @@ import { Tooltip } from '../../../../elements/Tooltip/index.js' import { EditIcon } from '../../../../icons/Edit/index.js' import { useAuth } from '../../../../providers/Auth/index.js' import { useTranslation } from '../../../../providers/Translation/index.js' -import './index.scss' +import './index.css' const baseClass = 'relationship--multi-value-label' diff --git a/packages/ui/src/fields/Relationship/select-components/SingleValue/index.css b/packages/ui/src/fields/Relationship/select-components/SingleValue/index.css new file mode 100644 index 00000000000..361799a8f6d --- /dev/null +++ b/packages/ui/src/fields/Relationship/select-components/SingleValue/index.css @@ -0,0 +1,50 @@ +@layer payload-default { + .relationship--single-value.rs__single-value { + overflow: visible; + min-width: 0; + } + + .relationship--single-value__label-text { + max-width: unset; + display: flex; + align-items: center; + overflow: visible; + width: 100%; + flex-shrink: 1; + } + + .relationship--single-value__text { + overflow: hidden; + text-overflow: ellipsis; + } + + .relationship--single-value__drawer-toggler { + border: none; + background-color: transparent; + padding: 0; + cursor: pointer; + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + margin-left: var(--spacer-1); + pointer-events: all; + + .icon { + width: 0.9375rem; + height: 0.9375rem; + } + + &:focus-visible { + outline: solid 2px var(--border-selected); + } + + &:hover { + background-color: var(--bg-transparent-hover); + } + } + + .relationship--single-value__label { + flex-grow: 1; + } +} diff --git a/packages/ui/src/fields/Relationship/select-components/SingleValue/index.scss b/packages/ui/src/fields/Relationship/select-components/SingleValue/index.scss deleted file mode 100644 index 321535ea0be..00000000000 --- a/packages/ui/src/fields/Relationship/select-components/SingleValue/index.scss +++ /dev/null @@ -1,54 +0,0 @@ -@import '../../../../scss/styles.scss'; - -@layer payload-default { - .relationship--single-value { - &.rs__single-value { - overflow: visible; - min-width: 0; - } - - &__label-text { - max-width: unset; - display: flex; - align-items: center; - overflow: visible; - width: 100%; - flex-shrink: 1; - } - - &__text { - overflow: hidden; - text-overflow: ellipsis; - } - - &__drawer-toggler { - border: none; - background-color: transparent; - padding: 0; - cursor: pointer; - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - margin-left: base(0.25); - pointer-events: all; - - .icon { - width: base(0.75); - height: base(0.75); - } - - &:focus-visible { - outline: var(--accessibility-outline); - } - - &:hover { - background-color: var(--theme-elevation-100); - } - } - - &__label { - flex-grow: 1; - } - } -} diff --git a/packages/ui/src/fields/Relationship/select-components/SingleValue/index.tsx b/packages/ui/src/fields/Relationship/select-components/SingleValue/index.tsx index 27267be57ab..0c46ebcf3d6 100644 --- a/packages/ui/src/fields/Relationship/select-components/SingleValue/index.tsx +++ b/packages/ui/src/fields/Relationship/select-components/SingleValue/index.tsx @@ -11,7 +11,7 @@ import { Tooltip } from '../../../../elements/Tooltip/index.js' import { EditIcon } from '../../../../icons/Edit/index.js' import { useAuth } from '../../../../providers/Auth/index.js' import { useTranslation } from '../../../../providers/Translation/index.js' -import './index.scss' +import './index.css' const baseClass = 'relationship--single-value' diff --git a/packages/ui/src/fields/Row/index.scss b/packages/ui/src/fields/Row/index.css similarity index 72% rename from packages/ui/src/fields/Row/index.scss rename to packages/ui/src/fields/Row/index.css index 018e139e6b3..74588c94a6e 100644 --- a/packages/ui/src/fields/Row/index.scss +++ b/packages/ui/src/fields/Row/index.css @@ -1,5 +1,3 @@ -@import '../../scss/styles.scss'; - @layer payload-default { .field-type.row { margin-bottom: 0; @@ -7,7 +5,7 @@ .row__fields { display: flex; flex-wrap: wrap; - row-gap: calc(var(--base) * 0.8); + row-gap: 1rem; > * { flex: 0 1 var(--field-width); @@ -16,14 +14,12 @@ justify-content: flex-start; } - // add margin if the row has children &:has(> *:nth-child(1)) { margin-bottom: var(--base); } - // 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. + margin-inline: calc(var(--base) / -4); > * { flex: 0 1 calc(var(--field-width) - var(--base) * 0.5); @@ -32,7 +28,7 @@ } } - @include mid-break { + @media (max-width: 1024px) { .row__fields { display: block; margin-left: 0; diff --git a/packages/ui/src/fields/Row/index.tsx b/packages/ui/src/fields/Row/index.tsx index d6ddb6324bc..797b2d2cb21 100644 --- a/packages/ui/src/fields/Row/index.tsx +++ b/packages/ui/src/fields/Row/index.tsx @@ -6,7 +6,7 @@ import React from 'react' import { RenderFields } from '../../forms/RenderFields/index.js' import { withCondition } from '../../forms/withCondition/index.js' import { fieldBaseClass } from '../shared/index.js' -import './index.scss' +import './index.css' import { RowProvider } from './provider.js' const baseClass = 'row' diff --git a/packages/ui/src/fields/Select/Input.tsx b/packages/ui/src/fields/Select/Input.tsx index 8b58f3ec0e5..f1ce99e57e3 100644 --- a/packages/ui/src/fields/Select/Input.tsx +++ b/packages/ui/src/fields/Select/Input.tsx @@ -13,7 +13,7 @@ import { FieldError } from '../../fields/FieldError/index.js' import { FieldLabel } from '../../fields/FieldLabel/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { fieldBaseClass } from '../shared/index.js' -import './index.scss' +import './index.css' export type SelectInputProps = { readonly AfterInput?: React.ReactNode diff --git a/packages/ui/src/fields/Select/index.css b/packages/ui/src/fields/Select/index.css new file mode 100644 index 00000000000..42462d70e9b --- /dev/null +++ b/packages/ui/src/fields/Select/index.css @@ -0,0 +1,9 @@ +@layer payload-default { + .field-type.select { + position: relative; + } + + .field-type.select.error .rs__control { + border-color: var(--border-danger-strong); + } +} diff --git a/packages/ui/src/fields/Select/index.scss b/packages/ui/src/fields/Select/index.scss deleted file mode 100644 index 76f92c188b8..00000000000 --- a/packages/ui/src/fields/Select/index.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import '../../scss/styles.scss'; - -@layer payload-default { - .field-type.select { - position: relative; - } - - html[data-theme='light'] { - .field-type.select { - &.error { - .rs__control { - @include lightInputError; - } - } - } - } - - html[data-theme='dark'] { - .field-type.select { - &.error { - .rs__control { - @include darkInputError; - } - } - } - } -} diff --git a/packages/ui/src/fields/Slug/index.scss b/packages/ui/src/fields/Slug/index.css similarity index 88% rename from packages/ui/src/fields/Slug/index.scss rename to packages/ui/src/fields/Slug/index.css index a67a31a64b9..d6c38784042 100644 --- a/packages/ui/src/fields/Slug/index.scss +++ b/packages/ui/src/fields/Slug/index.css @@ -6,7 +6,7 @@ display: flex; justify-content: space-between; align-items: center; - gap: calc(var(--base) / 2); + gap: var(--spacer-2); } .lock-button { diff --git a/packages/ui/src/fields/Slug/index.tsx b/packages/ui/src/fields/Slug/index.tsx index 48eff4f6b4a..43139b90b81 100644 --- a/packages/ui/src/fields/Slug/index.tsx +++ b/packages/ui/src/fields/Slug/index.tsx @@ -12,7 +12,7 @@ import { useServerFunctions } from '../../providers/ServerFunctions/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { FieldLabel } from '../FieldLabel/index.js' import { TextInput } from '../Text/index.js' -import './index.scss' +import './index.css' /** * @experimental This component is experimental and may change or be removed in the future. Use at your own risk. diff --git a/packages/ui/src/fields/Tabs/Tab/index.css b/packages/ui/src/fields/Tabs/Tab/index.css new file mode 100644 index 00000000000..209923aaf33 --- /dev/null +++ b/packages/ui/src/fields/Tabs/Tab/index.css @@ -0,0 +1,80 @@ +@layer payload-default { + .tabs-field__tab-button { + display: flex; + padding-bottom: 1.25rem; + margin: 0; + margin-inline-end: 1.25rem; + cursor: pointer; + opacity: 0.5; + position: relative; + white-space: nowrap; + flex-shrink: 0; + gap: 0.625rem; + outline: none; + + &:last-child { + margin: 0; + } + + &:after { + content: ' '; + position: absolute; + right: 0; + bottom: -1px; + left: 0; + height: 1px; + background: var(--text-default); + opacity: 0; + } + + &:hover { + opacity: 0.75; + + &:after { + opacity: 0.2; + } + } + + &:focus-visible { + border: 1px solid var(--border-selected-strong); + border-radius: var(--radius-medium, 0.3125rem); + background: var(--bg-default-secondary); + } + } + + .tabs-field__tab-button--hidden { + display: none; + } + + .tabs-field__tab-button--active { + opacity: 1 !important; + + &:after { + opacity: 1 !important; + height: 2px; + } + } + + .tabs-field__tab-button__description { + margin-bottom: var(--spacer-2); + } + + .tabs-field__tab-button--has-error { + color: var(--text-danger-default); + + &:after { + background: var(--text-danger-default); + } + } + + @media (max-width: 768px) { + .tabs-field__tab-button { + margin: 0 0.9375rem 0 0; + padding-bottom: 0.625rem; + + &:last-child { + margin: 0; + } + } + } +} diff --git a/packages/ui/src/fields/Tabs/Tab/index.scss b/packages/ui/src/fields/Tabs/Tab/index.scss deleted file mode 100644 index 66c0f4c87ea..00000000000 --- a/packages/ui/src/fields/Tabs/Tab/index.scss +++ /dev/null @@ -1,85 +0,0 @@ -@import '../../../scss/styles.scss'; - -@layer payload-default { - .tabs-field__tab-button { - @extend %btn-reset; - @extend %h4; - display: flex; - padding-bottom: base(1); - margin: 0; - margin-inline-end: $baseline; - cursor: pointer; - opacity: 0.5; - position: relative; - white-space: nowrap; - flex-shrink: 0; - gap: base(0.5); - - &:last-child { - margin: 0; - } - - &:after { - content: ' '; - position: absolute; - right: 0; - bottom: -1px; - left: 0; - height: 1px; - background: var(--theme-elevation-800); - opacity: 0; - } - - &:hover { - opacity: 0.75; - - &:after { - opacity: 0.2; - } - } - - &--hidden { - display: none; - } - - &--active { - opacity: 1 !important; - - &:after { - opacity: 1 !important; - height: 2px; - } - } - - &__description { - margin-bottom: calc(var(--base) / 2); - } - - @include small-break { - margin: 0 base(0.75) 0 0; - padding-bottom: base(0.5); - - &:last-child { - margin: 0; - } - } - } - - html[data-theme='light'] { - .tabs-field__tab-button--has-error { - color: var(--theme-error-750); - &:after { - background: var(--theme-error-500); - } - } - } - - html[data-theme='dark'] { - .tabs-field__tab-button--has-error { - color: var(--theme-error-500); - &:after { - background: var(--theme-error-500); - } - } - } -} diff --git a/packages/ui/src/fields/Tabs/Tab/index.tsx b/packages/ui/src/fields/Tabs/Tab/index.tsx index 4446ddf4ab0..693d836861c 100644 --- a/packages/ui/src/fields/Tabs/Tab/index.tsx +++ b/packages/ui/src/fields/Tabs/Tab/index.tsx @@ -9,7 +9,7 @@ import React, { useState } from 'react' import { ErrorPill } from '../../../elements/ErrorPill/index.js' import { WatchChildErrors } from '../../../forms/WatchChildErrors/index.js' import { useTranslation } from '../../../providers/Translation/index.js' -import './index.scss' +import './index.css' const baseClass = 'tabs-field__tab-button' diff --git a/packages/ui/src/fields/Tabs/index.css b/packages/ui/src/fields/Tabs/index.css new file mode 100644 index 00000000000..01cbad7d0ed --- /dev/null +++ b/packages/ui/src/fields/Tabs/index.css @@ -0,0 +1,70 @@ +@layer payload-default { + .tabs-field { + margin-top: 2.5rem; + margin-left: calc(var(--gutter-h) * -1); + margin-right: calc(var(--gutter-h) * -1); + } + + .tabs-field--hidden { + display: none; + } + + .tabs-field__content-wrap { + padding-left: var(--gutter-h); + padding-right: var(--gutter-h); + } + + .tabs-field--within-collapsible { + margin: 0 calc(1.25rem * -1); + + .tabs-field__content-wrap { + padding-left: 1.25rem; + padding-right: 1.25rem; + } + + .tabs-field__tabs { + &:before, + &:after { + content: ' '; + display: block; + width: 1.25rem; + } + } + } + + .tabs-field__tabs-wrap { + overflow-x: auto; + overflow-y: hidden; + margin-bottom: 1.25rem; + } + + .tabs-field__tabs { + border-bottom: 1px solid var(--border-subtle); + display: inline-flex; + min-width: 100%; + vertical-align: bottom; + + &:before, + &:after { + content: ' '; + display: block; + width: var(--gutter-h); + flex-shrink: 0; + } + } + + .tabs-field__tab--hidden { + display: none; + } + + .tabs-field__description { + margin-bottom: var(--spacer-2); + } + + @media (max-width: 768px) { + .tabs-field--within-collapsible { + margin-left: calc(var(--gutter-h) * -1); + margin-right: calc(var(--gutter-h) * -1); + } + } +} diff --git a/packages/ui/src/fields/Tabs/index.scss b/packages/ui/src/fields/Tabs/index.scss deleted file mode 100644 index d85e2545619..00000000000 --- a/packages/ui/src/fields/Tabs/index.scss +++ /dev/null @@ -1,72 +0,0 @@ -@import '../../scss/styles.scss'; - -@layer payload-default { - .tabs-field { - margin-top: base(2); - margin-left: calc(var(--gutter-h) * -1); - margin-right: calc(var(--gutter-h) * -1); - - &--hidden { - display: none; - } - - &__content-wrap { - padding-left: var(--gutter-h); - padding-right: var(--gutter-h); - } - - &--within-collapsible { - margin: 0 calc(#{$baseline} * -1); - - .tabs-field__content-wrap { - padding-left: $baseline; - padding-right: $baseline; - } - - .tabs-field__tabs { - &:before, - &:after { - content: ' '; - display: block; - width: $baseline; - } - } - } - - &__tabs-wrap { - overflow-x: auto; - overflow-y: hidden; - margin-bottom: $baseline; - } - - &__tabs { - border-bottom: 1px solid var(--theme-elevation-100); - display: inline-flex; - min-width: 100%; - vertical-align: bottom; - - &:before, - &:after { - content: ' '; - display: block; - width: var(--gutter-h); - flex-shrink: 0; - } - } - - &__tab--hidden { - display: none; - } - - &__description { - margin-bottom: calc(var(--base) / 2); - } - - @include small-break { - &--within-collapsible { - margin-left: calc(var(--gutter-h) * -1); - margin-right: calc(var(--gutter-h) * -1); - } - } - } -} diff --git a/packages/ui/src/fields/Tabs/index.tsx b/packages/ui/src/fields/Tabs/index.tsx index 351c3a43b45..d34adcb47bf 100644 --- a/packages/ui/src/fields/Tabs/index.tsx +++ b/packages/ui/src/fields/Tabs/index.tsx @@ -25,7 +25,7 @@ import { FieldDescription } from '../FieldDescription/index.js' import { fieldBaseClass } from '../shared/index.js' import { TabsProvider } from './provider.js' import { TabComponent } from './Tab/index.js' -import './index.scss' +import './index.css' const baseClass = 'tabs-field' @@ -120,7 +120,8 @@ const TabsFieldComponent: TabsFieldClientComponent = (props) => { ? existingPreferences?.fields?.[path]?.tabIndex : existingPreferences?.fields?.[tabsPrefKey]?.tabIndex - const newIndex = typeof initialIndex === 'number' && initialIndex < tabStates.length ? initialIndex : 0 + const newIndex = + typeof initialIndex === 'number' && initialIndex < tabStates.length ? initialIndex : 0 setActiveTabIndex(newIndex) } void getInitialPref() diff --git a/packages/ui/src/fields/Text/Input.tsx b/packages/ui/src/fields/Text/Input.tsx index cb9beae6c8e..fce25177533 100644 --- a/packages/ui/src/fields/Text/Input.tsx +++ b/packages/ui/src/fields/Text/Input.tsx @@ -14,7 +14,7 @@ import { FieldError } from '../../fields/FieldError/index.js' import { FieldLabel } from '../../fields/FieldLabel/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { fieldBaseClass } from '../shared/index.js' -import './index.scss' +import './index.css' export const TextInput: React.FC = (props) => { const { @@ -154,6 +154,7 @@ export const TextInput: React.FC = (props) => { /> ) : ( = (props) => { const { @@ -72,6 +72,7 @@ export const TextareaInput: React.FC = (props) => { {BeforeInput}