tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat!: updated admin UI (#7424)

Browse Source 
## Description

- Updates admin UI with more condensed spacing throughout.
- Improves hover states and read-only states for various components.
- Removes the `Merriweather` font from `next/font` and replaces with
stack of system serif fonts and fallbacks (Georgia, etc). Closes #7257

## BREAKING CHANGES
- Custom components and styling that don't utilize Payload's CSS/SCSS
variables may need adjustments to match the updated styling.
- If you are using the `Merriweather` font, you will need to manually
configure `next/font` in your own project.

---------

Co-authored-by: Paul Popus <paul@nouance.io>
This commit is contained in:
Tylan Davis
2024-08-05 11:08:00 -04:00
committed by GitHub
parent 9a3bce1118
commit 68553ff974
140 changed files with 1410 additions and 1155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/next/src/elements/DocumentHeader/Tabs/Tab/index.scss
View File

@@ -35,7 +35,7 @@
position: absolute;
width: 100%;
height: 100%;
border-radius: 2px;
border-radius: var(--style-radius-s);
background-color: var(--theme-elevation-50);
opacity: 0;
}
@@ -51,6 +51,7 @@
}
&--active {
font-weight: 600;
&::before {
opacity: 1;
background-color: var(--theme-elevation-100);
@@ -78,14 +79,15 @@
gap: 4px;
width: 100%;
height: 100%;
padding: calc(var(--base) / 2) calc(var(--base));
line-height: base(1.2);
padding: base(0.2) base(0.6);
}
&__count {
min-width: 22px;
line-height: base(0.8);
min-width: base(0.8);
text-align: center;
padding: 2px 7px;
background-color: var(--theme-elevation-100);
border-radius: 1px;
border-radius: var(--style-radius-s);
}
}

6
packages/next/src/elements/LeaveWithoutSaving/index.tsx
View File

@@ -37,10 +37,12 @@ const Component: React.FC<{
<p>{t('general:changesNotSaved')}</p>
</div>
<div className={`${baseClass}__controls`}>
<Button buttonStyle="secondary" onClick={onCancel}>
<Button buttonStyle="secondary" onClick={onCancel} size="large">
{t('general:stayOnThisPage')}
</Button>
<Button onClick={onConfirm}>{t('general:leaveAnyway')}</Button>
<Button onClick={onConfirm} size="large">
{t('general:leaveAnyway')}
</Button>
</div>
</div>
</Modal>

11
packages/next/src/layouts/Root/index.tsx
View File

@@ -5,7 +5,6 @@ import { initI18n, rtlLanguages } from '@payloadcms/translations'
import { RootProvider } from '@payloadcms/ui'
import '@payloadcms/ui/scss/app.scss'
import { buildComponentMap } from '@payloadcms/ui/utilities/buildComponentMap'
import { Merriweather } from 'next/font/google'
import { headers as getHeaders, cookies as nextCookies } from 'next/headers.js'
import { createClientConfig, parseCookies } from 'payload'
import React from 'react'
@@ -16,14 +15,6 @@ import { getRequestTheme } from '../../utilities/getRequestTheme.js'
import { DefaultEditView } from '../../views/Edit/Default/index.js'
import { DefaultListView } from '../../views/List/Default/index.js'
const merriweather = Merriweather({
display: 'swap',
style: ['normal', 'italic'],
subsets: ['latin'],
variable: '--font-serif',
weight: ['400', '900'],
})
export const metadata = {
description: 'Generated by Next.js',
title: 'Next.js',
@@ -100,7 +91,7 @@ export const RootLayout = async ({
})
return (
<html className={merriweather.variable} data-theme={theme} dir={dir} lang={languageCode}>
<html data-theme={theme} dir={dir} lang={languageCode}>
<body>
<RootProvider
componentMap={componentMap}

15
packages/next/src/scss/app.scss
View File

@@ -1,9 +1,9 @@
@import './styles.scss';
@import 'styles';
@import './toasts.scss';
@import './colors.scss';
:root {
--base-px: 25;
--base-px: 20;
--base-body-size: 13;
--base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
@@ -21,6 +21,7 @@
--theme-baseline-body-size: #{$baseline-body-size};
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
sans-serif;
--font-serif: Georgia, 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
--font-mono: monospace;
--style-radius-s: #{$style-radius-s};
@@ -67,12 +68,6 @@ html {
@extend %body;
background: var(--theme-bg);
-webkit-font-smoothing: antialiased;
opacity: 0;
&[data-theme='dark'],
&[data-theme='light'] {
opacity: initial;
}
&[data-theme='dark'] {
--theme-bg: var(--theme-elevation-0);
@@ -111,12 +106,12 @@ body {
}
::selection {
background: var(--theme-success-500);
background: var(--color-success-250);
color: var(--theme-base-800);
}
::-moz-selection {
background: var(--theme-success-500);
background: var(--color-success-250);
color: var(--theme-base-800);
}

59
packages/next/src/scss/toastify.scss Normal file
View File

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

124
packages/next/src/scss/toasts.scss
View File

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

37
packages/next/src/scss/type.scss
View File

@@ -15,17 +15,10 @@
font-weight: 500;
}
%jumbo {
font-size: base(2.5);
line-height: 1;
margin: 0 0 base(2);
}
%h1 {
margin: 0 0 base(1);
font-size: base(2);
line-height: 1.15;
letter-spacing: -1px;
font-size: base(1.6);
line-height: base(1.8);
@include small-break {
letter-spacing: -0.5px;
@@ -35,9 +28,8 @@
%h2 {
margin: 0 0 base(1);
font-size: base(1.25);
line-height: 1.15;
letter-spacing: -0.5px;
font-size: base(1.3);
line-height: base(1.6);
@include small-break {
font-size: base(0.85);
@@ -46,9 +38,8 @@
%h3 {
margin: 0 0 base(1);
font-size: base(0.925);
line-height: 1.25;
letter-spacing: -0.5px;
font-size: base(1);
line-height: base(1.2);
@include small-break {
font-size: base(0.65);
@@ -58,27 +49,27 @@
%h4 {
margin: 0 0 $baseline;
font-size: base(0.75);
line-height: 1.5;
font-size: base(0.8);
line-height: base(1);
letter-spacing: -0.375px;
}
%h5 {
margin: 0;
font-size: base(0.5625);
line-height: 1.5;
font-size: base(0.65);
line-height: base(0.8);
}
%h6 {
margin: 0;
font-size: base(0.5);
line-height: 1.5;
font-size: base(0.6);
line-height: base(0.8);
}
%small {
margin: 0;
font-size: 11px;
line-height: 1.5;
font-size: 12px;
line-height: 20px;
}
/////////////////////////////

73
packages/next/src/scss/vars.scss
View File

@@ -13,7 +13,7 @@ $breakpoint-l-width: 1440px !default;
// BASELINE GRID
//////////////////////////////
$baseline-px: 25px !default;
$baseline-px: 20px !default;
$baseline-body-size: 13px !default;
$baseline: math.div($baseline-px, $baseline-body-size) + rem;
@@ -40,7 +40,7 @@ $color-purple: #f3ddf3 !default;
$style-radius-s: 3px !default;
$style-radius-m: 4px !default;
$style-radius-l: 9px !default;
$style-radius-l: 8px !default;
$style-stroke-width: 1px !default;
$style-stroke-width-s: 1px !default;
@@ -50,8 +50,8 @@ $style-stroke-width-m: 2px !default;
// MISC
//////////////////////////////
$top-header-offset: calc(var(--base) - 1px);
$top-header-offset-m: calc(var(--base) * 3);
$top-header-offset: calc(base(1) - 1px);
$top-header-offset-m: base(3);
$focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
//////////////////////////////
@@ -59,41 +59,19 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
//////////////////////////////
@mixin shadow-sm {
box-shadow:
0 2px 3px 0 rgba(0, 2, 4, 0.05),
0 10px 4px -8px rgba(0, 2, 4, 0.02);
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}
@mixin shadow-m {
box-shadow:
0 0 30px 0 rgb(0 2 4 / 12%),
0 30px 25px -8px rgb(0 2 4 / 10%);
box-shadow: 0 4px 8px -3px rgba(0, 0, 0, 0.1);
}
@mixin shadow-lg {
box-shadow:
0 20px 35px -10px rgba(0, 2, 4, 0.2),
0 6px 4px -4px rgba(0, 2, 4, 0.02);
box-shadow: 0 -2px 16px -2px rgba(0, 0, 0, 0.2);
}
@mixin shadow-lg-top {
box-shadow:
0 -20px 35px -10px rgba(0, 2, 4, 0.2),
0 -6px 4px -4px rgba(0, 2, 4, 0.02);
}
@mixin shadow {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
}
@mixin inputShadowActive {
box-shadow:
0 2px 3px 0 rgba(0, 2, 4, 0.16),
0 6px 4px -4px rgba(0, 2, 4, 0.13);
box-shadow: 0 2px 16px -2px rgba(0, 0, 0, 0.2);
}
@mixin inputShadow {
@@ -101,15 +79,7 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
&:not(:disabled) {
&:hover {
box-shadow:
0 2px 3px 0 rgba(0, 2, 4, 0.13),
0 6px 4px -4px rgba(0, 2, 4, 0.1);
}
&:active,
&:focus-within,
&:focus {
@include inputShadowActive;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2);
}
}
}
@@ -147,19 +117,33 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
@include blur-bg(var(--theme-bg), 0.3);
}
@mixin readOnly {
background: var(--theme-elevation-100);
color: var(--theme-elevation-400);
box-shadow: none;
&:hover {
border-color: var(--theme-elevation-150);
box-shadow: none;
}
}
@mixin formInput() {
@include inputShadow;
font-family: var(--font-body);
width: 100%;
border: 1px solid var(--theme-elevation-150);
border-radius: var(--style-radius-s);
background: var(--theme-input-bg);
color: var(--theme-elevation-800);
border-radius: 0;
font-size: 1rem;
height: base(2);
line-height: base(1);
padding: base(0.5) base(0.75);
padding: base(0.4) base(0.75);
-webkit-appearance: none;
transition-property: border, box-shadow;
transition-duration: 100ms;
transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
&[data-rtl='true'] {
direction: rtl;
@@ -189,12 +173,7 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
}
&:disabled {
background: var(--theme-elevation-200);
color: var(--theme-elevation-450);
&:hover {
border-color: var(--theme-elevation-150);
}
@include readOnly;
}
}

2
packages/next/src/views/CreateFirstUser/index.client.tsx
View File

@@ -77,7 +77,7 @@ export const CreateFirstUserClient: React.FC<{
readOnly={false}
schemaPath={userSlug}
/>
<FormSubmit>{t('general:create')}</FormSubmit>
<FormSubmit size="large">{t('general:create')}</FormSubmit>
</Form>
)
}

18
packages/next/src/views/Dashboard/Default/index.scss
View File

@@ -26,13 +26,9 @@
padding: 0;
margin: 0;
list-style: none;
display: flex;
gap: var(--gap);
flex-wrap: wrap;
li {
width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
}
display: grid;
grid-template-columns: repeat(var(--cols), 1fr);
.card {
height: 100%;
@@ -49,10 +45,18 @@
}
@include small-break {
--cols: 1;
--cols: 2;
&__wrap {
gap: var(--base);
}
&__card-list {
gap: base(0.4);
}
}
@include extra-small-break {
--cols: 1;
}
}

6
packages/next/src/views/Edit/Default/Auth/index.tsx
View File

@@ -190,7 +190,7 @@ export const Auth: React.FC<Props> = (props) => {
buttonStyle="secondary"
disabled={disabled}
onClick={() => handleChangePassword(false)}
size="small"
size="medium"
>
{t('general:cancel')}
</Button>
@@ -201,7 +201,7 @@ export const Auth: React.FC<Props> = (props) => {
disabled={disabled}
id="change-password"
onClick={() => handleChangePassword(true)}
size="small"
size="medium"
>
{t('authentication:changePassword')}
</Button>
@@ -211,7 +211,7 @@ export const Auth: React.FC<Props> = (props) => {
buttonStyle="secondary"
disabled={disabled}
onClick={() => void unlock()}
size="small"
size="medium"
>
{t('authentication:forceUnlock')}
</Button>

4
packages/next/src/views/Edit/Default/index.scss
View File

@@ -8,8 +8,8 @@
}
&__auth {
margin-bottom: calc(var(--base) * 2);
margin-top: calc(var(--base) * 0.5);
margin-bottom: base(1.6);
border-radius: var(--style-radius-s);
}
@include small-break {

2
packages/next/src/views/ForgotPassword/index.tsx
View File

@@ -51,7 +51,7 @@ export const ForgotPasswordView: React.FC<AdminViewProps> = ({ initPageResult })
/>
</p>
<br />
<Button Link={Link} buttonStyle="secondary" el="link" to={adminRoute}>
<Button Link={Link} buttonStyle="secondary" el="link" size="large" to={adminRoute}>
{i18n.t('general:backToDashboard')}
</Button>
</Fragment>

7
packages/next/src/views/List/Default/index.scss
View File

@@ -2,7 +2,6 @@
.collection-list {
width: 100%;
margin-top: base(0.5);
&__wrap {
padding-bottom: var(--spacing-view-bottom);
@@ -14,7 +13,7 @@
&__header {
display: flex;
align-items: flex-end;
align-items: center;
flex-wrap: wrap;
gap: base(0.75);
@@ -28,14 +27,12 @@
.pill {
position: relative;
top: -14px;
margin: 0;
}
}
&__sub-header {
flex-basis: 100%;
margin-top: base(0.25);
}
.table {
@@ -57,7 +54,7 @@
#heading-_select,
.cell-_select {
min-width: unset;
width: auto;
width: base(1);
}
}
}

2
packages/next/src/views/Login/LoginForm/index.tsx
View File

@@ -91,7 +91,7 @@ export const LoginForm: React.FC<{
>
{t('authentication:forgotPasswordQuestion')}
</Link>
<FormSubmit>{t('authentication:login')}</FormSubmit>
<FormSubmit size="large">{t('authentication:login')}</FormSubmit>
</Form>
)
}

3
packages/next/src/views/Logout/LogoutClient.tsx
View File

@@ -20,7 +20,7 @@ export const LogoutClient: React.FC<{
useEffect(() => {
if (!isLoggingOut) {
setIsLoggingOut(true)
logOut()
void logOut()
}
}, [isLoggingOut, logOut])
@@ -33,6 +33,7 @@ export const LogoutClient: React.FC<{
Link={Link}
buttonStyle="secondary"
el="link"
size="large"
url={formatAdminURL({
adminRoute,
path: `/login${

8
packages/next/src/views/NotFound/index.client.tsx
View File

@@ -38,7 +38,13 @@ export const NotFoundClient: React.FC<{
<Gutter className={`${baseClass}__wrap`}>
<h1>{t('general:nothingFound')}</h1>
<p>{t('general:sorryNotFound')}</p>
<Button Link={Link} className={`${baseClass}__button`} el="link" to={adminRoute}>
<Button
Link={Link}
className={`${baseClass}__button`}
el="link"
size="large"
to={adminRoute}
>
{t('general:backToDashboard')}
</Button>
</Gutter>

2
packages/next/src/views/ResetPassword/index.client.tsx
View File

@@ -81,7 +81,7 @@ export const ResetPasswordClient: React.FC<Args> = ({ token }) => {
/>
<ConfirmPasswordField />
<HiddenField forceUsePathFromProps name="token" value={token} />
<FormSubmit>{i18n.t('authentication:resetPassword')}</FormSubmit>
<FormSubmit size="large">{i18n.t('authentication:resetPassword')}</FormSubmit>
</Form>
)
}

8
packages/next/src/views/Unauthorized/index.tsx
View File

@@ -30,7 +30,13 @@ export const UnauthorizedView: AdminViewComponent = ({ initPageResult }) => {
<Gutter className={baseClass}>
<h2>{i18n.t('error:unauthorized')}</h2>
<p>{i18n.t('error:notAllowedToAccessPage')}</p>
<Button Link={Link} className={`${baseClass}__button`} el="link" to={logoutRoute}>
<Button
Link={Link}
className={`${baseClass}__button`}
el="link"
size="large"
to={logoutRoute}
>
{i18n.t('authentication:logOut')}
</Button>
</Gutter>

26
packages/richtext-lexical/src/field/Field.tsx
View File

@@ -21,7 +21,7 @@ import './index.scss'
const baseClass = 'rich-text-lexical'
const _RichText: React.FC<
const RichTextComponent: React.FC<
{
editorConfig: SanitizedClientEditorConfig // With rendered features n stuff
name: string
@@ -41,7 +41,7 @@ const _RichText: React.FC<
label,
labelProps,
path: pathFromProps,
readOnly,
readOnly: readOnlyFromProps,
required,
style,
validate, // Users can pass in client side validation if they WANT to, but it's not required anymore
@@ -59,21 +59,33 @@ const _RichText: React.FC<
// Removing props from the dependencies array fixed this issue: https://github.com/payloadcms/payload/issues/3709
[validate, required],
)
const { path: pathFromContext } = useFieldProps()
const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps()
const fieldType = useField<SerializedEditorState>({
path: pathFromContext ?? pathFromProps ?? name,
validate: memoizedValidate,
})
const { errorMessage, initialValue, path, schemaPath, setValue, showError, value } = fieldType
const {
errorMessage,
formInitializing,
formProcessing,
initialValue,
path,
schemaPath,
setValue,
showError,
value,
} = fieldType
const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing
const classes = [
baseClass,
'field-type',
className,
showError && 'error',
readOnly && `${baseClass}--read-only`,
disabled && `${baseClass}--read-only`,
editorConfig?.admin?.hideGutter !== true ? `${baseClass}--show-gutter` : null,
]
.filter(Boolean)
@@ -114,7 +126,7 @@ const _RichText: React.FC<
setValue(serializedEditorState)
}}
path={path}
readOnly={readOnly}
readOnly={disabled}
value={value}
/>
</ErrorBoundary>
@@ -139,4 +151,4 @@ function fallbackRender({ error }): React.ReactElement {
)
}
export const RichText = withCondition(_RichText)
export const RichText = withCondition(RichTextComponent)

4
packages/richtext-lexical/src/lexical/LexicalEditor.scss
View File

@@ -9,7 +9,8 @@
position: relative;
font-family: var(--font-serif);
font-size: calc(var(--base) * 0.625);
font-size: base(0.8);
letter-spacing: 0.02em;
h1,
h2,
@@ -19,6 +20,7 @@
h6 {
font-family: var(--font-body);
line-height: 1.125;
letter-spacing: 0;
}
}

6
packages/richtext-lexical/src/lexical/theme/EditorTheme.scss
View File

@@ -37,24 +37,18 @@
line-height: 1.125;
color: rgb(5, 5, 5);
font-weight: 500;
margin-top: 2rem;
margin-bottom: 1rem;
}
&__h2 {
font-size: 2rem;
color: rgb(5, 5, 5);
font-weight: 700;
margin-top: 1.8rem;
margin-bottom: 1rem;
}
&__h3 {
font-size: 1.4rem;
color: rgb(101, 103, 107);
font-weight: 700;
margin-top: 1.4rem;
margin-bottom: 1rem;
}
&__indent {

13
packages/richtext-lexical/src/scss/app.scss
View File

@@ -3,7 +3,7 @@
@import './colors.scss';
:root {
--base-px: 25;
--base-px: 20;
--base-body-size: 13;
--base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
@@ -21,6 +21,7 @@
--theme-baseline-body-size: #{$baseline-body-size};
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
sans-serif;
--font-serif: Georgia, 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
--font-mono: monospace;
--style-radius-s: #{$style-radius-s};
@@ -67,12 +68,6 @@ html {
@extend %body;
background: var(--theme-bg);
-webkit-font-smoothing: antialiased;
opacity: 0;
&[data-theme='dark'],
&[data-theme='light'] {
opacity: initial;
}
&[data-theme='dark'] {
--theme-bg: var(--theme-elevation-0);
@@ -111,12 +106,12 @@ body {
}
::selection {
background: var(--theme-success-500);
background: var(--color-success-250);
color: var(--theme-base-800);
}
::-moz-selection {
background: var(--theme-success-500);
background: var(--color-success-250);
color: var(--theme-base-800);
}

59
packages/richtext-lexical/src/scss/toastify.scss Normal file
View File

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

124
packages/richtext-lexical/src/scss/toasts.scss
View File

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

37
packages/richtext-lexical/src/scss/type.scss
View File

@@ -15,17 +15,10 @@
font-weight: 500;
}
%jumbo {
font-size: base(2.5);
line-height: 1;
margin: 0 0 base(2);
}
%h1 {
margin: 0 0 base(1);
font-size: base(2);
line-height: 1.15;
letter-spacing: -1px;
font-size: base(1.6);
line-height: base(1.8);
@include small-break {
letter-spacing: -0.5px;
@@ -35,9 +28,8 @@
%h2 {
margin: 0 0 base(1);
font-size: base(1.25);
line-height: 1.15;
letter-spacing: -0.5px;
font-size: base(1.3);
line-height: base(1.6);
@include small-break {
font-size: base(0.85);
@@ -46,9 +38,8 @@
%h3 {
margin: 0 0 base(1);
font-size: base(0.925);
line-height: 1.25;
letter-spacing: -0.5px;
font-size: base(1);
line-height: base(1.2);
@include small-break {
font-size: base(0.65);
@@ -58,27 +49,27 @@
%h4 {
margin: 0 0 $baseline;
font-size: base(0.75);
line-height: 1.5;
font-size: base(0.8);
line-height: base(1);
letter-spacing: -0.375px;
}
%h5 {
margin: 0;
font-size: base(0.5625);
line-height: 1.5;
font-size: base(0.65);
line-height: base(0.8);
}
%h6 {
margin: 0;
font-size: base(0.5);
line-height: 1.5;
font-size: base(0.6);
line-height: base(0.8);
}
%small {
margin: 0;
font-size: 11px;
line-height: 1.5;
font-size: 12px;
line-height: 20px;
}
/////////////////////////////

73
packages/richtext-lexical/src/scss/vars.scss
View File

@@ -13,7 +13,7 @@ $breakpoint-l-width: 1440px !default;
// BASELINE GRID
//////////////////////////////
$baseline-px: 25px !default;
$baseline-px: 20px !default;
$baseline-body-size: 13px !default;
$baseline: math.div($baseline-px, $baseline-body-size) + rem;
@@ -40,7 +40,7 @@ $color-purple: #f3ddf3 !default;
$style-radius-s: 3px !default;
$style-radius-m: 4px !default;
$style-radius-l: 9px !default;
$style-radius-l: 8px !default;
$style-stroke-width: 1px !default;
$style-stroke-width-s: 1px !default;
@@ -50,8 +50,8 @@ $style-stroke-width-m: 2px !default;
// MISC
//////////////////////////////
$top-header-offset: calc(var(--base) - 1px);
$top-header-offset-m: calc(var(--base) * 3);
$top-header-offset: calc(base(1) - 1px);
$top-header-offset-m: base(3);
$focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
//////////////////////////////
@@ -59,41 +59,19 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
//////////////////////////////
@mixin shadow-sm {
box-shadow:
0 2px 3px 0 rgba(0, 2, 4, 0.05),
0 10px 4px -8px rgba(0, 2, 4, 0.02);
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}
@mixin shadow-m {
box-shadow:
0 0 30px 0 rgb(0 2 4 / 12%),
0 30px 25px -8px rgb(0 2 4 / 10%);
box-shadow: 0 4px 8px -3px rgba(0, 0, 0, 0.1);
}
@mixin shadow-lg {
box-shadow:
0 20px 35px -10px rgba(0, 2, 4, 0.2),
0 6px 4px -4px rgba(0, 2, 4, 0.02);
box-shadow: 0 -2px 16px -2px rgba(0, 0, 0, 0.2);
}
@mixin shadow-lg-top {
box-shadow:
0 -20px 35px -10px rgba(0, 2, 4, 0.2),
0 -6px 4px -4px rgba(0, 2, 4, 0.02);
}
@mixin shadow {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
}
@mixin inputShadowActive {
box-shadow:
0 2px 3px 0 rgba(0, 2, 4, 0.16),
0 6px 4px -4px rgba(0, 2, 4, 0.13);
box-shadow: 0 2px 16px -2px rgba(0, 0, 0, 0.2);
}
@mixin inputShadow {
@@ -101,15 +79,7 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
&:not(:disabled) {
&:hover {
box-shadow:
0 2px 3px 0 rgba(0, 2, 4, 0.13),
0 6px 4px -4px rgba(0, 2, 4, 0.1);
}
&:active,
&:focus-within,
&:focus {
@include inputShadowActive;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2);
}
}
}
@@ -147,19 +117,33 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
@include blur-bg(var(--theme-bg), 0.3);
}
@mixin readOnly {
background: var(--theme-elevation-100);
color: var(--theme-elevation-400);
box-shadow: none;
&:hover {
border-color: var(--theme-elevation-150);
box-shadow: none;
}
}
@mixin formInput() {
@include inputShadow;
font-family: var(--font-body);
width: 100%;
border: 1px solid var(--theme-elevation-150);
border-radius: var(--style-radius-s);
background: var(--theme-input-bg);
color: var(--theme-elevation-800);
border-radius: 0;
font-size: 1rem;
height: base(2);
line-height: base(1);
padding: base(0.5) base(0.75);
padding: base(0.4) base(0.75);
-webkit-appearance: none;
transition-property: border, box-shadow;
transition-duration: 100ms;
transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
&[data-rtl='true'] {
direction: rtl;
@@ -189,12 +173,7 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
}
&:disabled {
background: var(--theme-elevation-200);
color: var(--theme-elevation-450);
&:hover {
border-color: var(--theme-elevation-150);
}
@include readOnly;
}
}

4
packages/richtext-slate/src/field/index.scss
View File

@@ -38,7 +38,8 @@
&__editor {
font-family: var(--font-serif);
font-size: base(0.625);
font-size: base(0.8);
letter-spacing: 0.02em;
h1,
h2,
@@ -48,6 +49,7 @@
h6 {
font-family: var(--font-body);
line-height: 1.125;
letter-spacing: 0;
}
h1[data-slate-node='element'] {

13
packages/richtext-slate/src/scss/app.scss
View File

@@ -3,7 +3,7 @@
@import './colors.scss';
:root {
--base-px: 25;
--base-px: 20;
--base-body-size: 13;
--base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
@@ -21,6 +21,7 @@
--theme-baseline-body-size: #{$baseline-body-size};
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
sans-serif;
--font-serif: Georgia, 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
--font-mono: monospace;
--style-radius-s: #{$style-radius-s};
@@ -67,12 +68,6 @@ html {
@extend %body;
background: var(--theme-bg);
-webkit-font-smoothing: antialiased;
opacity: 0;
&[data-theme='dark'],
&[data-theme='light'] {
opacity: initial;
}
&[data-theme='dark'] {
--theme-bg: var(--theme-elevation-0);
@@ -111,12 +106,12 @@ body {
}
::selection {
background: var(--theme-success-500);
background: var(--color-success-250);
color: var(--theme-base-800);
}
::-moz-selection {
background: var(--theme-success-500);
background: var(--color-success-250);
color: var(--theme-base-800);
}

59
packages/richtext-slate/src/scss/toastify.scss Normal file
View File

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

124
packages/richtext-slate/src/scss/toasts.scss
View File

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

37
packages/richtext-slate/src/scss/type.scss
View File

@@ -15,17 +15,10 @@
font-weight: 500;
}
%jumbo {
font-size: base(2.5);
line-height: 1;
margin: 0 0 base(2);
}
%h1 {
margin: 0 0 base(1);
font-size: base(2);
line-height: 1.15;
letter-spacing: -1px;
font-size: base(1.6);
line-height: base(1.8);
@include small-break {
letter-spacing: -0.5px;
@@ -35,9 +28,8 @@
%h2 {
margin: 0 0 base(1);
font-size: base(1.25);
line-height: 1.15;
letter-spacing: -0.5px;
font-size: base(1.3);
line-height: base(1.6);
@include small-break {
font-size: base(0.85);
@@ -46,9 +38,8 @@
%h3 {
margin: 0 0 base(1);
font-size: base(0.925);
line-height: 1.25;
letter-spacing: -0.5px;
font-size: base(1);
line-height: base(1.2);
@include small-break {
font-size: base(0.65);
@@ -58,27 +49,27 @@
%h4 {
margin: 0 0 $baseline;
font-size: base(0.75);
line-height: 1.5;
font-size: base(0.8);
line-height: base(1);
letter-spacing: -0.375px;
}
%h5 {
margin: 0;
font-size: base(0.5625);
line-height: 1.5;
font-size: base(0.65);
line-height: base(0.8);
}
%h6 {
margin: 0;
font-size: base(0.5);
line-height: 1.5;
font-size: base(0.6);
line-height: base(0.8);
}
%small {
margin: 0;
font-size: 11px;
line-height: 1.5;
font-size: 12px;
line-height: 20px;
}
/////////////////////////////

73
packages/richtext-slate/src/scss/vars.scss
View File

@@ -13,7 +13,7 @@ $breakpoint-l-width: 1440px !default;
// BASELINE GRID
//////////////////////////////
$baseline-px: 25px !default;
$baseline-px: 20px !default;
$baseline-body-size: 13px !default;
$baseline: math.div($baseline-px, $baseline-body-size) + rem;
@@ -40,7 +40,7 @@ $color-purple: #f3ddf3 !default;
$style-radius-s: 3px !default;
$style-radius-m: 4px !default;
$style-radius-l: 9px !default;
$style-radius-l: 8px !default;
$style-stroke-width: 1px !default;
$style-stroke-width-s: 1px !default;
@@ -50,8 +50,8 @@ $style-stroke-width-m: 2px !default;
// MISC
//////////////////////////////
$top-header-offset: calc(var(--base) - 1px);
$top-header-offset-m: calc(var(--base) * 3);
$top-header-offset: calc(base(1) - 1px);
$top-header-offset-m: base(3);
$focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
//////////////////////////////
@@ -59,41 +59,19 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
//////////////////////////////
@mixin shadow-sm {
box-shadow:
0 2px 3px 0 rgba(0, 2, 4, 0.05),
0 10px 4px -8px rgba(0, 2, 4, 0.02);
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}
@mixin shadow-m {
box-shadow:
0 0 30px 0 rgb(0 2 4 / 12%),
0 30px 25px -8px rgb(0 2 4 / 10%);
box-shadow: 0 4px 8px -3px rgba(0, 0, 0, 0.1);
}
@mixin shadow-lg {
box-shadow:
0 20px 35px -10px rgba(0, 2, 4, 0.2),
0 6px 4px -4px rgba(0, 2, 4, 0.02);
box-shadow: 0 -2px 16px -2px rgba(0, 0, 0, 0.2);
}
@mixin shadow-lg-top {
box-shadow:
0 -20px 35px -10px rgba(0, 2, 4, 0.2),
0 -6px 4px -4px rgba(0, 2, 4, 0.02);
}
@mixin shadow {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
}
@mixin inputShadowActive {
box-shadow:
0 2px 3px 0 rgba(0, 2, 4, 0.16),
0 6px 4px -4px rgba(0, 2, 4, 0.13);
box-shadow: 0 2px 16px -2px rgba(0, 0, 0, 0.2);
}
@mixin inputShadow {
@@ -101,15 +79,7 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
&:not(:disabled) {
&:hover {
box-shadow:
0 2px 3px 0 rgba(0, 2, 4, 0.13),
0 6px 4px -4px rgba(0, 2, 4, 0.1);
}
&:active,
&:focus-within,
&:focus {
@include inputShadowActive;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2);
}
}
}
@@ -147,19 +117,33 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
@include blur-bg(var(--theme-bg), 0.3);
}
@mixin readOnly {
background: var(--theme-elevation-100);
color: var(--theme-elevation-400);
box-shadow: none;
&:hover {
border-color: var(--theme-elevation-150);
box-shadow: none;
}
}
@mixin formInput() {
@include inputShadow;
font-family: var(--font-body);
width: 100%;
border: 1px solid var(--theme-elevation-150);
border-radius: var(--style-radius-s);
background: var(--theme-input-bg);
color: var(--theme-elevation-800);
border-radius: 0;
font-size: 1rem;
height: base(2);
line-height: base(1);
padding: base(0.5) base(0.75);
padding: base(0.4) base(0.75);
-webkit-appearance: none;
transition-property: border, box-shadow;
transition-duration: 100ms;
transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
&[data-rtl='true'] {
direction: rtl;
@@ -189,12 +173,7 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
}
&:disabled {
background: var(--theme-elevation-200);
color: var(--theme-elevation-450);
&:hover {
border-color: var(--theme-elevation-150);
}
@include readOnly;
}
}

13
packages/ui/src/elements/ArrayAction/index.scss
View File

@@ -30,17 +30,4 @@
}
}
}
&__move-up {
margin-bottom: 2px;
}
&__move-down {
margin-top: 6px;
margin-bottom: 2px;
}
&__action-chevron {
padding: 0 calc(var(--base) / 4);
}
}

2
packages/ui/src/elements/Banner/index.scss
View File

@@ -7,7 +7,7 @@
vertical-align: middle;
background: var(--theme-elevation-100);
color: var(--theme-elevation-800);
border-radius: $style-radius-s;
border-radius: $style-radius-m;
padding: base(0.5);
margin-bottom: $baseline;

246
packages/ui/src/elements/Button/index.scss
View File

@@ -6,22 +6,45 @@ a.btn {
.btn {
background: transparent;
line-height: base(1);
border-radius: $style-radius-m;
font-size: 1rem;
margin-top: base(1);
margin-bottom: base(1);
border-radius: $style-radius-s;
font-size: var(--base-body-size);
margin-block: base(1.2);
line-height: base(1.2);
border: 0;
cursor: pointer;
font-weight: normal;
text-decoration: none;
text-align: center;
color: inherit;
transition-property: border, color, box-shadow, background;
transition-duration: 100ms;
transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
.btn__icon {
&__content {
display: flex;
align-items: center;
justify-content: center;
}
&__icon {
width: base(1.2);
height: base(1.2);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid;
border-radius: 100%;
@include color-svg(currentColor);
padding: base(0.1);
color: inherit;
.icon {
width: 100%;
height: 100%;
}
&.btn--size-small {
padding: base(0.2);
}
}
&--has-tooltip {
@@ -40,158 +63,125 @@ a.btn {
}
}
span {
line-height: base(1);
}
&--size-small {
padding: 0 base(0.4);
span,
svg {
vertical-align: top;
&.btn--icon-position-left {
padding-inline-start: base(0.1);
padding-inline-end: base(0.4);
.btn__content {
flex-direction: row-reverse;
}
}
&.btn--icon-position-right {
padding-inline-start: base(0.4);
padding-inline-end: base(0.1);
}
}
&--size-medium {
padding: base(0.5) $baseline;
padding: base(0.2) base(0.6);
&.btn--icon-position-left {
padding-inline-start: base(0.4);
padding-inline-end: base(0.6);
.btn__content {
gap: base(0.2);
flex-direction: row-reverse;
}
}
&.btn--icon-position-right {
padding-inline-start: base(0.6);
padding-inline-end: base(0.4);
.btn__content {
gap: base(0.2);
}
}
}
&--size-small {
padding: base(0.25) base(0.5);
&--size-large {
padding: base(0.4) base(0.8);
&.btn--icon-position-left {
padding-inline-start: base(0.6);
padding-inline-end: base(0.8);
.btn__content {
gap: base(0.4);
flex-direction: row-reverse;
}
}
&.btn--icon-position-right {
padding-inline-start: base(0.8);
padding-inline-end: base(0.6);
.btn__content {
gap: base(0.4);
}
}
}
&--style-primary {
background-color: var(--theme-elevation-800);
background: var(--theme-elevation-800);
color: var(--theme-elevation-0);
&.btn--disabled {
background-color: var(--theme-elevation-400);
background: var(--theme-elevation-200);
}
&:not(.btn--disabled) {
&:hover,
&:focus-visible {
background: var(--theme-elevation-750);
}
&:focus-visible,
&:focus,
&:active {
background: var(--theme-elevation-700);
background: var(--theme-elevation-600);
}
}
&:focus:not(:focus-visible) {
box-shadow: $focus-box-shadow;
outline: none;
.icon {
@include color-svg(var(--theme-elevation-0));
}
}
&--style-secondary {
$base-box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-800);
$hover-box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-700);
box-shadow: $base-box-shadow;
color: var(--theme-elevation-800);
background: none;
backdrop-filter: blur(5px);
&:hover,
&:focus-visible {
background: var(--theme-elevation-100);
box-shadow: $hover-box-shadow;
}
&:active {
background: var(--theme-elevation-200);
}
box-shadow: inset 0 0 0 1px var(--theme-elevation-800);
color: var(--theme-text);
&.btn--disabled {
color: var(--theme-elevation-400);
background: none;
box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-400);
color: var(--theme-elevation-200);
box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
}
&:focus:not(:focus-visible) {
outline: none;
box-shadow: $hover-box-shadow, $focus-box-shadow;
&:not(.btn--disabled) {
&:hover,
&:focus-visible,
&:focus,
&:active {
color: var(--theme-elevation-600);
box-shadow: inset 0 0 0 1px var(--theme-elevation-400);
}
}
}
&--style-icon-label,
&--style-icon-label.btn--icon-position-left,
&--style-icon-label.btn--icon-position-right {
padding: 0;
font-weight: 600;
.btn__content {
gap: base(0.4);
}
}
&--style-none {
padding: 0;
margin: 0;
border-radius: 0;
&:focus {
opacity: 0.8;
}
&:active {
opacity: 0.7;
}
}
&--round {
border-radius: 100%;
}
[dir='rtl'] &--icon {
span {
margin-left: 5px;
}
}
&--icon {
span {
display: flex;
justify-content: space-between;
}
&.btn--style-primary {
.icon {
@include color-svg(var(--theme-elevation-0));
}
}
}
&--style-icon-label {
padding: 0;
font-weight: 600;
}
&--style-light-gray {
box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-800);
}
&--icon-position-left {
.btn__content {
flex-direction: row-reverse;
}
.btn__icon {
margin-right: base(0.5);
}
}
&--icon-position-right {
.btn__icon {
margin-left: base(0.5);
}
}
&--icon-only {
.btn__icon {
padding: 0;
margin: 0;
}
}
&--disabled {
cursor: default;
}
&:hover,
&:focus-visible {
.btn__icon {
@include color-svg(var(--theme-elevation-0));
background: var(--theme-elevation-800);
}
}
&:focus:not(:focus-visible) {
@@ -214,4 +204,8 @@ a.btn {
outline: var(--accessibility-outline);
outline-offset: var(--accessibility-outline-offset);
}
&.btn--disabled {
cursor: not-allowed;
}
}

2
packages/ui/src/elements/Button/index.tsx
View File

@@ -81,7 +81,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((
disabled && `${baseClass}--disabled`,
round && `${baseClass}--round`,
size && `${baseClass}--size-${size}`,
iconPosition && `${baseClass}--icon-position-${iconPosition}`,
icon && iconPosition && `${baseClass}--icon-position-${iconPosition}`,
tooltip && `${baseClass}--has-tooltip`,
]
.filter(Boolean)

2
packages/ui/src/elements/Button/types.ts
View File

@@ -17,7 +17,7 @@ export type Props = {
newTab?: boolean
onClick?: (event: MouseEvent) => void
round?: boolean
size?: 'medium' | 'small'
size?: 'large' | 'medium' | 'small'
to?: string
tooltip?: string
type?: 'button' | 'submit'

47
packages/ui/src/elements/Card/index.scss
View File

@@ -2,24 +2,50 @@
.card {
background: var(--theme-elevation-50);
padding: base(1.25) $baseline;
padding: base(0.8);
width: 100%;
min-height: base(4);
position: relative;
border-radius: var(--style-radius-m);
border: 1px solid var(--theme-border-color);
transition-property: border, box-shadow, background;
transition-duration: 100ms;
transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
display: flex;
justify-content: space-between;
align-self: start;
gap: base(0.8);
&__title {
@extend %h5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@extend %h4;
letter-spacing: 0;
font-weight: 600;
line-height: base(1.2);
width: 100%;
margin: 0;
}
&__actions {
position: relative;
z-index: 2;
margin-top: base(0.5);
display: inline-flex;
.btn {
margin: 0;
flex-shrink: 0;
}
.btn__icon {
border: 1px solid var(--theme-border-color);
transition-property: border, box-shadow, color, background;
transition-duration: 100ms;
transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
&:hover {
border: 1px solid var(--theme-elevation-500);
background-color: var(--theme-elevation-0);
color: currentColor;
@include shadow-sm;
}
}
}
@@ -27,16 +53,19 @@
cursor: pointer;
&:hover {
background: var(--theme-elevation-100);
background: var(--theme-elevation-50);
border: 1px solid var(--theme-elevation-250);
box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.05);
}
}
&__click {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
margin: 0;
}
}

1
packages/ui/src/elements/CodeEditor/CodeEditor.tsx
View File

@@ -21,6 +21,7 @@ const CodeEditor: React.FC<Props> = (props) => {
baseClass,
className,
rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : '',
readOnly && 'read-only',
]
.filter(Boolean)
.join(' ')

91
packages/ui/src/elements/Collapsible/index.scss
View File

@@ -2,20 +2,44 @@
.collapsible {
--toggle-pad-h: #{base(0.75)};
--toggle-pad-v: #{base(0.5)};
--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;
& > * {
z-index: 2;
}
&:has(.collapsible__drag) {
padding-inline-start: base(0.4);
}
}
&__drag {
display: flex;
opacity: 0.5;
position: absolute;
z-index: 1;
z-index: 2;
top: var(--toggle-pad-v);
left: base(0.5);
width: base(1.2);
height: base(1.2);
padding: base(0.1);
icon {
width: 100%;
height: 100%;
}
}
&__toggle {
@@ -23,10 +47,15 @@
@extend %body;
text-align: left;
cursor: pointer;
border-top-right-radius: $style-radius-s;
border-top-left-radius: $style-radius-s;
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;
z-index: 1;
span {
user-select: none;
@@ -43,9 +72,6 @@
.row-label {
color: var(--theme-text);
}
.collapsible__toggle {
background: var(--theme-elevation-50);
}
}
&.collapsible--hovered {
> .collapsible__toggle-wrap .collapsible__toggle {
@@ -54,57 +80,62 @@
}
}
&__toggle,
&__header-wrap {
padding: var(--toggle-pad-v) var(--toggle-pad-h);
}
&__header-wrap {
position: absolute;
top: 0;
right: base(3);
bottom: 0;
left: 0;
pointer-events: none;
> * {
pointer-events: all;
}
width: 100%;
}
&__header-wrap--has-drag-handle {
left: base(0.875);
left: base(1);
}
&--collapsed {
.collapsible__toggle {
border-bottom-right-radius: $style-radius-s;
border-bottom-left-radius: $style-radius-s;
.collapsible__toggle-wrap {
border-bottom-right-radius: $style-radius-m;
border-bottom-left-radius: $style-radius-m;
}
}
&__actions-wrap {
position: absolute;
right: var(--toggle-pad-h);
top: var(--toggle-pad-v);
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 {
padding: calc(var(--base) / 4);
display: flex;
align-items: flex-start;
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-s;
border-bottom-right-radius: $style-radius-s;
border-bottom-left-radius: $style-radius-m;
border-bottom-right-radius: $style-radius-m;
padding: var(--base);
}

22
packages/ui/src/elements/ColumnSelector/index.scss
View File

@@ -10,10 +10,28 @@
margin-right: base(0.5);
margin-bottom: base(0.5);
background-color: transparent;
box-shadow: 0 0 0 1px var(--theme-elevation-200);
box-shadow: 0 0 0 1px var(--theme-elevation-150);
&.column-selector__column {
cursor: pointer;
&:hover {
background-color: var(--theme-elevation-100);
}
}
&.column-selector__column--active {
background-color: var(--theme-elevation-150);
background-color: var(--theme-elevation-0);
box-shadow:
0 0px 1px 1px var(--theme-elevation-150),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
&:hover {
background-color: var(--theme-elevation-0);
box-shadow:
0 0px 1px 1px var(--theme-elevation-250),
0 3px 4px -1px rgba(0, 0, 0, 0.1);
}
}
}

4
packages/ui/src/elements/DocumentControls/index.scss
View File

@@ -103,8 +103,8 @@
gap: 2px;
border: 1px solid var(--theme-elevation-100);
border-radius: $style-radius-m;
height: calc(var(--base) * 1.5);
width: calc(var(--base) * 1.5);
height: calc(var(--base) * 1.6);
width: calc(var(--base) * 1.6);
&:hover {
border: 1px solid var(--theme-elevation-500);

10
packages/ui/src/elements/DocumentDrawer/index.scss
View File

@@ -45,15 +45,13 @@
padding: 0;
cursor: pointer;
overflow: hidden;
width: base(1);
height: base(1);
width: base(2);
height: base(2);
svg {
width: base(2.75);
height: base(2.75);
width: base(2);
height: base(2);
position: relative;
left: base(-0.825);
top: base(-0.825);
.stroke {
stroke-width: 2px;

11
packages/ui/src/elements/DraggableSortable/DraggableSortableItem/index.tsx
View File

@@ -14,10 +14,11 @@ export const DraggableSortableItem: React.FC<
> = (props) => {
const { id, children, disabled } = props
const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({
id,
disabled,
})
const { attributes, isDragging, listeners, setNodeRef, transform, transition } =
useDraggableSortable({
id,
disabled,
})
return (
<Fragment>
@@ -28,9 +29,11 @@ export const DraggableSortableItem: React.FC<
cursor: isDragging ? 'grabbing' : 'grab',
},
},
isDragging,
listeners,
setNodeRef,
transform,
transition,
})}
</Fragment>
)

8
packages/ui/src/elements/DraggableSortable/useDraggableSortable/index.tsx
View File

@@ -8,9 +8,13 @@ import type { UseDraggableSortableReturn } from './types.js'
export const useDraggableSortable = (props: UseDraggableArguments): UseDraggableSortableReturn => {
const { id, disabled } = props
const { attributes, isDragging, listeners, setNodeRef, transform } = useSortable({
const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
id,
disabled,
transition: {
duration: 250,
easing: 'cubic-bezier(0, 0.2, 0.2, 1)',
},
})
return {
@@ -18,11 +22,13 @@ export const useDraggableSortable = (props: UseDraggableArguments): UseDraggable
...attributes,
style: {
cursor: isDragging ? 'grabbing' : 'grab',
transition,
},
},
isDragging,
listeners,
setNodeRef,
transform: transform && `translate3d(${transform.x}px, ${transform.y}px, 0)`, // translate3d is faster than translate in most browsers
transition,
}
}

1
packages/ui/src/elements/DraggableSortable/useDraggableSortable/types.ts
View File

@@ -7,4 +7,5 @@ export type UseDraggableSortableReturn = {
listeners: SyntheticListenerMap
setNodeRef: (node: HTMLElement | null) => void
transform: string
transition: string
}

18
packages/ui/src/elements/Drawer/index.scss
View File

@@ -80,6 +80,7 @@ $transTime: 200;
&__header {
display: flex;
align-items: center;
margin-top: base(2.5);
margin-bottom: base(1);
width: 100%;
@@ -95,19 +96,22 @@ $transTime: 200;
padding: 0;
cursor: pointer;
overflow: hidden;
width: base(1);
height: base(1);
direction: ltr;
display: flex;
align-items: center;
justify-content: center;
width: base(1.2);
height: base(1.2);
svg {
width: base(2.75);
height: base(2.75);
margin: base(-1.2);
width: base(2.4);
height: base(2.4);
position: relative;
left: base(-0.825);
top: base(-0.825);
.stroke {
stroke-width: 2px;
stroke-width: 1px;
vector-effect: non-scaling-stroke;
}
}

10
packages/ui/src/elements/Dropzone/index.scss
View File

@@ -4,12 +4,15 @@
position: relative;
display: flex;
align-items: center;
gap: $baseline;
padding: base(2);
background: var(--theme-elevation-100);
gap: base(0.4);
padding: base(1.6);
background: var(--theme-elevation-50);
border: 1px dotted var(--theme-elevation-400);
border-radius: var(--style-radius-s);
height: 100%;
width: 100%;
box-shadow: 0 0 0 0 transparent;
transition: all 100ms cubic-bezier(0, 0.2, 0.2, 1);
.btn {
margin: 0;
@@ -18,6 +21,7 @@
&.dragging {
border-color: var(--theme-success-500);
background: var(--theme-success-150);
@include shadow-m;
* {
pointer-events: none;

4
packages/ui/src/elements/Dropzone/index.tsx
View File

@@ -107,7 +107,7 @@ export const Dropzone: React.FC<Props> = ({ className, mimeTypes, onChange, onPa
onClick={() => {
inputRef.current.click()
}}
size="small"
size="medium"
>
{t('upload:selectFile')}
</Button>
@@ -115,7 +115,7 @@ export const Dropzone: React.FC<Props> = ({ className, mimeTypes, onChange, onPa
buttonStyle="secondary"
className={`${baseClass}__file-button`}
onClick={onPasteUrlClick}
size="small"
size="medium"
>
{t('upload:pasteURL')}
</Button>

4
packages/ui/src/elements/EditMany/index.scss
View File

@@ -3,7 +3,7 @@
.edit-many {
&__toggle {
font-size: 1rem;
line-height: base(1);
line-height: base(1.2);
display: inline-flex;
background: var(--theme-elevation-150);
color: var(--theme-elevation-800);
@@ -12,7 +12,7 @@
overflow: hidden;
text-overflow: ellipsis;
border: 0;
padding: 0 base(0.25);
padding: 0 base(0.4);
align-items: center;
cursor: pointer;
text-decoration: none;

5
packages/ui/src/elements/EditUpload/index.scss
View File

@@ -111,6 +111,9 @@ $header-height: base(5);
&__crop,
&__focalOnly {
padding: base(1.5) base(1.5) base(1.5) 0;
width: 100%;
display: flex;
justify-content: center;
}
&__crop {
@@ -181,7 +184,7 @@ $header-height: base(5);
height: fit-content;
border-radius: var(--style-radius-s);
background-color: var(--theme-elevation-150);
padding: 0 base(0.25);
padding: 0 base(0.4);
}
&__input {

1
packages/ui/src/elements/FileDetails/FileMeta/index.scss
View File

@@ -3,6 +3,7 @@
.file-meta {
&__url {
display: flex;
gap: base(0.4);
a {
font-weight: 600;

40
packages/ui/src/elements/FileDetails/index.scss
View File

@@ -1,27 +1,46 @@
@import '../../scss/styles.scss';
.file-details {
background-color: var(--theme-elevation-50);
background: var(--theme-elevation-50);
border: 1px solid var(--theme-border-color);
border-radius: var(--style-radius-m);
@include inputShadow;
header {
display: flex;
align-items: flex-start;
border-bottom: 1px solid var(--theme-elevation-0);
flex-direction: row;
flex-wrap: wrap;
}
&__remove {
margin: $baseline $baseline $baseline 0;
position: absolute;
margin: 0;
top: $baseline;
right: $baseline;
& .btn__icon {
border: 1px solid var(--theme-border-color);
background: var(--theme-input-bg);
@include inputShadow;
transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
&:hover {
border: 1px solid var(--theme-elevation-400);
}
}
}
&__main-detail {
padding: $baseline base(1.5);
padding: base(0.8) base(1.2);
width: auto;
flex-grow: 1;
min-width: 0;
min-width: 280px;
max-width: 100%;
display: flex;
flex-direction: column;
align-self: center;
gap: base(0.25);
justify-content: center;
align-self: stretch;
gap: base(0.2);
}
&__toggle-more-info {
@@ -66,7 +85,7 @@
cursor: pointer;
background-color: var(--theme-elevation-150);
border: none;
border-radius: $style-radius-s;
border-radius: $style-radius-m;
padding: base(0.25) base(0.5);
&:hover {
@@ -102,12 +121,9 @@
&__remove {
order: 2;
margin-left: auto;
margin-right: $baseline;
}
&__main-detail {
border-top: $style-stroke-width-m solid var(--theme-elevation-0);
order: 3;
width: 100%;
}

16
packages/ui/src/elements/FileDetails/index.tsx
View File

@@ -42,6 +42,8 @@ export const FileDetails: React.FC<FileDetailsProps> = (props) => {
<div className={baseClass}>
<header>
<Thumbnail
// size="small"
className={`${baseClass}__thumbnail`}
collectionSlug={collectionSlug}
doc={doc}
fileSrc={thumbnailURL || url}
@@ -60,12 +62,14 @@ export const FileDetails: React.FC<FileDetailsProps> = (props) => {
width={width as number}
/>
<UploadActions
customActions={customUploadActions}
enableAdjustments={enableAdjustments}
enablePreviewSizes={hasImageSizes && doc.filename}
mimeType={mimeType}
/>
{(enableAdjustments || customUploadActions) && (
<UploadActions
customActions={customUploadActions}
enableAdjustments={enableAdjustments}
enablePreviewSizes={hasImageSizes && doc.filename}
mimeType={mimeType}
/>
)}
</div>
{handleRemove && (
<Button

126
packages/ui/src/elements/Hamburger/index.scss
View File

@@ -4,117 +4,37 @@
padding: 0;
border: 0;
cursor: pointer;
background-color: transparent;
background-color: var(--theme-bg);
outline: none;
position: relative;
@include blur-bg;
--hamburger-padding: 8px;
--hamburger-size: 9px;
--hamburger-line-gap: 3px;
color: var(--theme-text);
box-shadow: 0px 0px 0px 1px var(--theme-elevation-150);
padding: base(0.1);
border-radius: 3px;
position: relative;
z-index: 1;
height: 100%;
width: 100%;
transition-property: box-shadow, background-color;
transition-duration: 100ms;
transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
&__wrapper {
border: 1px solid var(--theme-elevation-150);
padding: var(--hamburger-padding);
border-radius: 3px;
position: relative;
z-index: 1;
height: 100%;
width: 100%;
&:hover {
border: 1px solid var(--theme-elevation-500);
background-color: var(--theme-elevation-100);
}
&:focus {
outline: none;
}
&:hover {
background-color: var(--theme-elevation-100);
box-shadow: 0px 0px 0px 1px var(--theme-elevation-500);
}
&__icon {
position: relative;
z-index: 1;
height: var(--hamburger-size);
width: var(--hamburger-size);
display: flex;
.stroke {
stroke: currentColor;
stroke-width: 1px;
}
svg {
height: 100%;
}
&:focus {
outline: none;
}
&::after {
z-index: -1;
}
&__open-icon,
&__close-icon {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate3d(-50%, -50%, 0);
}
&__lines {
display: flex;
flex-direction: column;
gap: var(--hamburger-line-gap);
width: 100%;
margin: auto;
}
&__line {
background-color: currentColor;
width: 100%;
height: 1px;
}
&__x-left {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0) rotate(45deg);
}
&__x-right {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}
&__collapse-chevron {
left: -1px;
position: relative;
}
&--active {
.hamburger {
&__x,
&__collapse,
&__collapse-label {
display: block;
opacity: 1;
}
&__icon {
display: none;
opacity: 0;
}
}
}
@include mid-break {
&__collapse-chevron {
top: 1px;
left: 0px;
}
width: var(--hamburger-size);
height: var(--hamburger-size);
}
}

46
packages/ui/src/elements/Hamburger/index.tsx
View File

@@ -1,4 +1,5 @@
'use client'
import { CloseMenuIcon, MenuIcon } from '@payloadcms/ui'
import React from 'react'
import { ChevronIcon } from '../../icons/Chevron/index.js'
@@ -16,34 +17,25 @@ export const Hamburger: React.FC<{
return (
<div className={baseClass}>
<div className={`${baseClass}__wrapper`}>
<div className={`${baseClass}__icon`}>
{!isActive && (
<div className={`${baseClass}__lines`} title={t('general:open')}>
<div className={`${baseClass}__line ${baseClass}__top`} />
<div className={`${baseClass}__line ${baseClass}__middle`} />
<div className={`${baseClass}__line ${baseClass}__bottom`} />
</div>
)}
{isActive && (
<div
aria-label={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}
className={`${baseClass}__close-icon`}
title={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}
>
{closeIcon === 'x' && (
<React.Fragment>
<div className={`${baseClass}__line ${baseClass}__x-left`} />
<div className={`${baseClass}__line ${baseClass}__x-right`} />
</React.Fragment>
)}
{closeIcon === 'collapse' && (
<ChevronIcon className={`${baseClass}__collapse-chevron`} direction="left" />
)}
</div>
)}
{!isActive && (
<div
aria-label={t('general:open')}
className={`${baseClass}__open-icon`}
title={t('general:open')}
>
<MenuIcon />
</div>
</div>
)}
{isActive && (
<div
aria-label={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}
className={`${baseClass}__close-icon`}
title={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}
>
{closeIcon === 'x' && <CloseMenuIcon />}
{closeIcon === 'collapse' && <ChevronIcon direction="left" />}
</div>
)}
</div>
)
}

4
packages/ui/src/elements/IDLabel/index.scss
View File

@@ -3,9 +3,9 @@
.id-label {
font-size: base(0.75);
font-weight: normal;
color: var(--theme-elevation-400);
color: var(--theme-elevation-600);
background: var(--theme-elevation-100);
padding: base(0.25) base(0.5);
padding: 0 base(0.6);
border-radius: $style-radius-m;
display: inline-flex;
}

2
packages/ui/src/elements/IDLabel/index.tsx
View File

@@ -12,7 +12,7 @@ export const IDLabel: React.FC<{ className?: string; id: string; prefix?: string
}) => (
<div className={[baseClass, className].filter(Boolean).join(' ')} title={id}>
{prefix}
&nbsp;&nbsp;
&nbsp;
{id}
</div>
)

18
packages/ui/src/elements/ListControls/index.scss
View File

@@ -5,6 +5,9 @@
display: flex;
align-items: center;
background-color: var(--theme-elevation-50);
border-radius: var(--style-radius-m);
padding: base(0.6);
gap: base(0.6);
}
.search-filter {
@@ -18,21 +21,13 @@
&__buttons-wrap {
display: flex;
align-items: center;
gap: base(0.5);
[dir='ltr'] & {
margin-right: base(0.5);
}
[dir='rtl'] & {
margin-left: base(0.5);
}
gap: base(0.2);
.pill {
background-color: var(--theme-elevation-200);
background-color: var(--theme-elevation-150);
&:hover {
background-color: var(--theme-elevation-150);
background-color: var(--theme-elevation-100);
}
}
}
@@ -56,7 +51,6 @@
}
.search-filter {
margin-bottom: base(0.5);
width: 100%;
}

6
packages/ui/src/elements/ListControls/index.tsx
View File

@@ -13,6 +13,7 @@ import { useListInfo } from '@payloadcms/ui'
import { useUseTitleField } from '../../hooks/useUseAsTitle.js'
import { ChevronIcon } from '../../icons/Chevron/index.js'
import { SearchIcon } from '../../icons/Search/index.js'
import { useListQuery } from '../../providers/ListQuery/index.js'
import { useSearchParams } from '../../providers/SearchParams/index.js'
import { useTranslation } from '../../providers/Translation/index.js'
@@ -131,9 +132,12 @@ export const ListControls: React.FC<ListControlsProps> = (props) => {
return (
<div className={baseClass}>
<div className={`${baseClass}__wrap`}>
<SearchIcon />
<SearchFilter
fieldName={titleField?.name}
handleChange={handleSearchChange}
handleChange={(search) => {
return void handleSearchChange(search)
}}
initialParams={searchParams}
key={collectionSlug}
label={searchLabelTranslated.current}

4
packages/ui/src/elements/NavGroup/index.scss
View File

@@ -49,8 +49,8 @@
&--collapsed {
.collapsible__toggle {
border-bottom-right-radius: $style-radius-s;
border-bottom-left-radius: $style-radius-s;
border-bottom-right-radius: $style-radius-m;
border-bottom-left-radius: $style-radius-m;
}
}
}

29
packages/ui/src/elements/Pill/index.scss
View File

@@ -2,7 +2,7 @@
.pill {
font-size: 1rem;
line-height: base(1);
line-height: base(1.2);
display: inline-flex;
background: var(--theme-elevation-150);
color: var(--theme-elevation-800);
@@ -12,7 +12,7 @@
overflow: hidden;
text-overflow: ellipsis;
border: 0;
padding: 0 base(0.25);
padding: 0 base(0.4);
align-items: center;
flex-shrink: 0;
@@ -34,6 +34,7 @@
.icon {
flex-shrink: 0;
margin: base(0.1);
}
&__label {
@@ -42,10 +43,6 @@
text-overflow: ellipsis;
}
&__icon {
padding: calc(var(--base) / 4);
}
&--has-action {
cursor: pointer;
text-decoration: none;
@@ -56,27 +53,17 @@
}
&--has-icon {
padding-inline-start: base(0.4);
padding-inline-end: base(0.1);
svg {
display: block;
}
}
[dir='rtl'] &--align-icon-left {
padding-right: 0;
padding-left: 10px;
}
[dir='rtl'] &--align-icon-right {
padding-right: 10px;
padding-left: 0;
}
&--align-icon-left {
padding-left: 0;
}
&--align-icon-right {
padding-right: 0;
flex-direction: row-reverse;
padding-inline-start: base(0.1);
padding-inline-end: base(0.4);
}
&--style-white {

3
packages/ui/src/elements/Pill/index.tsx
View File

@@ -110,9 +110,8 @@ const StaticPill: React.FC<PillProps> = (props) => {
onClick={onClick}
type={Element === 'button' ? 'button' : undefined}
>
{icon && alignIcon === 'left' && <span className={`${baseClass}__icon`}>{icon}</span>}
<span className={`${baseClass}__label`}>{children}</span>
{icon && alignIcon === 'right' && <span className={`${baseClass}__icon`}>{icon}</span>}
{icon && <span className={`${baseClass}__icon`}>{icon}</span>}
</Element>
)
}

6
packages/ui/src/elements/Popup/index.scss
View File

@@ -9,6 +9,12 @@
--popup-padding: calc(var(--base) * 0.5);
position: relative;
&__trigger-wrap {
display: flex;
align-items: stretch;
height: 100%;
}
&__content {
position: absolute;
background: var(--popup-bg);

4
packages/ui/src/elements/PreviewButton/index.tsx
View File

@@ -13,13 +13,15 @@ const DefaultPreviewButton: React.FC = () => {
<Button
buttonStyle="secondary"
className={baseClass}
icon={'link'}
iconPosition="left"
// disabled={disabled}
onClick={() =>
generatePreviewURL({
openPreviewWindow: true,
})
}
size="small"
size="medium"
>
{label}
</Button>

2
packages/ui/src/elements/PublishButton/index.tsx
View File

@@ -46,7 +46,7 @@ export const DefaultPublishButton: React.FC<{ label?: string }> = ({ label: labe
buttonId="action-save"
disabled={!canPublish}
onClick={publish}
size="small"
size="medium"
type="button"
>
{label}

28
packages/ui/src/elements/ReactSelect/MultiValue/index.scss
View File

@@ -2,14 +2,36 @@
.multi-value {
&.rs__multi-value {
display: flex;
padding: 0;
background: var(--theme-input-bg);
border: $style-stroke-width-s solid var(--theme-elevation-800);
line-height: calc(#{$baseline} - #{$style-stroke-width-s * 2});
border: 1px solid var(--theme-border-color);
border-radius: var(--style-radius-s);
line-height: calc(#{$baseline} - 2px);
margin: base(0.25) base(0.5) base(0.25) 0;
transition: border 0.2s cubic-bezier(0.2, 0, 0, 1);
&:hover {
border: 1px solid var(--theme-elevation-250);
}
}
&--is-dragging {
z-index: 2;
}
}
html[data-theme='light'] {
.multi-value {
&.rs__multi-value {
background: var(--theme-elevation-50);
}
}
}
html[data-theme='dark'] {
.multi-value {
&.rs__multi-value {
background: var(--theme-elevation-50);
}
}
}

2
packages/ui/src/elements/ReactSelect/MultiValueLabel/index.scss
View File

@@ -4,9 +4,9 @@
@extend %small;
display: flex;
align-items: center;
padding: 0 base(0.125) 0 base(0.25);
max-width: 150px;
color: currentColor;
padding: 0 base(0.4);
&__text {
text-overflow: ellipsis;

6
packages/ui/src/elements/ReactSelect/MultiValueRemove/index.scss
View File

@@ -2,8 +2,7 @@
.multi-value-remove {
cursor: pointer;
width: base(0.75);
height: base(0.75);
width: base(1);
display: flex;
align-items: center;
justify-content: center;
@@ -11,10 +10,11 @@
background-color: transparent;
border: none;
padding: 0;
color: inherit;
&:hover {
color: var(--theme-elevation-800);
background: var(--theme-error-150);
background: var(--theme-elevation-150);
}
&__icon {

15
packages/ui/src/elements/ReactSelect/ValueContainer/index.scss
View File

@@ -5,9 +5,9 @@
min-width: 0;
.rs__value-container {
padding: base(0.25) 0;
min-height: base(1.5);
overflow: visible;
padding: 2px;
gap: 2px;
> * {
margin: 0;
@@ -21,18 +21,11 @@
}
&--is-multi {
margin-left: - base(0.25);
width: calc(100% + base(0.5));
padding-top: base(0.25);
padding-bottom: base(0.25);
padding-left: base(0.25);
.rs__multi-value {
margin: calc(#{base(0.125)} - #{$style-stroke-width-s * 2});
}
&.rs__value-container--has-value {
padding-left: 0;
padding: 0;
margin-inline-start: -4px;
}
}
}

5
packages/ui/src/elements/ReactSelect/index.scss
View File

@@ -8,8 +8,7 @@
.rs__control {
@include formInput;
height: auto;
padding-top: base(0.25);
padding-bottom: base(0.25);
padding: base(0.4) base(0.6);
flex-wrap: nowrap;
}
@@ -73,6 +72,6 @@
}
&.rs--is-disabled .rs__control {
background: var(--theme-elevation-200);
@include readOnly;
}
}

2
packages/ui/src/elements/RenderTitle/index.scss
View File

@@ -1,9 +1,9 @@
@import '../../scss/styles.scss';
.render-title {
display: inline-flex;
&__id {
vertical-align: middle;
position: relative;
top: -3px;
}
}

6
packages/ui/src/elements/SaveButton/index.tsx
View File

@@ -36,9 +36,11 @@ export const DefaultSaveButton: React.FC<{ label?: string }> = ({ label: labelPr
<FormSubmit
buttonId="action-save"
disabled={forceDisable}
onClick={() => submit()}
onClick={() => {
return void submit()
}}
ref={ref}
size="small"
size="medium"
type="button"
>
{label}

6
packages/ui/src/elements/SaveDraftButton/index.tsx
View File

@@ -74,9 +74,11 @@ export const DefaultSaveDraftButton: React.FC = () => {
buttonStyle="secondary"
className={baseClass}
disabled={forceDisable}
onClick={saveDraft}
onClick={() => {
return void saveDraft()
}}
ref={ref}
size="small"
size="medium"
type="button"
>
{t('version:saveDraft')}

3
packages/ui/src/elements/SearchFilter/index.scss
View File

@@ -21,8 +21,9 @@
&__input {
@include formInput;
height: auto;
padding: 0;
box-shadow: none;
padding-left: base(2);
background-color: var(--theme-elevation-50);
border: none;

2
packages/ui/src/elements/SearchFilter/index.tsx
View File

@@ -13,7 +13,6 @@ export type SearchFilterProps = {
import type { ParsedQs } from 'qs-esm'
import { useDebounce } from '../../hooks/useDebounce.js'
import { SearchIcon } from '../../icons/Search/index.js'
import './index.scss'
const baseClass = 'search-filter'
@@ -49,7 +48,6 @@ export const SearchFilter: React.FC<SearchFilterProps> = (props) => {
type="text"
value={value || ''}
/>
<SearchIcon />
</div>
)
}

1
packages/ui/src/elements/SelectRow/index.scss
View File

@@ -1,5 +1,6 @@
.select-row {
&__checkbox {
display: block;
width: min-content;
}
}

2
packages/ui/src/elements/StayLoggedIn/index.tsx
View File

@@ -50,6 +50,7 @@ export const StayLoggedInModal: React.FC = () => {
}),
)
}}
size="large"
>
{t('authentication:logOut')}
</Button>
@@ -58,6 +59,7 @@ export const StayLoggedInModal: React.FC = () => {
refreshCookie()
toggleModal(stayLoggedInModalSlug)
}}
size="large"
>
{t('authentication:stayLoggedIn')}
</Button>

2
packages/ui/src/elements/Table/DefaultCell/fields/Code/index.scss
View File

@@ -8,7 +8,7 @@
vertical-align: middle;
background: var(--theme-elevation-150);
color: var(--theme-elevation-800);
border-radius: $style-radius-s;
border-radius: $style-radius-m;
padding: 0 base(0.25);
background: var(--theme-elevation-100);
color: var(--theme-elevation-800);

2
packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.scss
View File

@@ -8,7 +8,7 @@
vertical-align: middle;
background: var(--theme-elevation-150);
color: var(--theme-elevation-800);
border-radius: $style-radius-s;
border-radius: $style-radius-m;
padding: 0 base(0.25);
[dir='ltr'] & {
padding-left: base(0.0875 + 0.25);

11
packages/ui/src/elements/Table/index.scss
View File

@@ -19,14 +19,23 @@
th,
td {
padding: base(0.75);
padding: base(0.8) base(0.6);
min-width: 150px;
&:first-child {
padding-inline-start: base(0.8);
}
&:last-child {
padding-inline-end: base(0.8);
}
}
tbody {
tr {
&:nth-child(odd) {
background: var(--theme-elevation-50);
border-radius: $style-radius-s;
}
}
}

11
packages/ui/src/elements/ThumbnailCard/index.scss
View File

@@ -2,9 +2,12 @@
.thumbnail-card {
@include btn-reset;
@include shadow;
@include shadow-m;
width: 100%;
background: var(--theme-input-bg);
border: 1px solid var(--theme-border-color);
border-radius: var(--style-radius-m);
transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
&__label {
padding: base(0.5);
@@ -16,6 +19,12 @@
&--has-on-click {
cursor: pointer;
&:hover,
&:focus,
&:active {
border: 1px solid var(--theme-elevation-350);
}
}
&--align-label-center {

3
packages/ui/src/elements/Upload/index.scss
View File

@@ -4,6 +4,7 @@
position: relative;
margin-bottom: var(--base);
background: var(--theme-elevation-50);
border-radius: var(--style-radius-s);
&__upload {
display: flex;
@@ -60,7 +61,7 @@
cursor: pointer;
background-color: var(--theme-elevation-150);
border: none;
border-radius: $style-radius-s;
border-radius: $style-radius-m;
padding: base(0.25) base(0.5);
text-wrap: nowrap;
overflow: hidden;

4
packages/ui/src/fields/Array/ArrayRow.tsx
View File

@@ -50,6 +50,7 @@ export const ArrayRow: React.FC<ArrayRowProps> = ({
forceRender = false,
hasMaxRows,
indexPath,
isDragging,
isSortable,
labels,
listeners,
@@ -65,6 +66,7 @@ export const ArrayRow: React.FC<ArrayRowProps> = ({
setCollapse,
setNodeRef,
transform,
transition,
}) => {
const path = `${parentPath}.${rowIndex}`
const { i18n } = useTranslation()
@@ -91,6 +93,8 @@ export const ArrayRow: React.FC<ArrayRowProps> = ({
ref={setNodeRef}
style={{
transform,
transition,
zIndex: isDragging ? 1 : undefined,
}}
>
<Collapsible

4
packages/ui/src/fields/Array/index.scss
View File

@@ -41,6 +41,7 @@
margin: 0;
padding: 0;
display: flex;
color: var(--theme-elevation-800);
}
&__header-action {
@@ -51,6 +52,7 @@
&:hover,
&:focus-visible {
text-decoration: underline;
color: var(--theme-elevation-600);
}
}
@@ -74,7 +76,7 @@
&__add-row {
align-self: flex-start;
color: var(--theme-elevation-400);
margin: 0;
margin: 2px 0;
&:hover {
color: var(--theme-elevation-800);

7
packages/ui/src/fields/Blocks/BlocksDrawer/BlockSearch/index.scss
View File

@@ -1,6 +1,6 @@
@import '../../../../scss/styles.scss';
$icon-width: base(1);
$icon-width: base(2);
$icon-margin: base(0.25);
.block-search {
@@ -13,14 +13,13 @@ $icon-margin: base(0.25);
&__input {
@include formInput;
padding-right: calc(#{$icon-width} + #{$icon-margin} * 2);
}
.search {
.icon--search {
position: absolute;
top: 50%;
transform: translate3d(0, -50%, 0);
right: base(0.25);
right: 0;
width: $icon-width;
margin: 0 $icon-margin;

1
packages/ui/src/fields/Blocks/SectionTitle/index.scss
View File

@@ -3,6 +3,7 @@
.section-title {
position: relative;
min-width: 0;
pointer-events: all;
&:after {
display: block;

15
packages/ui/src/fields/Checkbox/index.scss
View File

@@ -15,14 +15,16 @@
.checkbox-input {
display: inline-flex;
&:hover:not(&--read-only) {
label,
input {
cursor: pointer;
}
}
label {
padding-bottom: 0;
padding-left: base(0.5);
&[for] {
cursor: pointer;
}
}
[dir='rtl'] &__input {
@@ -51,7 +53,6 @@
opacity: 0;
border-radius: 0;
z-index: 1;
cursor: pointer;
}
}
@@ -69,8 +70,6 @@
&:focus {
.checkbox-input__input,
& input[type='checkbox'] {
@include inputShadowActive;
outline: 0;
box-shadow: 0 0 3px 3px var(--theme-success-400) !important;
border: 1px solid var(--theme-elevation-150);
@@ -105,7 +104,7 @@
&--read-only {
.checkbox-input__input {
background-color: var(--theme-elevation-100);
@include readOnly;
}
label {

6
packages/ui/src/fields/Code/index.scss
View File

@@ -15,4 +15,10 @@
background-color: var(--theme-error-50);
}
}
.read-only {
.code-editor {
@include readOnly;
}
}
}

19
packages/ui/src/fields/RadioGroup/Radio/index.scss
View File

@@ -18,7 +18,9 @@
}
&__styled-radio {
@include formInput;
border: 1px solid var(--theme-border-color);
background-color: var(--theme-input-bg);
@include shadow-sm;
width: $baseline;
height: $baseline;
position: relative;
@@ -31,11 +33,18 @@
display: block;
border-radius: 100%;
background-color: var(--theme-elevation-800);
width: calc(100% - 10px);
height: calc(100% - 10px);
border: 5px solid var(--theme-elevation-0);
width: calc(100% - 8px);
height: calc(100% - 8px);
border: 4px solid var(--theme-elevation-0);
opacity: 0;
}
&--disabled {
@include readOnly;
&::before {
border-color: var(--theme-elevation-100);
}
}
}
[dir='rtl'] &__label {
@@ -61,8 +70,6 @@
&:hover {
.radio-input {
&__styled-radio {
border-color: var(--theme-elevation-250);
&:before {
opacity: 0.2;
}

9
packages/ui/src/fields/RadioGroup/Radio/index.tsx
View File

@@ -39,7 +39,14 @@ export const Radio: React.FC<{
onChange={() => (typeof onChange === 'function' ? onChange(option.value) : null)}
type="radio"
/>
<span className={`${baseClass}__styled-radio`} />
<span
className={[
`${baseClass}__styled-radio`,
readOnly && `${baseClass}__styled-radio--disabled`,
]
.filter(Boolean)
.join(' ')}
/>
<span className={`${baseClass}__label`}>{getTranslation(option.label, i18n)}</span>
</div>
</label>

6
packages/ui/src/fields/RadioGroup/index.scss
View File

@@ -36,6 +36,10 @@
.radio-input {
cursor: default;
&:hover {
border-color: var(--theme-elevation-50);
}
&__label {
color: var(--theme-elevation-400);
}
@@ -43,7 +47,7 @@
&--is-selected {
.radio-input__styled-radio {
&:before {
background-color: var(--theme-elevation-100);
background-color: var(--theme-elevation-250);
}
}
}

3
packages/ui/src/fields/Relationship/AddNew/index.scss
View File

@@ -13,6 +13,9 @@
&__add-button,
&__add-button.doc-drawer__toggler {
@include formInput;
margin: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
position: relative;
height: 100%;
margin-left: -1px;

7
packages/ui/src/fields/Relationship/index.scss
View File

@@ -22,6 +22,13 @@
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'] {

1
packages/ui/src/fields/Relationship/index.tsx
View File

@@ -472,6 +472,7 @@ const RelationshipFieldComponent: React.FC<RelationshipFieldProps> = (props) =>
showError && 'error',
errorLoading && 'error-loading',
readOnly && `${baseClass}--read-only`,
!readOnly && allowCreate && `${baseClass}--allow-create`,
]
.filter(Boolean)
.join(' ')}

13
packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.scss
View File

@@ -2,10 +2,12 @@
.relationship--multi-value-label {
display: flex;
padding-inline-start: base(0.4);
gap: base(0.2);
&__content {
@extend %small;
padding: 0 base(0.125) 0 base(0.25);
line-height: base(1.1);
max-width: 150px;
color: currentColor;
display: flex;
@@ -23,16 +25,17 @@
display: flex;
align-items: center;
justify-content: center;
margin-left: base(0.25);
margin-left: base(0.2);
pointer-events: all;
.icon {
width: base(0.75);
height: base(0.75);
width: base(1);
height: base(1);
padding: base(0.1);
}
&:hover {
background-color: var(--theme-elevation-100);
background-color: var(--theme-elevation-150);
}
&:focus-visible {

31
packages/ui/src/fields/Text/Input.tsx
View File

@@ -70,7 +70,7 @@ export const TextInput: React.FC<TextInputProps> = (props) => {
/>
<div className={`${fieldBaseClass}__wrap`}>
<FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
{BeforeInput}
{hasMany ? (
<ReactSelect
className={`field-${path.replace(/\./g, '__')}`}
@@ -97,23 +97,20 @@ export const TextInput: React.FC<TextInputProps> = (props) => {
value={valueToRender}
/>
) : (
<div>
{BeforeInput}
<input
data-rtl={rtl}
disabled={readOnly}
id={`field-${path?.replace(/\./g, '__')}`}
name={path}
onChange={onChange as (e: ChangeEvent<HTMLInputElement>) => void}
onKeyDown={onKeyDown}
placeholder={getTranslation(placeholder, i18n)}
ref={inputRef}
type="text"
value={value || ''}
/>
{AfterInput}
</div>
<input
data-rtl={rtl}
disabled={readOnly}
id={`field-${path?.replace(/\./g, '__')}`}
name={path}
onChange={onChange as (e: ChangeEvent<HTMLInputElement>) => void}
onKeyDown={onKeyDown}
placeholder={getTranslation(placeholder, i18n)}
ref={inputRef}
type="text"
value={value || ''}
/>
)}
{AfterInput}
{CustomDescription !== undefined ? (
CustomDescription
) : (

7
packages/ui/src/fields/Textarea/index.scss
View File

@@ -23,12 +23,7 @@
&.read-only {
.textarea-outer {
background: var(--theme-elevation-200);
color: var(--theme-elevation-450);
&:hover {
border-color: var(--theme-elevation-150);
@include shadow-sm;
}
@include readOnly;
}
}

13
packages/ui/src/fields/Upload/index.scss
View File

@@ -6,16 +6,16 @@
&__wrap {
background: var(--theme-elevation-50);
padding: base(1);
padding: base(1.6);
border-radius: $style-radius-s;
}
&__buttons {
margin: base(-0.25);
width: calc(100% + #{base(0.5)});
flex-wrap: wrap;
display: flex;
align-items: center;
gap: base(0.25);
gap: base(0.4);
.btn {
margin: 0;
@@ -35,6 +35,13 @@
width: calc(100% - #{base(0.5)});
}
}
&.read-only {
.file-details {
@include readOnly;
color: var(--theme-elevation-600);
}
}
}
html[data-theme='light'] {

Some files were not shown because too many files have changed in this diff Show More