3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-12 20:06:37 +02:00
Code Issues Projects Releases Packages Wiki 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
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; 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 { @mixin textEllipsis {
max-width: 99%; max-width: 99%;
overflow: hidden; overflow: hidden;

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

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

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

@ -22,7 +22,7 @@
} }
.modal-title { .modal-title {
@include tabTitleTipography; @include headlineMediumTypography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -31,7 +31,7 @@
} }
.modal-content { .modal-content {
@include titleTipography; @include bodyLargeTypography;
margin-bottom: $s-24; margin-bottom: $s-24;
} }
@ -49,7 +49,7 @@
} }
} }
.modal-component-name { .modal-component-name {
@include titleTipography; @include bodyLargeTypography;
} }
.modal-hint { .modal-hint {
@ -74,7 +74,6 @@
.modal-scd-msg, .modal-scd-msg,
.modal-subtitle, .modal-subtitle,
.modal-msg { .modal-msg {
@include titleTipography; @include bodyLargeTypography;
color: var(--modal-text-foreground-color); 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; right: $s-32;
} }
.modal-title { .modal-title {
@include tabTitleTipography; @include headlineMediumTypography;
height: $s-32; height: $s-32;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -643,8 +643,9 @@
.role-select { .role-select {
@include flexColumn; @include flexColumn;
row-gap: $s-8;
.role-title { .role-title {
@include titleTipography; @include bodyLargeTypography;
margin: 0; margin: 0;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }

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

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

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

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

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

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

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

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

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

@ -39,7 +39,7 @@
} }
.modal-title { .modal-title {
@include tabTitleTipography; @include headlineMediumTypography;
margin-bottom: $s-16; margin-bottom: $s-16;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -70,24 +70,18 @@
max-height: $s-320; max-height: $s-320;
margin-top: $s-12; margin-top: $s-12;
overflow: auto; overflow: auto;
padding-right: $s-8;
.section-list-item { .section-list-item {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
column-gap: $s-12;
margin-bottom: $s-24; margin-bottom: $s-24;
&:last-child { &:last-child {
margin-bottom: $s-8; margin-bottom: $s-8;
} }
.item-name { .item-name {
@include titleTipography; @include bodyLargeTypography;
color: var(--library-name-foreground-color); color: var(--library-name-foreground-color);
} }
.item-contents {
@include titleTipography;
color: var(--library-content-foreground-color);
}
.item-publish, .item-publish,
.item-unpublish { .item-unpublish {
@extend .button-primary; @extend .button-primary;
@ -99,7 +93,7 @@
} }
.item-update { .item-update {
@extend .button-warning; @extend .button-warning;
@include tabTitleTipography; @include headlineMediumTypography;
height: $s-32; height: $s-32;
min-width: $s-92; min-width: $s-92;
padding: $s-8 $s-24; padding: $s-8 $s-24;
@ -143,7 +137,7 @@
} }
.section-title { .section-title {
@include titleTipography; @include bodyLargeTypography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
margin-bottom: $s-12; margin-bottom: $s-12;
} }
@ -161,7 +155,7 @@
} }
} }
.section-list-empty { .section-list-empty {
@include titleTipography; @include bodyLargeTypography;
@include flexCenter; @include flexCenter;
color: var(--empty-message-foreground-color); 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 { .element-count {
white-space: nowrap; 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 { .modal-title {
@include tabTitleTipography; @include headlineMediumTypography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.modal-close-btn { .modal-close-btn {
@ -30,7 +30,7 @@
.modal-content { .modal-content {
@include flexColumn; @include flexColumn;
gap: $s-24; gap: $s-24;
@include titleTipography; @include bodyLargeTypography;
margin-bottom: $s-24; margin-bottom: $s-24;
} }
@ -42,7 +42,7 @@
} }
.modal-msg { .modal-msg {
@include titleTipography; @include bodyLargeTypography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
line-height: 1.5; line-height: 1.5;
} }