diff --git a/packages/next/src/elements/DocumentHeader/index.scss b/packages/next/src/elements/DocumentHeader/index.scss
index c90eb2315..f5b097b71 100644
--- a/packages/next/src/elements/DocumentHeader/index.scss
+++ b/packages/next/src/elements/DocumentHeader/index.scss
@@ -2,8 +2,8 @@
.doc-header {
width: 100%;
- margin-top: base(0.5);
- padding-bottom: calc(var(--base) * 1.5);
+ margin-top: base(0.4);
+ padding-bottom: calc(var(--base) * 1.2);
display: flex;
align-items: center;
position: relative;
@@ -27,6 +27,9 @@
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
+ padding-bottom: base(0.2);
+ line-height: 1;
+ vertical-align: top;
}
@include mid-break {
diff --git a/packages/next/src/scss/toasts.scss b/packages/next/src/scss/toasts.scss
index da22f1806..116845ac3 100644
--- a/packages/next/src/scss/toasts.scss
+++ b/packages/next/src/scss/toasts.scss
@@ -8,7 +8,7 @@
position: absolute;
order: 3;
left: unset;
- inset-inline-end: base(0.5);
+ inset-inline-end: base(0.8);
top: 50%;
transform: translateY(-50%);
color: var(--theme-elevation-600);
@@ -16,8 +16,8 @@
border: none;
svg {
- width: base(0.75);
- height: base(0.75);
+ width: base(0.8);
+ height: base(0.8);
}
&:hover {
@@ -33,10 +33,11 @@
.toast-title {
line-height: base(1);
+ margin-right: base(1);
}
.payload-toast-item {
- padding: base(0.5);
+ padding: base(0.8);
color: var(--theme-elevation-800);
font-style: normal;
font-weight: 600;
@@ -69,8 +70,8 @@
}
.toast-icon {
- width: base(1);
- height: base(1);
+ width: base(0.8);
+ height: base(0.8);
margin: 0;
display: flex;
align-items: center;
@@ -84,8 +85,8 @@
&.toast-warning {
color: var(--theme-warning-800);
- border-color: var(--theme-warning-150);
- background-color: var(--theme-warning-50);
+ border-color: var(--theme-warning-250);
+ background-color: var(--theme-warning-100);
.payload-toast-close-button {
color: var(--theme-warning-600);
@@ -98,8 +99,8 @@
&.toast-error {
color: var(--theme-error-800);
- border-color: var(--theme-error-150);
- background-color: var(--theme-error-50);
+ border-color: var(--theme-error-250);
+ background-color: var(--theme-error-100);
.payload-toast-close-button {
color: var(--theme-error-600);
@@ -112,8 +113,8 @@
&.toast-success {
color: var(--theme-success-800);
- border-color: var(--theme-success-150);
- background-color: var(--theme-success-50);
+ border-color: var(--theme-success-250);
+ background-color: var(--theme-success-100);
.payload-toast-close-button {
color: var(--theme-success-600);
@@ -126,8 +127,8 @@
&.toast-info {
color: var(--theme-elevation-800);
- border-color: var(--theme-elevation-150);
- background-color: var(--theme-elevation-50);
+ border-color: var(--theme-elevation-250);
+ background-color: var(--theme-elevation-100);
.payload-toast-close-button {
color: var(--theme-elevation-600);
diff --git a/packages/next/src/views/List/Default/index.scss b/packages/next/src/views/List/Default/index.scss
index d5a483dda..1a5376f34 100644
--- a/packages/next/src/views/List/Default/index.scss
+++ b/packages/next/src/views/List/Default/index.scss
@@ -13,7 +13,7 @@
&__header {
display: flex;
- align-items: center;
+ align-items: flex-end;
flex-wrap: wrap;
gap: base(0.8);
@@ -27,7 +27,7 @@
.pill {
position: relative;
- margin: 0;
+ margin: 0 0 base(0.2);
}
}
diff --git a/packages/richtext-lexical/src/scss/toasts.scss b/packages/richtext-lexical/src/scss/toasts.scss
index da22f1806..116845ac3 100644
--- a/packages/richtext-lexical/src/scss/toasts.scss
+++ b/packages/richtext-lexical/src/scss/toasts.scss
@@ -8,7 +8,7 @@
position: absolute;
order: 3;
left: unset;
- inset-inline-end: base(0.5);
+ inset-inline-end: base(0.8);
top: 50%;
transform: translateY(-50%);
color: var(--theme-elevation-600);
@@ -16,8 +16,8 @@
border: none;
svg {
- width: base(0.75);
- height: base(0.75);
+ width: base(0.8);
+ height: base(0.8);
}
&:hover {
@@ -33,10 +33,11 @@
.toast-title {
line-height: base(1);
+ margin-right: base(1);
}
.payload-toast-item {
- padding: base(0.5);
+ padding: base(0.8);
color: var(--theme-elevation-800);
font-style: normal;
font-weight: 600;
@@ -69,8 +70,8 @@
}
.toast-icon {
- width: base(1);
- height: base(1);
+ width: base(0.8);
+ height: base(0.8);
margin: 0;
display: flex;
align-items: center;
@@ -84,8 +85,8 @@
&.toast-warning {
color: var(--theme-warning-800);
- border-color: var(--theme-warning-150);
- background-color: var(--theme-warning-50);
+ border-color: var(--theme-warning-250);
+ background-color: var(--theme-warning-100);
.payload-toast-close-button {
color: var(--theme-warning-600);
@@ -98,8 +99,8 @@
&.toast-error {
color: var(--theme-error-800);
- border-color: var(--theme-error-150);
- background-color: var(--theme-error-50);
+ border-color: var(--theme-error-250);
+ background-color: var(--theme-error-100);
.payload-toast-close-button {
color: var(--theme-error-600);
@@ -112,8 +113,8 @@
&.toast-success {
color: var(--theme-success-800);
- border-color: var(--theme-success-150);
- background-color: var(--theme-success-50);
+ border-color: var(--theme-success-250);
+ background-color: var(--theme-success-100);
.payload-toast-close-button {
color: var(--theme-success-600);
@@ -126,8 +127,8 @@
&.toast-info {
color: var(--theme-elevation-800);
- border-color: var(--theme-elevation-150);
- background-color: var(--theme-elevation-50);
+ border-color: var(--theme-elevation-250);
+ background-color: var(--theme-elevation-100);
.payload-toast-close-button {
color: var(--theme-elevation-600);
diff --git a/packages/richtext-slate/src/scss/toasts.scss b/packages/richtext-slate/src/scss/toasts.scss
index da22f1806..116845ac3 100644
--- a/packages/richtext-slate/src/scss/toasts.scss
+++ b/packages/richtext-slate/src/scss/toasts.scss
@@ -8,7 +8,7 @@
position: absolute;
order: 3;
left: unset;
- inset-inline-end: base(0.5);
+ inset-inline-end: base(0.8);
top: 50%;
transform: translateY(-50%);
color: var(--theme-elevation-600);
@@ -16,8 +16,8 @@
border: none;
svg {
- width: base(0.75);
- height: base(0.75);
+ width: base(0.8);
+ height: base(0.8);
}
&:hover {
@@ -33,10 +33,11 @@
.toast-title {
line-height: base(1);
+ margin-right: base(1);
}
.payload-toast-item {
- padding: base(0.5);
+ padding: base(0.8);
color: var(--theme-elevation-800);
font-style: normal;
font-weight: 600;
@@ -69,8 +70,8 @@
}
.toast-icon {
- width: base(1);
- height: base(1);
+ width: base(0.8);
+ height: base(0.8);
margin: 0;
display: flex;
align-items: center;
@@ -84,8 +85,8 @@
&.toast-warning {
color: var(--theme-warning-800);
- border-color: var(--theme-warning-150);
- background-color: var(--theme-warning-50);
+ border-color: var(--theme-warning-250);
+ background-color: var(--theme-warning-100);
.payload-toast-close-button {
color: var(--theme-warning-600);
@@ -98,8 +99,8 @@
&.toast-error {
color: var(--theme-error-800);
- border-color: var(--theme-error-150);
- background-color: var(--theme-error-50);
+ border-color: var(--theme-error-250);
+ background-color: var(--theme-error-100);
.payload-toast-close-button {
color: var(--theme-error-600);
@@ -112,8 +113,8 @@
&.toast-success {
color: var(--theme-success-800);
- border-color: var(--theme-success-150);
- background-color: var(--theme-success-50);
+ border-color: var(--theme-success-250);
+ background-color: var(--theme-success-100);
.payload-toast-close-button {
color: var(--theme-success-600);
@@ -126,8 +127,8 @@
&.toast-info {
color: var(--theme-elevation-800);
- border-color: var(--theme-elevation-150);
- background-color: var(--theme-elevation-50);
+ border-color: var(--theme-elevation-250);
+ background-color: var(--theme-elevation-100);
.payload-toast-close-button {
color: var(--theme-elevation-600);
diff --git a/packages/ui/src/elements/IDLabel/index.scss b/packages/ui/src/elements/IDLabel/index.scss
index a78273927..803ed6bb4 100644
--- a/packages/ui/src/elements/IDLabel/index.scss
+++ b/packages/ui/src/elements/IDLabel/index.scss
@@ -1,11 +1,12 @@
@import '../../scss/styles';
.id-label {
- font-size: base(0.75);
+ font-size: base(0.8);
+ line-height: base(1.2);
font-weight: normal;
color: var(--theme-elevation-600);
background: var(--theme-elevation-100);
- padding: 0 base(0.6);
+ padding: base(0.2) base(0.4);
border-radius: $style-radius-m;
display: inline-flex;
}
diff --git a/packages/ui/src/elements/RenderTitle/index.scss b/packages/ui/src/elements/RenderTitle/index.scss
index 6c1cc92c3..cb6254a4d 100644
--- a/packages/ui/src/elements/RenderTitle/index.scss
+++ b/packages/ui/src/elements/RenderTitle/index.scss
@@ -1,7 +1,7 @@
@import '../../scss/styles.scss';
.render-title {
- display: inline-flex;
+ display: inline-block;
&__id {
vertical-align: middle;
position: relative;
diff --git a/packages/ui/src/icons/Chevron/index.tsx b/packages/ui/src/icons/Chevron/index.tsx
index 6173e5dbb..693f41525 100644
--- a/packages/ui/src/icons/Chevron/index.tsx
+++ b/packages/ui/src/icons/Chevron/index.tsx
@@ -26,6 +26,6 @@ export const ChevronIcon: React.FC<{
width={20}
xmlns="http://www.w3.org/2000/svg"
>
-
+
)
diff --git a/packages/ui/src/scss/toasts.scss b/packages/ui/src/scss/toasts.scss
index da22f1806..116845ac3 100644
--- a/packages/ui/src/scss/toasts.scss
+++ b/packages/ui/src/scss/toasts.scss
@@ -8,7 +8,7 @@
position: absolute;
order: 3;
left: unset;
- inset-inline-end: base(0.5);
+ inset-inline-end: base(0.8);
top: 50%;
transform: translateY(-50%);
color: var(--theme-elevation-600);
@@ -16,8 +16,8 @@
border: none;
svg {
- width: base(0.75);
- height: base(0.75);
+ width: base(0.8);
+ height: base(0.8);
}
&:hover {
@@ -33,10 +33,11 @@
.toast-title {
line-height: base(1);
+ margin-right: base(1);
}
.payload-toast-item {
- padding: base(0.5);
+ padding: base(0.8);
color: var(--theme-elevation-800);
font-style: normal;
font-weight: 600;
@@ -69,8 +70,8 @@
}
.toast-icon {
- width: base(1);
- height: base(1);
+ width: base(0.8);
+ height: base(0.8);
margin: 0;
display: flex;
align-items: center;
@@ -84,8 +85,8 @@
&.toast-warning {
color: var(--theme-warning-800);
- border-color: var(--theme-warning-150);
- background-color: var(--theme-warning-50);
+ border-color: var(--theme-warning-250);
+ background-color: var(--theme-warning-100);
.payload-toast-close-button {
color: var(--theme-warning-600);
@@ -98,8 +99,8 @@
&.toast-error {
color: var(--theme-error-800);
- border-color: var(--theme-error-150);
- background-color: var(--theme-error-50);
+ border-color: var(--theme-error-250);
+ background-color: var(--theme-error-100);
.payload-toast-close-button {
color: var(--theme-error-600);
@@ -112,8 +113,8 @@
&.toast-success {
color: var(--theme-success-800);
- border-color: var(--theme-success-150);
- background-color: var(--theme-success-50);
+ border-color: var(--theme-success-250);
+ background-color: var(--theme-success-100);
.payload-toast-close-button {
color: var(--theme-success-600);
@@ -126,8 +127,8 @@
&.toast-info {
color: var(--theme-elevation-800);
- border-color: var(--theme-elevation-150);
- background-color: var(--theme-elevation-50);
+ border-color: var(--theme-elevation-250);
+ background-color: var(--theme-elevation-100);
.payload-toast-close-button {
color: var(--theme-elevation-600);