Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-12 07:41:43 -05:00
Code Issues Activity

✨ Improve a11y of paragraphs in modal + layout fixes

Browse source
This commit is contained in:
Belén Albeza 2024-02-05 15:32:39 +01:00 • committed by Andrey Antukh
parent 836781be42
commit 79130b4da9
10 changed files with 89 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/resources/styles/common/refactor/mixins.scss
View file

@ -70,6 +70,21 @@
line-height: 1.2;
}
@mixin headlineMediumTypography {
font-family: "worksans", sans-serif;
font-size: $fs-16;
line-height: 1.4;
text-transform: uppercase;
font-weight: normal;
}
@mixin bodyLargeTypography {
font-family: "worksans", sans-serif;
font-size: $fs-16;
line-height: 1.5;
font-weight: normal;
}
@mixin textEllipsis {
max-width: 99%;
overflow: hidden;

8
frontend/src/app/main/ui/alert.scss
View file

@ -21,7 +21,7 @@
}
.modal-title {
@include tabTitleTipography;
@include headlineMediumTypography;
color: var(--modal-title-foreground-color);
}
@ -30,12 +30,12 @@
}
.modal-content {
@include titleTipography;
@include bodyLargeTypography;
margin-bottom: $s-24;
}
.modal-hint {
@include titleTipography;
@include bodyLargeTypography;
}
.action-buttons {
@ -56,7 +56,7 @@
.modal-scd-msg,
.modal-subtitle,
.modal-msg {
@include titleTipography;
@include bodyLargeTypography;
color: var(--modal-text-foreground-color);
line-height: 1.5;
}

9
frontend/src/app/main/ui/confirm.scss
View file

@ -22,7 +22,7 @@
}
.modal-title {
@include tabTitleTipography;
@include headlineMediumTypography;
color: var(--modal-title-foreground-color);
}
@ -31,7 +31,7 @@
}
.modal-content {
@include titleTipography;
@include bodyLargeTypography;
margin-bottom: $s-24;
}
@ -49,7 +49,7 @@
}
}
.modal-component-name {
@include titleTipography;
@include bodyLargeTypography;
}
.modal-hint {
@ -74,7 +74,6 @@
.modal-scd-msg,
.modal-subtitle,
.modal-msg {
@include titleTipography;
@include bodyLargeTypography;
color: var(--modal-text-foreground-color);
line-height: 1.5;
}

5
frontend/src/app/main/ui/dashboard/team.scss
View file

@ -593,7 +593,7 @@
right: $s-32;
}
.modal-title {
@include tabTitleTipography;
@include headlineMediumTypography;
height: $s-32;
color: var(--modal-title-foreground-color);
}
@ -643,8 +643,9 @@
.role-select {
@include flexColumn;
row-gap: $s-8;
.role-title {
@include titleTipography;
@include bodyLargeTypography;
margin: 0;
color: var(--modal-title-foreground-color);
}

10
frontend/src/app/main/ui/delete_shared.scss
View file

@ -22,7 +22,7 @@
}
.modal-title {
@include tabTitleTipography;
@include headlineMediumTypography;
color: var(--modal-title-foreground-color);
}
@ -40,10 +40,8 @@
}
.element-list {
@include titleTipography;
.list-item {
@include titleTipography;
}
@include bodyLargeTypography;
color: var(--modal-text-foreground-color);
}
.action-buttons {
@ -64,7 +62,7 @@
.modal-scd-msg,
.modal-subtitle,
.modal-msg {
@include titleTipography;
@include bodyLargeTypography;
color: var(--modal-text-foreground-color);
line-height: 1.5;
}

4
frontend/src/app/main/ui/export.cljs
View file

@ -138,8 +138,8 @@
(cond-> (:name shape) suffix (str suffix))]
(when (:scale export)
[:div {:class (stl/css :selection-scale)}
(dm/str (ust/format-precision (* width (:scale export)) 2) "px"
(ust/format-precision (* height (:scale export)) 2) "px")])
(dm/str (ust/format-precision (* width (:scale export)) 2) "x"
(ust/format-precision (* height (:scale export)) 2))])
(when (:type export)
[:div {:class (stl/css :selection-extension)}

29
frontend/src/app/main/ui/export.scss
View file

@ -41,14 +41,14 @@
.title-text {
@include flexCenter;
@include titleTipography;
@include bodyLargeTypography;
padding: 0;
margin: 0;
color: var(--modal-title-foreground-color);
padding-left: $s-4;
}
.progress {
@include titleTipography;
@include bodyLargeTypography;
padding-left: $s-8;
margin: 0;
color: var(--modal-text-foreground-color);
@ -86,7 +86,7 @@
}
.modal-title {
@include tabTitleTipography;
@include headlineMediumTypography;
color: var(--modal-title-foreground-color);
}
@ -125,7 +125,7 @@
}
}
.selection-title {
@include titleTipography;
@include bodyLargeTypography;
color: var(--modal-text-foreground-color);
}
}
@ -160,7 +160,9 @@
border-radius: $br-8;
.selection-btn {
@include buttonStyle;
@include flexRow;
display: grid;
grid-template-columns: min-content auto 1fr auto auto;
align-items: center;
width: 100%;
height: 10%;
gap: $s-8;
@ -176,21 +178,21 @@
}
}
.selection-name {
@include titleTipography;
@include bodyLargeTypography;
@include textEllipsis;
flex-grow: 1;
color: var(--modal-text-foreground-color);
text-align: start;
}
.selection-scale {
@include titleTipography;
@include bodyLargeTypography;
@include textEllipsis;
min-width: $s-108;
padding: $s-12;
color: var(--modal-text-foreground-color);
}
.selection-extension {
@include titleTipography;
@include bodyLargeTypography;
@include textEllipsis;
min-width: $s-72;
padding: $s-12;
@ -199,7 +201,6 @@
}
.image-wrapper {
@include flexCenter;
height: 100%;
min-height: $s-32;
min-width: $s-32;
background-color: var(--app-white);
@ -231,9 +232,8 @@
.modal-scd-msg,
.modal-subtitle,
.modal-msg {
@include titleTipography;
@include bodyLargeTypography;
color: var(--modal-text-foreground-color);
line-height: 1.5;
}
.export-option {
@ -243,7 +243,8 @@
label {
align-items: flex-start;
.modal-subtitle {
@include tabTitleTipography;
// @include tabTitleTipography;
@include bodyLargeTypography;
color: var(--modal-title-foreground-color);
}
}
@ -254,7 +255,7 @@
.option-content {
@include flexColumn;
@include titleTipography;
@include bodyLargeTypography;
}
.file-entry {
@ -271,7 +272,7 @@
}
}
.file-name-label {
@include titleTipography;
@include bodyLargeTypography;
}
}
&.loading {

56
frontend/src/app/main/ui/workspace/libraries.cljs
View file

@ -70,36 +70,22 @@
(mf/defc describe-library-blocks
[{:keys [components-count graphics-count colors-count typography-count] :as props}]
[:*
(when (pos? components-count)
[:li {:class (stl/css :element-count)}
(tr "workspace.libraries.components" components-count)])
(let [last-one (cond
(> colors-count 0) :color
(> graphics-count 0) :graphics
(> components-count 0) :components)]
[:*
(when (pos? components-count)
[:*
[:span {:class (stl/css :element-count)}
(tr "workspace.libraries.components" components-count)]
(when (not= last-one :components)
[:span " · "])])
(when (pos? graphics-count)
[:li {:class (stl/css :element-count)}
(tr "workspace.libraries.graphics" graphics-count)])
(when (pos? graphics-count)
[:*
[:span {:class (stl/css :element-count)}
(tr "workspace.libraries.graphics" graphics-count)]
(when (not= last-one :graphics)
[:span " · "])])
(when (pos? colors-count)
[:li {:class (stl/css :element-count)}
(tr "workspace.libraries.colors" colors-count)])
(when (pos? colors-count)
[:*
[:span {:class (stl/css :element-count)}
(tr "workspace.libraries.colors" colors-count)]
(when (not= last-one :colors)
[:span " · "])])
(when (pos? typography-count)
[:span {:class (stl/css :element-count)}
(tr "workspace.libraries.typography" typography-count)])]))
(when (pos? typography-count)
[:li {:class (stl/css :element-count)}
(tr "workspace.libraries.typography" typography-count)])])
(mf/defc libraries-tab
@ -208,7 +194,7 @@
[:div {:class (stl/css :section-list-item)}
[:div
[:div {:class (stl/css :item-name)} (tr "workspace.libraries.file-library")]
[:div {:class (stl/css :item-contents)}
[:ul {:class (stl/css :item-contents)}
[:& describe-library-blocks {:components-count (count components)
:graphics-count (count media)
:colors-count (count colors)
@ -229,7 +215,7 @@
:key (dm/str id)}
[:div
[:div {:class (stl/css :item-name)} name]
[:div {:class (stl/css :item-contents)}
[:ul {:class (stl/css :item-contents)}
(let [components-count (count (or (ctkl/components-seq (:data library)) []))
graphics-count (count (dm/get-in library [:data :media] []))
colors-count (count (dm/get-in library [:data :colors] []))
@ -262,7 +248,7 @@
:key (dm/str id)}
[:div
[:div {:class (stl/css :item-name)} name]
[:div {:class (stl/css :item-contents)}
[:ul {:class (stl/css :item-contents)}
(let [components-count (dm/get-in library [:library-summary :components :count] 0)
graphics-count (dm/get-in library [:library-summary :media :count] 0)
colors-count (dm/get-in library [:library-summary :colors :count] 0)
@ -376,11 +362,11 @@
:key (dm/str id)}
[:div
[:div {:class (stl/css :item-name)} name]
[:div {:class (stl/css :item-contents)} (describe-library
(count components)
0
(count colors)
(count typographies))]]
[:ul {:class (stl/css :item-contents)} (describe-library
(count components)
0
(count colors)
(count typographies))]]
[:input {:type "button"
:class (stl/css-case :item-update true
:disabled updating?)

30
frontend/src/app/main/ui/workspace/libraries.scss
View file

@ -39,7 +39,7 @@
}
.modal-title {
@include tabTitleTipography;
@include headlineMediumTypography;
margin-bottom: $s-16;
color: var(--modal-title-foreground-color);
}
@ -70,24 +70,18 @@
max-height: $s-320;
margin-top: $s-12;
overflow: auto;
padding-right: $s-8;
.section-list-item {
display: grid;
grid-template-columns: 1fr auto;
column-gap: $s-12;
margin-bottom: $s-24;
&:last-child {
margin-bottom: $s-8;
}
.item-name {
@include titleTipography;
@include bodyLargeTypography;
color: var(--library-name-foreground-color);
}
.item-contents {
@include titleTipography;
color: var(--library-content-foreground-color);
}
.item-publish,
.item-unpublish {
@extend .button-primary;
@ -99,7 +93,7 @@
}
.item-update {
@extend .button-warning;
@include tabTitleTipography;
@include headlineMediumTypography;
height: $s-32;
min-width: $s-92;
padding: $s-8 $s-24;
@ -143,7 +137,7 @@
}
.section-title {
@include titleTipography;
@include bodyLargeTypography;
color: var(--modal-title-foreground-color);
margin-bottom: $s-12;
}
@ -161,7 +155,7 @@
}
}
.section-list-empty {
@include titleTipography;
@include bodyLargeTypography;
@include flexCenter;
color: var(--empty-message-foreground-color);
@ -236,6 +230,18 @@
}
}
.item-contents {
@include bodyLargeTypography;
color: var(--library-content-foreground-color);
display: flex;
flex-wrap: wrap;
}
.element-count {
white-space: nowrap;
&:not(:last-child)::after {
content: "·";
margin-inline: $s-4;
}
}

6
frontend/src/app/main/ui/workspace/nudge.scss
View file

@ -20,7 +20,7 @@
}
.modal-title {
@include tabTitleTipography;
@include headlineMediumTypography;
color: var(--modal-title-foreground-color);
}
.modal-close-btn {
@ -30,7 +30,7 @@
.modal-content {
@include flexColumn;
gap: $s-24;
@include titleTipography;
@include bodyLargeTypography;
margin-bottom: $s-24;
}
@ -42,7 +42,7 @@
}
.modal-msg {
@include titleTipography;
@include bodyLargeTypography;
color: var(--modal-text-foreground-color);
line-height: 1.5;
}