diff --git a/frontend/src/app/main/ui/releases/base.scss b/frontend/src/app/main/ui/releases/base.scss new file mode 100644 index 0000000000..11284583c1 --- /dev/null +++ b/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; +} diff --git a/frontend/src/app/main/ui/releases/v2_0.scss b/frontend/src/app/main/ui/releases/v2_0.scss index 11284583c1..41697db66f 100644 --- a/frontend/src/app/main/ui/releases/v2_0.scss +++ b/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 "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"; diff --git a/frontend/src/app/main/ui/releases/v2_1.scss b/frontend/src/app/main/ui/releases/v2_1.scss index 11284583c1..41697db66f 100644 --- a/frontend/src/app/main/ui/releases/v2_1.scss +++ b/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 "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"; diff --git a/frontend/src/app/main/ui/releases/v2_10.scss b/frontend/src/app/main/ui/releases/v2_10.scss index 11284583c1..41697db66f 100644 --- a/frontend/src/app/main/ui/releases/v2_10.scss +++ b/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 "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"; diff --git a/frontend/src/app/main/ui/releases/v2_11.scss b/frontend/src/app/main/ui/releases/v2_11.scss index 11284583c1..41697db66f 100644 --- a/frontend/src/app/main/ui/releases/v2_11.scss +++ b/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 "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"; diff --git a/frontend/src/app/main/ui/releases/v2_12.scss b/frontend/src/app/main/ui/releases/v2_12.scss index 11284583c1..41697db66f 100644 --- a/frontend/src/app/main/ui/releases/v2_12.scss +++ b/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 "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"; diff --git a/frontend/src/app/main/ui/releases/v2_13.scss b/frontend/src/app/main/ui/releases/v2_13.scss index 11284583c1..41697db66f 100644 --- a/frontend/src/app/main/ui/releases/v2_13.scss +++ b/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 "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"; diff --git a/frontend/src/app/main/ui/releases/v2_14.scss b/frontend/src/app/main/ui/releases/v2_14.scss index 11284583c1..41697db66f 100644 --- a/frontend/src/app/main/ui/releases/v2_14.scss +++ b/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 "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"; diff --git a/frontend/src/app/main/ui/releases/v2_15.scss b/frontend/src/app/main/ui/releases/v2_15.scss index 11284583c1..41697db66f 100644 --- a/frontend/src/app/main/ui/releases/v2_15.scss +++ b/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 "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"; diff --git a/frontend/src/app/main/ui/releases/v2_16.scss b/frontend/src/app/main/ui/releases/v2_16.scss index 11284583c1..41697db66f 100644 --- a/frontend/src/app/main/ui/releases/v2_16.scss +++ b/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 "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"; diff --git a/frontend/src/app/main/ui/releases/v2_17.scss b/frontend/src/app/main/ui/releases/v2_17.scss index 11284583c1..41697db66f 100644 --- a/frontend/src/app/main/ui/releases/v2_17.scss +++ b/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 "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"; diff --git a/frontend/src/app/main/ui/releases/v2_18.scss b/frontend/src/app/main/ui/releases/v2_18.scss index 11284583c1..41697db66f 100644 --- a/frontend/src/app/main/ui/releases/v2_18.scss +++ b/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 "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"; diff --git a/frontend/src/app/main/ui/releases/v2_2.scss b/frontend/src/app/main/ui/releases/v2_2.scss index 11284583c1..41697db66f 100644 --- a/frontend/src/app/main/ui/releases/v2_2.scss +++ b/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 "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"; diff --git a/frontend/src/app/main/ui/releases/v2_3.scss b/frontend/src/app/main/ui/releases/v2_3.scss index 11284583c1..41697db66f 100644 --- a/frontend/src/app/main/ui/releases/v2_3.scss +++ b/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 "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"; diff --git a/frontend/src/app/main/ui/releases/v2_4.scss b/frontend/src/app/main/ui/releases/v2_4.scss index 11284583c1..41697db66f 100644 --- a/frontend/src/app/main/ui/releases/v2_4.scss +++ b/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 "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"; diff --git a/frontend/src/app/main/ui/releases/v2_5.scss b/frontend/src/app/main/ui/releases/v2_5.scss index 11284583c1..41697db66f 100644 --- a/frontend/src/app/main/ui/releases/v2_5.scss +++ b/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 "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"; diff --git a/frontend/src/app/main/ui/releases/v2_6.scss b/frontend/src/app/main/ui/releases/v2_6.scss index 11284583c1..41697db66f 100644 --- a/frontend/src/app/main/ui/releases/v2_6.scss +++ b/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 "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"; diff --git a/frontend/src/app/main/ui/releases/v2_7.scss b/frontend/src/app/main/ui/releases/v2_7.scss index 11284583c1..41697db66f 100644 --- a/frontend/src/app/main/ui/releases/v2_7.scss +++ b/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 "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"; diff --git a/frontend/src/app/main/ui/releases/v2_8.scss b/frontend/src/app/main/ui/releases/v2_8.scss index 11284583c1..41697db66f 100644 --- a/frontend/src/app/main/ui/releases/v2_8.scss +++ b/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 "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"; diff --git a/frontend/src/app/main/ui/releases/v2_9.scss b/frontend/src/app/main/ui/releases/v2_9.scss index 11284583c1..41697db66f 100644 --- a/frontend/src/app/main/ui/releases/v2_9.scss +++ b/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 "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";