johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-11 22:14:05 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

💄 Update release modals to new design

Browse Source
This commit is contained in:
Eva Marco
2024-02-29 14:28:15 +01:00
committed by Alonso Torres
parent 238519cb69
commit 1f0683498f
73 changed files with 493 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/resources/styles/common/refactor/basic-rules.scss
View File

@@ -278,7 +278,7 @@
// INPUTS
.input-base {
@include removeInputStyle;
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
// @include focusInput;
height: $s-28;
@@ -313,7 +313,7 @@
}
.input-element {
@include bodyMedTipography;
@include bodySmallTypography;
@include focusInput;
display: flex;
align-items: center;
@@ -383,7 +383,7 @@
}
.input-element-label {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
align-items: flex-start;
padding: 0;
@@ -488,7 +488,7 @@
display: flex;
align-items: center;
label {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
align-items: center;
gap: $s-6;
@@ -519,7 +519,7 @@
display: flex;
flex-direction: column;
label {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
flex-direction: column;
justify-content: flex-start;
@@ -529,7 +529,7 @@
input {
@extend .input-base;
@include bodyMedTipography;
@include bodySmallTypography;
border-radius: $br-8;
height: $s-32;
min-height: $s-32;
@@ -606,7 +606,7 @@
}
.modal-hint-base {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--modal-title-foreground-color);
border-top: $s-1 solid var(--modal-hint-border-color);
border-bottom: $s-1 solid var(--modal-hint-border-color);
@@ -666,7 +666,7 @@
}
// UI ELEMENTS
.asset-element {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
align-items: center;
height: $s-32;
@@ -687,7 +687,7 @@
}
.shortcut-key-base {
@include bodyMedTipography;
@include bodySmallTypography;
@include flexCenter;
height: $s-20;
padding: $s-2 $s-6;
@@ -697,7 +697,7 @@
.user-icon {
@include flexCenter;
@include bodyMedTipography;
@include bodySmallTypography;
height: $s-24;
width: $s-24;
border-radius: $br-circle;
@@ -709,7 +709,7 @@
}
.mixed-bar {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
align-items: center;
flex-grow: 1;
@@ -785,7 +785,7 @@
gap: $s-4;
height: $s-32;
:global(.attr-label) {
@include bodyMedTipography;
@include bodySmallTypography;
@include twoLineTextEllipsis;
width: $s-92;
margin: auto 0;
@@ -797,12 +797,12 @@
grid-area: content;
display: flex;
color: var(--entry-foreground-color-hover);
@include bodyMedTipography;
@include bodySmallTypography;
}
}
.copy-button-children {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--color-foreground-primary);
text-align: left;
margin: 0;
@@ -816,7 +816,7 @@
}
.comment-bubbles {
@include bodyMedTipography;
@include bodySmallTypography;
@include flexCenter;
height: $s-32;
width: $s-32;
@@ -851,7 +851,7 @@
}
.menu-item-base {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
align-items: center;
justify-content: space-between;
@@ -866,7 +866,7 @@
}
.dropdown-element-base {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
align-items: center;
gap: $s-8;
@@ -913,7 +913,7 @@
}
.select-wrapper {
@include bodyMedTipography;
@include bodySmallTypography;
position: relative;
display: flex;
align-items: center;

5
frontend/resources/styles/common/refactor/design-tokens.scss
View File

@@ -309,6 +309,8 @@
--modal-link-foreground-color: var(--color-accent-primary);
--modal-border-color: var(--color-background-quaternary);
--modal-separator-backogrund-color: var(--color-background-quaternary);
--modal-navigator-foreground-color-rest: var(--color-background-quaternary);
--modal-navigator-foreground-color-active: var(--color-accent-primary);
// ALERTS NOTIFICATION TOAST & STATUS WIDGET
--alert-background-color-success: var(--color-success-background);
@@ -372,6 +374,9 @@
--flow-tag-background-color-hover: var(--color-background-quaternary);
--flow-tag-foreground-color-hover: var(--color-accent-primary);
--communication-tag-background-color: var(--color-foreground-primary);
--communication-tag-foreground-color: var(--color-background-tertiary);
// VIEWER
--viewer-background-color: var(--color-background-secondary);
--viewer-paginator-background-color: var(--color-background-tertiary);

33
frontend/resources/styles/common/refactor/mixins.scss
View File

@@ -63,26 +63,49 @@
line-height: 1.2;
}
@mixin headlineLargeTypography {
font-family: "worksans", sans-serif;
font-size: $fs-18;
line-height: 1.2;
text-transform: uppercase;
font-weight: $fw400;
}
@mixin headlineMediumTypography {
font-family: "worksans", sans-serif;
font-size: $fs-16;
line-height: 1.4;
text-transform: uppercase;
font-weight: normal;
font-weight: $fw400;
}
@mixin headlineSmallTypography {
font-family: "worksans", sans-serif;
font-size: $fs-12;
line-height: 1.2;
text-transform: uppercase;
font-weight: $fw500;
}
@mixin bodyLargeTypography {
font-family: "worksans", sans-serif;
font-size: $fs-16;
line-height: 1.5;
font-weight: normal;
font-weight: $fw400;
}
@mixin bodyMedTipography {
@mixin bodyMediumTypography {
font-family: "worksans", sans-serif;
font-size: $fs-14;
line-height: 1.4;
font-weight: $fw400;
}
@mixin bodySmallTypography {
font-family: "worksans", sans-serif;
font-size: $fs-12;
font-weight: $fw400;
line-height: 1.2;
line-height: 1.4;
}
@mixin codeTypography {
@@ -110,7 +133,7 @@
}
@mixin inspectValue {
@include bodyMedTipography;
@include bodySmallTypography;
display: inline-block;
width: fit-content;
padding: 0;

1
frontend/resources/styles/common/refactor/spacing.scss
View File

@@ -155,6 +155,7 @@ $s-712: #{0.25 * 178}rem;
$s-736: #{0.25 * 184}rem;
$s-744: #{0.25 * 186}rem;
$s-800: #{0.25 * 200}rem;
$s-888: #{0.25 * 222}rem;
$s-908: #{0.25 * 227}rem;
$s-960: #{0.25 * 240}rem;
$s-968: #{0.25 * 242}rem;