♻️ Use a base stylesheet for all version files

frontend/src/app/main/ui/releases/base.scss

@@ -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;
+}

frontend/src/app/main/ui/releases/v2_0.scss

@@ -4,113 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "ds/_utils.scss" as *;
+@use "base";
-@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;
-}

frontend/src/app/main/ui/releases/v2_1.scss

@@ -4,113 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "ds/_utils.scss" as *;
+@use "base";
-@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;
-}

frontend/src/app/main/ui/releases/v2_10.scss

@@ -4,113 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "ds/_utils.scss" as *;
+@use "base";
-@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;
-}

frontend/src/app/main/ui/releases/v2_11.scss

@@ -4,113 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "ds/_utils.scss" as *;
+@use "base";
-@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;
-}

frontend/src/app/main/ui/releases/v2_12.scss

@@ -4,113 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "ds/_utils.scss" as *;
+@use "base";
-@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;
-}

frontend/src/app/main/ui/releases/v2_13.scss

@@ -4,113 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "ds/_utils.scss" as *;
+@use "base";
-@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;
-}

frontend/src/app/main/ui/releases/v2_14.scss

@@ -4,113 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "ds/_utils.scss" as *;
+@use "base";
-@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;
-}

frontend/src/app/main/ui/releases/v2_15.scss

@@ -4,113 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "ds/_utils.scss" as *;
+@use "base";
-@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;
-}

frontend/src/app/main/ui/releases/v2_16.scss

@@ -4,113 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "ds/_utils.scss" as *;
+@use "base";
-@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;
-}

frontend/src/app/main/ui/releases/v2_17.scss

@@ -4,113 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "ds/_utils.scss" as *;
+@use "base";
-@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;
-}

frontend/src/app/main/ui/releases/v2_18.scss

@@ -4,113 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "ds/_utils.scss" as *;
+@use "base";
-@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;
-}

frontend/src/app/main/ui/releases/v2_2.scss

@@ -4,113 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "ds/_utils.scss" as *;
+@use "base";
-@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;
-}

frontend/src/app/main/ui/releases/v2_3.scss

@@ -4,113 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "ds/_utils.scss" as *;
+@use "base";
-@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;
-}

frontend/src/app/main/ui/releases/v2_4.scss

@@ -4,113 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "ds/_utils.scss" as *;
+@use "base";
-@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;
-}

frontend/src/app/main/ui/releases/v2_5.scss

@@ -4,113 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "ds/_utils.scss" as *;
+@use "base";
-@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;
-}

frontend/src/app/main/ui/releases/v2_6.scss

@@ -4,113 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "ds/_utils.scss" as *;
+@use "base";
-@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;
-}

frontend/src/app/main/ui/releases/v2_7.scss

@@ -4,113 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "ds/_utils.scss" as *;
+@use "base";
-@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;
-}

frontend/src/app/main/ui/releases/v2_8.scss

@@ -4,113 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "ds/_utils.scss" as *;
+@use "base";
-@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;
-}

frontend/src/app/main/ui/releases/v2_9.scss

@@ -4,113 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "ds/_utils.scss" as *;
+@use "base";
-@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;
-}