diff --git a/packages/next/src/elements/DocumentHeader/Tabs/Tab/index.scss b/packages/next/src/elements/DocumentHeader/Tabs/Tab/index.scss index f80949287..e0fe6ed83 100644 --- a/packages/next/src/elements/DocumentHeader/Tabs/Tab/index.scss +++ b/packages/next/src/elements/DocumentHeader/Tabs/Tab/index.scss @@ -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); } } diff --git a/packages/next/src/elements/LeaveWithoutSaving/index.tsx b/packages/next/src/elements/LeaveWithoutSaving/index.tsx index 969063b4a..c1f445953 100644 --- a/packages/next/src/elements/LeaveWithoutSaving/index.tsx +++ b/packages/next/src/elements/LeaveWithoutSaving/index.tsx @@ -37,10 +37,12 @@ const Component: React.FC<{

{t('general:changesNotSaved')}

- - +
diff --git a/packages/next/src/layouts/Root/index.tsx b/packages/next/src/layouts/Root/index.tsx index 56f11ad58..9b3c83419 100644 --- a/packages/next/src/layouts/Root/index.tsx +++ b/packages/next/src/layouts/Root/index.tsx @@ -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 ( - + * { + 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); + } } } } diff --git a/packages/next/src/scss/type.scss b/packages/next/src/scss/type.scss index 57b318a34..66af15f77 100644 --- a/packages/next/src/scss/type.scss +++ b/packages/next/src/scss/type.scss @@ -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; } ///////////////////////////// diff --git a/packages/next/src/scss/vars.scss b/packages/next/src/scss/vars.scss index 00c7d34f8..7ac4d321d 100644 --- a/packages/next/src/scss/vars.scss +++ b/packages/next/src/scss/vars.scss @@ -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; } } diff --git a/packages/next/src/views/CreateFirstUser/index.client.tsx b/packages/next/src/views/CreateFirstUser/index.client.tsx index 9501281dc..d4f47a9be 100644 --- a/packages/next/src/views/CreateFirstUser/index.client.tsx +++ b/packages/next/src/views/CreateFirstUser/index.client.tsx @@ -77,7 +77,7 @@ export const CreateFirstUserClient: React.FC<{ readOnly={false} schemaPath={userSlug} /> - {t('general:create')} + {t('general:create')} ) } diff --git a/packages/next/src/views/Dashboard/Default/index.scss b/packages/next/src/views/Dashboard/Default/index.scss index 8bb66adcb..803b54e36 100644 --- a/packages/next/src/views/Dashboard/Default/index.scss +++ b/packages/next/src/views/Dashboard/Default/index.scss @@ -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; } } diff --git a/packages/next/src/views/Edit/Default/Auth/index.tsx b/packages/next/src/views/Edit/Default/Auth/index.tsx index 73cd46fef..4562e503f 100644 --- a/packages/next/src/views/Edit/Default/Auth/index.tsx +++ b/packages/next/src/views/Edit/Default/Auth/index.tsx @@ -190,7 +190,7 @@ export const Auth: React.FC = (props) => { buttonStyle="secondary" disabled={disabled} onClick={() => handleChangePassword(false)} - size="small" + size="medium" > {t('general:cancel')} @@ -201,7 +201,7 @@ export const Auth: React.FC = (props) => { disabled={disabled} id="change-password" onClick={() => handleChangePassword(true)} - size="small" + size="medium" > {t('authentication:changePassword')} @@ -211,7 +211,7 @@ export const Auth: React.FC = (props) => { buttonStyle="secondary" disabled={disabled} onClick={() => void unlock()} - size="small" + size="medium" > {t('authentication:forceUnlock')} diff --git a/packages/next/src/views/Edit/Default/index.scss b/packages/next/src/views/Edit/Default/index.scss index 9535969a3..460bf8c20 100644 --- a/packages/next/src/views/Edit/Default/index.scss +++ b/packages/next/src/views/Edit/Default/index.scss @@ -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 { diff --git a/packages/next/src/views/ForgotPassword/index.tsx b/packages/next/src/views/ForgotPassword/index.tsx index 547bd3996..b432a05f5 100644 --- a/packages/next/src/views/ForgotPassword/index.tsx +++ b/packages/next/src/views/ForgotPassword/index.tsx @@ -51,7 +51,7 @@ export const ForgotPasswordView: React.FC = ({ initPageResult }) />


- diff --git a/packages/next/src/views/List/Default/index.scss b/packages/next/src/views/List/Default/index.scss index 9530eaf73..a57930c70 100644 --- a/packages/next/src/views/List/Default/index.scss +++ b/packages/next/src/views/List/Default/index.scss @@ -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); } } } diff --git a/packages/next/src/views/Login/LoginForm/index.tsx b/packages/next/src/views/Login/LoginForm/index.tsx index 0a3f48751..2c25ad098 100644 --- a/packages/next/src/views/Login/LoginForm/index.tsx +++ b/packages/next/src/views/Login/LoginForm/index.tsx @@ -91,7 +91,7 @@ export const LoginForm: React.FC<{ > {t('authentication:forgotPasswordQuestion')} - {t('authentication:login')} + {t('authentication:login')} ) } diff --git a/packages/next/src/views/Logout/LogoutClient.tsx b/packages/next/src/views/Logout/LogoutClient.tsx index c3317f8c4..67fe454f0 100644 --- a/packages/next/src/views/Logout/LogoutClient.tsx +++ b/packages/next/src/views/Logout/LogoutClient.tsx @@ -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${ diff --git a/packages/next/src/views/NotFound/index.client.tsx b/packages/next/src/views/NotFound/index.client.tsx index b800df549..6615f8293 100644 --- a/packages/next/src/views/NotFound/index.client.tsx +++ b/packages/next/src/views/NotFound/index.client.tsx @@ -38,7 +38,13 @@ export const NotFoundClient: React.FC<{

{t('general:nothingFound')}

{t('general:sorryNotFound')}

- diff --git a/packages/next/src/views/ResetPassword/index.client.tsx b/packages/next/src/views/ResetPassword/index.client.tsx index c2b69360f..f049a4cc9 100644 --- a/packages/next/src/views/ResetPassword/index.client.tsx +++ b/packages/next/src/views/ResetPassword/index.client.tsx @@ -81,7 +81,7 @@ export const ResetPasswordClient: React.FC = ({ token }) => { /> - {i18n.t('authentication:resetPassword')} + {i18n.t('authentication:resetPassword')} ) } diff --git a/packages/next/src/views/Unauthorized/index.tsx b/packages/next/src/views/Unauthorized/index.tsx index bbd59ddad..ddc23dc82 100644 --- a/packages/next/src/views/Unauthorized/index.tsx +++ b/packages/next/src/views/Unauthorized/index.tsx @@ -30,7 +30,13 @@ export const UnauthorizedView: AdminViewComponent = ({ initPageResult }) => {

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

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

- diff --git a/packages/richtext-lexical/src/field/Field.tsx b/packages/richtext-lexical/src/field/Field.tsx index dbca9a6e5..a7d9940d2 100644 --- a/packages/richtext-lexical/src/field/Field.tsx +++ b/packages/richtext-lexical/src/field/Field.tsx @@ -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({ 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} /> @@ -139,4 +151,4 @@ function fallbackRender({ error }): React.ReactElement { ) } -export const RichText = withCondition(_RichText) +export const RichText = withCondition(RichTextComponent) diff --git a/packages/richtext-lexical/src/lexical/LexicalEditor.scss b/packages/richtext-lexical/src/lexical/LexicalEditor.scss index 963632e27..024d08556 100644 --- a/packages/richtext-lexical/src/lexical/LexicalEditor.scss +++ b/packages/richtext-lexical/src/lexical/LexicalEditor.scss @@ -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; } } diff --git a/packages/richtext-lexical/src/lexical/theme/EditorTheme.scss b/packages/richtext-lexical/src/lexical/theme/EditorTheme.scss index 79bc51035..3f4f5ea21 100644 --- a/packages/richtext-lexical/src/lexical/theme/EditorTheme.scss +++ b/packages/richtext-lexical/src/lexical/theme/EditorTheme.scss @@ -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 { diff --git a/packages/richtext-lexical/src/scss/app.scss b/packages/richtext-lexical/src/scss/app.scss index e32b856c5..4864afb13 100644 --- a/packages/richtext-lexical/src/scss/app.scss +++ b/packages/richtext-lexical/src/scss/app.scss @@ -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); } diff --git a/packages/richtext-lexical/src/scss/toastify.scss b/packages/richtext-lexical/src/scss/toastify.scss new file mode 100644 index 000000000..a5bf4c35f --- /dev/null +++ b/packages/richtext-lexical/src/scss/toastify.scss @@ -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; + } + } +} diff --git a/packages/richtext-lexical/src/scss/toasts.scss b/packages/richtext-lexical/src/scss/toasts.scss index 06250bba1..da22f1806 100644 --- a/packages/richtext-lexical/src/scss/toasts.scss +++ b/packages/richtext-lexical/src/scss/toasts.scss @@ -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); + } } } } diff --git a/packages/richtext-lexical/src/scss/type.scss b/packages/richtext-lexical/src/scss/type.scss index 57b318a34..66af15f77 100644 --- a/packages/richtext-lexical/src/scss/type.scss +++ b/packages/richtext-lexical/src/scss/type.scss @@ -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; } ///////////////////////////// diff --git a/packages/richtext-lexical/src/scss/vars.scss b/packages/richtext-lexical/src/scss/vars.scss index 00c7d34f8..7ac4d321d 100644 --- a/packages/richtext-lexical/src/scss/vars.scss +++ b/packages/richtext-lexical/src/scss/vars.scss @@ -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; } } diff --git a/packages/richtext-slate/src/field/index.scss b/packages/richtext-slate/src/field/index.scss index b087a38de..7b182a28d 100644 --- a/packages/richtext-slate/src/field/index.scss +++ b/packages/richtext-slate/src/field/index.scss @@ -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'] { diff --git a/packages/richtext-slate/src/scss/app.scss b/packages/richtext-slate/src/scss/app.scss index e32b856c5..4864afb13 100644 --- a/packages/richtext-slate/src/scss/app.scss +++ b/packages/richtext-slate/src/scss/app.scss @@ -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); } diff --git a/packages/richtext-slate/src/scss/toastify.scss b/packages/richtext-slate/src/scss/toastify.scss new file mode 100644 index 000000000..a5bf4c35f --- /dev/null +++ b/packages/richtext-slate/src/scss/toastify.scss @@ -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; + } + } +} diff --git a/packages/richtext-slate/src/scss/toasts.scss b/packages/richtext-slate/src/scss/toasts.scss index 06250bba1..da22f1806 100644 --- a/packages/richtext-slate/src/scss/toasts.scss +++ b/packages/richtext-slate/src/scss/toasts.scss @@ -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); + } } } } diff --git a/packages/richtext-slate/src/scss/type.scss b/packages/richtext-slate/src/scss/type.scss index 57b318a34..66af15f77 100644 --- a/packages/richtext-slate/src/scss/type.scss +++ b/packages/richtext-slate/src/scss/type.scss @@ -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; } ///////////////////////////// diff --git a/packages/richtext-slate/src/scss/vars.scss b/packages/richtext-slate/src/scss/vars.scss index 00c7d34f8..7ac4d321d 100644 --- a/packages/richtext-slate/src/scss/vars.scss +++ b/packages/richtext-slate/src/scss/vars.scss @@ -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; } } diff --git a/packages/ui/src/elements/ArrayAction/index.scss b/packages/ui/src/elements/ArrayAction/index.scss index 7603caa4a..57d1fff24 100644 --- a/packages/ui/src/elements/ArrayAction/index.scss +++ b/packages/ui/src/elements/ArrayAction/index.scss @@ -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); - } } diff --git a/packages/ui/src/elements/Banner/index.scss b/packages/ui/src/elements/Banner/index.scss index 023879b65..5e1a9a326 100644 --- a/packages/ui/src/elements/Banner/index.scss +++ b/packages/ui/src/elements/Banner/index.scss @@ -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; diff --git a/packages/ui/src/elements/Button/index.scss b/packages/ui/src/elements/Button/index.scss index 4b42cb08e..0b3bbae43 100644 --- a/packages/ui/src/elements/Button/index.scss +++ b/packages/ui/src/elements/Button/index.scss @@ -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; + } } diff --git a/packages/ui/src/elements/Button/index.tsx b/packages/ui/src/elements/Button/index.tsx index 394414a68..9c851a599 100644 --- a/packages/ui/src/elements/Button/index.tsx +++ b/packages/ui/src/elements/Button/index.tsx @@ -81,7 +81,7 @@ export const Button = forwardRef(( 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) diff --git a/packages/ui/src/elements/Button/types.ts b/packages/ui/src/elements/Button/types.ts index c6c98e8c2..65835432e 100644 --- a/packages/ui/src/elements/Button/types.ts +++ b/packages/ui/src/elements/Button/types.ts @@ -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' diff --git a/packages/ui/src/elements/Card/index.scss b/packages/ui/src/elements/Card/index.scss index b944f0f06..0bdd8a863 100644 --- a/packages/ui/src/elements/Card/index.scss +++ b/packages/ui/src/elements/Card/index.scss @@ -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; } } diff --git a/packages/ui/src/elements/CodeEditor/CodeEditor.tsx b/packages/ui/src/elements/CodeEditor/CodeEditor.tsx index 12225f931..31b85ebc6 100644 --- a/packages/ui/src/elements/CodeEditor/CodeEditor.tsx +++ b/packages/ui/src/elements/CodeEditor/CodeEditor.tsx @@ -21,6 +21,7 @@ const CodeEditor: React.FC = (props) => { baseClass, className, rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : '', + readOnly && 'read-only', ] .filter(Boolean) .join(' ') diff --git a/packages/ui/src/elements/Collapsible/index.scss b/packages/ui/src/elements/Collapsible/index.scss index 0eabbc62a..6bf783ccb 100644 --- a/packages/ui/src/elements/Collapsible/index.scss +++ b/packages/ui/src/elements/Collapsible/index.scss @@ -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); } diff --git a/packages/ui/src/elements/ColumnSelector/index.scss b/packages/ui/src/elements/ColumnSelector/index.scss index 1fa44240d..deb0e9619 100644 --- a/packages/ui/src/elements/ColumnSelector/index.scss +++ b/packages/ui/src/elements/ColumnSelector/index.scss @@ -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); + } } } diff --git a/packages/ui/src/elements/DocumentControls/index.scss b/packages/ui/src/elements/DocumentControls/index.scss index 7c8477a4e..53be9b14a 100644 --- a/packages/ui/src/elements/DocumentControls/index.scss +++ b/packages/ui/src/elements/DocumentControls/index.scss @@ -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); diff --git a/packages/ui/src/elements/DocumentDrawer/index.scss b/packages/ui/src/elements/DocumentDrawer/index.scss index 274840ef8..a02a0ac7b 100644 --- a/packages/ui/src/elements/DocumentDrawer/index.scss +++ b/packages/ui/src/elements/DocumentDrawer/index.scss @@ -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; diff --git a/packages/ui/src/elements/DraggableSortable/DraggableSortableItem/index.tsx b/packages/ui/src/elements/DraggableSortable/DraggableSortableItem/index.tsx index f020f627f..ed3a69d6c 100644 --- a/packages/ui/src/elements/DraggableSortable/DraggableSortableItem/index.tsx +++ b/packages/ui/src/elements/DraggableSortable/DraggableSortableItem/index.tsx @@ -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 ( @@ -28,9 +29,11 @@ export const DraggableSortableItem: React.FC< cursor: isDragging ? 'grabbing' : 'grab', }, }, + isDragging, listeners, setNodeRef, transform, + transition, })} ) diff --git a/packages/ui/src/elements/DraggableSortable/useDraggableSortable/index.tsx b/packages/ui/src/elements/DraggableSortable/useDraggableSortable/index.tsx index 0769c76b4..8ed496897 100644 --- a/packages/ui/src/elements/DraggableSortable/useDraggableSortable/index.tsx +++ b/packages/ui/src/elements/DraggableSortable/useDraggableSortable/index.tsx @@ -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, } } diff --git a/packages/ui/src/elements/DraggableSortable/useDraggableSortable/types.ts b/packages/ui/src/elements/DraggableSortable/useDraggableSortable/types.ts index 0c0787cc0..0de362254 100644 --- a/packages/ui/src/elements/DraggableSortable/useDraggableSortable/types.ts +++ b/packages/ui/src/elements/DraggableSortable/useDraggableSortable/types.ts @@ -7,4 +7,5 @@ export type UseDraggableSortableReturn = { listeners: SyntheticListenerMap setNodeRef: (node: HTMLElement | null) => void transform: string + transition: string } diff --git a/packages/ui/src/elements/Drawer/index.scss b/packages/ui/src/elements/Drawer/index.scss index 92879e617..e95855fd9 100644 --- a/packages/ui/src/elements/Drawer/index.scss +++ b/packages/ui/src/elements/Drawer/index.scss @@ -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; } } diff --git a/packages/ui/src/elements/Dropzone/index.scss b/packages/ui/src/elements/Dropzone/index.scss index 0ef909025..5535e225c 100644 --- a/packages/ui/src/elements/Dropzone/index.scss +++ b/packages/ui/src/elements/Dropzone/index.scss @@ -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; diff --git a/packages/ui/src/elements/Dropzone/index.tsx b/packages/ui/src/elements/Dropzone/index.tsx index d8b642a0b..ab8043f14 100644 --- a/packages/ui/src/elements/Dropzone/index.tsx +++ b/packages/ui/src/elements/Dropzone/index.tsx @@ -107,7 +107,7 @@ export const Dropzone: React.FC = ({ className, mimeTypes, onChange, onPa onClick={() => { inputRef.current.click() }} - size="small" + size="medium" > {t('upload:selectFile')} @@ -115,7 +115,7 @@ export const Dropzone: React.FC = ({ className, mimeTypes, onChange, onPa buttonStyle="secondary" className={`${baseClass}__file-button`} onClick={onPasteUrlClick} - size="small" + size="medium" > {t('upload:pasteURL')} diff --git a/packages/ui/src/elements/EditMany/index.scss b/packages/ui/src/elements/EditMany/index.scss index 763eb106b..611d3f66f 100644 --- a/packages/ui/src/elements/EditMany/index.scss +++ b/packages/ui/src/elements/EditMany/index.scss @@ -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; diff --git a/packages/ui/src/elements/EditUpload/index.scss b/packages/ui/src/elements/EditUpload/index.scss index d526c88bc..6ad21e3ca 100644 --- a/packages/ui/src/elements/EditUpload/index.scss +++ b/packages/ui/src/elements/EditUpload/index.scss @@ -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 { diff --git a/packages/ui/src/elements/FileDetails/FileMeta/index.scss b/packages/ui/src/elements/FileDetails/FileMeta/index.scss index d7b6ed53b..ce70e35d4 100644 --- a/packages/ui/src/elements/FileDetails/FileMeta/index.scss +++ b/packages/ui/src/elements/FileDetails/FileMeta/index.scss @@ -3,6 +3,7 @@ .file-meta { &__url { display: flex; + gap: base(0.4); a { font-weight: 600; diff --git a/packages/ui/src/elements/FileDetails/index.scss b/packages/ui/src/elements/FileDetails/index.scss index f2da309e3..aa409a593 100644 --- a/packages/ui/src/elements/FileDetails/index.scss +++ b/packages/ui/src/elements/FileDetails/index.scss @@ -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%; } diff --git a/packages/ui/src/elements/FileDetails/index.tsx b/packages/ui/src/elements/FileDetails/index.tsx index dea5e5306..727235232 100644 --- a/packages/ui/src/elements/FileDetails/index.tsx +++ b/packages/ui/src/elements/FileDetails/index.tsx @@ -42,6 +42,8 @@ export const FileDetails: React.FC = (props) => {
= (props) => { width={width as number} /> - + {(enableAdjustments || customUploadActions) && ( + + )}
{handleRemove && ( diff --git a/packages/ui/src/elements/PublishButton/index.tsx b/packages/ui/src/elements/PublishButton/index.tsx index a285163d4..bbb6894d2 100644 --- a/packages/ui/src/elements/PublishButton/index.tsx +++ b/packages/ui/src/elements/PublishButton/index.tsx @@ -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} diff --git a/packages/ui/src/elements/ReactSelect/MultiValue/index.scss b/packages/ui/src/elements/ReactSelect/MultiValue/index.scss index 2d63062cc..1960b1772 100644 --- a/packages/ui/src/elements/ReactSelect/MultiValue/index.scss +++ b/packages/ui/src/elements/ReactSelect/MultiValue/index.scss @@ -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); + } + } +} diff --git a/packages/ui/src/elements/ReactSelect/MultiValueLabel/index.scss b/packages/ui/src/elements/ReactSelect/MultiValueLabel/index.scss index 6b2b3c8c6..93253c7e2 100644 --- a/packages/ui/src/elements/ReactSelect/MultiValueLabel/index.scss +++ b/packages/ui/src/elements/ReactSelect/MultiValueLabel/index.scss @@ -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; diff --git a/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.scss b/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.scss index 63b301b90..3b543655c 100644 --- a/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.scss +++ b/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.scss @@ -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 { diff --git a/packages/ui/src/elements/ReactSelect/ValueContainer/index.scss b/packages/ui/src/elements/ReactSelect/ValueContainer/index.scss index a6b4e6158..4a1e4a66e 100644 --- a/packages/ui/src/elements/ReactSelect/ValueContainer/index.scss +++ b/packages/ui/src/elements/ReactSelect/ValueContainer/index.scss @@ -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; } } } diff --git a/packages/ui/src/elements/ReactSelect/index.scss b/packages/ui/src/elements/ReactSelect/index.scss index c6a4b8234..abab4bb10 100644 --- a/packages/ui/src/elements/ReactSelect/index.scss +++ b/packages/ui/src/elements/ReactSelect/index.scss @@ -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; } } diff --git a/packages/ui/src/elements/RenderTitle/index.scss b/packages/ui/src/elements/RenderTitle/index.scss index 58688d5b9..6c1cc92c3 100644 --- a/packages/ui/src/elements/RenderTitle/index.scss +++ b/packages/ui/src/elements/RenderTitle/index.scss @@ -1,9 +1,9 @@ @import '../../scss/styles.scss'; .render-title { + display: inline-flex; &__id { vertical-align: middle; position: relative; - top: -3px; } } diff --git a/packages/ui/src/elements/SaveButton/index.tsx b/packages/ui/src/elements/SaveButton/index.tsx index 9c44b349f..5cc95ddeb 100644 --- a/packages/ui/src/elements/SaveButton/index.tsx +++ b/packages/ui/src/elements/SaveButton/index.tsx @@ -36,9 +36,11 @@ export const DefaultSaveButton: React.FC<{ label?: string }> = ({ label: labelPr submit()} + onClick={() => { + return void submit() + }} ref={ref} - size="small" + size="medium" type="button" > {label} diff --git a/packages/ui/src/elements/SaveDraftButton/index.tsx b/packages/ui/src/elements/SaveDraftButton/index.tsx index 9e12eed9e..ea04d19b8 100644 --- a/packages/ui/src/elements/SaveDraftButton/index.tsx +++ b/packages/ui/src/elements/SaveDraftButton/index.tsx @@ -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')} diff --git a/packages/ui/src/elements/SearchFilter/index.scss b/packages/ui/src/elements/SearchFilter/index.scss index 7317783b3..bec9c9462 100644 --- a/packages/ui/src/elements/SearchFilter/index.scss +++ b/packages/ui/src/elements/SearchFilter/index.scss @@ -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; diff --git a/packages/ui/src/elements/SearchFilter/index.tsx b/packages/ui/src/elements/SearchFilter/index.tsx index 09fe14633..2cfd3c0d7 100644 --- a/packages/ui/src/elements/SearchFilter/index.tsx +++ b/packages/ui/src/elements/SearchFilter/index.tsx @@ -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 = (props) => { type="text" value={value || ''} /> - ) } diff --git a/packages/ui/src/elements/SelectRow/index.scss b/packages/ui/src/elements/SelectRow/index.scss index 30d8990f3..9e316db58 100644 --- a/packages/ui/src/elements/SelectRow/index.scss +++ b/packages/ui/src/elements/SelectRow/index.scss @@ -1,5 +1,6 @@ .select-row { &__checkbox { display: block; + width: min-content; } } diff --git a/packages/ui/src/elements/StayLoggedIn/index.tsx b/packages/ui/src/elements/StayLoggedIn/index.tsx index f9128ba92..e1c334706 100644 --- a/packages/ui/src/elements/StayLoggedIn/index.tsx +++ b/packages/ui/src/elements/StayLoggedIn/index.tsx @@ -50,6 +50,7 @@ export const StayLoggedInModal: React.FC = () => { }), ) }} + size="large" > {t('authentication:logOut')} @@ -58,6 +59,7 @@ export const StayLoggedInModal: React.FC = () => { refreshCookie() toggleModal(stayLoggedInModalSlug) }} + size="large" > {t('authentication:stayLoggedIn')} diff --git a/packages/ui/src/elements/Table/DefaultCell/fields/Code/index.scss b/packages/ui/src/elements/Table/DefaultCell/fields/Code/index.scss index c454a76bb..1d488cef2 100644 --- a/packages/ui/src/elements/Table/DefaultCell/fields/Code/index.scss +++ b/packages/ui/src/elements/Table/DefaultCell/fields/Code/index.scss @@ -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); diff --git a/packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.scss b/packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.scss index 4ea001918..52286f72e 100644 --- a/packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.scss +++ b/packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.scss @@ -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); diff --git a/packages/ui/src/elements/Table/index.scss b/packages/ui/src/elements/Table/index.scss index ca1fcc6a7..45add9832 100644 --- a/packages/ui/src/elements/Table/index.scss +++ b/packages/ui/src/elements/Table/index.scss @@ -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; } } } diff --git a/packages/ui/src/elements/ThumbnailCard/index.scss b/packages/ui/src/elements/ThumbnailCard/index.scss index f15f2f87f..c4891d151 100644 --- a/packages/ui/src/elements/ThumbnailCard/index.scss +++ b/packages/ui/src/elements/ThumbnailCard/index.scss @@ -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 { diff --git a/packages/ui/src/elements/Upload/index.scss b/packages/ui/src/elements/Upload/index.scss index 5e795bc93..d17431595 100644 --- a/packages/ui/src/elements/Upload/index.scss +++ b/packages/ui/src/elements/Upload/index.scss @@ -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; diff --git a/packages/ui/src/fields/Array/ArrayRow.tsx b/packages/ui/src/fields/Array/ArrayRow.tsx index cf9c794eb..35422238b 100644 --- a/packages/ui/src/fields/Array/ArrayRow.tsx +++ b/packages/ui/src/fields/Array/ArrayRow.tsx @@ -50,6 +50,7 @@ export const ArrayRow: React.FC = ({ forceRender = false, hasMaxRows, indexPath, + isDragging, isSortable, labels, listeners, @@ -65,6 +66,7 @@ export const ArrayRow: React.FC = ({ setCollapse, setNodeRef, transform, + transition, }) => { const path = `${parentPath}.${rowIndex}` const { i18n } = useTranslation() @@ -91,6 +93,8 @@ export const ArrayRow: React.FC = ({ ref={setNodeRef} style={{ transform, + transition, + zIndex: isDragging ? 1 : undefined, }} > (typeof onChange === 'function' ? onChange(option.value) : null)} type="radio" /> - + {getTranslation(option.label, i18n)} diff --git a/packages/ui/src/fields/RadioGroup/index.scss b/packages/ui/src/fields/RadioGroup/index.scss index 8bd972a47..888e5a733 100644 --- a/packages/ui/src/fields/RadioGroup/index.scss +++ b/packages/ui/src/fields/RadioGroup/index.scss @@ -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); } } } diff --git a/packages/ui/src/fields/Relationship/AddNew/index.scss b/packages/ui/src/fields/Relationship/AddNew/index.scss index b95a53210..3e3bd731e 100644 --- a/packages/ui/src/fields/Relationship/AddNew/index.scss +++ b/packages/ui/src/fields/Relationship/AddNew/index.scss @@ -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; diff --git a/packages/ui/src/fields/Relationship/index.scss b/packages/ui/src/fields/Relationship/index.scss index e02cc3a73..5a0c9f273 100644 --- a/packages/ui/src/fields/Relationship/index.scss +++ b/packages/ui/src/fields/Relationship/index.scss @@ -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'] { diff --git a/packages/ui/src/fields/Relationship/index.tsx b/packages/ui/src/fields/Relationship/index.tsx index 42000cae4..b9b553bf1 100644 --- a/packages/ui/src/fields/Relationship/index.tsx +++ b/packages/ui/src/fields/Relationship/index.tsx @@ -472,6 +472,7 @@ const RelationshipFieldComponent: React.FC = (props) => showError && 'error', errorLoading && 'error-loading', readOnly && `${baseClass}--read-only`, + !readOnly && allowCreate && `${baseClass}--allow-create`, ] .filter(Boolean) .join(' ')} diff --git a/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.scss b/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.scss index b9d238040..3c6f25f8f 100644 --- a/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.scss +++ b/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.scss @@ -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 { diff --git a/packages/ui/src/fields/Text/Input.tsx b/packages/ui/src/fields/Text/Input.tsx index 8cc92d145..d9879a0da 100644 --- a/packages/ui/src/fields/Text/Input.tsx +++ b/packages/ui/src/fields/Text/Input.tsx @@ -70,7 +70,7 @@ export const TextInput: React.FC = (props) => { />
- + {BeforeInput} {hasMany ? ( = (props) => { value={valueToRender} /> ) : ( -
- {BeforeInput} - ) => void} - onKeyDown={onKeyDown} - placeholder={getTranslation(placeholder, i18n)} - ref={inputRef} - type="text" - value={value || ''} - /> - {AfterInput} -
+ ) => void} + onKeyDown={onKeyDown} + placeholder={getTranslation(placeholder, i18n)} + ref={inputRef} + type="text" + value={value || ''} + /> )} + {AfterInput} {CustomDescription !== undefined ? ( CustomDescription ) : ( diff --git a/packages/ui/src/fields/Textarea/index.scss b/packages/ui/src/fields/Textarea/index.scss index 9dae4247c..011f70cb1 100644 --- a/packages/ui/src/fields/Textarea/index.scss +++ b/packages/ui/src/fields/Textarea/index.scss @@ -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; } } diff --git a/packages/ui/src/fields/Upload/index.scss b/packages/ui/src/fields/Upload/index.scss index 9e510472b..e53bb3df1 100644 --- a/packages/ui/src/fields/Upload/index.scss +++ b/packages/ui/src/fields/Upload/index.scss @@ -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'] { diff --git a/packages/ui/src/forms/RenderFields/index.scss b/packages/ui/src/forms/RenderFields/index.scss index fe7c1c4cd..f5411689e 100644 --- a/packages/ui/src/forms/RenderFields/index.scss +++ b/packages/ui/src/forms/RenderFields/index.scss @@ -30,7 +30,7 @@ margin-top: 0; } - &:last-child { + &:last-of-type { margin-bottom: 0; } } diff --git a/packages/ui/src/icons/Calendar/index.scss b/packages/ui/src/icons/Calendar/index.scss index 502f0bac6..7756ed466 100644 --- a/packages/ui/src/icons/Calendar/index.scss +++ b/packages/ui/src/icons/Calendar/index.scss @@ -5,7 +5,7 @@ width: $baseline; .stroke { - stroke: var(--theme-elevation-800); + stroke: currentColor; stroke-width: $style-stroke-width-s; } } diff --git a/packages/ui/src/icons/Calendar/index.tsx b/packages/ui/src/icons/Calendar/index.tsx index 9d66d1be2..f42841591 100644 --- a/packages/ui/src/icons/Calendar/index.tsx +++ b/packages/ui/src/icons/Calendar/index.tsx @@ -3,10 +3,11 @@ import React from 'react' import './index.scss' export const CalendarIcon: React.FC = () => ( - - - - - + + ) diff --git a/packages/ui/src/icons/Check/index.scss b/packages/ui/src/icons/Check/index.scss index 2c0f7f36b..b077a5f31 100644 --- a/packages/ui/src/icons/Check/index.scss +++ b/packages/ui/src/icons/Check/index.scss @@ -6,7 +6,7 @@ .stroke { fill: none; - stroke: var(--theme-elevation-800); + stroke: currentColor; stroke-width: $style-stroke-width-m; } } diff --git a/packages/ui/src/icons/Check/index.tsx b/packages/ui/src/icons/Check/index.tsx index 682d59104..8a0f90237 100644 --- a/packages/ui/src/icons/Check/index.tsx +++ b/packages/ui/src/icons/Check/index.tsx @@ -3,18 +3,11 @@ import React from 'react' import './index.scss' export const CheckIcon: React.FC = () => ( - + - ) diff --git a/packages/ui/src/icons/Chevron/index.scss b/packages/ui/src/icons/Chevron/index.scss index 8ca2f2a5d..d57b6d72a 100644 --- a/packages/ui/src/icons/Chevron/index.scss +++ b/packages/ui/src/icons/Chevron/index.scss @@ -1,13 +1,10 @@ @import '../../scss/styles'; .icon--chevron { - height: calc(var(--base) / 2); - width: calc(var(--base) / 2); - .stroke { fill: none; - stroke: var(--theme-elevation-800); - stroke-width: $style-stroke-width-m; + stroke: currentColor; + stroke-width: $style-stroke-width-s; vector-effect: non-scaling-stroke; } diff --git a/packages/ui/src/icons/Chevron/index.tsx b/packages/ui/src/icons/Chevron/index.tsx index 196e037af..6173e5dbb 100644 --- a/packages/ui/src/icons/Chevron/index.tsx +++ b/packages/ui/src/icons/Chevron/index.tsx @@ -11,7 +11,7 @@ export const ChevronIcon: React.FC<{ className={['icon icon--chevron', className, size && `icon--size-${size}`] .filter(Boolean) .join(' ')} - height="100%" + height={20} style={{ transform: direction === 'left' @@ -22,10 +22,10 @@ export const ChevronIcon: React.FC<{ ? 'rotate(180deg)' : undefined, }} - viewBox="0 0 9 7" - width="100%" + viewBox="0 0 20 20" + width={20} xmlns="http://www.w3.org/2000/svg" > - + ) diff --git a/packages/ui/src/icons/CloseMenu/index.scss b/packages/ui/src/icons/CloseMenu/index.scss index f531da6fa..638890ca3 100644 --- a/packages/ui/src/icons/CloseMenu/index.scss +++ b/packages/ui/src/icons/CloseMenu/index.scss @@ -4,7 +4,7 @@ height: $baseline; width: $baseline; - .fill { - fill: var(--theme-elevation-800); + .stroke { + stroke: currentColor; } } diff --git a/packages/ui/src/icons/CloseMenu/index.tsx b/packages/ui/src/icons/CloseMenu/index.tsx index ddbd7248f..4f6019ca5 100644 --- a/packages/ui/src/icons/CloseMenu/index.tsx +++ b/packages/ui/src/icons/CloseMenu/index.tsx @@ -3,27 +3,7 @@ import React from 'react' import './index.scss' export const CloseMenuIcon: React.FC = () => ( - - - + + ) diff --git a/packages/ui/src/icons/CodeBlock/index.tsx b/packages/ui/src/icons/CodeBlock/index.tsx index efa697873..89155d162 100644 --- a/packages/ui/src/icons/CodeBlock/index.tsx +++ b/packages/ui/src/icons/CodeBlock/index.tsx @@ -4,18 +4,14 @@ export const CodeBlockIcon: React.FC = () => ( ) diff --git a/packages/ui/src/icons/Copy/index.scss b/packages/ui/src/icons/Copy/index.scss index 8241efc8e..5129cffd0 100644 --- a/packages/ui/src/icons/Copy/index.scss +++ b/packages/ui/src/icons/Copy/index.scss @@ -6,7 +6,7 @@ .stroke { fill: none; - stroke: var(--theme-elevation-800); + stroke: currentColor; stroke-width: $style-stroke-width-s; } } diff --git a/packages/ui/src/icons/Copy/index.tsx b/packages/ui/src/icons/Copy/index.tsx index 242597721..8993746cc 100644 --- a/packages/ui/src/icons/Copy/index.tsx +++ b/packages/ui/src/icons/Copy/index.tsx @@ -3,8 +3,15 @@ import React from 'react' import './index.scss' export const CopyIcon: React.FC = () => ( - - - + // + // + // + // + + ) diff --git a/packages/ui/src/icons/DragHandle/index.scss b/packages/ui/src/icons/DragHandle/index.scss index 422bfb770..caf94c763 100644 --- a/packages/ui/src/icons/DragHandle/index.scss +++ b/packages/ui/src/icons/DragHandle/index.scss @@ -5,6 +5,8 @@ width: $baseline; .fill { + stroke: currentColor; + stroke-width: $style-stroke-width-s; fill: var(--theme-elevation-800); } } diff --git a/packages/ui/src/icons/DragHandle/index.tsx b/packages/ui/src/icons/DragHandle/index.tsx index 77cf4ef29..7877ca59f 100644 --- a/packages/ui/src/icons/DragHandle/index.tsx +++ b/packages/ui/src/icons/DragHandle/index.tsx @@ -5,14 +5,38 @@ import './index.scss' export const DragHandleIcon: React.FC<{ className?: string }> = ({ className }) => ( - - - - - - + + + + + + ) diff --git a/packages/ui/src/icons/Edit/index.scss b/packages/ui/src/icons/Edit/index.scss index e7babce5c..d997a5b14 100644 --- a/packages/ui/src/icons/Edit/index.scss +++ b/packages/ui/src/icons/Edit/index.scss @@ -5,8 +5,8 @@ width: $baseline; shape-rendering: auto; - .fill { - fill: var(--theme-elevation-800); - stroke: none; + .stroke { + fill: none; + stroke: currentColor; } } diff --git a/packages/ui/src/icons/Edit/index.tsx b/packages/ui/src/icons/Edit/index.tsx index 14af684c5..9a35f0995 100644 --- a/packages/ui/src/icons/Edit/index.tsx +++ b/packages/ui/src/icons/Edit/index.tsx @@ -5,24 +5,13 @@ import './index.scss' export const EditIcon: React.FC<{ className?: string }> = ({ className }) => ( - - - ) diff --git a/packages/ui/src/icons/Line/index.scss b/packages/ui/src/icons/Line/index.scss index 2d645973d..98c33bc08 100644 --- a/packages/ui/src/icons/Line/index.scss +++ b/packages/ui/src/icons/Line/index.scss @@ -5,7 +5,7 @@ height: $baseline; .stroke { - stroke: var(--theme-elevation-800); + stroke: currentColor; stroke-width: $style-stroke-width; } } diff --git a/packages/ui/src/icons/Line/index.tsx b/packages/ui/src/icons/Line/index.tsx index 87c5d6745..e9b641e68 100644 --- a/packages/ui/src/icons/Line/index.tsx +++ b/packages/ui/src/icons/Line/index.tsx @@ -3,7 +3,14 @@ import React from 'react' import './index.scss' export const LineIcon: React.FC = () => ( - - + + ) diff --git a/packages/ui/src/icons/Link/index.scss b/packages/ui/src/icons/Link/index.scss index 8d080b966..b8b9d3892 100644 --- a/packages/ui/src/icons/Link/index.scss +++ b/packages/ui/src/icons/Link/index.scss @@ -5,7 +5,7 @@ height: $baseline; .stroke { - stroke: var(--theme-elevation-800); + stroke: currentColor; stroke-width: $style-stroke-width; } } diff --git a/packages/ui/src/icons/Link/index.tsx b/packages/ui/src/icons/Link/index.tsx index e90206e86..d53d8e6b1 100644 --- a/packages/ui/src/icons/Link/index.tsx +++ b/packages/ui/src/icons/Link/index.tsx @@ -6,15 +6,17 @@ export const LinkIcon: React.FC = () => ( ) diff --git a/packages/ui/src/icons/LogOut/index.scss b/packages/ui/src/icons/LogOut/index.scss index 74efc18ad..8bd3ac28d 100644 --- a/packages/ui/src/icons/LogOut/index.scss +++ b/packages/ui/src/icons/LogOut/index.scss @@ -5,7 +5,7 @@ width: $baseline; .stroke { - stroke: var(--theme-elevation-800); + stroke: currentColor; stroke-width: 2px; } } diff --git a/packages/ui/src/icons/LogOut/index.tsx b/packages/ui/src/icons/LogOut/index.tsx index c6720fb6f..d766a347b 100644 --- a/packages/ui/src/icons/LogOut/index.tsx +++ b/packages/ui/src/icons/LogOut/index.tsx @@ -6,13 +6,14 @@ export const LogOutIcon: React.FC = () => ( - - - - - + ) diff --git a/packages/ui/src/icons/Menu/index.scss b/packages/ui/src/icons/Menu/index.scss index 8840e1cda..c9e0182ba 100644 --- a/packages/ui/src/icons/Menu/index.scss +++ b/packages/ui/src/icons/Menu/index.scss @@ -1,7 +1,8 @@ @import '../../scss/styles.scss'; .icon--menu { - .fill { - fill: var(--theme-text); + .stroke { + stroke-width: $style-stroke-width-s; + stroke: currentColor; } } diff --git a/packages/ui/src/icons/Menu/index.tsx b/packages/ui/src/icons/Menu/index.tsx index 3eaaeb0ab..fd524c0ac 100644 --- a/packages/ui/src/icons/Menu/index.tsx +++ b/packages/ui/src/icons/Menu/index.tsx @@ -6,13 +6,15 @@ export const MenuIcon: React.FC = () => ( - - - + ) diff --git a/packages/ui/src/icons/MinimizeMaximize/index.tsx b/packages/ui/src/icons/MinimizeMaximize/index.tsx index befef0082..054c4003a 100644 --- a/packages/ui/src/icons/MinimizeMaximize/index.tsx +++ b/packages/ui/src/icons/MinimizeMaximize/index.tsx @@ -18,27 +18,16 @@ export const MinimizeMaximizeIcon: React.FC = ({ className, isMinimized } return ( {isMinimized ? ( - - - - - - + ) : ( - - - - - - + )} ) diff --git a/packages/ui/src/icons/More/index.scss b/packages/ui/src/icons/More/index.scss index 5b3788a0a..46c7807ee 100644 --- a/packages/ui/src/icons/More/index.scss +++ b/packages/ui/src/icons/More/index.scss @@ -6,5 +6,6 @@ .fill { fill: var(--theme-elevation-800); + stroke: currentColor; } } diff --git a/packages/ui/src/icons/More/index.tsx b/packages/ui/src/icons/More/index.tsx index dc0908542..56fefbda5 100644 --- a/packages/ui/src/icons/More/index.tsx +++ b/packages/ui/src/icons/More/index.tsx @@ -5,11 +5,23 @@ import './index.scss' export const MoreIcon: React.FC<{ className?: string }> = ({ className }) => ( - - - + + + ) diff --git a/packages/ui/src/icons/Plus/index.scss b/packages/ui/src/icons/Plus/index.scss index 6f57179e9..71b58d54c 100644 --- a/packages/ui/src/icons/Plus/index.scss +++ b/packages/ui/src/icons/Plus/index.scss @@ -2,7 +2,7 @@ .icon--plus { .stroke { - stroke: var(--theme-elevation-800); + stroke: currentColor; stroke-width: $style-stroke-width; } } diff --git a/packages/ui/src/icons/Plus/index.tsx b/packages/ui/src/icons/Plus/index.tsx index 5725f06d2..1faeb7d1c 100644 --- a/packages/ui/src/icons/Plus/index.tsx +++ b/packages/ui/src/icons/Plus/index.tsx @@ -5,11 +5,15 @@ import './index.scss' export const PlusIcon: React.FC = () => ( - - + ) diff --git a/packages/ui/src/icons/Search/index.scss b/packages/ui/src/icons/Search/index.scss index 962c46289..902016a44 100644 --- a/packages/ui/src/icons/Search/index.scss +++ b/packages/ui/src/icons/Search/index.scss @@ -5,7 +5,7 @@ width: $baseline; .stroke { - stroke: var(--theme-elevation-800); + stroke: currentColor; stroke-width: $style-stroke-width-s; } } diff --git a/packages/ui/src/icons/Search/index.tsx b/packages/ui/src/icons/Search/index.tsx index a4e57052a..c45d2c5b1 100644 --- a/packages/ui/src/icons/Search/index.tsx +++ b/packages/ui/src/icons/Search/index.tsx @@ -6,10 +6,13 @@ export const SearchIcon: React.FC = () => ( - - + ) diff --git a/packages/ui/src/icons/Swap/index.scss b/packages/ui/src/icons/Swap/index.scss index f4851fd19..02706567f 100644 --- a/packages/ui/src/icons/Swap/index.scss +++ b/packages/ui/src/icons/Swap/index.scss @@ -6,7 +6,7 @@ .stroke { fill: none; - stroke: var(--theme-elevation-800); - stroke-width: $style-stroke-width-m; + stroke: currentColor; + stroke-width: $style-stroke-width-s; } } diff --git a/packages/ui/src/icons/Swap/index.tsx b/packages/ui/src/icons/Swap/index.tsx index ca5228edd..c84d4ec98 100644 --- a/packages/ui/src/icons/Swap/index.tsx +++ b/packages/ui/src/icons/Swap/index.tsx @@ -3,10 +3,11 @@ import React from 'react' import './index.scss' export const SwapIcon: React.FC = () => ( - - - - - + + ) diff --git a/packages/ui/src/icons/X/index.scss b/packages/ui/src/icons/X/index.scss index f6786124b..80d4a4b0c 100644 --- a/packages/ui/src/icons/X/index.scss +++ b/packages/ui/src/icons/X/index.scss @@ -1,8 +1,8 @@ @import '../../scss/styles'; .icon--x { - line { - stroke: var(--theme-elevation-800); - stroke-width: $style-stroke-width; + .stroke { + stroke: currentColor; + stroke-width: $style-stroke-width-s; } } diff --git a/packages/ui/src/icons/X/index.tsx b/packages/ui/src/icons/X/index.tsx index a454d84b1..5698da444 100644 --- a/packages/ui/src/icons/X/index.tsx +++ b/packages/ui/src/icons/X/index.tsx @@ -5,12 +5,11 @@ import './index.scss' export const XIcon: React.FC<{ className?: string }> = ({ className }) => ( - - + ) diff --git a/packages/ui/src/scss/app.scss b/packages/ui/src/scss/app.scss index 1d524abce..4864afb13 100644 --- a/packages/ui/src/scss/app.scss +++ b/packages/ui/src/scss/app.scss @@ -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}; diff --git a/packages/ui/src/scss/toasts.scss b/packages/ui/src/scss/toasts.scss index ac8ffb715..da22f1806 100644 --- a/packages/ui/src/scss/toasts.scss +++ b/packages/ui/src/scss/toasts.scss @@ -69,9 +69,16 @@ } .toast-icon { - svg { - width: base(1); - height: base(1); + width: base(1); + height: base(1); + margin: 0; + display: flex; + align-items: center; + justify-content: center; + + & > * { + width: base(1.2); + height: base(1.2); } } diff --git a/packages/ui/src/scss/type.scss b/packages/ui/src/scss/type.scss index 57b318a34..66af15f77 100644 --- a/packages/ui/src/scss/type.scss +++ b/packages/ui/src/scss/type.scss @@ -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; } ///////////////////////////// diff --git a/packages/ui/src/scss/vars.scss b/packages/ui/src/scss/vars.scss index 00c7d34f8..7ac4d321d 100644 --- a/packages/ui/src/scss/vars.scss +++ b/packages/ui/src/scss/vars.scss @@ -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; } } diff --git a/test/_community/e2e.spec.ts b/test/_community/e2e.spec.ts index 35e1fb60d..547247960 100644 --- a/test/_community/e2e.spec.ts +++ b/test/_community/e2e.spec.ts @@ -7,7 +7,7 @@ import { fileURLToPath } from 'url' import { ensureCompilationIsDone, initPageConsoleErrorCatch } from '../helpers.js' import { AdminUrlUtil } from '../helpers/adminUrlUtil.js' import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js' -import { TEST_TIMEOUT_LONG } from '../playwright.config.js' +import { TEST_TIMEOUT } from '../playwright.config.js' const filename = fileURLToPath(import.meta.url) const dirname = path.dirname(filename) @@ -17,7 +17,7 @@ test.describe('Admin Panel', () => { let url: AdminUrlUtil test.beforeAll(async ({ browser }, testInfo) => { - testInfo.setTimeout(TEST_TIMEOUT_LONG) + testInfo.setTimeout(TEST_TIMEOUT) const { payload, serverURL } = await initPayloadE2ENoConfig({ dirname }) url = new AdminUrlUtil(serverURL, 'posts')