github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-08-01 10:56:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

💄 Add new library modal UI tweaks

Browse Source
This commit is contained in:
Pablo Alba 2025-09-25 22:56:27 +02:00 committed by GitHub
parent 9b90236b72
commit bd665f70bf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 170 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/main/ui/ds/_sizes.scss
View File

@ -22,15 +22,19 @@ $sz-80: px2rem(80);
$sz-88: px2rem(88); $sz-88: px2rem(88);
$sz-154: px2rem(154); $sz-154: px2rem(154);
$sz-160: px2rem(160); $sz-160: px2rem(160);
$sz-192: px2rem(192);
$sz-200: px2rem(200); $sz-200: px2rem(200);
$sz-224: px2rem(224); $sz-224: px2rem(224);
$sz-252: px2rem(252); $sz-252: px2rem(252);
$sz-284: px2rem(284); $sz-284: px2rem(284);
$sz-318: px2rem(318); $sz-318: px2rem(318);
$sz-352: px2rem(352); $sz-352: px2rem(352);
$sz-364: px2rem(364);
$sz-384: px2rem(384); $sz-384: px2rem(384);
$sz-400: px2rem(400); $sz-400: px2rem(400);
$sz-430: px2rem(430); $sz-430: px2rem(430);
$sz-480: px2rem(480); $sz-480: px2rem(480);
$sz-500: px2rem(500); $sz-500: px2rem(500);
$sz-520: px2rem(520);
$sz-712: px2rem(712);
$sz-964: px2rem(964); $sz-964: px2rem(964);

265
frontend/src/app/main/ui/workspace/libraries.scss
View File

@ -5,35 +5,64 @@
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated; @use "refactor/common-refactor.scss" as deprecated;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/_utils.scss" as *;
@use "ds/z-index.scss" as *;
@use "ds/typography.scss" as t;
@use "ds/mixins.scss" as *;
// Library modal // Library modal
.modal-overlay { .modal-overlay {
@extend .modal-overlay-base; display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: var(--z-index-set);
background-color: var(--overlay-color);
} }
.modal-dialog { .modal-dialog {
@extend .modal-container-base; position: relative;
padding: var(--sp-xxxl);
border-radius: $br-8;
background-color: var(--modal-background-color);
border: $b-2 solid var(--modal-border-color);
display: grid; display: grid;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
height: deprecated.$s-520; min-width: $sz-364;
max-height: deprecated.$s-520; min-height: $sz-192;
width: deprecated.$s-712; height: $sz-520;
max-width: deprecated.$s-712; max-height: $sz-520;
width: $sz-712;
max-width: $sz-712;
} }
// TODO: Remove this extended creating modal component
.close-btn { .close-btn {
@extend .modal-close-btn-base; @extend .modal-close-btn-base;
} }
.close-icon { .close-icon {
@extend .button-icon; display: flex;
justify-content: center;
align-items: center;
height: $sz-16;
width: $sz-16;
color: transparent;
fill: none;
stroke-width: $b-1;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
.modal-title { .modal-title {
@include deprecated.headlineMediumTypography; @include t.use-typography("headline-medium");
margin-block-end: deprecated.$s-16; margin-block-end: var(--sp-l);
color: var(--modal-title-foreground-color); color: var(--color-foreground-primary);
} }
// Tabs content // Tabs content
@ -41,9 +70,9 @@
.updates-content { .updates-content {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: deprecated.$s-32; gap: var(--sp-xxxl);
max-height: deprecated.$s-400; max-height: $sz-400;
padding-block-start: deprecated.$s-16; padding-block-start: var(--sp-l);
} }
.lib-section, .lib-section,
@ -51,30 +80,40 @@
.shared-section { .shared-section {
display: grid; display: grid;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
gap: deprecated.$s-8; gap: var(--sp-s);
.section-list {
.section-list-item:first-child {
border: none;
}
}
} }
.shared-section { .shared-section {
grid-template-rows: auto auto 1fr; grid-template-rows: auto auto 1fr;
row-gap: var(--sp-l);
} }
.title-spacing-lib { .title-spacing-lib {
margin: 0 0 0 calc(-1 * deprecated.$s-8); margin: 0 0 0 calc(-1 * var(--sp-s));
} }
.section-list, .section-list,
.section-list-shared { .section-list-shared {
display: grid; display: grid;
grid-auto-rows: min-content; grid-auto-rows: min-content;
gap: deprecated.$s-8; gap: var(--sp-s);
max-height: deprecated.$s-320; max-height: px2rem(320);
overflow-y: auto; overflow-y: auto;
} }
.section-list-item { .section-list-item {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
gap: deprecated.$s-8; gap: var(--sp-s);
border: $b-1 solid var(--color-background-quaternary);
padding: var(--sp-s) var(--sp-s) var(--sp-m) var(--sp-m);
border-radius: $br-8;
} }
.item-content { .item-content {
@ -83,82 +122,107 @@
.item-publish, .item-publish,
.item-unpublish { .item-unpublish {
// TODO: remove this extended by using DS button component
@extend .button-primary; @extend .button-primary;
@include deprecated.uppercaseTitleTipography; @include t.use-typography("headline-small");
height: deprecated.$s-32; height: $sz-32;
min-width: deprecated.$s-92; min-width: px2rem(92);
padding: deprecated.$s-8 deprecated.$s-24; padding: var(--sp-s) var(--sp-xxl);
margin: 0; margin: 0;
border-radius: deprecated.$br-8; border-radius: $br-8;
} }
.item-unpublish { .item-unpublish {
// TODO: remove this extended by using DS button component
@extend .button-secondary; @extend .button-secondary;
} }
.item-button, .item-button,
.item-button-shared { .item-button-shared {
// TODO: remove this extended by using DS button component
@extend .button-secondary; @extend .button-secondary;
height: deprecated.$s-32; height: $sz-32;
width: deprecated.$s-32; width: $sz-32;
margin-inline-start: deprecated.$s-2; margin-inline-start: var(--sp-xxs);
margin-inline-end: deprecated.$s-8; padding: var(--sp-s);
padding: deprecated.$s-8;
} }
.detach-icon, .detach-icon,
.add-icon { .add-icon {
@extend .button-icon; display: flex;
justify-content: center;
align-items: center;
height: $sz-16;
width: $sz-16;
color: transparent;
fill: none;
stroke-width: $b-1;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
.section-list-shared { .section-list-shared {
max-height: deprecated.$s-272; max-height: px2rem(272);
} }
.section-title { .section-title {
@include deprecated.headlineSmallTypography; @include t.use-typography("headline-small");
margin-block-end: deprecated.$s-12; margin-block-end: var(--sp-m);
color: var(--title-foreground-color); color: var(--title-foreground-color);
} }
.search-icon { .search-icon {
@include deprecated.flexCenter; display: flex;
width: deprecated.$s-20; justify-content: center;
padding: 0 0 0 deprecated.$s-8; align-items: center;
width: px2rem(20);
padding: 0 0 0 var(--sp-s);
svg { svg {
@extend .button-icon-small; display: flex;
justify-content: center;
align-items: center;
color: transparent;
fill: none;
height: px2rem(12);
width: px2rem(12);
stroke-width: 1.33px;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
} }
// empty state // empty state
.section-list-empty { .section-list-empty {
@include deprecated.bodyMediumTypography; @include t.use-typography("body-medium");
display: grid; display: grid;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
justify-items: center; justify-items: center;
gap: deprecated.$s-8; gap: var(--sp-s);
text-align: center; text-align: center;
height: fit-content; height: fit-content;
margin-block: deprecated.$s-16; margin-block: var(--sp-l);
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.empty-state-icon { .empty-state-icon {
@include deprecated.flexCenter; display: flex;
width: deprecated.$s-48; justify-content: center;
height: deprecated.$s-48; align-items: center;
border-radius: deprecated.$br-circle; width: $sz-48;
height: $sz-48;
border-radius: $br-circle;
background-color: var(--pill-background-color); background-color: var(--pill-background-color);
} }
.library-icon { .library-icon {
@extend .button-icon; display: flex;
justify-content: center;
align-items: center;
color: transparent;
fill: none;
stroke-width: $b-1;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
height: deprecated.$s-32; height: $sz-32;
width: deprecated.$s-32; width: $sz-32;
} }
// Update library tab // Update library tab
@ -166,8 +230,8 @@
@extend .link; @extend .link;
direction: rtl; direction: rtl;
grid-column: span 3; grid-column: span 3;
margin-block-start: deprecated.$s-8; margin-block-start: var(--sp-s);
margin-inline-start: deprecated.$s-8; margin-inline-start: var(--sp-s);
margin: 0; margin: 0;
} }
@ -178,14 +242,14 @@
.libraries-updates { .libraries-updates {
display: grid; display: grid;
grid-column: span 3; grid-column: span 3;
grid-template-columns: repeat(auto-fill, minmax(deprecated.$s-160, 1fr)); grid-template-columns: repeat(auto-fill, minmax(px2rem(160), 1fr));
gap: deprecated.$s-24; gap: deprecated.$s-24;
margin-block-start: deprecated.$s-16; margin-block-start: var(--sp-l);
} }
.libraries-updates-column { .libraries-updates-column {
display: grid; display: grid;
gap: deprecated.$s-4; gap: var(--sp-xs);
} }
.libraries-updates-item { .libraries-updates-item {
@ -193,45 +257,45 @@
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
align-items: start; align-items: start;
gap: deprecated.$s-8; gap: var(--sp-s);
color: var(--library-content-foreground-color); color: var(--library-content-foreground-color);
} }
.component-svg { .component-svg {
background-color: var(--color-canvas); background-color: var(--color-canvas);
border-radius: deprecated.$br-4; border-radius: $br-4;
border: deprecated.$s-2 solid transparent; border: $b-2 solid transparent;
height: deprecated.$s-24; height: $sz-24;
width: deprecated.$s-24; width: $sz-24;
min-height: deprecated.$s-24; min-height: $sz-24;
min-width: deprecated.$s-24; min-width: $sz-24;
} }
.name-block { .name-block {
color: var(--library-content-foreground-color); color: var(--library-content-foreground-color);
width: deprecated.$s-168; width: px2rem(168);
} }
.ellipsis { .ellipsis {
padding-inline-start: calc(deprecated.$s-24 + #{deprecated.$s-8}); padding-inline-start: calc(var(--sp-xxl) + var(--sp-s));
} }
.item-name { .item-name {
@include deprecated.bodyLargeTypography; @include t.use-typography("body-large");
@include deprecated.textEllipsis; @include textEllipsis;
margin: 0; margin: 0;
max-width: deprecated.$s-244; max-width: px2rem(216);
color: var(--library-name-foreground-color); color: var(--library-name-foreground-color);
} }
.item-update { .item-update {
@extend .button-primary; @extend .button-primary;
@include deprecated.headlineSmallTypography; @include t.use-typography("headline-small");
height: deprecated.$s-32; height: $sz-32;
min-width: deprecated.$s-92; min-width: px2rem(92);
padding: deprecated.$s-8 deprecated.$s-24; padding: var(--sp-s) var(--sp-xxl);
margin-inline-end: deprecated.$s-2; margin-inline-end: var(--sp-xxs);
border-radius: deprecated.$br-8; border-radius: $br-8;
&:disabled { &:disabled {
@extend .button-disabled; @extend .button-disabled;
@ -239,7 +303,7 @@
} }
.item-contents { .item-contents {
@include deprecated.bodyMediumTypography; @include t.use-typography("body-small");
color: var(--library-content-foreground-color); color: var(--library-content-foreground-color);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -251,33 +315,33 @@
&:not(:last-child)::after { &:not(:last-child)::after {
content: "·"; content: "·";
margin-inline: deprecated.$s-4; margin-inline: var(--sp-xs);
} }
} }
// Modal Component v2 update // Modal Component v2 update
.modal-v2-info { .modal-v2-info {
width: deprecated.$s-664; width: px2rem(664);
height: fit-content; height: fit-content;
max-height: fit-content; max-height: fit-content;
} }
.modal-v2-title { .modal-v2-title {
@include deprecated.headlineMediumTypography; @include t.use-typography("headline-medium");
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.info-content { .info-content {
display: grid; display: grid;
grid-template-rows: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
margin-top: deprecated.$s-32; margin-top: var(--sp-xxxl);
gap: deprecated.$s-24; gap: var(--sp-xxl);
} }
.info-block { .info-block {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
column-gap: deprecated.$s-20; column-gap: var(--sp-xl);
grid-template: grid-template:
"icon title" "icon title"
"icon content"; "icon content";
@ -285,30 +349,30 @@
.info-icon { .info-icon {
grid-area: icon; grid-area: icon;
width: deprecated.$s-52; width: px2rem(52);
height: deprecated.$s-52; height: px2rem(52);
margin-top: deprecated.$s-8; margin-top: var(--sp-s);
border-radius: deprecated.$br-circle; border-radius: $br-circle;
background: var(--color-background-quaternary); background: var(--color-background-quaternary);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
svg { svg {
width: deprecated.$s-32; width: $sz-32;
height: deprecated.$s-32; height: $sz-32;
fill: var(--icon-foreground-active); fill: var(--icon-foreground-active);
} }
} }
.info-block-title { .info-block-title {
@include deprecated.bodyLargeTypography; @include t.use-typography("body-large");
grid-area: title; grid-area: title;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.info-block-content { .info-block-content {
@include deprecated.bodyMediumTypography; @include t.use-typography("body-medium");
grid-area: content; grid-area: content;
color: var(--library-content-foreground-color); color: var(--library-content-foreground-color);
} }
@ -316,36 +380,37 @@
.info-bottom { .info-bottom {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-block-start: deprecated.$s-24; margin-block-start: var(--sp-xxl);
margin-inline-end: deprecated.$s-8; margin-inline-end: var(--sp-s);
} }
.primary-button { .primary-button {
@extend .button-primary; @extend .button-primary;
@include deprecated.headlineSmallTypography; @include t.use-typography("headline-small");
padding: deprecated.$s-0 deprecated.$s-16; padding: 0 var(--sp-l);
} }
.sample-libraries-info { .sample-libraries-info {
@include t.use-typography("body-small");
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: deprecated.$fs-12; margin: var(--sp-xxxl);
margin: deprecated.$s-32;
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
} }
.sample-libraries-link { .sample-libraries-link {
@include t.use-typography("body-small");
color: var(--color-accent-primary); color: var(--color-accent-primary);
font-weight: deprecated.$fw400;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
.sample-libraries-container { .sample-libraries-container {
@include t.use-typography("body-small");
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: deprecated.$fs-12;
width: 100%; width: 100%;
align-items: start; align-items: start;
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
@ -356,32 +421,34 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
margin-top: deprecated.$s-8; margin-top: var(--sp-s);
} }
.sample-library-item-name { .sample-library-item-name {
font-size: deprecated.$fs-14; @include t.use-typography("body-medium");
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: deprecated.$s-232; max-width: px2rem(232);
} }
// TODO: Remove this extended using a DS component
.sample-library-add { .sample-library-add {
@extend .button-secondary; @extend .button-secondary;
} }
// TODO: Remove this extended using a DS component
.sample-library-adding { .sample-library-adding {
@extend .button-disabled; @extend .button-disabled;
} }
.sample-library-button { .sample-library-button {
@include deprecated.uppercaseTitleTipography; @include t.use-typography("headline-small");
height: deprecated.$s-32; height: $sz-32;
width: deprecated.$s-80; width: $sz-80;
margin: 0; margin: 0;
border-radius: deprecated.$br-8; border-radius: $br-8;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;