3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-04 06:58:29 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Update onboarding modals

Browse source
This commit is contained in:
Eva Marco 2024-02-15 17:48:05 +01:00 • committed by Andrey Antukh
parent 5590210088
commit 7624797acf
109 changed files with 1054 additions and 836 deletions
Download patch file Download diff file Expand all files Collapse all files

46
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -39,7 +39,7 @@
@include buttonStyle;
@include flexCenter;
@include focusPrimary;
@include tabTitleTipography;
@include uppercaseTitleTipography;
background-color: var(--button-primary-background-color-rest);
border: $s-1 solid var(--button-primary-border-color-rest);
color: var(--button-primary-foreground-color-rest);
@ -276,7 +276,7 @@
// INPUTS
.input-base {
@include removeInputStyle;
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
// @include focusInput;
height: $s-28;
@ -302,7 +302,7 @@
}
.input-label {
@include tabTitleTipography;
@include uppercaseTitleTipography;
@include flexCenter;
width: $s-20;
padding-left: $s-8;
@ -311,7 +311,7 @@
}
.input-element {
@include titleTipography;
@include bodyMedTipography;
@include focusInput;
display: flex;
align-items: center;
@ -381,7 +381,7 @@
}
.input-element-label {
@include titleTipography;
@include bodyMedTipography;
display: flex;
align-items: flex-start;
padding: 0;
@ -486,7 +486,7 @@
display: flex;
align-items: center;
label {
@include titleTipography;
@include bodyMedTipography;
display: flex;
align-items: center;
gap: $s-6;
@ -517,7 +517,7 @@
display: flex;
flex-direction: column;
label {
@include titleTipography;
@include bodyMedTipography;
display: flex;
flex-direction: column;
justify-content: flex-start;
@ -527,7 +527,7 @@
input {
@extend .input-base;
@include titleTipography;
@include bodyMedTipography;
border-radius: $br-8;
height: $s-32;
min-height: $s-32;
@ -604,7 +604,7 @@
}
.modal-hint-base {
@include titleTipography;
@include bodyMedTipography;
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);
@ -618,7 +618,7 @@
.modal-cancel-btn {
@extend .button-secondary;
@include tabTitleTipography;
@include uppercaseTitleTipography;
padding: $s-8 $s-24;
border-radius: $br-8;
height: $s-32;
@ -627,7 +627,7 @@
.modal-accept-btn {
@extend .button-primary;
@include tabTitleTipography;
@include uppercaseTitleTipography;
padding: $s-8 $s-24;
border-radius: $br-8;
height: $s-32;
@ -636,7 +636,7 @@
.modal-danger-btn {
@extend .button-primary;
@include tabTitleTipography;
@include uppercaseTitleTipography;
padding: $s-8 $s-24;
border-radius: $br-8;
height: $s-32;
@ -664,7 +664,7 @@
}
// UI ELEMENTS
.asset-element {
@include titleTipography;
@include bodyMedTipography;
display: flex;
align-items: center;
height: $s-32;
@ -685,7 +685,7 @@
}
.shortcut-key-base {
@include titleTipography;
@include bodyMedTipography;
@include flexCenter;
height: $s-20;
padding: $s-2 $s-6;
@ -695,7 +695,7 @@
.user-icon {
@include flexCenter;
@include titleTipography;
@include bodyMedTipography;
height: $s-24;
width: $s-24;
border-radius: $br-circle;
@ -707,7 +707,7 @@
}
.mixed-bar {
@include titleTipography;
@include bodyMedTipography;
display: flex;
align-items: center;
flex-grow: 1;
@ -783,7 +783,7 @@
gap: $s-4;
height: $s-32;
:global(.attr-label) {
@include titleTipography;
@include bodyMedTipography;
@include twoLineTextEllipsis;
width: $s-92;
margin: auto 0;
@ -795,12 +795,12 @@
grid-area: content;
display: flex;
color: var(--entry-foreground-color-hover);
@include titleTipography;
@include bodyMedTipography;
}
}
.copy-button-children {
@include titleTipography;
@include bodyMedTipography;
color: var(--color-foreground-primary);
text-align: left;
margin: 0;
@ -814,7 +814,7 @@
}
.comment-bubbles {
@include titleTipography;
@include bodyMedTipography;
@include flexCenter;
height: $s-32;
width: $s-32;
@ -849,7 +849,7 @@
}
.menu-item-base {
@include titleTipography;
@include bodyMedTipography;
display: flex;
align-items: center;
justify-content: space-between;
@ -864,7 +864,7 @@
}
.dropdown-element-base {
@include titleTipography;
@include bodyMedTipography;
display: flex;
align-items: center;
gap: $s-8;
@ -911,7 +911,7 @@
}
.select-wrapper {
@include titleTipography;
@include bodyMedTipography;
position: relative;
display: flex;
align-items: center;

2
frontend/resources/styles/common/refactor/color-defs.scss
View file

@ -10,6 +10,7 @@
// DARK
// Dark background
--db-primary: #18181a;
--db-primary-60: #{color.change(#18181a, $alpha: 0.6)};
--db-secondary: #000000;
--db-secondary-30: #{color.change(#000000, $alpha: 0.3)};
--db-secondary-80: #{color.change(#000000, $alpha: 0.8)};
@ -33,6 +34,7 @@
// LIGHT
// Light background
--lb-primary: #ffffff;
--lb-primary-60: #{color.change(#ffffff, $alpha: 0.6)};
--lb-secondary: #e8eaee;
--lb-secondary-30: #{color.change(#e8eaee, $alpha: 0.3)};
--lb-secondary-80: #{color.change(#e8eaee, $alpha: 0.8)};

1
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -308,6 +308,7 @@
--modal-button-foreground-color-error: var(--color-foreground-primary);
--modal-link-foreground-color: var(--color-accent-primary);
--modal-border-color: var(--color-background-quaternary);
--modal-separator-backogrund-color: var(--color-background-quaternary);
// ALERTS NOTIFICATION TOAST & STATUS WIDGET
--alert-background-color-success: var(--status-color-success-500);

1
frontend/resources/styles/common/refactor/fonts.scss
View file

@ -16,6 +16,7 @@ $fs-12: math.div(12, $fs-base) + rem;
$fs-14: math.div(14, $fs-base) + rem;
$fs-16: math.div(16, $fs-base) + rem;
$fs-18: math.div(18, $fs-base) + rem;
$fs-20: math.div(20, $fs-base) + rem;
$fs-24: math.div(24, $fs-base) + rem;
$fs-36: math.div(36, $fs-base) + rem;

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

@ -34,7 +34,7 @@
outline: none;
}
@mixin tabTitleTipography {
@mixin uppercaseTitleTipography {
font-family: "worksans", sans-serif;
font-size: $fs-11;
font-weight: $fw500;
@ -42,20 +42,6 @@
text-transform: uppercase;
}
@mixin titleTipography {
font-family: "worksans", sans-serif;
font-size: $fs-12;
font-weight: $fw400;
line-height: 1.2;
}
@mixin medTitleTipography {
font-family: "worksans", sans-serif;
font-size: $fs-14;
font-weight: $fw400;
line-height: 1.2;
}
@mixin bigTitleTipography {
font-family: "worksans", sans-serif;
font-size: $fs-24;
@ -63,9 +49,16 @@
line-height: 1.2;
}
@mixin codeTypography {
font-family: "robotomono", monospace;
font-size: $fs-12;
@mixin medTitleTipography {
font-family: "worksans", sans-serif;
font-size: $fs-20;
font-weight: $fw400;
line-height: 1.2;
}
@mixin smallTitleTipography {
font-family: "worksans", sans-serif;
font-size: $fs-14;
font-weight: $fw400;
line-height: 1.2;
}
@ -85,6 +78,20 @@
font-weight: normal;
}
@mixin bodyMedTipography {
font-family: "worksans", sans-serif;
font-size: $fs-12;
font-weight: $fw400;
line-height: 1.2;
}
@mixin codeTypography {
font-family: "robotomono", monospace;
font-size: $fs-12;
font-weight: $fw400;
line-height: 1.2;
}
@mixin textEllipsis {
max-width: 99%;
overflow: hidden;
@ -103,7 +110,7 @@
}
@mixin inspectValue {
@include titleTipography;
@include bodyMedTipography;
display: inline-block;
width: fit-content;
padding: 0;

9
frontend/resources/styles/common/refactor/spacing.scss
View file

@ -141,12 +141,21 @@ $s-496: #{0.25 * 124}rem;
$s-500: #{0.25 * 125}rem;
$s-512: #{0.25 * 128}rem;
$s-520: #{0.25 * 130}rem;
$s-536: #{0.25 * 134}rem;
$s-540: #{0.25 * 135}rem;
$s-548: #{0.25 * 137}rem;
$s-580: #{0.25 * 145}rem;
$s-612: #{0.25 * 153}rem;
$s-632: #{0.25 * 158}rem;
$s-640: #{0.25 * 160}rem;
$s-648: #{0.25 * 162}rem;
$s-664: #{0.25 * 166}rem;
$s-688: #{0.25 * 172}rem;
$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-908: #{0.25 * 227}rem;
$s-960: #{0.25 * 240}rem;
$s-968: #{0.25 * 242}rem;
$s-1000: #{0.25 * 250}rem;

2
frontend/resources/styles/common/refactor/themes/default-theme.scss
View file

@ -24,7 +24,7 @@
--color-accent-quaternary: var(--da-quaternary);
--color-component-highlight: var(--da-secondary);
--overlay-color: rgba(0, 0, 0, 0.4);
--overlay-color: var(--db-primary-60);
--shadow-color: var(--db-secondary-30);
--radio-button-box-shadow: 0 0 0 1px var(--db-secondary-30) inset;

2
frontend/resources/styles/common/refactor/themes/light-theme.scss
View file

@ -24,7 +24,7 @@
--color-accent-quaternary: var(--la-quaternary);
--color-component-highlight: var(--la-secondary);
--overlay-color: var(--lf-secondary-50);
--overlay-color: var(--lb-primary-60);
--shadow-color: var(--lf-secondary-40);
--radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset;