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 a base stylesheet for all version files

Browse Source
This commit is contained in:
Luis de Dios 2026-08-23 18:12:59 +02:00
parent 5dc5768d30
commit 571b02c64b
20 changed files with 135 additions and 2090 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
frontend/src/app/main/ui/releases/base.scss Normal file
View File

@ -0,0 +1,116 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// 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 Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}

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

@ -4,113 +4,4 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}
@use "base";

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

@ -4,113 +4,4 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}
@use "base";

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

@ -4,113 +4,4 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}
@use "base";

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

@ -4,113 +4,4 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}
@use "base";

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

@ -4,113 +4,4 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}
@use "base";

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

@ -4,113 +4,4 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}
@use "base";

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

@ -4,113 +4,4 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}
@use "base";

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

@ -4,113 +4,4 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}
@use "base";

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

@ -4,113 +4,4 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}
@use "base";

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

@ -4,113 +4,4 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}
@use "base";

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

@ -4,113 +4,4 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}
@use "base";

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

@ -4,113 +4,4 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}
@use "base";

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

@ -4,113 +4,4 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}
@use "base";

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

@ -4,113 +4,4 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}
@use "base";

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

@ -4,113 +4,4 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}
@use "base";

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

@ -4,113 +4,4 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}
@use "base";

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

@ -4,113 +4,4 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}
@use "base";

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

@ -4,113 +4,4 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}
@use "base";

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

@ -4,113 +4,4 @@
//
// Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.modal-overlay {
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: 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 {
inline-size: px2rem(324);
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $sz-40;
display: grid;
grid-template-rows: auto 1fr $sz-32;
gap: var(--sp-xxl);
}
.modal-header {
display: grid;
gap: var(--sp-s);
}
.link {
color: var(--color-accent-primary);
}
.version-tag {
@include use-typography("headline-small");
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 use-typography("headline-large");
color: var(--color-foreground-primary);
}
.features-block {
display: flex;
flex-direction: column;
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 use-typography("body-medium");
margin: 0;
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 {
inline-size: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
justify-self: flex-end;
grid-area: button;
}
@use "base";