github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-08-28 23:59:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Use new SCSS guidelines

Browse Source
This commit is contained in:
Luis de Dios 2026-08-18 15:40:33 +02:00
parent 301b84f498
commit 5dc5768d30
38 changed files with 975 additions and 725 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/app/main/ui/releases/v2_0.cljs
View File

@ -211,4 +211,3 @@
:on-click finish
:variant "primary"}
"Let's go"]]]]]])))

83
frontend/src/app/main/ui/releases/v2_0.scss
View File

@ -4,93 +4,108 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
@extend %modal-overlay-base;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
}
.modal-container {
display: grid;
grid-template-columns: deprecated.$s-324 1fr;
height: deprecated.$s-500;
width: deprecated.$s-888;
border-radius: deprecated.$br-8;
background-color: var(--modal-background-color);
border: deprecated.$s-2 solid var(--modal-border-color);
grid-template-columns: px2rem(324) 1fr;
block-size: $sz-500;
inline-size: px2rem(888);
border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
}
.start-image {
width: deprecated.$s-324;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: deprecated.$s-40;
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr deprecated.$s-32;
gap: deprecated.$s-24;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include deprecated.flex-center;
@include deprecated.headline-small-typography;
@include use-typography("headline-small");
height: deprecated.$s-32;
width: deprecated.$s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: deprecated.$br-8;
display: flex;
justify-content: center;
align-items: center;
block-size: $sz-32;
inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
}
.modal-title {
@include deprecated.headline-large-typography;
@include use-typography("headline-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
gap: deprecated.$s-16;
width: deprecated.$s-440;
gap: var(--sp-l);
inline-size: px2rem(440);
}
.feature {
display: flex;
flex-direction: column;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.feature-title {
@include deprecated.body-large-typography;
@include use-typography("body-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.feature-content {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
margin: 0;
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
}
.feature-list {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
list-style: disc;
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.navigation {
width: 100%;
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}

1
frontend/src/app/main/ui/releases/v2_1.cljs
View File

@ -48,4 +48,3 @@
:on-click finish
:variant "primary"}
"Let's go"]]]]]])))

92
frontend/src/app/main/ui/releases/v2_1.scss
View File

@ -4,72 +4,108 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
@extend %modal-overlay-base;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
}
.modal-container {
display: grid;
grid-template-columns: deprecated.$s-324 1fr;
height: deprecated.$s-500;
width: deprecated.$s-888;
border-radius: deprecated.$br-8;
background-color: var(--modal-background-color);
border: deprecated.$s-2 solid var(--modal-border-color);
grid-template-columns: px2rem(324) 1fr;
block-size: $sz-500;
inline-size: px2rem(888);
border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
}
.start-image {
width: deprecated.$s-324;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: deprecated.$s-40;
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr deprecated.$s-32;
gap: deprecated.$s-24;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include deprecated.flex-center;
@include deprecated.headline-small-typography;
@include use-typography("headline-small");
height: deprecated.$s-32;
width: deprecated.$s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: deprecated.$br-8;
display: flex;
justify-content: center;
align-items: center;
block-size: $sz-32;
inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
}
.modal-title {
@include deprecated.headline-large-typography;
@include use-typography("headline-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
gap: deprecated.$s-16;
width: deprecated.$s-440;
gap: var(--sp-l);
inline-size: px2rem(440);
}
.feature {
display: flex;
flex-direction: column;
gap: var(--sp-s);
}
.feature-title {
@include use-typography("body-large");
color: var(--color-foreground-primary);
}
.feature-content {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
margin: 0;
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
}
.feature-list {
@include use-typography("body-medium");
color: var(--color-foreground-secondary);
list-style: disc;
display: grid;
gap: var(--sp-s);
}
.navigation {
width: 100%;
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}

4
frontend/src/app/main/ui/releases/v2_10.cljs
View File

@ -112,7 +112,8 @@
"And one more thing…Tune into our product showcase to see future plans and help us shape Penpot. Come for the insights, stay for the community…"]
[:p {:class (stl/css :feature-content)}
[:a {:href "https://penpot.app/penpotfest"
[:a {:class (stl/css :link)
:href "https://penpot.app/penpotfest"
:target "_blank"}
"Get your tickets"]
" now to join us 8-10 October, in Madrid!"]]
@ -192,4 +193,3 @@
:on-click finish
:variant "primary"}
"Let's go"]]]]]])))

87
frontend/src/app/main/ui/releases/v2_10.scss
View File

@ -4,97 +4,108 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
@extend %modal-overlay-base;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
}
.modal-container {
display: grid;
grid-template-columns: deprecated.$s-324 1fr;
height: deprecated.$s-500;
width: deprecated.$s-888;
border-radius: deprecated.$br-8;
background-color: var(--modal-background-color);
border: deprecated.$s-2 solid var(--modal-border-color);
grid-template-columns: px2rem(324) 1fr;
block-size: $sz-500;
inline-size: px2rem(888);
border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
}
.start-image {
width: deprecated.$s-324;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: deprecated.$s-40;
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr deprecated.$s-32;
gap: deprecated.$s-24;
a {
color: var(--button-primary-background-color-rest);
}
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include deprecated.flex-center;
@include deprecated.headline-small-typography;
@include use-typography("headline-small");
height: deprecated.$s-32;
width: deprecated.$s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: deprecated.$br-8;
display: flex;
justify-content: center;
align-items: center;
block-size: $sz-32;
inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
}
.modal-title {
@include deprecated.headline-large-typography;
@include use-typography("headline-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
gap: deprecated.$s-16;
width: deprecated.$s-440;
gap: var(--sp-l);
inline-size: px2rem(440);
}
.feature {
display: flex;
flex-direction: column;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.feature-title {
@include deprecated.body-large-typography;
@include use-typography("body-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.feature-content {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
margin: 0;
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
}
.feature-list {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
list-style: disc;
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.navigation {
width: 100%;
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}

1
frontend/src/app/main/ui/releases/v2_11.cljs
View File

@ -197,4 +197,3 @@
:on-click finish
:variant "primary"}
"Let's go"]]]]]])))

87
frontend/src/app/main/ui/releases/v2_11.scss
View File

@ -4,97 +4,108 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
@extend %modal-overlay-base;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
}
.modal-container {
display: grid;
grid-template-columns: deprecated.$s-324 1fr;
height: deprecated.$s-500;
width: deprecated.$s-888;
border-radius: deprecated.$br-8;
background-color: var(--modal-background-color);
border: deprecated.$s-2 solid var(--modal-border-color);
grid-template-columns: px2rem(324) 1fr;
block-size: $sz-500;
inline-size: px2rem(888);
border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
}
.start-image {
width: deprecated.$s-324;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: deprecated.$s-40;
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr deprecated.$s-32;
gap: deprecated.$s-24;
a {
color: var(--button-primary-background-color-rest);
}
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include deprecated.flex-center;
@include deprecated.headline-small-typography;
@include use-typography("headline-small");
height: deprecated.$s-32;
width: deprecated.$s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: deprecated.$br-8;
display: flex;
justify-content: center;
align-items: center;
block-size: $sz-32;
inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
}
.modal-title {
@include deprecated.headline-large-typography;
@include use-typography("headline-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
gap: deprecated.$s-16;
width: deprecated.$s-440;
gap: var(--sp-l);
inline-size: px2rem(440);
}
.feature {
display: flex;
flex-direction: column;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.feature-title {
@include deprecated.body-large-typography;
@include use-typography("body-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.feature-content {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
margin: 0;
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
}
.feature-list {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
list-style: disc;
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.navigation {
width: 100%;
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}

1
frontend/src/app/main/ui/releases/v2_12.cljs
View File

@ -168,4 +168,3 @@
:on-click finish
:variant "primary"}
"Let's go"]]]]]])))

87
frontend/src/app/main/ui/releases/v2_12.scss
View File

@ -4,97 +4,108 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
@extend %modal-overlay-base;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
}
.modal-container {
display: grid;
grid-template-columns: deprecated.$s-324 1fr;
height: deprecated.$s-500;
width: deprecated.$s-888;
border-radius: deprecated.$br-8;
background-color: var(--modal-background-color);
border: deprecated.$s-2 solid var(--modal-border-color);
grid-template-columns: px2rem(324) 1fr;
block-size: $sz-500;
inline-size: px2rem(888);
border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
}
.start-image {
width: deprecated.$s-324;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: deprecated.$s-40;
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr deprecated.$s-32;
gap: deprecated.$s-24;
a {
color: var(--button-primary-background-color-rest);
}
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include deprecated.flex-center;
@include deprecated.headline-small-typography;
@include use-typography("headline-small");
height: deprecated.$s-32;
width: deprecated.$s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: deprecated.$br-8;
display: flex;
justify-content: center;
align-items: center;
block-size: $sz-32;
inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
}
.modal-title {
@include deprecated.headline-large-typography;
@include use-typography("headline-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
gap: deprecated.$s-16;
width: deprecated.$s-440;
gap: var(--sp-l);
inline-size: px2rem(440);
}
.feature {
display: flex;
flex-direction: column;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.feature-title {
@include deprecated.body-large-typography;
@include use-typography("body-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.feature-content {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
margin: 0;
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
}
.feature-list {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
list-style: disc;
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.navigation {
width: 100%;
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}

1
frontend/src/app/main/ui/releases/v2_13.cljs
View File

@ -122,4 +122,3 @@
:on-click finish
:variant "primary"}
"Let's go"]]]]]])))

87
frontend/src/app/main/ui/releases/v2_13.scss
View File

@ -4,97 +4,108 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
@extend %modal-overlay-base;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
}
.modal-container {
display: grid;
grid-template-columns: deprecated.$s-324 1fr;
height: deprecated.$s-500;
width: deprecated.$s-888;
border-radius: deprecated.$br-8;
background-color: var(--modal-background-color);
border: deprecated.$s-2 solid var(--modal-border-color);
grid-template-columns: px2rem(324) 1fr;
block-size: $sz-500;
inline-size: px2rem(888);
border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
}
.start-image {
width: deprecated.$s-324;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: deprecated.$s-40;
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr deprecated.$s-32;
gap: deprecated.$s-24;
a {
color: var(--button-primary-background-color-rest);
}
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include deprecated.flex-center;
@include deprecated.headline-small-typography;
@include use-typography("headline-small");
height: deprecated.$s-32;
width: deprecated.$s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: deprecated.$br-8;
display: flex;
justify-content: center;
align-items: center;
block-size: $sz-32;
inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
}
.modal-title {
@include deprecated.headline-large-typography;
@include use-typography("headline-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
gap: deprecated.$s-16;
width: deprecated.$s-440;
gap: var(--sp-l);
inline-size: px2rem(440);
}
.feature {
display: flex;
flex-direction: column;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.feature-title {
@include deprecated.body-large-typography;
@include use-typography("body-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.feature-content {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
margin: 0;
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
}
.feature-list {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
list-style: disc;
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.navigation {
width: 100%;
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}

1
frontend/src/app/main/ui/releases/v2_14.cljs
View File

@ -186,4 +186,3 @@
:on-click finish
:variant "primary"}
"Let's go"]]]]]])))

87
frontend/src/app/main/ui/releases/v2_14.scss
View File

@ -4,97 +4,108 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
@extend %modal-overlay-base;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
}
.modal-container {
display: grid;
grid-template-columns: deprecated.$s-324 1fr;
height: deprecated.$s-500;
width: deprecated.$s-888;
border-radius: deprecated.$br-8;
background-color: var(--modal-background-color);
border: deprecated.$s-2 solid var(--modal-border-color);
grid-template-columns: px2rem(324) 1fr;
block-size: $sz-500;
inline-size: px2rem(888);
border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
}
.start-image {
width: deprecated.$s-324;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: deprecated.$s-40;
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr deprecated.$s-32;
gap: deprecated.$s-24;
a {
color: var(--button-primary-background-color-rest);
}
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include deprecated.flex-center;
@include deprecated.headline-small-typography;
@include use-typography("headline-small");
height: deprecated.$s-32;
width: deprecated.$s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: deprecated.$br-8;
display: flex;
justify-content: center;
align-items: center;
block-size: $sz-32;
inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
}
.modal-title {
@include deprecated.headline-large-typography;
@include use-typography("headline-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
gap: deprecated.$s-16;
width: deprecated.$s-440;
gap: var(--sp-l);
inline-size: px2rem(440);
}
.feature {
display: flex;
flex-direction: column;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.feature-title {
@include deprecated.body-large-typography;
@include use-typography("body-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.feature-content {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
margin: 0;
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
}
.feature-list {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
list-style: disc;
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.navigation {
width: 100%;
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}

1
frontend/src/app/main/ui/releases/v2_15.cljs
View File

@ -165,4 +165,3 @@
:on-click finish
:variant "primary"}
"Let's go"]]]]]])))

87
frontend/src/app/main/ui/releases/v2_15.scss
View File

@ -4,97 +4,108 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
@extend %modal-overlay-base;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
}
.modal-container {
display: grid;
grid-template-columns: deprecated.$s-324 1fr;
height: deprecated.$s-500;
width: deprecated.$s-888;
border-radius: deprecated.$br-8;
background-color: var(--modal-background-color);
border: deprecated.$s-2 solid var(--modal-border-color);
grid-template-columns: px2rem(324) 1fr;
block-size: $sz-500;
inline-size: px2rem(888);
border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
}
.start-image {
width: deprecated.$s-324;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: deprecated.$s-40;
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr deprecated.$s-32;
gap: deprecated.$s-24;
a {
color: var(--button-primary-background-color-rest);
}
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include deprecated.flex-center;
@include deprecated.headline-small-typography;
@include use-typography("headline-small");
height: deprecated.$s-32;
width: deprecated.$s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: deprecated.$br-8;
display: flex;
justify-content: center;
align-items: center;
block-size: $sz-32;
inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
}
.modal-title {
@include deprecated.headline-large-typography;
@include use-typography("headline-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
gap: deprecated.$s-16;
width: deprecated.$s-440;
gap: var(--sp-l);
inline-size: px2rem(440);
}
.feature {
display: flex;
flex-direction: column;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.feature-title {
@include deprecated.body-large-typography;
@include use-typography("body-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.feature-content {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
margin: 0;
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
}
.feature-list {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
list-style: disc;
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.navigation {
width: 100%;
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}

3
frontend/src/app/main/ui/releases/v2_16.cljs
View File

@ -2,7 +2,7 @@
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) KALEIDOS INC
;; Copyright (c) KALEIDOS INC Sucursal en España SL
(ns app.main.ui.releases.v2-16
(:require-macros [app.main.style :as stl])
@ -222,4 +222,3 @@
:on-click finish
:variant "primary"}
"Let's go"]]]]]])))

89
frontend/src/app/main/ui/releases/v2_16.scss
View File

@ -2,99 +2,110 @@
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
@extend %modal-overlay-base;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
}
.modal-container {
display: grid;
grid-template-columns: deprecated.$s-324 1fr;
height: deprecated.$s-500;
width: deprecated.$s-888;
border-radius: deprecated.$br-8;
background-color: var(--modal-background-color);
border: deprecated.$s-2 solid var(--modal-border-color);
grid-template-columns: px2rem(324) 1fr;
block-size: $sz-500;
inline-size: px2rem(888);
border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
}
.start-image {
width: deprecated.$s-324;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: deprecated.$s-40;
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr deprecated.$s-32;
gap: deprecated.$s-24;
a {
color: var(--button-primary-background-color-rest);
}
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include deprecated.flex-center;
@include deprecated.headline-small-typography;
@include use-typography("headline-small");
height: deprecated.$s-32;
width: deprecated.$s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: deprecated.$br-8;
display: flex;
justify-content: center;
align-items: center;
block-size: $sz-32;
inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
}
.modal-title {
@include deprecated.headline-large-typography;
@include use-typography("headline-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
gap: deprecated.$s-16;
width: deprecated.$s-440;
gap: var(--sp-l);
inline-size: px2rem(440);
}
.feature {
display: flex;
flex-direction: column;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.feature-title {
@include deprecated.body-large-typography;
@include use-typography("body-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.feature-content {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
margin: 0;
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
}
.feature-list {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
list-style: disc;
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.navigation {
width: 100%;
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}

4
frontend/src/app/main/ui/releases/v2_17.cljs
View File

@ -2,7 +2,7 @@
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) KALEIDOS INC
;; Copyright (c) KALEIDOS INC Sucursal en España SL
(ns app.main.ui.releases.v2-17
(:require-macros [app.main.style :as stl])
@ -227,4 +227,4 @@
[:> button* {:class (stl/css :next-btn)
:on-click finish
:variant "primary"}
"Let's go"]]]]]])))
"Let's go"]]]]]])))

89
frontend/src/app/main/ui/releases/v2_17.scss
View File

@ -2,99 +2,110 @@
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
@extend %modal-overlay-base;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
}
.modal-container {
display: grid;
grid-template-columns: deprecated.$s-324 1fr;
height: deprecated.$s-500;
width: deprecated.$s-888;
border-radius: deprecated.$br-8;
background-color: var(--modal-background-color);
border: deprecated.$s-2 solid var(--modal-border-color);
grid-template-columns: px2rem(324) 1fr;
block-size: $sz-500;
inline-size: px2rem(888);
border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
}
.start-image {
width: deprecated.$s-324;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: deprecated.$s-40;
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr deprecated.$s-32;
gap: deprecated.$s-24;
a {
color: var(--button-primary-background-color-rest);
}
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include deprecated.flex-center;
@include deprecated.headline-small-typography;
@include use-typography("headline-small");
height: deprecated.$s-32;
width: deprecated.$s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: deprecated.$br-8;
display: flex;
justify-content: center;
align-items: center;
block-size: $sz-32;
inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
}
.modal-title {
@include deprecated.headline-large-typography;
@include use-typography("headline-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
gap: deprecated.$s-16;
width: deprecated.$s-440;
gap: var(--sp-l);
inline-size: px2rem(440);
}
.feature {
display: flex;
flex-direction: column;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.feature-title {
@include deprecated.body-large-typography;
@include use-typography("body-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.feature-content {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
margin: 0;
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
}
.feature-list {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
list-style: disc;
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.navigation {
width: 100%;
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}

4
frontend/src/app/main/ui/releases/v2_18.cljs
View File

@ -2,7 +2,7 @@
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) KALEIDOS INC
;; Copyright (c) KALEIDOS INC Sucursal en España SL
(ns app.main.ui.releases.v2-18
(:require-macros [app.main.style :as stl])
@ -185,4 +185,4 @@
[:> button* {:class (stl/css :next-btn)
:on-click finish
:variant "primary"}
"Let's go"]]]]]])))
"Let's go"]]]]]])))

89
frontend/src/app/main/ui/releases/v2_18.scss
View File

@ -2,99 +2,110 @@
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
@extend %modal-overlay-base;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
}
.modal-container {
display: grid;
grid-template-columns: deprecated.$s-324 1fr;
height: deprecated.$s-500;
width: deprecated.$s-888;
border-radius: deprecated.$br-8;
background-color: var(--modal-background-color);
border: deprecated.$s-2 solid var(--modal-border-color);
grid-template-columns: px2rem(324) 1fr;
block-size: $sz-500;
inline-size: px2rem(888);
border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
}
.start-image {
width: deprecated.$s-324;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: deprecated.$s-40;
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr deprecated.$s-32;
gap: deprecated.$s-24;
a {
color: var(--button-primary-background-color-rest);
}
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include deprecated.flex-center;
@include deprecated.headline-small-typography;
@include use-typography("headline-small");
height: deprecated.$s-32;
width: deprecated.$s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: deprecated.$br-8;
display: flex;
justify-content: center;
align-items: center;
block-size: $sz-32;
inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
}
.modal-title {
@include deprecated.headline-large-typography;
@include use-typography("headline-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
gap: deprecated.$s-16;
width: deprecated.$s-440;
gap: var(--sp-l);
inline-size: px2rem(440);
}
.feature {
display: flex;
flex-direction: column;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.feature-title {
@include deprecated.body-large-typography;
@include use-typography("body-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.feature-content {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
margin: 0;
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
}
.feature-list {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
list-style: disc;
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.navigation {
width: 100%;
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}

1
frontend/src/app/main/ui/releases/v2_2.cljs
View File

@ -51,4 +51,3 @@
:on-click finish
:variant "primary"}
"Let's go"]]]]]])))

92
frontend/src/app/main/ui/releases/v2_2.scss
View File

@ -4,72 +4,108 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
@extend %modal-overlay-base;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
}
.modal-container {
display: grid;
grid-template-columns: deprecated.$s-324 1fr;
height: deprecated.$s-480;
width: deprecated.$s-888;
border-radius: deprecated.$br-8;
background-color: var(--modal-background-color);
border: deprecated.$s-2 solid var(--modal-border-color);
grid-template-columns: px2rem(324) 1fr;
block-size: $sz-500;
inline-size: px2rem(888);
border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
}
.start-image {
width: deprecated.$s-324;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: deprecated.$s-40;
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr deprecated.$s-32;
gap: deprecated.$s-24;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include deprecated.flex-center;
@include deprecated.headline-small-typography;
@include use-typography("headline-small");
height: deprecated.$s-32;
width: deprecated.$s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: deprecated.$br-8;
display: flex;
justify-content: center;
align-items: center;
block-size: $sz-32;
inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
}
.modal-title {
@include deprecated.headline-large-typography;
@include use-typography("headline-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
gap: deprecated.$s-16;
width: deprecated.$s-440;
gap: var(--sp-l);
inline-size: px2rem(440);
}
.feature {
display: flex;
flex-direction: column;
gap: var(--sp-s);
}
.feature-title {
@include use-typography("body-large");
color: var(--color-foreground-primary);
}
.feature-content {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
margin: 0;
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
}
.feature-list {
@include use-typography("body-medium");
color: var(--color-foreground-secondary);
list-style: disc;
display: grid;
gap: var(--sp-s);
}
.navigation {
width: 100%;
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}

6
frontend/src/app/main/ui/releases/v2_3.cljs
View File

@ -103,7 +103,10 @@
[:p {:class (stl/css :feature-content)}
"Penpot plugins are quite easy to install."]
[:p {:class (stl/css :feature-content)}
"Be sure to keep an eye on our evolving " [:a {:href "https://penpot.app/penpothub" :target "_blank"} "Penpot Hub"] " to pick the ones that are best suited to enhance your workflow."]
"Be sure to keep an eye on our evolving "
[:a {:class (stl/css :link)
:href "https://penpot.app/penpothub"
:target "_blank"} "Penpot Hub"] " to pick the ones that are best suited to enhance your workflow."]
[:p {:class (stl/css :feature-content)}
"This is just the beginning of a myriad of possibilities. Let’s build this community together ❤️."]]
@ -119,4 +122,3 @@
:on-click finish
:variant "primary"}
"Let's go"]]]]]])))

87
frontend/src/app/main/ui/releases/v2_3.scss
View File

@ -4,97 +4,108 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
@extend %modal-overlay-base;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
}
.modal-container {
display: grid;
grid-template-columns: deprecated.$s-324 1fr;
height: deprecated.$s-500;
width: deprecated.$s-888;
border-radius: deprecated.$br-8;
background-color: var(--modal-background-color);
border: deprecated.$s-2 solid var(--modal-border-color);
grid-template-columns: px2rem(324) 1fr;
block-size: $sz-500;
inline-size: px2rem(888);
border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
}
.start-image {
width: deprecated.$s-324;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: deprecated.$s-40;
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr deprecated.$s-32;
gap: deprecated.$s-24;
a {
color: var(--button-primary-background-color-rest);
}
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include deprecated.flex-center;
@include deprecated.headline-small-typography;
@include use-typography("headline-small");
height: deprecated.$s-32;
width: deprecated.$s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: deprecated.$br-8;
display: flex;
justify-content: center;
align-items: center;
block-size: $sz-32;
inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
}
.modal-title {
@include deprecated.headline-large-typography;
@include use-typography("headline-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
gap: deprecated.$s-16;
width: deprecated.$s-440;
gap: var(--sp-l);
inline-size: px2rem(440);
}
.feature {
display: flex;
flex-direction: column;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.feature-title {
@include deprecated.body-large-typography;
@include use-typography("body-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.feature-content {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
margin: 0;
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
}
.feature-list {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
list-style: disc;
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.navigation {
width: 100%;
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}

1
frontend/src/app/main/ui/releases/v2_4.cljs
View File

@ -147,4 +147,3 @@
:on-click finish
:variant "primary"}
"Let's go"]]]]]])))

87
frontend/src/app/main/ui/releases/v2_4.scss
View File

@ -4,97 +4,108 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
@extend %modal-overlay-base;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
}
.modal-container {
display: grid;
grid-template-columns: deprecated.$s-324 1fr;
height: deprecated.$s-500;
width: deprecated.$s-888;
border-radius: deprecated.$br-8;
background-color: var(--modal-background-color);
border: deprecated.$s-2 solid var(--modal-border-color);
grid-template-columns: px2rem(324) 1fr;
block-size: $sz-500;
inline-size: px2rem(888);
border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
}
.start-image {
width: deprecated.$s-324;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: deprecated.$s-40;
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr deprecated.$s-32;
gap: deprecated.$s-24;
a {
color: var(--button-primary-background-color-rest);
}
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include deprecated.flex-center;
@include deprecated.headline-small-typography;
@include use-typography("headline-small");
height: deprecated.$s-32;
width: deprecated.$s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: deprecated.$br-8;
display: flex;
justify-content: center;
align-items: center;
block-size: $sz-32;
inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
}
.modal-title {
@include deprecated.headline-large-typography;
@include use-typography("headline-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
gap: deprecated.$s-16;
width: deprecated.$s-440;
gap: var(--sp-l);
inline-size: px2rem(440);
}
.feature {
display: flex;
flex-direction: column;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.feature-title {
@include deprecated.body-large-typography;
@include use-typography("body-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.feature-content {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
margin: 0;
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
}
.feature-list {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
list-style: disc;
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.navigation {
width: 100%;
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}

1
frontend/src/app/main/ui/releases/v2_5.cljs
View File

@ -183,4 +183,3 @@
:on-click finish
:variant "primary"}
"Let's go"]]]]]])))

87
frontend/src/app/main/ui/releases/v2_5.scss
View File

@ -4,97 +4,108 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
@extend %modal-overlay-base;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
}
.modal-container {
display: grid;
grid-template-columns: deprecated.$s-324 1fr;
height: deprecated.$s-500;
width: deprecated.$s-888;
border-radius: deprecated.$br-8;
background-color: var(--modal-background-color);
border: deprecated.$s-2 solid var(--modal-border-color);
grid-template-columns: px2rem(324) 1fr;
block-size: $sz-500;
inline-size: px2rem(888);
border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
}
.start-image {
width: deprecated.$s-324;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: deprecated.$s-40;
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr deprecated.$s-32;
gap: deprecated.$s-24;
a {
color: var(--button-primary-background-color-rest);
}
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include deprecated.flex-center;
@include deprecated.headline-small-typography;
@include use-typography("headline-small");
height: deprecated.$s-32;
width: deprecated.$s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: deprecated.$br-8;
display: flex;
justify-content: center;
align-items: center;
block-size: $sz-32;
inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
}
.modal-title {
@include deprecated.headline-large-typography;
@include use-typography("headline-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
gap: deprecated.$s-16;
width: deprecated.$s-440;
gap: var(--sp-l);
inline-size: px2rem(440);
}
.feature {
display: flex;
flex-direction: column;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.feature-title {
@include deprecated.body-large-typography;
@include use-typography("body-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.feature-content {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
margin: 0;
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
}
.feature-list {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
list-style: disc;
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.navigation {
width: 100%;
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}

1
frontend/src/app/main/ui/releases/v2_6.cljs
View File

@ -175,4 +175,3 @@
:on-click finish
:variant "primary"}
"Let's go"]]]]]])))

87
frontend/src/app/main/ui/releases/v2_6.scss
View File

@ -4,97 +4,108 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
@extend %modal-overlay-base;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
}
.modal-container {
display: grid;
grid-template-columns: deprecated.$s-324 1fr;
height: deprecated.$s-500;
width: deprecated.$s-888;
border-radius: deprecated.$br-8;
background-color: var(--modal-background-color);
border: deprecated.$s-2 solid var(--modal-border-color);
grid-template-columns: px2rem(324) 1fr;
block-size: $sz-500;
inline-size: px2rem(888);
border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
}
.start-image {
width: deprecated.$s-324;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: deprecated.$s-40;
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr deprecated.$s-32;
gap: deprecated.$s-24;
a {
color: var(--button-primary-background-color-rest);
}
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include deprecated.flex-center;
@include deprecated.headline-small-typography;
@include use-typography("headline-small");
height: deprecated.$s-32;
width: deprecated.$s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: deprecated.$br-8;
display: flex;
justify-content: center;
align-items: center;
block-size: $sz-32;
inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
}
.modal-title {
@include deprecated.headline-large-typography;
@include use-typography("headline-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
gap: deprecated.$s-16;
width: deprecated.$s-440;
gap: var(--sp-l);
inline-size: px2rem(440);
}
.feature {
display: flex;
flex-direction: column;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.feature-title {
@include deprecated.body-large-typography;
@include use-typography("body-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.feature-content {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
margin: 0;
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
}
.feature-list {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
list-style: disc;
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.navigation {
width: 100%;
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}

1
frontend/src/app/main/ui/releases/v2_7.cljs
View File

@ -148,4 +148,3 @@
:on-click finish
:variant "primary"}
"Let's go"]]]]]])))

87
frontend/src/app/main/ui/releases/v2_7.scss
View File

@ -4,97 +4,108 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
@extend %modal-overlay-base;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
}
.modal-container {
display: grid;
grid-template-columns: deprecated.$s-324 1fr;
height: deprecated.$s-500;
width: deprecated.$s-888;
border-radius: deprecated.$br-8;
background-color: var(--modal-background-color);
border: deprecated.$s-2 solid var(--modal-border-color);
grid-template-columns: px2rem(324) 1fr;
block-size: $sz-500;
inline-size: px2rem(888);
border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
}
.start-image {
width: deprecated.$s-324;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: deprecated.$s-40;
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr deprecated.$s-32;
gap: deprecated.$s-24;
a {
color: var(--button-primary-background-color-rest);
}
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include deprecated.flex-center;
@include deprecated.headline-small-typography;
@include use-typography("headline-small");
height: deprecated.$s-32;
width: deprecated.$s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: deprecated.$br-8;
display: flex;
justify-content: center;
align-items: center;
block-size: $sz-32;
inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
}
.modal-title {
@include deprecated.headline-large-typography;
@include use-typography("headline-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
gap: deprecated.$s-16;
width: deprecated.$s-440;
gap: var(--sp-l);
inline-size: px2rem(440);
}
.feature {
display: flex;
flex-direction: column;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.feature-title {
@include deprecated.body-large-typography;
@include use-typography("body-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.feature-content {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
margin: 0;
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
}
.feature-list {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
list-style: disc;
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.navigation {
width: 100%;
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}

1
frontend/src/app/main/ui/releases/v2_8.cljs
View File

@ -204,4 +204,3 @@
:on-click finish
:variant "primary"}
"Let's go"]]]]]])))

87
frontend/src/app/main/ui/releases/v2_8.scss
View File

@ -4,97 +4,108 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
@extend %modal-overlay-base;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
}
.modal-container {
display: grid;
grid-template-columns: deprecated.$s-324 1fr;
height: deprecated.$s-500;
width: deprecated.$s-888;
border-radius: deprecated.$br-8;
background-color: var(--modal-background-color);
border: deprecated.$s-2 solid var(--modal-border-color);
grid-template-columns: px2rem(324) 1fr;
block-size: $sz-500;
inline-size: px2rem(888);
border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
}
.start-image {
width: deprecated.$s-324;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: deprecated.$s-40;
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr deprecated.$s-32;
gap: deprecated.$s-24;
a {
color: var(--button-primary-background-color-rest);
}
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include deprecated.flex-center;
@include deprecated.headline-small-typography;
@include use-typography("headline-small");
height: deprecated.$s-32;
width: deprecated.$s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: deprecated.$br-8;
display: flex;
justify-content: center;
align-items: center;
block-size: $sz-32;
inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
}
.modal-title {
@include deprecated.headline-large-typography;
@include use-typography("headline-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
gap: deprecated.$s-16;
width: deprecated.$s-440;
gap: var(--sp-l);
inline-size: px2rem(440);
}
.feature {
display: flex;
flex-direction: column;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.feature-title {
@include deprecated.body-large-typography;
@include use-typography("body-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.feature-content {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
margin: 0;
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
}
.feature-list {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
list-style: disc;
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.navigation {
width: 100%;
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}

1
frontend/src/app/main/ui/releases/v2_9.cljs
View File

@ -116,4 +116,3 @@
:on-click finish
:variant "primary"}
"Let's go"]]]]]])))

87
frontend/src/app/main/ui/releases/v2_9.scss
View File

@ -4,97 +4,108 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
@extend %modal-overlay-base;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
}
.modal-container {
display: grid;
grid-template-columns: deprecated.$s-324 1fr;
height: deprecated.$s-500;
width: deprecated.$s-888;
border-radius: deprecated.$br-8;
background-color: var(--modal-background-color);
border: deprecated.$s-2 solid var(--modal-border-color);
grid-template-columns: px2rem(324) 1fr;
block-size: $sz-500;
inline-size: px2rem(888);
border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
}
.start-image {
width: deprecated.$s-324;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: deprecated.$s-40;
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr deprecated.$s-32;
gap: deprecated.$s-24;
a {
color: var(--button-primary-background-color-rest);
}
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include deprecated.flex-center;
@include deprecated.headline-small-typography;
@include use-typography("headline-small");
height: deprecated.$s-32;
width: deprecated.$s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: deprecated.$br-8;
display: flex;
justify-content: center;
align-items: center;
block-size: $sz-32;
inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
}
.modal-title {
@include deprecated.headline-large-typography;
@include use-typography("headline-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
gap: deprecated.$s-16;
width: deprecated.$s-440;
gap: var(--sp-l);
inline-size: px2rem(440);
}
.feature {
display: flex;
flex-direction: column;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.feature-title {
@include deprecated.body-large-typography;
@include use-typography("body-large");
color: var(--modal-title-foreground-color);
color: var(--color-foreground-primary);
}
.feature-content {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
margin: 0;
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
}
.feature-list {
@include deprecated.body-medium-typography;
@include use-typography("body-medium");
color: var(--modal-text-foreground-color);
color: var(--color-foreground-secondary);
list-style: disc;
display: grid;
gap: deprecated.$s-8;
gap: var(--sp-s);
}
.navigation {
width: 100%;
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}