github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-09 21:49:10 +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 :on-click finish
:variant "primary"} :variant "primary"}
"Let's go"]]]]]]))) "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 // 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 { .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 { .modal-container {
display: grid; display: grid;
grid-template-columns: deprecated.$s-324 1fr; grid-template-columns: px2rem(324) 1fr;
height: deprecated.$s-500; block-size: $sz-500;
width: deprecated.$s-888; inline-size: px2rem(888);
border-radius: deprecated.$br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--color-background-primary);
border: deprecated.$s-2 solid var(--modal-border-color); border: $b-2 solid var(--color-background-quaternary);
} }
.start-image { .start-image {
width: deprecated.$s-324; inline-size: px2rem(324);
border-radius: deprecated.$br-8 0 0 deprecated.$br-8; border-radius: $br-8 0 0 $br-8;
} }
.modal-content { .modal-content {
padding: deprecated.$s-40; padding: $sz-40;
display: grid; display: grid;
grid-template-rows: auto 1fr deprecated.$s-32; grid-template-rows: auto 1fr $sz-32;
gap: deprecated.$s-24; gap: var(--sp-xxl);
} }
.modal-header { .modal-header {
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
} }
.version-tag { .version-tag {
@include deprecated.flex-center; @include use-typography("headline-small");
@include deprecated.headline-small-typography;
height: deprecated.$s-32; display: flex;
width: deprecated.$s-96; justify-content: center;
background-color: var(--communication-tag-background-color); align-items: center;
color: var(--communication-tag-foreground-color); block-size: $sz-32;
border-radius: deprecated.$br-8; inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
} }
.modal-title { .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 { .features-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-16; gap: var(--sp-l);
width: deprecated.$s-440; inline-size: px2rem(440);
} }
.feature { .feature {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.feature-title { .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 { .feature-content {
@include deprecated.body-medium-typography; @include use-typography("body-medium");
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--color-foreground-secondary);
} }
.feature-list { .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; list-style: disc;
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.navigation { .navigation {
width: 100%; inline-size: 100%;
display: grid; display: grid;
grid-template-areas: "bullets button"; grid-template-areas: "bullets button";
} }

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

@ -48,4 +48,3 @@
:on-click finish :on-click finish
:variant "primary"} :variant "primary"}
"Let's go"]]]]]]))) "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 // 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 { .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 { .modal-container {
display: grid; display: grid;
grid-template-columns: deprecated.$s-324 1fr; grid-template-columns: px2rem(324) 1fr;
height: deprecated.$s-500; block-size: $sz-500;
width: deprecated.$s-888; inline-size: px2rem(888);
border-radius: deprecated.$br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--color-background-primary);
border: deprecated.$s-2 solid var(--modal-border-color); border: $b-2 solid var(--color-background-quaternary);
} }
.start-image { .start-image {
width: deprecated.$s-324; inline-size: px2rem(324);
border-radius: deprecated.$br-8 0 0 deprecated.$br-8; border-radius: $br-8 0 0 $br-8;
} }
.modal-content { .modal-content {
padding: deprecated.$s-40; padding: $sz-40;
display: grid; display: grid;
grid-template-rows: auto 1fr deprecated.$s-32; grid-template-rows: auto 1fr $sz-32;
gap: deprecated.$s-24; gap: var(--sp-xxl);
} }
.modal-header { .modal-header {
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
} }
.version-tag { .version-tag {
@include deprecated.flex-center; @include use-typography("headline-small");
@include deprecated.headline-small-typography;
height: deprecated.$s-32; display: flex;
width: deprecated.$s-96; justify-content: center;
background-color: var(--communication-tag-background-color); align-items: center;
color: var(--communication-tag-foreground-color); block-size: $sz-32;
border-radius: deprecated.$br-8; inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
} }
.modal-title { .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 { .features-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-16; gap: var(--sp-l);
width: deprecated.$s-440; 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 { .feature-content {
@include deprecated.body-medium-typography; @include use-typography("body-medium");
margin: 0; 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 { .navigation {
width: 100%; inline-size: 100%;
display: grid; display: grid;
grid-template-areas: "bullets button"; 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…"] "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)} [:p {:class (stl/css :feature-content)}
[:a {:href "https://penpot.app/penpotfest" [:a {:class (stl/css :link)
:href "https://penpot.app/penpotfest"
:target "_blank"} :target "_blank"}
"Get your tickets"] "Get your tickets"]
" now to join us 8-10 October, in Madrid!"]] " now to join us 8-10 October, in Madrid!"]]
@ -192,4 +193,3 @@
:on-click finish :on-click finish
:variant "primary"} :variant "primary"}
"Let's go"]]]]]]))) "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 // 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 { .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 { .modal-container {
display: grid; display: grid;
grid-template-columns: deprecated.$s-324 1fr; grid-template-columns: px2rem(324) 1fr;
height: deprecated.$s-500; block-size: $sz-500;
width: deprecated.$s-888; inline-size: px2rem(888);
border-radius: deprecated.$br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--color-background-primary);
border: deprecated.$s-2 solid var(--modal-border-color); border: $b-2 solid var(--color-background-quaternary);
} }
.start-image { .start-image {
width: deprecated.$s-324; inline-size: px2rem(324);
border-radius: deprecated.$br-8 0 0 deprecated.$br-8; border-radius: $br-8 0 0 $br-8;
} }
.modal-content { .modal-content {
padding: deprecated.$s-40; padding: $sz-40;
display: grid; display: grid;
grid-template-rows: auto 1fr deprecated.$s-32; grid-template-rows: auto 1fr $sz-32;
gap: deprecated.$s-24; gap: var(--sp-xxl);
a {
color: var(--button-primary-background-color-rest);
}
} }
.modal-header { .modal-header {
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
} }
.version-tag { .version-tag {
@include deprecated.flex-center; @include use-typography("headline-small");
@include deprecated.headline-small-typography;
height: deprecated.$s-32; display: flex;
width: deprecated.$s-96; justify-content: center;
background-color: var(--communication-tag-background-color); align-items: center;
color: var(--communication-tag-foreground-color); block-size: $sz-32;
border-radius: deprecated.$br-8; inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
} }
.modal-title { .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 { .features-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-16; gap: var(--sp-l);
width: deprecated.$s-440; inline-size: px2rem(440);
} }
.feature { .feature {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.feature-title { .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 { .feature-content {
@include deprecated.body-medium-typography; @include use-typography("body-medium");
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--color-foreground-secondary);
} }
.feature-list { .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; list-style: disc;
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.navigation { .navigation {
width: 100%; inline-size: 100%;
display: grid; display: grid;
grid-template-areas: "bullets button"; grid-template-areas: "bullets button";
} }

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

@ -197,4 +197,3 @@
:on-click finish :on-click finish
:variant "primary"} :variant "primary"}
"Let's go"]]]]]]))) "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 // 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 { .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 { .modal-container {
display: grid; display: grid;
grid-template-columns: deprecated.$s-324 1fr; grid-template-columns: px2rem(324) 1fr;
height: deprecated.$s-500; block-size: $sz-500;
width: deprecated.$s-888; inline-size: px2rem(888);
border-radius: deprecated.$br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--color-background-primary);
border: deprecated.$s-2 solid var(--modal-border-color); border: $b-2 solid var(--color-background-quaternary);
} }
.start-image { .start-image {
width: deprecated.$s-324; inline-size: px2rem(324);
border-radius: deprecated.$br-8 0 0 deprecated.$br-8; border-radius: $br-8 0 0 $br-8;
} }
.modal-content { .modal-content {
padding: deprecated.$s-40; padding: $sz-40;
display: grid; display: grid;
grid-template-rows: auto 1fr deprecated.$s-32; grid-template-rows: auto 1fr $sz-32;
gap: deprecated.$s-24; gap: var(--sp-xxl);
a {
color: var(--button-primary-background-color-rest);
}
} }
.modal-header { .modal-header {
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
} }
.version-tag { .version-tag {
@include deprecated.flex-center; @include use-typography("headline-small");
@include deprecated.headline-small-typography;
height: deprecated.$s-32; display: flex;
width: deprecated.$s-96; justify-content: center;
background-color: var(--communication-tag-background-color); align-items: center;
color: var(--communication-tag-foreground-color); block-size: $sz-32;
border-radius: deprecated.$br-8; inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
} }
.modal-title { .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 { .features-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-16; gap: var(--sp-l);
width: deprecated.$s-440; inline-size: px2rem(440);
} }
.feature { .feature {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.feature-title { .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 { .feature-content {
@include deprecated.body-medium-typography; @include use-typography("body-medium");
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--color-foreground-secondary);
} }
.feature-list { .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; list-style: disc;
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.navigation { .navigation {
width: 100%; inline-size: 100%;
display: grid; display: grid;
grid-template-areas: "bullets button"; grid-template-areas: "bullets button";
} }

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

@ -168,4 +168,3 @@
:on-click finish :on-click finish
:variant "primary"} :variant "primary"}
"Let's go"]]]]]]))) "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 // 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 { .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 { .modal-container {
display: grid; display: grid;
grid-template-columns: deprecated.$s-324 1fr; grid-template-columns: px2rem(324) 1fr;
height: deprecated.$s-500; block-size: $sz-500;
width: deprecated.$s-888; inline-size: px2rem(888);
border-radius: deprecated.$br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--color-background-primary);
border: deprecated.$s-2 solid var(--modal-border-color); border: $b-2 solid var(--color-background-quaternary);
} }
.start-image { .start-image {
width: deprecated.$s-324; inline-size: px2rem(324);
border-radius: deprecated.$br-8 0 0 deprecated.$br-8; border-radius: $br-8 0 0 $br-8;
} }
.modal-content { .modal-content {
padding: deprecated.$s-40; padding: $sz-40;
display: grid; display: grid;
grid-template-rows: auto 1fr deprecated.$s-32; grid-template-rows: auto 1fr $sz-32;
gap: deprecated.$s-24; gap: var(--sp-xxl);
a {
color: var(--button-primary-background-color-rest);
}
} }
.modal-header { .modal-header {
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
} }
.version-tag { .version-tag {
@include deprecated.flex-center; @include use-typography("headline-small");
@include deprecated.headline-small-typography;
height: deprecated.$s-32; display: flex;
width: deprecated.$s-96; justify-content: center;
background-color: var(--communication-tag-background-color); align-items: center;
color: var(--communication-tag-foreground-color); block-size: $sz-32;
border-radius: deprecated.$br-8; inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
} }
.modal-title { .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 { .features-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-16; gap: var(--sp-l);
width: deprecated.$s-440; inline-size: px2rem(440);
} }
.feature { .feature {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.feature-title { .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 { .feature-content {
@include deprecated.body-medium-typography; @include use-typography("body-medium");
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--color-foreground-secondary);
} }
.feature-list { .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; list-style: disc;
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.navigation { .navigation {
width: 100%; inline-size: 100%;
display: grid; display: grid;
grid-template-areas: "bullets button"; grid-template-areas: "bullets button";
} }

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

@ -122,4 +122,3 @@
:on-click finish :on-click finish
:variant "primary"} :variant "primary"}
"Let's go"]]]]]]))) "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 // 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 { .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 { .modal-container {
display: grid; display: grid;
grid-template-columns: deprecated.$s-324 1fr; grid-template-columns: px2rem(324) 1fr;
height: deprecated.$s-500; block-size: $sz-500;
width: deprecated.$s-888; inline-size: px2rem(888);
border-radius: deprecated.$br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--color-background-primary);
border: deprecated.$s-2 solid var(--modal-border-color); border: $b-2 solid var(--color-background-quaternary);
} }
.start-image { .start-image {
width: deprecated.$s-324; inline-size: px2rem(324);
border-radius: deprecated.$br-8 0 0 deprecated.$br-8; border-radius: $br-8 0 0 $br-8;
} }
.modal-content { .modal-content {
padding: deprecated.$s-40; padding: $sz-40;
display: grid; display: grid;
grid-template-rows: auto 1fr deprecated.$s-32; grid-template-rows: auto 1fr $sz-32;
gap: deprecated.$s-24; gap: var(--sp-xxl);
a {
color: var(--button-primary-background-color-rest);
}
} }
.modal-header { .modal-header {
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
} }
.version-tag { .version-tag {
@include deprecated.flex-center; @include use-typography("headline-small");
@include deprecated.headline-small-typography;
height: deprecated.$s-32; display: flex;
width: deprecated.$s-96; justify-content: center;
background-color: var(--communication-tag-background-color); align-items: center;
color: var(--communication-tag-foreground-color); block-size: $sz-32;
border-radius: deprecated.$br-8; inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
} }
.modal-title { .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 { .features-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-16; gap: var(--sp-l);
width: deprecated.$s-440; inline-size: px2rem(440);
} }
.feature { .feature {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.feature-title { .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 { .feature-content {
@include deprecated.body-medium-typography; @include use-typography("body-medium");
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--color-foreground-secondary);
} }
.feature-list { .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; list-style: disc;
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.navigation { .navigation {
width: 100%; inline-size: 100%;
display: grid; display: grid;
grid-template-areas: "bullets button"; grid-template-areas: "bullets button";
} }

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

@ -186,4 +186,3 @@
:on-click finish :on-click finish
:variant "primary"} :variant "primary"}
"Let's go"]]]]]]))) "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 // 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 { .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 { .modal-container {
display: grid; display: grid;
grid-template-columns: deprecated.$s-324 1fr; grid-template-columns: px2rem(324) 1fr;
height: deprecated.$s-500; block-size: $sz-500;
width: deprecated.$s-888; inline-size: px2rem(888);
border-radius: deprecated.$br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--color-background-primary);
border: deprecated.$s-2 solid var(--modal-border-color); border: $b-2 solid var(--color-background-quaternary);
} }
.start-image { .start-image {
width: deprecated.$s-324; inline-size: px2rem(324);
border-radius: deprecated.$br-8 0 0 deprecated.$br-8; border-radius: $br-8 0 0 $br-8;
} }
.modal-content { .modal-content {
padding: deprecated.$s-40; padding: $sz-40;
display: grid; display: grid;
grid-template-rows: auto 1fr deprecated.$s-32; grid-template-rows: auto 1fr $sz-32;
gap: deprecated.$s-24; gap: var(--sp-xxl);
a {
color: var(--button-primary-background-color-rest);
}
} }
.modal-header { .modal-header {
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
} }
.version-tag { .version-tag {
@include deprecated.flex-center; @include use-typography("headline-small");
@include deprecated.headline-small-typography;
height: deprecated.$s-32; display: flex;
width: deprecated.$s-96; justify-content: center;
background-color: var(--communication-tag-background-color); align-items: center;
color: var(--communication-tag-foreground-color); block-size: $sz-32;
border-radius: deprecated.$br-8; inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
} }
.modal-title { .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 { .features-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-16; gap: var(--sp-l);
width: deprecated.$s-440; inline-size: px2rem(440);
} }
.feature { .feature {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.feature-title { .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 { .feature-content {
@include deprecated.body-medium-typography; @include use-typography("body-medium");
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--color-foreground-secondary);
} }
.feature-list { .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; list-style: disc;
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.navigation { .navigation {
width: 100%; inline-size: 100%;
display: grid; display: grid;
grid-template-areas: "bullets button"; grid-template-areas: "bullets button";
} }

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

@ -165,4 +165,3 @@
:on-click finish :on-click finish
:variant "primary"} :variant "primary"}
"Let's go"]]]]]]))) "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 // 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 { .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 { .modal-container {
display: grid; display: grid;
grid-template-columns: deprecated.$s-324 1fr; grid-template-columns: px2rem(324) 1fr;
height: deprecated.$s-500; block-size: $sz-500;
width: deprecated.$s-888; inline-size: px2rem(888);
border-radius: deprecated.$br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--color-background-primary);
border: deprecated.$s-2 solid var(--modal-border-color); border: $b-2 solid var(--color-background-quaternary);
} }
.start-image { .start-image {
width: deprecated.$s-324; inline-size: px2rem(324);
border-radius: deprecated.$br-8 0 0 deprecated.$br-8; border-radius: $br-8 0 0 $br-8;
} }
.modal-content { .modal-content {
padding: deprecated.$s-40; padding: $sz-40;
display: grid; display: grid;
grid-template-rows: auto 1fr deprecated.$s-32; grid-template-rows: auto 1fr $sz-32;
gap: deprecated.$s-24; gap: var(--sp-xxl);
a {
color: var(--button-primary-background-color-rest);
}
} }
.modal-header { .modal-header {
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
} }
.version-tag { .version-tag {
@include deprecated.flex-center; @include use-typography("headline-small");
@include deprecated.headline-small-typography;
height: deprecated.$s-32; display: flex;
width: deprecated.$s-96; justify-content: center;
background-color: var(--communication-tag-background-color); align-items: center;
color: var(--communication-tag-foreground-color); block-size: $sz-32;
border-radius: deprecated.$br-8; inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
} }
.modal-title { .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 { .features-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-16; gap: var(--sp-l);
width: deprecated.$s-440; inline-size: px2rem(440);
} }
.feature { .feature {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.feature-title { .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 { .feature-content {
@include deprecated.body-medium-typography; @include use-typography("body-medium");
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--color-foreground-secondary);
} }
.feature-list { .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; list-style: disc;
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.navigation { .navigation {
width: 100%; inline-size: 100%;
display: grid; display: grid;
grid-template-areas: "bullets button"; 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 ;; 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/. ;; 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 (ns app.main.ui.releases.v2-16
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
@ -222,4 +222,3 @@
:on-click finish :on-click finish
:variant "primary"} :variant "primary"}
"Let's go"]]]]]]))) "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 // 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/. // 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 { .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 { .modal-container {
display: grid; display: grid;
grid-template-columns: deprecated.$s-324 1fr; grid-template-columns: px2rem(324) 1fr;
height: deprecated.$s-500; block-size: $sz-500;
width: deprecated.$s-888; inline-size: px2rem(888);
border-radius: deprecated.$br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--color-background-primary);
border: deprecated.$s-2 solid var(--modal-border-color); border: $b-2 solid var(--color-background-quaternary);
} }
.start-image { .start-image {
width: deprecated.$s-324; inline-size: px2rem(324);
border-radius: deprecated.$br-8 0 0 deprecated.$br-8; border-radius: $br-8 0 0 $br-8;
} }
.modal-content { .modal-content {
padding: deprecated.$s-40; padding: $sz-40;
display: grid; display: grid;
grid-template-rows: auto 1fr deprecated.$s-32; grid-template-rows: auto 1fr $sz-32;
gap: deprecated.$s-24; gap: var(--sp-xxl);
a {
color: var(--button-primary-background-color-rest);
}
} }
.modal-header { .modal-header {
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
} }
.version-tag { .version-tag {
@include deprecated.flex-center; @include use-typography("headline-small");
@include deprecated.headline-small-typography;
height: deprecated.$s-32; display: flex;
width: deprecated.$s-96; justify-content: center;
background-color: var(--communication-tag-background-color); align-items: center;
color: var(--communication-tag-foreground-color); block-size: $sz-32;
border-radius: deprecated.$br-8; inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
} }
.modal-title { .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 { .features-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-16; gap: var(--sp-l);
width: deprecated.$s-440; inline-size: px2rem(440);
} }
.feature { .feature {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.feature-title { .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 { .feature-content {
@include deprecated.body-medium-typography; @include use-typography("body-medium");
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--color-foreground-secondary);
} }
.feature-list { .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; list-style: disc;
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.navigation { .navigation {
width: 100%; inline-size: 100%;
display: grid; display: grid;
grid-template-areas: "bullets button"; 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 ;; 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/. ;; 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 (ns app.main.ui.releases.v2-17
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
@ -227,4 +227,4 @@
[:> button* {:class (stl/css :next-btn) [:> button* {:class (stl/css :next-btn)
:on-click finish :on-click finish
:variant "primary"} :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 // 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/. // 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 { .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 { .modal-container {
display: grid; display: grid;
grid-template-columns: deprecated.$s-324 1fr; grid-template-columns: px2rem(324) 1fr;
height: deprecated.$s-500; block-size: $sz-500;
width: deprecated.$s-888; inline-size: px2rem(888);
border-radius: deprecated.$br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--color-background-primary);
border: deprecated.$s-2 solid var(--modal-border-color); border: $b-2 solid var(--color-background-quaternary);
} }
.start-image { .start-image {
width: deprecated.$s-324; inline-size: px2rem(324);
border-radius: deprecated.$br-8 0 0 deprecated.$br-8; border-radius: $br-8 0 0 $br-8;
} }
.modal-content { .modal-content {
padding: deprecated.$s-40; padding: $sz-40;
display: grid; display: grid;
grid-template-rows: auto 1fr deprecated.$s-32; grid-template-rows: auto 1fr $sz-32;
gap: deprecated.$s-24; gap: var(--sp-xxl);
a {
color: var(--button-primary-background-color-rest);
}
} }
.modal-header { .modal-header {
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
} }
.version-tag { .version-tag {
@include deprecated.flex-center; @include use-typography("headline-small");
@include deprecated.headline-small-typography;
height: deprecated.$s-32; display: flex;
width: deprecated.$s-96; justify-content: center;
background-color: var(--communication-tag-background-color); align-items: center;
color: var(--communication-tag-foreground-color); block-size: $sz-32;
border-radius: deprecated.$br-8; inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
} }
.modal-title { .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 { .features-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-16; gap: var(--sp-l);
width: deprecated.$s-440; inline-size: px2rem(440);
} }
.feature { .feature {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.feature-title { .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 { .feature-content {
@include deprecated.body-medium-typography; @include use-typography("body-medium");
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--color-foreground-secondary);
} }
.feature-list { .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; list-style: disc;
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.navigation { .navigation {
width: 100%; inline-size: 100%;
display: grid; display: grid;
grid-template-areas: "bullets button"; 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 ;; 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/. ;; 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 (ns app.main.ui.releases.v2-18
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
@ -185,4 +185,4 @@
[:> button* {:class (stl/css :next-btn) [:> button* {:class (stl/css :next-btn)
:on-click finish :on-click finish
:variant "primary"} :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 // 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/. // 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 { .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 { .modal-container {
display: grid; display: grid;
grid-template-columns: deprecated.$s-324 1fr; grid-template-columns: px2rem(324) 1fr;
height: deprecated.$s-500; block-size: $sz-500;
width: deprecated.$s-888; inline-size: px2rem(888);
border-radius: deprecated.$br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--color-background-primary);
border: deprecated.$s-2 solid var(--modal-border-color); border: $b-2 solid var(--color-background-quaternary);
} }
.start-image { .start-image {
width: deprecated.$s-324; inline-size: px2rem(324);
border-radius: deprecated.$br-8 0 0 deprecated.$br-8; border-radius: $br-8 0 0 $br-8;
} }
.modal-content { .modal-content {
padding: deprecated.$s-40; padding: $sz-40;
display: grid; display: grid;
grid-template-rows: auto 1fr deprecated.$s-32; grid-template-rows: auto 1fr $sz-32;
gap: deprecated.$s-24; gap: var(--sp-xxl);
a {
color: var(--button-primary-background-color-rest);
}
} }
.modal-header { .modal-header {
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
} }
.version-tag { .version-tag {
@include deprecated.flex-center; @include use-typography("headline-small");
@include deprecated.headline-small-typography;
height: deprecated.$s-32; display: flex;
width: deprecated.$s-96; justify-content: center;
background-color: var(--communication-tag-background-color); align-items: center;
color: var(--communication-tag-foreground-color); block-size: $sz-32;
border-radius: deprecated.$br-8; inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
} }
.modal-title { .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 { .features-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-16; gap: var(--sp-l);
width: deprecated.$s-440; inline-size: px2rem(440);
} }
.feature { .feature {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.feature-title { .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 { .feature-content {
@include deprecated.body-medium-typography; @include use-typography("body-medium");
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--color-foreground-secondary);
} }
.feature-list { .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; list-style: disc;
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.navigation { .navigation {
width: 100%; inline-size: 100%;
display: grid; display: grid;
grid-template-areas: "bullets button"; grid-template-areas: "bullets button";
} }

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

@ -51,4 +51,3 @@
:on-click finish :on-click finish
:variant "primary"} :variant "primary"}
"Let's go"]]]]]]))) "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 // 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 { .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 { .modal-container {
display: grid; display: grid;
grid-template-columns: deprecated.$s-324 1fr; grid-template-columns: px2rem(324) 1fr;
height: deprecated.$s-480; block-size: $sz-500;
width: deprecated.$s-888; inline-size: px2rem(888);
border-radius: deprecated.$br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--color-background-primary);
border: deprecated.$s-2 solid var(--modal-border-color); border: $b-2 solid var(--color-background-quaternary);
} }
.start-image { .start-image {
width: deprecated.$s-324; inline-size: px2rem(324);
border-radius: deprecated.$br-8 0 0 deprecated.$br-8; border-radius: $br-8 0 0 $br-8;
} }
.modal-content { .modal-content {
padding: deprecated.$s-40; padding: $sz-40;
display: grid; display: grid;
grid-template-rows: auto 1fr deprecated.$s-32; grid-template-rows: auto 1fr $sz-32;
gap: deprecated.$s-24; gap: var(--sp-xxl);
} }
.modal-header { .modal-header {
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
} }
.version-tag { .version-tag {
@include deprecated.flex-center; @include use-typography("headline-small");
@include deprecated.headline-small-typography;
height: deprecated.$s-32; display: flex;
width: deprecated.$s-96; justify-content: center;
background-color: var(--communication-tag-background-color); align-items: center;
color: var(--communication-tag-foreground-color); block-size: $sz-32;
border-radius: deprecated.$br-8; inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
} }
.modal-title { .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 { .features-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-16; gap: var(--sp-l);
width: deprecated.$s-440; 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 { .feature-content {
@include deprecated.body-medium-typography; @include use-typography("body-medium");
margin: 0; 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 { .navigation {
width: 100%; inline-size: 100%;
display: grid; display: grid;
grid-template-areas: "bullets button"; 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)} [:p {:class (stl/css :feature-content)}
"Penpot plugins are quite easy to install."] "Penpot plugins are quite easy to install."]
[:p {:class (stl/css :feature-content)} [: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)} [:p {:class (stl/css :feature-content)}
"This is just the beginning of a myriad of possibilities. Let’s build this community together ❤️."]] "This is just the beginning of a myriad of possibilities. Let’s build this community together ❤️."]]
@ -119,4 +122,3 @@
:on-click finish :on-click finish
:variant "primary"} :variant "primary"}
"Let's go"]]]]]]))) "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 // 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 { .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 { .modal-container {
display: grid; display: grid;
grid-template-columns: deprecated.$s-324 1fr; grid-template-columns: px2rem(324) 1fr;
height: deprecated.$s-500; block-size: $sz-500;
width: deprecated.$s-888; inline-size: px2rem(888);
border-radius: deprecated.$br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--color-background-primary);
border: deprecated.$s-2 solid var(--modal-border-color); border: $b-2 solid var(--color-background-quaternary);
} }
.start-image { .start-image {
width: deprecated.$s-324; inline-size: px2rem(324);
border-radius: deprecated.$br-8 0 0 deprecated.$br-8; border-radius: $br-8 0 0 $br-8;
} }
.modal-content { .modal-content {
padding: deprecated.$s-40; padding: $sz-40;
display: grid; display: grid;
grid-template-rows: auto 1fr deprecated.$s-32; grid-template-rows: auto 1fr $sz-32;
gap: deprecated.$s-24; gap: var(--sp-xxl);
a {
color: var(--button-primary-background-color-rest);
}
} }
.modal-header { .modal-header {
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
} }
.version-tag { .version-tag {
@include deprecated.flex-center; @include use-typography("headline-small");
@include deprecated.headline-small-typography;
height: deprecated.$s-32; display: flex;
width: deprecated.$s-96; justify-content: center;
background-color: var(--communication-tag-background-color); align-items: center;
color: var(--communication-tag-foreground-color); block-size: $sz-32;
border-radius: deprecated.$br-8; inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
} }
.modal-title { .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 { .features-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-16; gap: var(--sp-l);
width: deprecated.$s-440; inline-size: px2rem(440);
} }
.feature { .feature {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.feature-title { .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 { .feature-content {
@include deprecated.body-medium-typography; @include use-typography("body-medium");
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--color-foreground-secondary);
} }
.feature-list { .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; list-style: disc;
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.navigation { .navigation {
width: 100%; inline-size: 100%;
display: grid; display: grid;
grid-template-areas: "bullets button"; grid-template-areas: "bullets button";
} }

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

@ -147,4 +147,3 @@
:on-click finish :on-click finish
:variant "primary"} :variant "primary"}
"Let's go"]]]]]]))) "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 // 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 { .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 { .modal-container {
display: grid; display: grid;
grid-template-columns: deprecated.$s-324 1fr; grid-template-columns: px2rem(324) 1fr;
height: deprecated.$s-500; block-size: $sz-500;
width: deprecated.$s-888; inline-size: px2rem(888);
border-radius: deprecated.$br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--color-background-primary);
border: deprecated.$s-2 solid var(--modal-border-color); border: $b-2 solid var(--color-background-quaternary);
} }
.start-image { .start-image {
width: deprecated.$s-324; inline-size: px2rem(324);
border-radius: deprecated.$br-8 0 0 deprecated.$br-8; border-radius: $br-8 0 0 $br-8;
} }
.modal-content { .modal-content {
padding: deprecated.$s-40; padding: $sz-40;
display: grid; display: grid;
grid-template-rows: auto 1fr deprecated.$s-32; grid-template-rows: auto 1fr $sz-32;
gap: deprecated.$s-24; gap: var(--sp-xxl);
a {
color: var(--button-primary-background-color-rest);
}
} }
.modal-header { .modal-header {
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
} }
.version-tag { .version-tag {
@include deprecated.flex-center; @include use-typography("headline-small");
@include deprecated.headline-small-typography;
height: deprecated.$s-32; display: flex;
width: deprecated.$s-96; justify-content: center;
background-color: var(--communication-tag-background-color); align-items: center;
color: var(--communication-tag-foreground-color); block-size: $sz-32;
border-radius: deprecated.$br-8; inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
} }
.modal-title { .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 { .features-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-16; gap: var(--sp-l);
width: deprecated.$s-440; inline-size: px2rem(440);
} }
.feature { .feature {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.feature-title { .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 { .feature-content {
@include deprecated.body-medium-typography; @include use-typography("body-medium");
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--color-foreground-secondary);
} }
.feature-list { .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; list-style: disc;
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.navigation { .navigation {
width: 100%; inline-size: 100%;
display: grid; display: grid;
grid-template-areas: "bullets button"; grid-template-areas: "bullets button";
} }

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

@ -183,4 +183,3 @@
:on-click finish :on-click finish
:variant "primary"} :variant "primary"}
"Let's go"]]]]]]))) "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 // 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 { .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 { .modal-container {
display: grid; display: grid;
grid-template-columns: deprecated.$s-324 1fr; grid-template-columns: px2rem(324) 1fr;
height: deprecated.$s-500; block-size: $sz-500;
width: deprecated.$s-888; inline-size: px2rem(888);
border-radius: deprecated.$br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--color-background-primary);
border: deprecated.$s-2 solid var(--modal-border-color); border: $b-2 solid var(--color-background-quaternary);
} }
.start-image { .start-image {
width: deprecated.$s-324; inline-size: px2rem(324);
border-radius: deprecated.$br-8 0 0 deprecated.$br-8; border-radius: $br-8 0 0 $br-8;
} }
.modal-content { .modal-content {
padding: deprecated.$s-40; padding: $sz-40;
display: grid; display: grid;
grid-template-rows: auto 1fr deprecated.$s-32; grid-template-rows: auto 1fr $sz-32;
gap: deprecated.$s-24; gap: var(--sp-xxl);
a {
color: var(--button-primary-background-color-rest);
}
} }
.modal-header { .modal-header {
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
} }
.version-tag { .version-tag {
@include deprecated.flex-center; @include use-typography("headline-small");
@include deprecated.headline-small-typography;
height: deprecated.$s-32; display: flex;
width: deprecated.$s-96; justify-content: center;
background-color: var(--communication-tag-background-color); align-items: center;
color: var(--communication-tag-foreground-color); block-size: $sz-32;
border-radius: deprecated.$br-8; inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
} }
.modal-title { .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 { .features-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-16; gap: var(--sp-l);
width: deprecated.$s-440; inline-size: px2rem(440);
} }
.feature { .feature {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.feature-title { .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 { .feature-content {
@include deprecated.body-medium-typography; @include use-typography("body-medium");
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--color-foreground-secondary);
} }
.feature-list { .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; list-style: disc;
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.navigation { .navigation {
width: 100%; inline-size: 100%;
display: grid; display: grid;
grid-template-areas: "bullets button"; grid-template-areas: "bullets button";
} }

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

@ -175,4 +175,3 @@
:on-click finish :on-click finish
:variant "primary"} :variant "primary"}
"Let's go"]]]]]]))) "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 // 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 { .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 { .modal-container {
display: grid; display: grid;
grid-template-columns: deprecated.$s-324 1fr; grid-template-columns: px2rem(324) 1fr;
height: deprecated.$s-500; block-size: $sz-500;
width: deprecated.$s-888; inline-size: px2rem(888);
border-radius: deprecated.$br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--color-background-primary);
border: deprecated.$s-2 solid var(--modal-border-color); border: $b-2 solid var(--color-background-quaternary);
} }
.start-image { .start-image {
width: deprecated.$s-324; inline-size: px2rem(324);
border-radius: deprecated.$br-8 0 0 deprecated.$br-8; border-radius: $br-8 0 0 $br-8;
} }
.modal-content { .modal-content {
padding: deprecated.$s-40; padding: $sz-40;
display: grid; display: grid;
grid-template-rows: auto 1fr deprecated.$s-32; grid-template-rows: auto 1fr $sz-32;
gap: deprecated.$s-24; gap: var(--sp-xxl);
a {
color: var(--button-primary-background-color-rest);
}
} }
.modal-header { .modal-header {
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
} }
.version-tag { .version-tag {
@include deprecated.flex-center; @include use-typography("headline-small");
@include deprecated.headline-small-typography;
height: deprecated.$s-32; display: flex;
width: deprecated.$s-96; justify-content: center;
background-color: var(--communication-tag-background-color); align-items: center;
color: var(--communication-tag-foreground-color); block-size: $sz-32;
border-radius: deprecated.$br-8; inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
} }
.modal-title { .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 { .features-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-16; gap: var(--sp-l);
width: deprecated.$s-440; inline-size: px2rem(440);
} }
.feature { .feature {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.feature-title { .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 { .feature-content {
@include deprecated.body-medium-typography; @include use-typography("body-medium");
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--color-foreground-secondary);
} }
.feature-list { .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; list-style: disc;
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.navigation { .navigation {
width: 100%; inline-size: 100%;
display: grid; display: grid;
grid-template-areas: "bullets button"; grid-template-areas: "bullets button";
} }

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

@ -148,4 +148,3 @@
:on-click finish :on-click finish
:variant "primary"} :variant "primary"}
"Let's go"]]]]]]))) "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 // 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 { .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 { .modal-container {
display: grid; display: grid;
grid-template-columns: deprecated.$s-324 1fr; grid-template-columns: px2rem(324) 1fr;
height: deprecated.$s-500; block-size: $sz-500;
width: deprecated.$s-888; inline-size: px2rem(888);
border-radius: deprecated.$br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--color-background-primary);
border: deprecated.$s-2 solid var(--modal-border-color); border: $b-2 solid var(--color-background-quaternary);
} }
.start-image { .start-image {
width: deprecated.$s-324; inline-size: px2rem(324);
border-radius: deprecated.$br-8 0 0 deprecated.$br-8; border-radius: $br-8 0 0 $br-8;
} }
.modal-content { .modal-content {
padding: deprecated.$s-40; padding: $sz-40;
display: grid; display: grid;
grid-template-rows: auto 1fr deprecated.$s-32; grid-template-rows: auto 1fr $sz-32;
gap: deprecated.$s-24; gap: var(--sp-xxl);
a {
color: var(--button-primary-background-color-rest);
}
} }
.modal-header { .modal-header {
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
} }
.version-tag { .version-tag {
@include deprecated.flex-center; @include use-typography("headline-small");
@include deprecated.headline-small-typography;
height: deprecated.$s-32; display: flex;
width: deprecated.$s-96; justify-content: center;
background-color: var(--communication-tag-background-color); align-items: center;
color: var(--communication-tag-foreground-color); block-size: $sz-32;
border-radius: deprecated.$br-8; inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
} }
.modal-title { .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 { .features-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-16; gap: var(--sp-l);
width: deprecated.$s-440; inline-size: px2rem(440);
} }
.feature { .feature {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.feature-title { .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 { .feature-content {
@include deprecated.body-medium-typography; @include use-typography("body-medium");
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--color-foreground-secondary);
} }
.feature-list { .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; list-style: disc;
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.navigation { .navigation {
width: 100%; inline-size: 100%;
display: grid; display: grid;
grid-template-areas: "bullets button"; grid-template-areas: "bullets button";
} }

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

@ -204,4 +204,3 @@
:on-click finish :on-click finish
:variant "primary"} :variant "primary"}
"Let's go"]]]]]]))) "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 // 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 { .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 { .modal-container {
display: grid; display: grid;
grid-template-columns: deprecated.$s-324 1fr; grid-template-columns: px2rem(324) 1fr;
height: deprecated.$s-500; block-size: $sz-500;
width: deprecated.$s-888; inline-size: px2rem(888);
border-radius: deprecated.$br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--color-background-primary);
border: deprecated.$s-2 solid var(--modal-border-color); border: $b-2 solid var(--color-background-quaternary);
} }
.start-image { .start-image {
width: deprecated.$s-324; inline-size: px2rem(324);
border-radius: deprecated.$br-8 0 0 deprecated.$br-8; border-radius: $br-8 0 0 $br-8;
} }
.modal-content { .modal-content {
padding: deprecated.$s-40; padding: $sz-40;
display: grid; display: grid;
grid-template-rows: auto 1fr deprecated.$s-32; grid-template-rows: auto 1fr $sz-32;
gap: deprecated.$s-24; gap: var(--sp-xxl);
a {
color: var(--button-primary-background-color-rest);
}
} }
.modal-header { .modal-header {
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
} }
.version-tag { .version-tag {
@include deprecated.flex-center; @include use-typography("headline-small");
@include deprecated.headline-small-typography;
height: deprecated.$s-32; display: flex;
width: deprecated.$s-96; justify-content: center;
background-color: var(--communication-tag-background-color); align-items: center;
color: var(--communication-tag-foreground-color); block-size: $sz-32;
border-radius: deprecated.$br-8; inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
} }
.modal-title { .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 { .features-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-16; gap: var(--sp-l);
width: deprecated.$s-440; inline-size: px2rem(440);
} }
.feature { .feature {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.feature-title { .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 { .feature-content {
@include deprecated.body-medium-typography; @include use-typography("body-medium");
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--color-foreground-secondary);
} }
.feature-list { .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; list-style: disc;
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.navigation { .navigation {
width: 100%; inline-size: 100%;
display: grid; display: grid;
grid-template-areas: "bullets button"; grid-template-areas: "bullets button";
} }

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

@ -116,4 +116,3 @@
:on-click finish :on-click finish
:variant "primary"} :variant "primary"}
"Let's go"]]]]]]))) "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 // 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 { .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 { .modal-container {
display: grid; display: grid;
grid-template-columns: deprecated.$s-324 1fr; grid-template-columns: px2rem(324) 1fr;
height: deprecated.$s-500; block-size: $sz-500;
width: deprecated.$s-888; inline-size: px2rem(888);
border-radius: deprecated.$br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--color-background-primary);
border: deprecated.$s-2 solid var(--modal-border-color); border: $b-2 solid var(--color-background-quaternary);
} }
.start-image { .start-image {
width: deprecated.$s-324; inline-size: px2rem(324);
border-radius: deprecated.$br-8 0 0 deprecated.$br-8; border-radius: $br-8 0 0 $br-8;
} }
.modal-content { .modal-content {
padding: deprecated.$s-40; padding: $sz-40;
display: grid; display: grid;
grid-template-rows: auto 1fr deprecated.$s-32; grid-template-rows: auto 1fr $sz-32;
gap: deprecated.$s-24; gap: var(--sp-xxl);
a {
color: var(--button-primary-background-color-rest);
}
} }
.modal-header { .modal-header {
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
} }
.version-tag { .version-tag {
@include deprecated.flex-center; @include use-typography("headline-small");
@include deprecated.headline-small-typography;
height: deprecated.$s-32; display: flex;
width: deprecated.$s-96; justify-content: center;
background-color: var(--communication-tag-background-color); align-items: center;
color: var(--communication-tag-foreground-color); block-size: $sz-32;
border-radius: deprecated.$br-8; inline-size: $sz-96;
background-color: var(--color-foreground-primary);
color: var(--color-background-tertiary);
border-radius: $br-8;
} }
.modal-title { .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 { .features-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-16; gap: var(--sp-l);
width: deprecated.$s-440; inline-size: px2rem(440);
} }
.feature { .feature {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.feature-title { .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 { .feature-content {
@include deprecated.body-medium-typography; @include use-typography("body-medium");
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--color-foreground-secondary);
} }
.feature-list { .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; list-style: disc;
display: grid; display: grid;
gap: deprecated.$s-8; gap: var(--sp-s);
} }
.navigation { .navigation {
width: 100%; inline-size: 100%;
display: grid; display: grid;
grid-template-areas: "bullets button"; grid-template-areas: "bullets button";
} }