diff --git a/packages/next/src/views/Edit/Default/Auth/index.scss b/packages/next/src/views/Edit/Default/Auth/index.scss index ca44665012..f94e00fd38 100644 --- a/packages/next/src/views/Edit/Default/Auth/index.scss +++ b/packages/next/src/views/Edit/Default/Auth/index.scss @@ -48,11 +48,26 @@ @keyframes highlight { 0% { - background: var(--theme-success-500); + background: var(--theme-success-250); + border: 1px solid var(--theme-success-500); + } + + 20% { + background: var(--theme-input-bg); + border: 1px solid var(--theme-elevation-250); + color: var(--theme-text); + } + + 80% { + background: var(--theme-input-bg); + border: 1px solid var(--theme-elevation-250); + color: var(--theme-text); } 100% { - background: none; + background: var(--theme-elevation-200); + border: 1px solid transparent; + color: var(--theme-elevation-400); } } diff --git a/packages/next/src/views/Version/SelectComparison/index.scss b/packages/next/src/views/Version/SelectComparison/index.scss index 8471075391..8687aabf90 100644 --- a/packages/next/src/views/Version/SelectComparison/index.scss +++ b/packages/next/src/views/Version/SelectComparison/index.scss @@ -3,7 +3,7 @@ border: 1px solid var(--theme-error-500); min-height: calc(var(--base) * 2); padding: calc(var(--base) * 0.5) calc(var(--base) * 0.75); - background-color: var(--theme-error-500); + background-color: var(--theme-error-100); color: var(--theme-elevation-0); } diff --git a/packages/richtext-lexical/src/features/horizontalRule/plugin/index.scss b/packages/richtext-lexical/src/features/horizontalRule/plugin/index.scss index 71ec05d957..8ab8a450d3 100644 --- a/packages/richtext-lexical/src/features/horizontalRule/plugin/index.scss +++ b/packages/richtext-lexical/src/features/horizontalRule/plugin/index.scss @@ -15,6 +15,6 @@ } .LexicalEditorTheme__hr.selected { - outline: 2px solid var(--theme-success-500); + outline: 2px solid var(--theme-success-250); user-select: none; } diff --git a/packages/richtext-lexical/src/field/Field.tsx b/packages/richtext-lexical/src/field/Field.tsx index b0710cb4be..ae454c367e 100644 --- a/packages/richtext-lexical/src/field/Field.tsx +++ b/packages/richtext-lexical/src/field/Field.tsx @@ -88,6 +88,7 @@ const _RichText: React.FC< width, }} > +
- {}}> .field-error.tooltip { + right: auto; + position: static; + margin-bottom: 0.2em; + max-width: fit-content; + } + .errorBoundary { pre { text-wrap: unset; diff --git a/packages/ui/src/elements/Banner/index.scss b/packages/ui/src/elements/Banner/index.scss index 41c01e9f2b..023879b65c 100644 --- a/packages/ui/src/elements/Banner/index.scss +++ b/packages/ui/src/elements/Banner/index.scss @@ -38,10 +38,10 @@ &--type-error { background: var(--theme-error-100); - color: var(--theme-error-500); + color: var(--theme-error-600); svg { - @include color-svg(var(--theme-error-500)); + @include color-svg(var(--theme-error-600)); } &.button--has-action { @@ -56,8 +56,8 @@ } &--type-success { - background: var(--theme-success-500); - color: var(--color-base-800); + background: var(--theme-success-100); + color: var(--theme-success-600); &.button--has-action { &:hover { diff --git a/packages/ui/src/elements/Collapsible/index.scss b/packages/ui/src/elements/Collapsible/index.scss index f4bd38c3d0..0eabbc62a5 100644 --- a/packages/ui/src/elements/Collapsible/index.scss +++ b/packages/ui/src/elements/Collapsible/index.scss @@ -113,58 +113,24 @@ padding: var(--gutter-h); } } -} -html[data-theme='dark'] { - .collapsible { - &--style-error { - border: 1px solid var(--theme-error-400); - &:hover { - border: 1px solid var(--theme-error-500); - } - - > .collapsible__toggle-wrap { - .row-label { - color: var(--theme-error-500); - } - .collapsible__toggle { - background: var(--theme-error-100); - } - } - &.collapsible--hovered { - > .collapsible__toggle-wrap .collapsible__toggle { - background: var(--theme-error-150); - } - } - } - } -} - -html[data-theme='light'] { - .collapsible { - &--style-error { + &--style-error { + border: 1px solid var(--theme-error-400); + &:hover { border: 1px solid var(--theme-error-500); - &:hover { - border: 1px solid var(--theme-error-600); - } + } - > .collapsible__toggle-wrap { - .row-label { - color: var(--theme-error-750); - } - .collapsible__toggle { - background: var(--theme-error-50); - } + > .collapsible__toggle-wrap { + .row-label { + color: var(--theme-error-950); } - &.collapsible--hovered { - > .collapsible__toggle-wrap .collapsible__toggle { - background: var(--theme-error-100); - } + .collapsible__toggle { + background: var(--theme-error-100); } - &.error { - & input { - border-color: var(--theme-error-500); - } + } + &.collapsible--hovered { + > .collapsible__toggle-wrap .collapsible__toggle { + background: var(--theme-error-150); } } } diff --git a/packages/ui/src/elements/ErrorPill/index.scss b/packages/ui/src/elements/ErrorPill/index.scss index 881e178d80..ba24e29991 100644 --- a/packages/ui/src/elements/ErrorPill/index.scss +++ b/packages/ui/src/elements/ErrorPill/index.scss @@ -14,6 +14,8 @@ display: flex; align-items: center; justify-content: center; + background: var(--theme-error-300); + color: var(--theme-error-950); &--fixed-width { width: 18px; @@ -27,17 +29,3 @@ margin-left: 0.5px; } } - -html[data-theme='light'] { - .error-pill { - background: var(--theme-error-250); - color: var(--theme-error-750); - } -} - -html[data-theme='dark'] { - .error-pill { - background: var(--theme-error-500); - color: var(--color-base-1000); - } -} diff --git a/packages/ui/src/elements/GenerateConfirmation/index.scss b/packages/ui/src/elements/GenerateConfirmation/index.scss index e94921530f..209dfde970 100644 --- a/packages/ui/src/elements/GenerateConfirmation/index.scss +++ b/packages/ui/src/elements/GenerateConfirmation/index.scss @@ -4,6 +4,7 @@ @include blur-bg; display: flex; align-items: center; + justify-content: center; height: 100%; &__template { diff --git a/packages/ui/src/elements/Pill/index.scss b/packages/ui/src/elements/Pill/index.scss index dd4ae0d44c..8611a2a0f8 100644 --- a/packages/ui/src/elements/Pill/index.scss +++ b/packages/ui/src/elements/Pill/index.scss @@ -111,12 +111,18 @@ } &--style-warning { - background: var(--theme-warning-500); + background: var(--theme-warning-150); + color: var(--theme-warning-800); } &--style-success { - background: var(--theme-success-500); - color: var(--color-base-800); + background: var(--theme-success-150); + color: var(--theme-success-800); + } + + &--style-error { + background: var(--theme-error-150); + color: var(--theme-error-800); } &--style-dark { @@ -138,21 +144,3 @@ } } } - -html[data-theme='dark'] { - .pill { - &--style-error { - background: var(--theme-error-500); - color: var(--color-base-1000); - } - } -} - -html[data-theme='light'] { - .pill { - &--style-error { - background: var(--theme-error-250); - color: var(--theme-error-750); - } - } -} diff --git a/packages/ui/src/elements/ReactSelect/index.scss b/packages/ui/src/elements/ReactSelect/index.scss index a2b07e8121..c6a4b82340 100644 --- a/packages/ui/src/elements/ReactSelect/index.scss +++ b/packages/ui/src/elements/ReactSelect/index.scss @@ -59,9 +59,16 @@ } } - &--error { + &--error, + &--error:hover, + &--error:focus-within { div.rs__control { - background-color: var(--theme-error-100); + background-color: var(--theme-error-50); + border: 1px solid var(--theme-error-500); + + & > div.rs__indicator > button.dropdown-indicator[type='button'] { + border: none; + } } } diff --git a/packages/ui/src/elements/Status/index.scss b/packages/ui/src/elements/Status/index.scss index a869a63917..c1d64fa9dd 100644 --- a/packages/ui/src/elements/Status/index.scss +++ b/packages/ui/src/elements/Status/index.scss @@ -20,6 +20,7 @@ &__modal { @include blur-bg; display: flex; + justify-content: center; align-items: center; height: 100%; diff --git a/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.scss b/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.scss index 18a26684d7..9611d43264 100644 --- a/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.scss +++ b/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.scss @@ -2,10 +2,10 @@ .condition-value-relationship { &__error-loading { - border: 1px solid var(--theme-error-500); + border: 1px solid var(--theme-error-600); min-height: base(2); padding: base(0.5) base(0.75); - background-color: var(--theme-error-500); + background-color: var(--theme-error-100); color: var(--theme-elevation-0); } } diff --git a/packages/ui/src/fields/Checkbox/index.scss b/packages/ui/src/fields/Checkbox/index.scss index b0808d693d..e81be9eedd 100644 --- a/packages/ui/src/fields/Checkbox/index.scss +++ b/packages/ui/src/fields/Checkbox/index.scss @@ -6,7 +6,8 @@ .tooltip:not([aria-hidden='true']) { right: auto; - position: relative; + position: static; + transform: translateY(calc(var(--caret-size) * -1)); margin-bottom: 0.2em; max-width: fit-content; } diff --git a/packages/ui/src/fields/Checkbox/index.tsx b/packages/ui/src/fields/Checkbox/index.tsx index 53373901dd..17433bfba0 100644 --- a/packages/ui/src/fields/Checkbox/index.tsx +++ b/packages/ui/src/fields/Checkbox/index.tsx @@ -99,7 +99,7 @@ const _CheckboxField: React.FC = (props) => { width, }} > - + = (props) => { required={required} {...(labelProps || {})} /> -
{BeforeInput} diff --git a/packages/ui/src/fields/Point/index.scss b/packages/ui/src/fields/Point/index.scss index 525db4630a..cbaf1e3d38 100644 --- a/packages/ui/src/fields/Point/index.scss +++ b/packages/ui/src/fields/Point/index.scss @@ -3,6 +3,10 @@ .point { position: relative; + & .input-wrapper { + position: relative; + } + &__wrap { display: flex; width: calc(100% + #{base(1)}); diff --git a/packages/ui/src/fields/Point/index.tsx b/packages/ui/src/fields/Point/index.tsx index 35cef3ecc5..9353688bfa 100644 --- a/packages/ui/src/fields/Point/index.tsx +++ b/packages/ui/src/fields/Point/index.tsx @@ -113,7 +113,6 @@ export const _PointField: React.FC = (props) => { width, }} > -
  • {CustomLabel !== undefined ? ( @@ -143,6 +142,7 @@ export const _PointField: React.FC = (props) => { )}
    + {BeforeInput} = (props) => { width, }} > + = (props) => { {...(labelProps || {})} />
    - -
      {options.map((option) => { let optionValue = '' diff --git a/packages/ui/src/fields/Relationship/index.scss b/packages/ui/src/fields/Relationship/index.scss index 6ea0f375e0..e02cc3a737 100644 --- a/packages/ui/src/fields/Relationship/index.scss +++ b/packages/ui/src/fields/Relationship/index.scss @@ -33,7 +33,7 @@ html[data-theme='light'] { } } - button { + button.relationship-add-new__add-button { @include lightInputError; } } @@ -49,7 +49,7 @@ html[data-theme='dark'] { } } - button { + button.relationship-add-new__add-button { @include darkInputError; } } diff --git a/packages/ui/src/fields/Select/Input.tsx b/packages/ui/src/fields/Select/Input.tsx index 667aa38e53..6893631906 100644 --- a/packages/ui/src/fields/Select/Input.tsx +++ b/packages/ui/src/fields/Select/Input.tsx @@ -105,7 +105,6 @@ export const SelectInput: React.FC = (props) => { required={required} {...(labelProps || {})} /> -
      {BeforeInput} diff --git a/packages/ui/src/providers/ComponentMap/buildComponentMap/fields.tsx b/packages/ui/src/providers/ComponentMap/buildComponentMap/fields.tsx index c6740d0fec..c5f6ea3640 100644 --- a/packages/ui/src/providers/ComponentMap/buildComponentMap/fields.tsx +++ b/packages/ui/src/providers/ComponentMap/buildComponentMap/fields.tsx @@ -561,6 +561,7 @@ export const mapFields = (args: { name: field.name, className: field.admin?.className, disabled: field.admin?.disabled, + layout: field.admin?.layout, options: fieldOptions, readOnly: field.admin?.readOnly, required: field.required,